码迷,mamicode.com
首页 > Web开发 > 详细

jquery选择器效率优化问题

时间:2016-04-10 12:47:15      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

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);

 

jquery选择器效率优化问题

标签:

原文地址:http://www.cnblogs.com/mc67/p/5373759.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!