JQuery坑，說說哪些你們都踩過的坑

1 亂用選擇器

坑人指數：200

JQuery選擇器調用代價很大，反覆調用效率更低。應採用緩存對象的方法或採用鏈式調用的方式。

//錯誤的寫法
$("#button").click(function(){
    $('#list li').addClass('strong');
    $('#list li').css('color', 'red');
});
//正確的寫法
$("#button").click(function(){
    $lis = $('#list li');
    $lis.addClass('strong');
    $lis.css('color', 'red');
});
//更好的寫法
$("#button").click(function(){
    $('#list li').addClass('strong').css('color', 'red');
});

2 全局選擇效率低

坑人指數：100

儘可能使用上下文（context）查找，避免全局選擇的使用。全局選擇器會進行整個Doc的查找，效率很低。

//錯誤的寫法
$(".active").method();
//正確的寫法
var ul = $("#myList");
$(".active",ul).method();

3 複製匿名函數

坑人指數：50

避免屢次複製匿名函數的寫法，將匿名函數分離出來，供其它對象屢次調用。

//錯誤的寫法
$('#myDiv').click( function(){
   //一些操做
});
//正確的寫法
function divClickFn(){
   //一些操做   
}
$('#myDiv').click(function(){
    divClickFn();
});

4 誤用ajax的complete

坑人指數：30

當用ajax進行數據請求時，避免使用complete回調方法，而應該使用success方法。complete回調在請求成功或失敗都會觸發。

//錯誤的寫法
$.ajax({
  url: "http://tools.42du.cn/jsonp/student/all",
}).complete(function( data ) {
    //一些操做  
});
//正確的寫法
$.ajax({
  url: "http://tools.42du.cn/jsonp/student/all",
}).success(function( data ) {
    //一些操做  
});

5 鏈式調用的誤用

坑人指數：20

採用鏈式調用的方式會使對象在漸變未完成以前就被移除，即remove方法會在fadeOut方法完成以前調用。當須要第一方法完成以後，再執行第二個方法，請使用回調，即第二種方式。

//錯誤的寫法
$("#myDiv").click(function(e) {
  $(this).fadeOut("slow").remove();
});
//正確的寫法
$("myDiv").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

6 事件屢次綁定

坑人指數：20

若是你綁定（bind）同一事件屢次，響應就會被執行屢次。爲避免屢次執行，請先作事件解綁再從新綁定。

//避免響應屢次執行
$("myDiv").unbind("click").bind("click");

7 錯誤使用this指示符

坑人指數：10

this指示符存在於必定的上下文中的，當上下文變化時this指向不一樣的對象。若是還想調用原上下文中的this，則須要在原上下文中緩存原this對象（$that = $(this)）。

//錯誤的寫法
$( "#myList").click( function() {
   $(this).method(); 
   $("#myList li").each( function() {
      //this並不指向myList
      $(this).method2(); 
   })
});