| 标题 | 更高效的使用JQuery 这里总结了8个小技巧 |
| 范文 | 本文和其他的介绍JQuery的方法不同，本文侧重点是介绍一些JQuery的使用原则，以便让JQuery代码更高效的执行。 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); |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。