JQuery坑，说说哪些大家都踩过的坑

   <h2>1 乱用选择器</h2>    <p>坑人指数：200</p>    <p>JQuery选择器调用代价很大，反复调用效率更低。应采用缓存对象的方法或采用链式调用的方式。</p>    <pre>  <code class="language-javascript">//错误的写法  $("#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');  });</code></pre>    <h2>2 全局选择效率低</h2>    <p>坑人指数：100</p>    <p>尽量使用上下文（context）查找，避免全局选择的使用。全局选择器会进行整个Doc的查找，效率很低。</p>    <pre>  <code class="language-javascript">//错误的写法  $(".active").method();  //正确的写法  var ul = $("#myList");  $(".active",ul).method();</code></pre>    <h2>3 复制匿名函数</h2>    <p>坑人指数：50</p>    <p>避免多次复制匿名函数的写法，将匿名函数分离出来，供其它对象多次调用。</p>    <pre>  <code class="language-javascript">//错误的写法  $('#myDiv').click( function(){     //一些操作  });  //正确的写法  function divClickFn (){     //一些操作     }  $('#myDiv').click( divClickFn );</code></pre>    <h2>4 误用ajax的complete</h2>    <p>坑人指数：30</p>    <p>当用ajax进行数据请求时，避免使用complete回调方法，而应该使用success方法。complete回调在请求成功或失败都会触发。</p>    <pre>  <code class="language-javascript">//错误的写法  $.ajax({    url: "http://tools.42du.cn/jsonp/student/all",  }).complete(function( data ) {      //一些操作    });  //正确的写法  $.ajax({    url: "http://tools.42du.cn/jsonp/student/all",  }).success(function( data ) {      //一些操作    });</code></pre>    <h2>5 链式调用的误用</h2>    <p>坑人指数：20</p>    <p>采用链式调用的方式会使对象在渐变未完成之前就被移除，即remove方法会在fadeOut方法完成之前调用。当需要第一方法完成之后，再执行第二个方法，请使用回调，即第二种方式。</p>    <pre>  <code class="language-javascript">//错误的写法  $("#myDiv").click(function(e) {    $(this).fadeOut("slow").remove();  });  //正确的写法  $("myDiv").click(function(e){    $(this).fadeOut("slow", function(){      $(this).remove();    });  });</code></pre>    <h2>6 事件多次绑定</h2>    <p>坑人指数：20</p>    <p>如果你绑定（bind）同一事件多次，响应就会被执行多次。为避免多次执行，请先做事件解绑再重新绑定。</p>    <pre>  <code class="language-javascript">//避免响应多次执行  $("myDiv").unbind("click").bind("click");</code></pre>    <h2>7 错误使用this指示符</h2>    <p>坑人指数：10</p>    <p>this指示符存在于一定的上下文中的，当上下文变化时this指向不同的对象。如果还想调用原上下文中的this，则需要在原上下文中缓存原this对象（ $that = $(this) ）。</p>    <pre>  <code class="language-javascript">//错误的写法  $( "#myList").click( function() {     $(this).method();      $("#myList li").each( function() {        //this并不指向myList        $(this).method2();      })  });</code></pre>    <p> </p>    <p>来自：http://www.jianshu.com/p/1999872efdb3</p>    <p> </p>