Jquery优化方案

    技术2022-05-20  38

    1.总是从ID选择器开始继承

     

    Jquery中最快的选择器是ID选择器,因为它源自JavaScript的GetElementById方法。

     

    2.在class前使用tag(标签名)

     

    在jQuery中第二快的选择器是tag(标签)选择器( 比如:$("head") )。跟ID选择器类似,因为它来自原生的getElementsByTagName() 方法。

     

    在使用tag来修饰class的时候,我们需要注意以下几点: (1) 不要使用tag来修饰ID,如下所示: var content = $("div#content"); 这样一来,选择器会先遍历所有的div元素,然后匹配#content(好像jQuery从1.3.1开始改变了选择器核心后,不存在这个问题了 。暂时无法考证。) (2)不要画蛇添足的使用ID来修饰ID,如下所示: var traffic_light = $("#content #traffic_light");注:如果使用属性选择器,也请尽量使用tag来修饰,如下所示: $('p[row="c3221"]').html();而不是这样:$('[row="c3221"]').html();

    3.将jQuery对象缓存起来

     

    把jQuery对象缓存起来 就是要告诉我们 要养成将jQuery对象缓存进变量的习惯。永远不要让相同的选择器在你的代码里出现多次。

     

    4.尽量使用ID代替Class

     

    前面性能优化已经说过,ID选择器的速度是最快的。所以在HTML代码中,能使用ID的尽量使用ID来代替class。

     

    5.给选择器一个上下文jQuery选择器中有一个这样的选择器,它能指定上下文。 jQuery( expression, context );通过它,能缩小选择器在DOM中搜索的范围,达到节省时间,提高效率。 普通方式: $('.myDiv') 改进方式: $('.myDiv' , $("#listItem") )

     

    6.子选择器和后代选择器后代选择器经常用到,比如:$("#list p");后代选择器获取的是元素内部所有元素。而有时候实际只要获取 子元素,那么就不应该使用后代选择器。 应该使用子选择器,代码如下: $("#list > p");

    7.使用data()方法存储临时变量下面是一段非常简单的代码,$(function(){ var flag = false; $("button").click(function(){ if(flag){ $("p").text("true"); flag=false; }else{ $("p").text("false"); flag=true; } }); }) 改用data()方式后,代码如下: $(function(){ $("button").click(function(){ if( $("p").data("flag") ){ $("p").text("true"); $("p").data("flag",false); }else{ $("p").text("false"); $("p").data("flag",true); } }); })


    最新回复(0)