jQuery备忘录--私家版

最近在看jQuery，总是看过了忘，不知道该怎么办？准备开启洗脑模式，日常念一念，紧箍咒加身。

1.jQuery方法第一步：ready=》加载html的骨架。而onload=》整个页面加载完毕。由于兼容性问题，最后在jQuery变为：

$(document).ready();　

2.jQuery不报错！

3.一定要记住$()的结果是数组，数组！！jQuery选择器以后想要变成原生对象的话，取数组的0位.

$(document).ready(function(){
    var mydiv=$("#mydiv");//变成原生对象mydiv[0];
    $(document.getElementById("mydiv"));//原生js对象变成jQuery对象
});

4.事件代理

$().click(function(){

})
$().on("click",function(){

})

　　两种点击事件的绑定呈现的效果一样，但是在jQuery的内部不一样（具体还没查）。但是两种方法在处理动态绑定的时候不一样，当我们向html文档中append一个元素时，如果想点击这个元素的话，两种方法获取这个新添加的dom，马上写的代码如下：

$(document).ready(function(){
    $("#myAdd").click(function(){
        console.log('myAdd');
    });
    $("#myAdd").on("click",function(){
        alert("myAdd");
    });
    $("#btn").on('click',function(){
        $(".test").append('<p id="myAdd">add</p>')
    });
});

　　但是上面的两种写法根本获取不到点击事件，因为是动态创建的对象，现在没有在dom树中，如果要获取他，一定要检测dom的变化，这时候on方法就体现出来了，他是jQuery保留下来的绑定事件，可以检测刷新dom结构，但是要对他有一点点的改动。如下，监听的是他的外层，然后在on的参数中写动态加载的元素。

$(".test").on('click','#myAdd',function(){
        alert('myAdd click success');
    });

　　这个就可以了。on方法是jQuery事件代理绑定的一个，还有一个是delegate。只是在写参数的时候，调换click和id的位置才可以，具体要看jQuery的版本。

5.修改css属性时，若要修改一批属性，记得用Object的形式。如下：

$().css({
        color:'',
        display:''
    });

6. 遍历方法each，记得常用相好this！

7. jQuery动画时，简单的动画可以用jQuery，复杂一点的用css动画形式，太复杂的用js！！

8. 页面渲染速度控制，要理解浏览器的渲染引擎原理

9.requestAnimationFrame通过递归调用同一方法来不断更新画面以达到动起来的效果，但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。

代码兼容性要判断浏览器是不是支持requestAnimationFrame，从而进行兼容，代码如下：

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

10.AJAX局部刷新，一定要记得顺序！

11.记得常看手册！！手册！！