标签:
jquery选择器效率优化问题
jquery选择器固然强大,但是使用不当回导致效率问题;
1.要养成将jQuery对象缓存进变量的习惯
//不好的写法 $(‘#btn‘).bind("click",function() {}); $(‘#btn‘).css("border","1px solid red"); $("#btn").css("background-color","green"); $("#btn").fadeIn("slow") //正确写法; var $obj=$("#btn"); $obj.bind("click",function (){}); $obj.css("border","1px solid red"); $obj.css("background-color",‘green‘); $obj.fadeIn("slow"); //为了区分普通的JavaScript对象和jQuery对象,可以在变量首字母前加上$符号。 //上面代码可以使用jQuery的链式操作加以改善。如下所示: var $obj=$("#btn"); $obj.bind("click",function (){}) .css("border","1px solid red") .css("background-color",‘green‘) .fadeIn("slow");
2.能有id则用id
毫无疑问jq中最快的选择器是id选择器,因为它直接对应着我们的javascript的document.getElementsById();
HTML
<div id="outer"> <div id="inner"> <input type="text" class="txt" /> <input type="button" class="test" id="btn" value="click" /> </div> </div>
js
//不好的写法 var obj=$("#outer .test"); //直接获取就行了 var obj=$("#btn"); var obj=$("#inner input.txt") ////建议从最近的ID开始继承 var obj=$(‘input.txt‘) //不建议使用tag来修饰id 有种化蛇天足的感觉 var obj=$("div#outer"); //或者 var obj=$("#outer#inner");
3.如果你打算在其他函数中使用jQuery对象,那么你必须把它们缓存到全局环境中
window.$obj={head:$(‘head‘),obj:$(‘#outer‘)}; function do_something(){ var script=document.createElement("script"); $obj.head.append(script); $obj.obj.css("border","1px solid red"); } //这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM。 //这并不是一个jQuery最佳实践,但必须进行有效的JavaScript操作 //不好的做法; for(var i=0;i<100;i++){ $("#content").append(‘<span>index=‘+i+‘</span>‘); } //推荐写法; var html=""; for(var i=0;i<100;i++){ html+=‘<span>index=‘+i+‘</span>‘; } $(‘#content‘).append(html);
标签:
原文地址:http://www.cnblogs.com/mc67/p/5373759.html