jQuery.fn.extend({
data: function( key, value ) {
var parts, part, attr, name, l,
elem = this[0],
i = 0,
data = null;
// Gets all values
if ( key === undefined ) {
.....//處理沒有Key的情況，這裡不是我們要討論的
return data;
}
// Sets multiple values
if ( typeof key === "object" ) {
return this.each(function() {
jQuery.data( this, key );
});
}
parts = key.split( ".", 2 );
parts[1] = parts[1] ? "." parts[1] : "";
part = parts[1] "!";
return jQuery.access( this, function( value ) {
if (value === undefined ) {
。 $("div").data("a","aaa"))，下面呼叫each前的this指的是$("div")這回傳的對象，
this.each(function() { //注意了，這裡是以每一個匹配的元素作為上下文來執行一個函數
var self = jQuery( this );
self.triggerHandler( "setData" part, parts );
//這裡在元素上存放數據，本質還是委託data(element,[key],[value]）來做的。 value )裡的this指的是遍歷整個jQuery物件中對應的每個DOM元素
//$("div")它對應頁面中一個
陣列。
jQuery.data( this, key, value );//這名句子會被迴圈多次執行，也就是儲存資料。
//這裡就是核心一句話。但要清楚看上面了它是在each（functipn(){}）中的。
self.triggerHandler( "changeData" part, parts );
});
}, null, value, arguments.length > 1, null, false );
},
/ /在元素上移除已存放的資料。具體實作如下：
removeData: function( key ) {
return this.each(function() {
jQuery.removeData( this, key );
});
}
}
});
}
}
});
}
}
});
}
}
}); >});
複製程式碼
程式碼如下:
test2
test3
test
aaaa
<script> <BR>$(document).ready(function(){ <BR>$ ("#test").click(function(){ <BR>alert("JQUERY"); <BR>var i=0; <BR>$("#abc3").each(function() { <BR>alert( i);//只輸出1;因為只有一個<div id="abc3"> <BR>}); <BR>alert("----"); <BR>var j=1; <BR>$("div").each(function() {//以每一個符合的元素作為上下文來執行這個函數<BR>$.data(this,"a","wwww");//這裡的this是指$("div")， <BR>//分別遍歷每一個匹配的元素給它們每一個物件{}都保存一個key/value <BR>alert(j );//分別輸出1 ，2 ，3 因為有三個<div>元素<BR>}); <BR>alert($("#test").data("a"));//回傳wwww, <BR>//是不是很驚呀，我沒有保存在它身上啊，怎麼也有值，很明顯是它是查這個div節點上有沒有， <BR>//肯定是有值了，因為上面給循環保存在div這Dom結點上了。 .data("a"));//回傳wwww, <BR>//這裡也是一樣因為是div節點上都儲存了"a"="wwww"這樣一個鍵值對了。 <BR>}); <BR></script>
現在對data([key],[value])與jQuery.data(element,[key],[value])都有了解了吧，如果還是半懂，再回頭多看一遍，耐心理解一下。其實表面上很不一樣。但本質上還是有連結的，現在明白原理後就可以請放心地使用了。 jQuery.data(element,[key],[value])只把資料綁定到參數element節點。 data([key],[value])
如$("div").data("a","aaaa")它是把資料綁定每個符合div節點的元素上。
附加說明下，文中所分析用到的是jquery-1.7.2.js的原始碼。下載網址：http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js
