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.記得常看手冊！！手冊！！