Jquery优化技巧

核心提示： 1.优化使用id与标记选择器；访问dom元素最快速度是：id，其次是元素的标记(tag)，Jquery优化技巧，依次是类别（class）2.使用jquery对象缓存；所谓对象缓存就是，在使用jquery对象时，可能会触发事件的冒泡现象，可以用stopPagation来阻止这一现象的发生；target获取触发事件的元素

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