jQuery 的數據方法 - 如何以及為什麼要使用它
jQuery 的 data 方法使我們能夠將任意數據與 DOM 節點和 JavaScript 對象相關聯。這使我們的代碼更加簡潔和乾淨。從 jQuery 1.4.3 開始，我們還可以在常規 JavaScript 對像上使用該方法並監聽變化，這為一些非常有趣的應用程序打開了大門。
基礎知識
您可以在 jQuery 對像上調用 data 方法，也可以改用 $.data() 函數。
// Using the data method:
$("#myDiv").data("key","arbitrary value");
// Using the data function:
$.data($("#myDiv").get(0),"key","arbitrary value");
數據函數是一個低級實現，實際上是由幕後的方法調用使用的。方法調用也更方便，因為它允許您將其作為鏈的一部分包含在內。
另外，請注意您需要傳遞一個 DOM 元素 作為 $.data 的第一個參數，而不是 jQuery 對象。這就是為什麼在本文中，我們將專注於使用方法調用來代替。
當你使用數據方法時，你需要傳遞兩個參數——一個鍵和一個要存儲的值。鍵必須是字符串，值可以是任何數據結構，包括函數、數組和對象。還有一種替代語法，您可以將對像作為單個參數傳遞：
// Passing an object:
$("#myDiv").data({"name":"Stevie","age":21});
// This is the same as:
$("#myDiv").data("name","Stevie").data("age",21);
現在您已經插入了數據，您可以通過使用單個參數調用 data 方法來讀取它 - 鍵：
var theValue = $("#myDiv").data("age"); // 21
您可以在腳本中的任何位置訪問數據。選擇器是什麼無關緊要，只要是同一個元素，就會得到和你輸入的一樣的值：
// Given that myDiv is the first div in the page:
var theValue = $("div:first").data("name"); // Stevie
$("div:first").click(function(){
alert($(this).data("age"); // 21
});
從 jQuery 1.4.3 開始，HTML5 數據屬性也可以通過 data 方法獲得。這意味著如果你有這樣的元素：
<img id="img1" data-internal-id="221" width="100" height="100" />
您只需調用 $("#img1").data('internal-id') 即可訪問 data-internal-id 屬性 ，這在 AJAX 應用程序中非常有用。我們在上週的教程 - 使用 jQuery 和 CSS3 製作更好的選擇元素中也使用了這種技術。
在 JavaScript 對像上使用數據方法
您可能會驚訝地發現可以在常規 JavaScript 對像上使用 data 方法。這個功能已經存在了一段時間，但在 jQuery 1.4.3 中，它為一些有用的應用程序打開了大門。
var myObj = {};
$(myObj).data("city","Springfield");
上面的代碼片段實際上是在對像上創建一個城市屬性。但是為什麼不直接設置 myObj.city = "Springfield" 你自己？因為 data 方法觸發了很多有用的事件，你可以監聽：
var progressBar = {};
$(progressBar).bind('setData',function(e,key,value){
switch(key){
case "percent":
$("#progress").width(value+"%");
$("#percentText").text(value+"%");
break;
case "color":
$("#progress").css("color",value);
break;
case "enabled":
$('#progress').toggleClass("active",value);
break;
}
});
$(progressBar).data("enabled",true).data("percent",21).data("color","green");
// You also have easy access to the current values:
console.log(progressBar.enabled); // true
在上面的片段中，我們使用 data 方法創建了一個簡單的 API，我們可以使用它來更新屏幕上的進度條。最好的部分是，在任何給定時間，您都可以查看 progressBar 對象並獲取當前值。
在普通對像上使用 data 方法時，還會觸發另外兩個事件：
- 獲取數據 - 在從對象讀取數據之前觸發。您可以使用事件處理函數中的 return 語句來覆蓋該值。可用於在後台運行計算；
- 更改數據 - 每當設置或更改數據時觸發。它在 jQuery 數據鏈接插件中使用，允許您將表單綁定到 JavaScript 對象並將表單字段作為該對象的屬性訪問。這樣您就不必處理讀取和設置值，這是一個相當大的負擔，尤其是在較長的表單中。您可以在演示頁面中看到它的實際效果。
幕後花絮
在內部，jQuery 創建一個空對象（稱為 $.cache 對於好奇的人），它用於存儲您通過 data 方法設置的值。您向其中添加數據的每個 DOM 元素都分配有一個唯一 ID，該 ID 用作 $.cache 對像中的鍵。
jQuery 不僅僅將用戶創建的數據存儲在該緩存中。它還存儲您使用 live() 附加的內部信息和事件處理函數 , 綁定() 和 delegate() .擁有集中的數據存儲使 jQuery 的代碼庫更加健壯且無錯誤，我們都可以從中受益。
總結
data 方法只是 jQuery 眾多實用程序之一，它使 Web 開發人員的生活更輕鬆。結合圖書館的其他能力，它為我們奠定了堅實的基礎。
