| 标题 | 更高效的使用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); |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。