jquery选择器效率优化问题

时间：2023-03-09 16:49:42
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');

      })

相关文章