JQuery坑,说说哪些大家都踩过的坑
2017-06-06 18:59
211 查看
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(); }) });
相关文章推荐
- JQuery坑,说说哪些大家都踩过的坑
- 大家说说厦门哪些IT 公司好
- 我所喜欢的游戏,大家都来说说自己喜欢的:D
- 大家来说说煤炭股
- 【jQuery】复选框的全选、反选,判断哪些复选框被选中
- 先全面的说说系统要正常运行需要哪些进程!
- jQuery中使用了document和window哪些属性和方法
- 大家觉得阿卡索、美联立刻说英语、vipabc和51talk有哪些课程?最新收费如何?
- 大家看看我写的英语作文,有哪些需要改进的地方(一)
- 大家能在不查阅任何资料的情况下告诉我c#的值类型都有哪些吗?
- jQuery中有哪些方法可以遍历节点?
- jQuery中使用了document和window哪些属性和方法小结
- 程序员面试一般会问哪些问题,以供大家参考(以.NET程序员以例)
- jQuery 1.4 看有哪些新变化
- 和大家说说gdb调试多进程——exec函数族
- 【转载】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
- 说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
- 说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
- 说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
- 说说JSON和JSONP,也许你会豁然开朗,含jQuery用例[转]