JQuery7个大坑,说说那些大家都踩过的坑
Posted web前端课程
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery7个大坑,说说那些大家都踩过的坑相关的知识,希望对你有一定的参考价值。
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(); }) });
源自:https://segmentfault.com/a/1190000009679758
以上是关于JQuery7个大坑,说说那些大家都踩过的坑的主要内容,如果未能解决你的问题,请参考以下文章