高效Web开发的10个jQuery代码片段
411
2024-02-24
1、DOM遍历是昂贵的,将变量缓存起来。
//不推荐 var h = $('#ele').height(); $('#ele').css('height', h-20);
//推荐 var $ele = $('#ele'); var h = $ele.height(); $ele.css('height',h-20);
2、优化选择符。
//不推荐 $('div#myid')
//推荐 $('#myid')
3、避免隐式通用选择符。
//不推荐 $('.someclass :radio')
//推荐 $('.someclass input:radio')
4、避免通用选择符。
//不推荐 $('.container > *')
//推荐 $('.container').children()
5、尽可能保持代码简洁。
//不推荐 if(arr.length > 0){}
//推荐 if(arr.length){}
6、尽可能地合并函数。
//不推荐 $f.on("click", function(){ $(this).css('border','1px solid red'); $(this).css('color','blue'); });
//推荐 $f.on("click", function(){ $(this).css({ 'border':'1px solid red', 'color': 'blue' }); });
7、尽可能使用链式操作。
//不推荐 $ele.html(); $ele.on("click",function(){}); $ele.fadeIn('slow');
//推荐 $ele.on("click",function(){ }).fadeIn('slow').animate({height:'12px'},500);
8、对DOM元素作大量操作,先分离在追加
//不推荐 var $container = $('#somecontainer'); var $ele = $container.first(); .......一系列复杂操作
//推荐 var $container = $('#somecontainer'); var $ele = $container.first().detach(); .......一系列复杂操作 $container.append($ele);
#免责声明#
本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解!