看jQuery.data(element,[key],[value])源代码后可以知道，每一个element都会有自己的一个{key:value}对象保存着数据，所以新建的对象就算有key相同它也不会覆盖原来存在的对象key所对应的value，因为新对象保存是是在另一个{key:value}对象中。
接下来要分析data([key],[value])源代码使用到了each(callback)，在分析它之前先看下each(callback)用法和源代码。
Js代码：
复制代码 代码如下:
<div>test2</div>
<div>test3</div>
<div>test</div>
<p>aaaa</p>
<script>
$(document).ready(function(){
$("#test").click(function(){
alert("JQUERY");
var i=0;
$("#abc3").each(function() {
alert(++i);//只输出1;因为只有一个<div>
});
alert("----");
var j=0;
$("div").each(function() {
alert(++j);//分别输出1，2，3;因为有三个<div>所以循环三遍
});
});
});
</script>
现在来看each方法的具体实现如下：
jQuery.fn = jQuery.prototype = {
each: function( callback, args ) {
return jQuery.each( this, callback, args );
}
}
可以看到它返回的是全局的each方法，并且将自身jQuery对象做为参数给它，全局的each方法的具体实现如下：
// args 作为内部成员的调用来使用
each: function( object, callback, args ) {
var name, i = 0, length = object.length; // 当object为jQuery对象时，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;
// 以下是客户端程序进行调用
} 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;
}
现在我们关注下 for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} 这句代码；其中object[0]取得jQuery对象中的第一个DOM元素，通过for循环，
得到遍历整个jQuery对象中对应的每个DOM元素，通过callback.call( value,i,value); 将callback的this对象指向value对象，并且传递两个参数,i表示索引值，value表示DOM元素；其中callback是类似于 function(index, elem) { } 的方法。所以就得到 $("").each(function(index, elem){ });
再来看看data([key],[value])的源代码
Js代码：
复制代码 代码如下:
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 ) {
。。。//这里是没有value时，是索取返回值的情况，这不是我们讨论
}
parts[1] = value;
//如果我使用用$("div").data("a","aaa"))，下面调用each前的this指的是$("div")这返回的对象，
this.each(function() {//注意了，这里是以每一个匹配的元素作为上下文来执行一个函数
var self = jQuery( this );
self.triggerHandler( "setData" + part, parts );
//这里在元素上存放数据，本质还是委托data(element,[key],[value]）来做的。
//看前面有分析过了。
//下面data( this, key, value )里的this指的是遍历整个jQuery对象中对应的每个DOM元素
//$("div")它对应页面中一个<div>数组。
jQuery.data( this, key, value )<span>;//这名句会被循环多次执行，也就是保存数据</span>。
//这里就是核心一句话。但要清楚看上面了它是在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 );
});
}
});
如果对于data([key],[value])的源代码不是很了解，好吧，我就用一个例子来模仿实现它吧。
Js代码：
复制代码 代码如下: