<div id="test2" onclick="test()">test2</div>
<div id="abc3" onclick="test()">test3</div>
<div id="test" onclick="test()">test</div>
<p id="ttt">aaaa</p>
<script>
$(document).ready(function(){
$("#test").click(function(){
alert("JQUERY");
var e=$("div");//定義了兩jquery對(duì)象
var w=$("div");//e是不等于w的。
//首先使用data([key],[value])用法。
$(e).data("a","aaaa");//分別在e和w上保存Key一樣的數(shù)據(jù)，
$(w).data("a","wwww");// 看它是否會(huì)覆蓋前面的，雖然是保存在不同對(duì)象上。
alert($(e).data("a"));//你猜到答案了嗎，里輸出是wwww;是不是有點(diǎn)意外？
alert(e===w)//false
alert($(w).data("a"));//這里也是wwww;
//使用jQuery.data(element,[key],[value])來(lái)存放數(shù)據(jù)。
$.data(e,"b","cccc");//分別在e和w上保存Key一樣的數(shù)據(jù)，
$.data(w,"b","dddd");// 看它是否會(huì)覆蓋前面的，雖然是保存在不同對(duì)象上。
alert($.data(e,"b"));//應(yīng)該你能猜答案吧，輸出cccc
alert($.data(w,"b"));//這輸出dddd
});
});
</script>

jQuery.extend({
cache: {},
// Please use with caution
uuid: 0,
// Unique for each copy of jQuery on the page
// Non-digits removed to match rinlinejQuery
expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),
....
data: function( elem, name, data, pvt /* Internal Use Only */ ) {
// 是否可以附加數(shù)據(jù)，不可以則直接返回
if ( !jQuery.acceptData( elem ) ) {
return;
}
var privateCache, thisCache, ret,
//jQuery.expando這是一個(gè)唯一的字符串，是這介jquery對(duì)象產(chǎn)生的時(shí)候就生成了。
internalKey = jQuery.expando,
getByName = typeof name === "string",
// 必須區(qū)分處理DOM元素和JS對(duì)象，因?yàn)镮E6-7不能垃圾回收對(duì)象跨DOM對(duì)象和JS對(duì)象進(jìn)行的引用屬性
isNode = elem.nodeType,
// 如果是DOM元素，則使用全局的jQuery.cache
// 如果是JS對(duì)象，則直接附加到對(duì)象上
cache = isNode ? jQuery.cache : elem,
// Only defining an ID for JS objects if its cache already exists allows
// the code to shortcut on the same path as a DOM node with no cache
id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey,
isEvents = name === "events";
// 避免做更多的不必要工作，當(dāng)嘗試在一個(gè)沒(méi)有任何數(shù)據(jù)的對(duì)象上獲取數(shù)據(jù)時(shí)
// 對(duì)象沒(méi)有任何數(shù)據(jù)，直接返回
if ( (!id || !cache[id] || (!isEvents && !pvt && !cache[id].data)) && getByName && data === undefined ) {
return;
}
// id不存在的話就生成一個(gè)
if ( !id ) {
// Only DOM nodes need a new unique ID for each element since their data
// ends up in the global cache
if ( isNode ) {
// 如果是DOM元素則在元素上產(chǎn)生唯一的ID 并且以jQuery.expando
//為屬性值為id保存在elem元素上，以便以后再根據(jù)jQuery.expando來(lái)查找ID。
elem[ internalKey ] = id = ++jQuery.uuid;
} else {
// JS對(duì)象則直接使用jQuery.expando，既然是直接附加到對(duì)象上，又何必要id呢？
// 避免與其他屬性沖突！
id = internalKey;
}
}
//// 當(dāng)我們?cè)囍L問(wèn)一個(gè)鍵是否含有值的時(shí)候，如果不存在jQuery.cache[id]值,
// 初始化jQuery.cache[id]值 為一個(gè)空對(duì)象{}
if ( !cache[ id ] ) {
cache[ id ] = {};
if ( !isNode ) {
cache[ id ].toJSON = jQuery.noop;
}
}
// An object can be passed to jQuery.data instead of a key/value pair; this gets
// shallow copied over onto the existing cache
// data是接收對(duì)象和函數(shù)，淺拷貝
if ( typeof name === "object" || typeof name === "function" ) {
if ( pvt ) {
cache[ id ] = jQuery.extend( cache[ id ], name );
} else {
cache[ id ].data = jQuery.extend( cache[ id ].data, name );
}
}
/ 存儲(chǔ)對(duì)象，存放了所有數(shù)據(jù)的映射對(duì)象
privateCache = thisCache = cache[ id ];
// jQuery data() is stored in a separate object inside the object's internal data
// cache in order to avoid key collisions between internal data and user-defined
// data.
// jQuery內(nèi)部數(shù)據(jù)存在一個(gè)獨(dú)立的對(duì)象（thisCache.data==thisCache[ internalKey ]）
//上，為了避免內(nèi)部數(shù)據(jù)和用戶定義數(shù)據(jù)沖突
if ( !pvt ) {
// 存放私有數(shù)據(jù)的對(duì)象不存在，則創(chuàng)建一個(gè){}
if ( !thisCache.data ) {
thisCache.data = {};
}
// 使用私有數(shù)據(jù)對(duì)象替換thisCache
thisCache = thisCache.data;
}
// 如果data不是undefined，表示傳入了data參數(shù)，則存儲(chǔ)data到name屬性上
if ( data !== undefined ) {
// jQuery.camelCase( name )作用是如果傳入的是object/function，不做轉(zhuǎn)換，
//只有傳入的name是字符串才會(huì)轉(zhuǎn)換。所以最終保存下來(lái)的是key/value對(duì);
thisCache[ jQuery.camelCase( name ) ] = data;
}
//從這以后下面的代碼都是處理data: function( elem, name）data為空，求返回值data的情況了。
if ( isEvents && !thisCache[ name ] ) {
return privateCache.events;
}
// 如果name是字符串，則返回data
// 如果不是，則返回整個(gè)存儲(chǔ)對(duì)象
if ( getByName ) {
// First Try to find as-is property data
ret = thisCache[ name ];
// Test for null|undefined property data
if ( ret == null ) {
// Try to find the camelCased property
ret = thisCache[ jQuery.camelCase( name ) ];
}
} else {
ret = thisCache;
}
return ret;
},
............
});

<div id="test2" onclick="test()">test2</div>
<div id="abc3" onclick="test()">test3</div>
<div id="test" onclick="test()">test</div>
<p id="ttt">aaaa</p>
<script>
$(document).ready(function(){
$("#test").click(function(){
alert("JQUERY");
var i=0;
$("#abc3").each(function() {
alert(++i);//只輸出1;因?yàn)橹挥幸粋€(gè)<div id="abc3">
});
alert("----");
var j=0;
$("div").each(function() {
alert(++j);//分別輸出1，2，3;因?yàn)橛腥齻€(gè)<div>所以循環(huán)三遍
});
});
});
</script>
現(xiàn)在來(lái)看each方法的具體實(shí)現(xiàn)如下：
jQuery.fn = jQuery.prototype = {
each: function( callback, args ) {
return jQuery.each( this, callback, args );
}
}
可以看到它返回的是全局的each方法，并且將自身jQuery對(duì)象做為參數(shù)給它，全局的each方法的具體實(shí)現(xiàn)如下：
// args 作為內(nèi)部成員的調(diào)用來(lái)使用
each: function( object, callback, args ) {
var name, i = 0, length = object.length; // 當(dāng)object為jQuery對(duì)象時(shí)，length非空
if ( args ) {
if ( length === undefined ) {
for ( name in object )
if ( callback.apply( object[ name ], args ) === false )
break;
} else
for ( ; i < length; )
if ( callback.apply( object[ i++ ], args ) === false )
break;
// 以下是客戶端程序進(jìn)行調(diào)用
} else {
if ( length === undefined ) {
for ( name in object )
if ( callback.call( object[ name ], name, object[ name ] ) === false )
break;
} else
// i表示索引值，value表示DOM元素
for ( var value = object[0];
i < length && callback.call( value, i, value ) !== false;
value = object[++i] ){}
}
return object;
}

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 ) {
.....//處理沒(méi)有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 ) {
。。。//這里是沒(méi)有value時(shí)，是索取返回值的情況，這不是我們討論
}
parts[1] = value;
//如果我使用用$("div").data("a","aaa"))，下面調(diào)用each前的this指的是$("div")這返回的對(duì)象，
this.each(function() {//注意了，這里是以每一個(gè)匹配的元素作為上下文來(lái)執(zhí)行一個(gè)函數(shù)
var self = jQuery( this );
self.triggerHandler( "setData" + part, parts );
//這里在元素上存放數(shù)據(jù)，本質(zhì)還是委托data(element,[key],[value]）來(lái)做的。
//看前面有分析過(guò)了。
//下面data( this, key, value )里的this指的是遍歷整個(gè)jQuery對(duì)象中對(duì)應(yīng)的每個(gè)DOM元素
//$("div")它對(duì)應(yīng)頁(yè)面中一個(gè)<div>數(shù)組。
jQuery.data( this, key, value )<span style="background-color: #ffcc00;">;//這名句會(huì)被循環(huán)多次執(zhí)行，也就是保存數(shù)據(jù)</span>。
//這里就是核心一句話。但要清楚看上面了它是在each（functipn(){}）中的。
self.triggerHandler( "changeData" + part, parts );
});
}, null, value, arguments.length > 1, null, false );
},
//在元素上移除存放的數(shù)據(jù)。具體實(shí)現(xiàn)如下：
removeData: function( key ) {
return this.each(function() {
jQuery.removeData( this, key );
});
}
});

<div id="test2" onclick="test()">test2</div>
<div id="abc3" onclick="test()">test3</div>
<div id="test" onclick="test()">test</div>
<p id="ttt">aaaa</p>
<script>
$(document).ready(function(){
$("#test").click(function(){
alert("JQUERY");
var i=0;
$("#abc3").each(function() {
alert(++i);//只輸出1;因?yàn)橹挥幸粋€(gè)<div id="abc3">
});
alert("----");
var j=1;
$("div").each(function() {//以每一個(gè)匹配的元素作為上下文來(lái)執(zhí)行這個(gè)函數(shù)
$.data(this,"a","wwww");//這里的this就是指$("div")，
//分別遍歷每一個(gè)匹配的元素給它們每一個(gè)對(duì)象{}都保存一個(gè)key/value
alert(j++);//分別輸出1 ，2 ，3 因?yàn)橛腥齻€(gè)<div>元素
});
alert($("#test").data("a"));//返回wwww,
//是不是很驚呀，我沒(méi)有保存在它身上啊，怎么也有值，很明顯是它是查這個(gè)div節(jié)點(diǎn)上有沒(méi)有，
//肯定是有值了，因?yàn)樯厦娼o循環(huán)保存在div這Dom結(jié)點(diǎn)上了。
alert($("#test")===$("div"));//false證明兩新建的對(duì)象不是同一個(gè)。
alert($("div").data("a"));//返回wwww,
//這里也是一樣因?yàn)槭莇iv節(jié)點(diǎn)上都保存了"a"="wwww"這樣一個(gè)鍵值對(duì)了。
});
});
</script>