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( divClickFn );

4 误用ajax的complete

坑人指数：30

当用ajax进行数据请求时，避免使用complete回调方法，而应该使用success方法。complete回调在请求成功或失败都会触发。

//错误的写法

$.ajax({

url: "http://tools.42du-/jsonp/student/all",

}).complete(function( data ) {

//一些操作

});

//正确的写法

$.ajax({

url: "http://tools.42du-/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();

})

});

来自：http://jianshu.com/p/1999872efdb3

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。