jquery选择器效率优化问题
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'); })
