優化使用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");
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20267.html
