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