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");
实例二
html
<ul id="list"> <li class="li0">1</li> <li class="li1">2</li> <li class="li2">3</li> </ul> <ul id="list1"> <li id="li0">1</li> <li id="li1">2</li> <li id="li2">3</li> </ul>
js
for(var i=0;i<3;i++){ $('.li'+i) } //相比之下,还是比较推荐第二种写法 for(var j=0;j<3;j++){ $('#li'+i); }
ps:也可以给选择器指定一个上下文;
var list=$('.mydiv'); var outer=$('#outer'); var list=$('.mydiv',outer);
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);
4.我们要为一个拥有很多输入框的表单绑定这样的行为:当输入框被选中时为它添加一个class
除非在特殊情况下,否则每个js事件(click,mouseover)都会冒泡到父级节点,当我们需要给多个元素调用同一个函数时候,
这点可能会有用,代替这种效率很差的多元素监听的方法是:你只需向他们的父节点绑定一次就ok了;
//不好的写法 $("#formId input").bind("focus",function (){ $(this).addClass('selected').bind("blur",function (){ $(this).removeClass('selected'); }) }) //推荐写法; $("#formId").bind("focus",function (e){ var $cell=$(e.target); //e.target捕捉到触发的目标元素 $cell.addClass('selected'); }).bind('blur',function (e){ var $cell=$(e.target); $cell.removeClass('selected'); }); //比如: $("#mytable td").click(function (){ $(this).css('background','red'); }) //改进方式 $("#mytable").click(function (e){ var $clicked=$(e.target); $clicked.css('background','red'); }) //总结 //假设有100个td,在使用普通的方式的时候,你绑定了100个事件。在改进方式中, //你只为一个元素绑定了1个事件,至于是100个事件的效率高,还是1个事件的效率高, //相信你也能自行分辨了。
5.推迟到 $(window).load
尽管$(document).rady 确实很有用, 它可以在页面渲染时,其它元素还没下载完成就执行。如果你发现你的页面一直是载入中的状态,
很有可能就是$(document).ready函数引起的。你可以通过将jQuery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率。
它会在所有的html(包括<iframe>)被下载完成后执行。
以下是引用片段:
$(window).load(function(){
// 页面完全载入后才初始化的jQuery函数.
});
一些特效的功能,例如拖放,视觉特效和动画,预载入隐藏图像等等,都是适合这种技术的场合。
6.压缩JavaScript
7.10.慎用 .live()方法(应该说尽量不要使用)
jQuery1.3.1版本之后增加的方法,这个方法的功能就是为 新增的DOM元素 动态绑定事件
8.子选择器和后代选择器
$("#outer div"); //后代选择器 $("#outer>div") //子选择器 //应该根据具体的情况来选择使用
9.使用data()方法存储临时变量
//应该根据具体的情况来选择使用 //关于data的使用滴呀 //就能在一个元素上存放任何格式的数据,而不仅仅是字符串 var temp='temp'; var obj={name:'jack',age:18}; var bodyData=$(document.body); bodyData.data("temp",temp); bodyData.data("obj",obj); alert(bodyData.data("temp")); alert(bodyData.data("obj").name); //移除data bodyData.removeData("temp"); bodyData.removeData("obj"); alert(bodyData.data("temp")); //undefined alert(bodyData.data("obj").name);//undefined //具体的实例; var flag=false; $("#btn").click(function (){ if(flag){ //do xx flag=false; }else{ //do yy flag=true; } }) //使用data改进后的代码; $("#btn").click(function (){ if($('p').data('flag')){ //do xx $('p'.data('flag',false)) }else{ //do yy $('p').data('flag',true) } })
10.使用toggleClass来优化
//方式一 $("#temp").mouseover(function (){ $(this).addClass('color') }) $("#temp").mouseout(function (){ $(this).removeClass('color'); }) //方式二 $("#temp").mouseover(function (){ $(this).addClass("color"); }).mouseout(function (){ $(this).removeClass("color"); }) //方式三 $("#temp").hover(function (){ $(this).toggleClass('color'); })