最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

JQuery的那些坑,JQuery坑人指数排行

来源:懂视网 责编:小采 时间:2020-11-27 20:23:02
文档

JQuery的那些坑,JQuery坑人指数排行

JQuery的那些坑,JQuery坑人指数排行:1 乱用选择器坑人指数:200JQuery选择器调用代价很大,反复调用效率更低。应采用缓存对象的方法或采用链式调用的方式。//错误的写法 $("#button").click(function(){ $('#list li').addClass('strong
推荐度:
导读JQuery的那些坑,JQuery坑人指数排行:1 乱用选择器坑人指数:200JQuery选择器调用代价很大,反复调用效率更低。应采用缓存对象的方法或采用链式调用的方式。//错误的写法 $("#button").click(function(){ $('#list li').addClass('strong

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

避免多次复制匿名函数的写法,将匿名函数分离出来,供其它对象多次调用。

//错误的写法
$('#myp').click( function(){
 //一些操作
});
//正确的写法
function pClickFn (){
 //一些操作 
}
$('#myp').click( pClickFn );

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方法完成之前调用。当需要第一方法完成之后,再执行第二个方法,请使用回调,即第二种方式。

//错误的写法
$("#myp").click(function(e) {
 $(this).fadeOut("slow").remove();
});
//正确的写法
$("myp").click(function(e){
 $(this).fadeOut("slow", function(){
 $(this).remove();
 });
});

6 事件多次绑定

坑人指数:20

如果你绑定(bind)同一事件多次,响应就会被执行多次。为避免多次执行,请先做事件解绑再重新绑定。

//避免响应多次执行
$("myp").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的那些坑,JQuery坑人指数排行

JQuery的那些坑,JQuery坑人指数排行:1 乱用选择器坑人指数:200JQuery选择器调用代价很大,反复调用效率更低。应采用缓存对象的方法或采用链式调用的方式。//错误的写法 $("#button").click(function(){ $('#list li').addClass('strong
推荐度:
标签: 哪些 jQuery 的坑
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top