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