Jquery优化技巧_H5之家 - 中国HTML5教程资源分享第一站

Jquery优化技巧

编辑：书村网发布时间: 2013-07-22

1.优化使用id与标记选择器；
　　访问dom元素最快速度是：id，其次是元素的标记(tag)，依次是类别（class）
　　
　　 2.使用jquery对象缓存；
　　所谓对象缓存就是，在使用jquery对象时，先尽量使用变量保存对象名，然后通过变量的方法相应操作
　　例如：
　　 $("#main").css("height","200px");
　　 $("#main").click(function(){});
　　 $("#main").attr("checked",true);
　　优化后的代码是：
　　 var obj = $("#main");
　　 obj.css("height","200px");
　　 obj.click(function(){});
　　 obj.attr("checked",true);
　　如果想让变量在其它函数中也能运用，可以如下定义：
　　 //全局变量
　　 window.objPub = {
　　 obj:$("#main");
　　 }
　　在使用变量缓存jquery对象时，有如下两点需要注意：
　　 1).无论是局部还是全局变理，为避免与其它变量冲突，尽量这样命名 var $obj = $("#main");
　　 2).如果同一个dom对象有多个操作时，尽量采用链式的写法优化调用代码，例如：
　　 $obj.css("height","200px").click(function(){}).attr("","");

　　 3.给选择器一个上下文；
　　例如：$(expression,[context])
　　 []里表示是一范围，例如：
　　 <div class=".myclass">
　　 <div id="div0"></div>
　　 </div>
　　 $("#div0",".myclass")的效率要高于$("#div0")
　　
　　 4.选择器中含有特殊的符号;
　　在页面中，根据W3C标准，不能包含"#","(","["等不规范字符
　　例如<div id="div1#"></div>
　　错误写法：$("#div1#").html();
　　正确写法：$("#div1#").html();得需要用""进行转义

　　 5.选择器中含有空格符；
　　例如：$(".myclass :hide")表示为.myclass下的隐藏元素；
　　 $(".myclass:hide")表示为所隐藏元素的class为.myclass；

　　 6.优化事件中的冒泡现象；
　　页面元素嵌套时，如果触发同一事件，可能会触发事件的冒泡现象，可以用stopPagation来阻止这一现象的发生；
　　 target获取触发事件的元素

　　 7.使用data方法缓存数据
　　 1)返回存储的数据：
　　 data("name");
　　 2)设置数据：
　　 data("name","zhangsan");
　　 3)移除缓存数据：
　　 removeData("name");
　　例子：缓存json格式数据
　　 <p><b>数据状态</b></p>
　　
　　 $("p").data("tmpData");//此处为空
　　 $("p").data("tmpData",{name:"zhangsan",age:"18",sex:"男"});
　　 $("p").data("tmpData").name;//zhangsan;
　　 $("p").data("tmpData").age;//18;
　　缓存数据得及时清理，需特别注意
　　
　　 8.jquery库与其它库冲突( 书村网 )
　　 1)jquery在其它库前导入
　　直接使用jquery，例如jquery(function(){}); 将$的使用权转给其它库；
　　 2)jquery在其它库后导入
　　使用jQuery.noConflict()即可；
　　 /*方法一*/
　　 jQuery.noConflict();
　　 jQuery(function(){
　　 jQuery("#div0").html();
　　 });
　　
　　 /*方法二---自定义快捷方式*/
　　 var j = jQuery.noConflict();
　　 j(function(){
　　 j("#div0").html();
　　 });
　　
　　 /*方法三---在jquery函数内使用$符*/
　　 jQuery.noConflict();
　　 jQuery(function($){
　　 $("#div0").html();
　　 })
　　
　　 9.选用子查询优化选择性能；
　　 <div id="div0">
　　 <ul class="myclass">
　　 <li class="li0"><span>测试元素一</span></li>
　　 <li class="li1">测试元素二</li>
　　 </ul>
　　 </div>
　　
　　一般写法$("#div0 .myclass .li0 span").hmtl();
　　 $("#div0 .myclass .li1").hmtl();
　　如上写法效率较低，没缓存，不利于同级查询，每一次都是一个新的开销；
　　
　　 var $obj = $("#div0");
　　 var $objc = $obj.find(".myclass");
　　 var $objli0 = $objc.find(".li0");
　　 var $spn = $objli0.find("span");
　　 var li0 = $spn.html();
　　 var objli1 = $objc.find(".li1");
　　

★内容出处　Wｗｗ.ＭcＱyY。cＯＭ★

《Jquery优化技巧》Word文档下载

看了本文的网友还看了

本站发布的作品部分转载于互联网，旨在提供网民阅读参考。若《Jquery优化技巧》涉及版权问题，或作者不同意本站转载您的作品，请通知我们，收到反馈我们会将相关稿件删除处理。

因为本站编辑人手有限，而部分作文出处也无从考究，所以没注明《Jquery优化技巧》的出处或转载到本站请您谅解，感谢各位的包容与支持！

阅读排行