這個數據當然要通過屬性來進行存取，但是，有多個屬性怎麼辦呢？，要定義多個屬性嗎？，屬性的名字叫什麼呢？會不會與其他的屬性有沖突呢？
在 jQuery 中，針對 DOM 對象擴展的私有數據可以用一個對象來表示，多個數據就使用這個對象的多個屬性來表示。為了能夠通過 DOM 對象找到這個擴展數據對象，而不會與其他現有的屬性沖突，在 jQuery 中通過 expando 這個常量表示擴展對象的屬性名，這個 expando 的值是計算出來的。而這個屬性的值就是用來找到擴展對象的鍵值。
例如，我們可以定義 expando 的值為 "jQuery1234" ，那麼，我們可以為每個 DOM 對象增加這個名為 "jQuery1234" 的屬性，這個屬性的值可以是一個鍵，例如為 1000。
在 jQuery 對象上的 cache 用來保存所有對象擴展的對象，這個對象可以看作一個字典，屬性名就是鍵值，所對應的值就是擴展數據對象。
也就是說，在 jQuery 對象的 cache 上，將會有一個 1000 的成員，這個成員引用的對象就是 1000 號 DOM 對象的私有擴展對象。1000 號成員的私有數據將被存在在這個對象上。
當一個 DOM 對象需要取得擴展數據的時候，首先通過對象的 expando 屬性取得一個鍵值，然後通過這個鍵值到 jQuery.cache 中取得自己的擴展對象，然後在擴展對象上讀寫數據。
代碼如下:
/// <reference path="jQuery-core.js" />
// 常用方法
function now() {
return (new Date).getTime();
}
// 擴充數據的屬性名，動態生成，避免與已有的屬性沖突
var expando = "jQuery" + now(), uuid = 0, windowData = {};
jQuery.cache = {};
jQuery.expando = expando;
// 數據管理，可以針對 DOM 對象保存私有的數據，可以讀取保存的數據
jQuery.fn.data = function (key, value) {
// 讀取
if (value === undefined) {
return jQuery.data(this[0], key);
}
else { // 設置
this.each(
function () {
jQuery.data(this, key, value);
}
);
}
}
// 移除數據，刪除保存在對象上的數據
jQuery.fn.removeData = function (key) {
return this.each(function () {
jQuery.removeData(this, key);
})
}
// 為元素保存數據
jQuery.data = function (elem, name, data) { // #1001
// 取得元素保存數據的鍵值
var id = elem[expando], cache = jQuery.cache, thisCache;
// 沒有 id 的情況下，無法取值
if (!id && typeof name === "string" && data === undefined) {
return null;
}
// Compute a unique ID for the element
// 為元素計算一個唯一的鍵值
if (!id) {
id = ++uuid;
}
// 如果沒有保存過
if (!cache[id]) {
elem[expando] = id; // 在元素上保存鍵值
cache[id] = {}; // 在 cache 上創建一個對象保存元素對應的值
}
// 取得此元素的數據對象
thisCache = cache[id];
// Prevent overriding the named cache with undefined values
// 保存值
if (data !== undefined) {
thisCache[name] = data;
}
// 返回對應的值
return typeof name === "string" ? thisCache[name] : thisCache;
}
// 刪除保存的數據
jQuery.removeData = function (elem, name) { // #1042
var id = elem[expando], cache = jQuery.cache, thisCache = cache[id];
// If we want to remove a specific section of the element's data
if (name) {
if (thisCache) {
// Remove the section of cache data
delete thisCache[name];
// If we've removed all the data, remove the element's cache
if (jQuery.isEmptyObject(thisCache)) {
jQuery.removeData(elem);
}
}
// Otherwise, we want to remove all of the element's data
} else {
delete elem[jQuery.expando];
// Completely remove the data cache
delete cache[id];
}
}
// 檢查對象是否是空的
jQuery.isEmptyObject = function (obj) {
// 遍歷元素的屬性，只有要屬性就返回假，否則返回真
for (var name in obj) {
return false;
}
return true;
}
// 檢查是否是一個函數
jQuery.isFunction = function (obj) {
var s = toString.call(obj);
return toString.call(obj) === "[object Function]";
}
下面的腳本可以保存或者讀取對象的擴展數據。
代碼如下:
// 數據操作
$("#msg").data("name", "Hello, world.");
alert($("#msg").data("name"));
$("#msg").removeData("name");
alert($("#msg").data("name"));