Jquery优化技巧

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

分类:Javascript教程 时间:2015-03-11 人气:6
本文关键词:
分享到:

相关文章

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.031 (s). 10 q(s)