Jquery优化技巧

优化使用id与标记选择器
访问dom元素最快速度是id其次是元素的标记(tag)依次是类别（class）

使用jquery对象缓存
所谓对象缓存就是在使用jquery对象时先尽量使用变量保存对象名然后通过变量的方法相应操作
例如
$("#main")css("height""px");
$("#main")click(function(){});
$("#main")attr("checked"true);
优化后的代码是
var obj = $("#main");
objcss("height""px");
objclick(function(){});
objattr("checked"true);
如果想让变量在其它函数中也能运用可以如下定义
//全局变量
windowobjPub = {
obj:$("#main");
}
在使用变量缓存jquery对象时有如下两点需要注意
)无论是局部还是全局变理为避免与其它变量沖突尽量这样命名 var $obj = $("#main");
)如果同一个dom对象有多个操作时尽量采用链式的写法优化调用代码例如
$objcss("height""px")click(function(){})attr("""");

给选择器一个上下文
例如$(expression[context])
[]里表示是一范围例如
<div class="myclass">
<div id="div"></div>
</div>
$("#div""myclass")的效率要高于$("#div")

选择器中含有特殊的符号;
在页面中根据WC标准不能包含"#""(""["等不规范字符
例如<div id="div#"></div>
错误写法$("#div#")html();
正确写法$("#div#")html();得需要用""进行转义

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

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

使用data方法缓存数据
)返回存储的数据
data("name");
)设置数据
data("name""zhangsan");
)移除缓存数据
removeData("name");
例子缓存json格式数据
<p><b>数据状态</b></p>

$("p")data("tmpData");//此处为空
$("p")data("tmpData"{name:"zhangsan"age:""sex:"男"});
$("p")data("tmpData")name;//zhangsan;
$("p")data("tmpData")age;//;
缓存数据得及时清理需特别注意

jquery库与其它库沖突
)jquery在其它库前导入
直接使用jquery例如jquery(function(){}); 将$的使用权转给其它库
)jquery在其它库后导入
使用jQuerynoConflict()即可
/*方法一*/
jQuerynoConflict();
jQuery(function(){
jQuery("#div")html();
});

/*方法二自定义快捷方式*/
var j = jQuerynoConflict();
j(function(){
j("#div")html();
});

/*方法三在jquery函数内使用$符*/
jQuerynoConflict();
jQuery(function($){
$("#div")html();
})

选用子查询优化选择性能
<div id="div">
<ul class="myclass">
<li class="li"><span>测试元素一</span></li>
<li class="li">测试元素二</li>
</ul>
</div>

一般写法$("#div myclass li span")hmtl();
$("#div myclass li")hmtl();
如上写法效率较低没缓存不利于同级查询每一次都是一个新的开销

var $obj = $("#div");
var $objc = $objfind("myclass");
var $objli = $objcfind("li");
var $spn = $objlifind("span");
var li = $spnhtml();
var objli = $objcfind("li");