在这里

JS 数据类型

2016-12-03读书笔记

JavaScript 中的数据类型：简单数据类型 undefined, null, boolean, number和string 五种，复杂数据类型 object；通过typeof操作符来识别

Css3 Transfrom

2016-12-03代码片段

CSS 变形(Transformation)
transform

1.遍历连缀 $(‘#dom’).parent().find(‘p:eq(1)’).addClass(‘className’).end().find()

2.在支持标准事件类型（同时支持捕获和冒泡）的浏览器中，要把事件处理程序注册到捕获阶段，必须在标准的事件注册方法addEventListener()中将最后一个参数设置为true。ie的事件注册方法attacheEvent只能注册到冒泡阶段。.hover()这个方法可以聪明的处理冒泡问题。.stopPropagation（）可以阻止事件冒泡，.preventDefault（）可以阻止事件捕获。

3.fadeIn()、fadeOut()、fadeTo(）不透明度0~1，slideDown()、slideUp()高度。

4.所有块级元素默认的css定位属性都是static。在设置元素的left和top属性毫无作用，必须将元素的定位属性设置成relative或者absolute

5.在每个匹配的元素中插入新元素，使用,所选元素后.append()、.appendTo()、所选元素前.prepend()、.prependTo();

6.要在每个匹配的元素相邻的位置上插入新元素.after()、.insertAfter()、before()、.insertBefore()
7.在匹配的元素外部插入新元素 .wrap();

8.要用新元素或文本替换每个匹配的元素.html()、.text();

9.要移除每个匹配元素中的元素.empty()

10.filter()过滤 $table.find(‘td’).filter(‘:nth-child(0 2 4)’).addClass();

11..next()。当前元素的后一个同级元素

12. .scrollTop()和.scrollLeft();分别返回向下和向右滚动的像素值。如果给这两个方法传递一个参数，可以把页面滚动到指定的位置。

13. .offset(),返回一个坐标对象。该对象有一个left属性和一个top属性。

14. http://pic002.cnblogs.com/images/2012/367527/2012102917382526.gif

15.一如jquery之后，自定义全局函数。比如jquery自带的$.ajax();Example–>$.extend({foo:function(){console.log(‘foo’)}}) <==> jQuery.extend({foo:function(){console.log(‘foo’)}}) ；定义全局数组赋值之后，任然会改变全局数组的值。因为赋值数组，只是，将数组的指针赋值给了新的数组。所以，只能通过方法返回一个数组的方式，这样可以提高性能。或者通过深度赋值的方法 var newArr = $.extend(true,[],globalArr); 建议使用前者。jquery内定的一些操作dom元素动画的方法，如，show()/hide()等。那么，我们同样可以自定义类似方法。Example–> jQuery.fn.testAni = function(a,b){return this.animate({width:a+’px’,height:b+’px’})};调用方法。$(‘#dom’).testAni();

16. 创建缓动样式缓动函数 jQuery.extend({‘easing’:{‘linear’:function(fraction, elapsed, attrStart, attrDelta, duration){return fraction * attrDelta + attrStart;}}}) 第一个参数，动画当前位置，按照时间衡量，取值0~1（开始结束）；第二个参数，自动画开始所经过的毫秒数；第三个参数，即将变换的CSS属性的开始值；第四个参数，即将变换的CSS属性开始值与结束值的差。第五个参数，动画总共要经历的毫秒数

JQuery实战笔记

2016-12-03读书笔记

toggleClass()//切换两个类。

HTML5自定义属性DataSet

2016-12-03代码片段

获取页面I属性D为test的元素：

document.getElementById("test");
//or
document.querySelector("#test");
document.querySelectorAll("#test")[0];

本地存储sqlLite

2016-12-03代码片段

<!DOCTYPE html  >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
    span{ cursor: pointer;}
    </style>
    <script src="jq.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var search = $('#search');
            var btSearch = $('#btSearch');

            var phoneBook = $('#phoneBook');
            var name = $('#name');
            var phone = $('#phone');
            var add = $('#add');

            //开始程序
            var db = openDatabase('phoneBook', '', 'my', 102400);

            init();

            add.click(function () {
                save(name.val(), phone.val());
            });
            btSearch.click(function () {
                init(search.val())
            });
            $('#phoneBook span').click(function () {
                deleteByName($(this).attr('name'));
                s = '';
            });


            //初始化界面
            function init(name) {
                db.transaction(function (tx1) {
                    tx1.executeSql('create table if not exists phoneBook(name text, phone text)', []);
                    var sql = 'select * from phoneBook where 1=1';
                    var param = [];
                    if (name) {
                        sql += ' and name=? ';
                        param.push(name);
                    }
                    tx1.executeSql(sql, param, function (tx1, rs) {
                        phoneBook.html('');
                        for (var i = 0, len = rs.rows.length; i < len; i++) {
                            var data = rs.rows.item(i);
                            showData(data);
                        }
                    });
                });
            }

            function showData(data) {
                var str = '<div>姓名：' + data.name + '；电话：' + data.phone + ' <span onclick="del(\'' + data.name + '\')" >删除</span></div>';
                phoneBook.append($(str));
            }

            //删除数据
            function deleteByName(name) {
                db.transaction(function (tx) {
                    tx.executeSql('delete from phoneBook where name=?', [name], function (tx, rs) {
                        init();
                    })
                });
            }
            window.del = deleteByName;
            //增加
            function save(name, phone) {
                db.transaction(function (tx) {
                    tx.executeSql('insert into phoneBook values(?, ?)', [name, phone], function (tx, rs) {
                        var d = {};
                        d.name = name;
                        d.phone = phone;
                        showData(d);
                    })
                });
            }

        });
    
    </script>
</head>
<body>
    <h1>
        本地数据库实现web通讯录</h1>
    <input type="text" id="search" placeholder="联系人姓名" />
    <button id="btSearch">
        搜索</button>
     
    <div id="phoneBook">
    </div>
    <hr />
    姓名：<input type="text" id="name" /><br />
    手机：<input type="text" id="phone" /><br />
    <button id="add">
        添加到通讯录</button>
</body>
</html>

JavaScript浏览器对象模型

2016-12-03代码片段

window尺寸：

1 2	var w = window.innerWidth \|\| document.documentElement.cilentWidth \|\| document.body.clientWidth; var h = window.innerHeight \|\| document.documentElement.clientHeight \|\| document.body.clientHeight;

JavaScript内存泄露问题

2016-12-03遇到的问题及解决方案

问题：当应用程序越来越复杂并且ajax化之后，我们打开一个网页，过段时间发现浏览器消耗掉内存不断增大，很有可能是因为内存泄露，我们不得不考虑内存泄露的问题。

闭包

2016-12-03代码片段

一、简要介绍

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。即使你对闭包没概念，你可能已经在不知不觉中使用到了闭包。解释闭包的概念之前，我们先来看一个简单的例子：

function getName(){
var name='js closure';
setTimeout(function(){
console.log(name);
}, 500);
}
getName();

JS 数据类型

Css3 Transfrom

读JQuery攻略笔记

JQuery基础教程笔记

JQuery实战笔记

HTML5自定义属性DataSet

本地存储sqlLite

JavaScript浏览器对象模型

JavaScript内存泄露问题

闭包

一、简要介绍