一些實(shí)用的 jQuery 技巧1 小時(shí)前 by 副主編
wangguo 評(píng)論(0) 有294人瀏覽
javascript jquery web開發(fā) 最佳實(shí)踐< > 獵頭職位:
上海: Senior Software EngineerjQuery如今已經(jīng)成為Web開發(fā)中最流行的JavaScript庫(kù)，通過(guò)jQuery和大量的插件，你可以輕松實(shí)現(xiàn)各種絢麗的效果。
本文將為你介紹一些實(shí)用的技巧，希望可以幫助你更加高效地使用jQuery。
Tip 1：使用最新版本
jQuery每一個(gè)新版本都會(huì)包含一些性能優(yōu)化和bug修復(fù)，為了便于升級(jí)，你可以使用Google CDN服務(wù)托管的jQuery庫(kù)。有以下兩種方式：
包含特定版本
Html代碼
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
包含某個(gè)分支的的最新版本（此方法中jQuery版本的
緩存期限只有1小時(shí)，不建議用于生產(chǎn)環(huán)境）
Html代碼
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
Tip 2：使用簡(jiǎn)單的選擇器
之前獲取DOM元素通常使用jQuery的getElementById()、getElementsByTagName()和getElementsByClassName()方法。如今，所有主流瀏覽器都已經(jīng)支持querySelectorAll()，該方法能夠理解CSS查詢器。你應(yīng)該嘗試使用這個(gè)更優(yōu)的方式。
Javascript代碼
$('li[data-selected="true"] a') // 看起來(lái)不錯(cuò)，但是慢
$('li.selected a') // 更好的方法
$('#ElementID) // 最好
Tip 3：緩存jQuery的結(jié)果
如果你沒有別的選擇，只能使用DOM選擇器，那么你應(yīng)該緩存jQuery的結(jié)果。例如：
Javascript代碼
var selectedListItem = $('li[data-selected="true"]a')
現(xiàn)在，jQuery的結(jié)果已經(jīng)被緩存到變量“selectedListItem”，該變量可以多次使用而不會(huì)影響性能。
Tip 4：使用jQuery擴(kuò)展選擇器的注意事項(xiàng)
jQuery提供了大量的擴(kuò)展
選擇器，比如:visible、:hidden、:animated等，而它們不是有效的CSS3選擇器。如果使用這些選擇器，將不能再使用querySelectorAll()方法。為了避免這種情況，你可以先選擇元素，然后再過(guò)濾。例如：
Javascript代碼
$('a.button:hidden'); //則不能使用querySelectorAll()
$('a.button').filter(':hidden'); //最佳方案
上述結(jié)果是相同的，但是第2個(gè)更快。
Tip 5：像數(shù)組一樣使用jQuery對(duì)象
運(yùn)行一個(gè)選擇器得到的結(jié)果是一個(gè)jQuery對(duì)象。但是，通過(guò)jQuery可以使結(jié)果看起來(lái)更像一個(gè)數(shù)組，你可以定義索引元素和長(zhǎng)度。
Javascript代碼
var buttons = $('#navigation a.button'); //Selecting all the navigation b //Selecting all the navigation buttons
// We can loop though the collection:
for(var i=0;i<buttons.length;i++){
console.log(buttons[i]); // A DOM element, not a jQuery object
}
如果你想實(shí)現(xiàn)更高的性能，可以使用一個(gè)簡(jiǎn)單的循環(huán)（或while語(yǔ)句）來(lái)代替$.each()，這樣速度會(huì)比之前快幾倍。
Tip 6：檢查一個(gè)元素是否存在
確定一個(gè)元素集合是否存在或是否包含元素的唯一方法是檢查元素的長(zhǎng)度。
Javascript代碼
If (buttons.length){ // True only if buttons contains elements
// Do something }
Tip 7：創(chuàng)建jQuery空對(duì)象
創(chuàng)建一個(gè)新的jQuery對(duì)象有時(shí)開銷會(huì)比較大。不過(guò)你可以先創(chuàng)建一個(gè)空對(duì)象，然后通過(guò)add()填充它。
Javascript代碼
var container = $([]);
container.add(another_element);
Tip 8：統(tǒng)計(jì)Web頁(yè)面中DOM元素?cái)?shù)
如果頁(yè)面中包含大量元素或內(nèi)容，則瀏覽器渲染所需的時(shí)間也更多。你可以在控制臺(tái)中執(zhí)行以下語(yǔ)句，來(lái)統(tǒng)計(jì)頁(yè)面中的DOM元素?cái)?shù)：
Javascript代碼
console.log($('*').length);
如果所得數(shù)值較小，則頁(yè)面渲染較快。你可以通過(guò)刪除多余的標(biāo)記和不必要的元素來(lái)進(jìn)行優(yōu)化。
Tip 9：把你的代碼變成jQuery插件
如果你希望將你的jQuery代碼封裝成一個(gè)jQuery插件，以便以后重用，你可以通過(guò)以下代碼來(lái)創(chuàng)建：
Javascript代碼
function($){
$.fn.yourPluginName = function(){
// Your code goes here
return this;
};
})(jQuery);
Tip 10：本地存儲(chǔ)
Local storage是一個(gè)用于在客戶端上存儲(chǔ)信息的API。使用時(shí)，你只需將你的數(shù)據(jù)作為localStorage全局對(duì)象的一個(gè)屬性：
Javascript代碼
localStorage.someData = "This data is going to persist across page refreshes and browser restarts";
舊的瀏覽器不支持該API，不過(guò)有各種
jQuery插件可以作為替代方案。這些插件在localStorage不可用時(shí)提供了其他存儲(chǔ)方案。下面是一個(gè)例子：
Javascript代碼
// Check if "key" exists in the storage.
var value = $.jStorage.get("key");
if(!value){
// if not - load the data from the server
value = load_data_from_server();
// and save it
$.jStorage.set("key",value);
Tip 11: Live事件處理
為任何匹配選擇器的元素設(shè)置一個(gè)事件處理程序，即使它在初始頁(yè)面加載后被添加到DOM：
Javascript代碼
$('button.yourClassName').live('click', yourFunctionName);
這樣，通過(guò)ajax或javascript加載元素時(shí)，事件處理程序會(huì)自動(dòng)為這些元素進(jìn)行設(shè)置：
Javascript代碼
$('button.yourClassName').die('click', yourFunctionName);
盡管與常規(guī)事件相比，live事件處理程序有一些局限性，但它還是適用于大部分情況。Live事件支持jQuery 1.3及以上版本。
Tip 12：克隆一個(gè)對(duì)象
使用.clone()方法克隆JavaScript中的DOM對(duì)象：
Javascript代碼
// Clone the DIV
var cloned = $('#yourdivID').clone();
.clone()方法無(wú)法克隆JavaScript對(duì)象。如果要克隆JavaScript對(duì)象，你可以使用下面的代碼：
Javascript代碼
// Shallow copy
var newObject = jQuery.extend({}, oldObject);
// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);
Tip 13：測(cè)試隱藏元素
通過(guò).hide()和.show()方法可以改變?cè)氐目梢娦?。使用下面的代碼可以檢測(cè)元素是否可見：
Javascript代碼
if($(element).is(":visible") == "true") {
//The element is Visible
}
Tip 14：找出最近的父DIV
如果你想找出某個(gè)元素的父級(jí)DIV（無(wú)論該DIV是否有ID），那么你可以使用這個(gè)jQuery選擇器：
Javascript代碼
$("#yourControl").closest("div");
英文原文：
jQuery Best Practices
