现在我们关注下 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){ });
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")它对应页面中一个
数组。
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 );
});
}
});
如果对于data([key],[value])的源代码不是很了解,好吧,我就用一个例子来模仿实现它吧。
Js代码:
代码如下:
test2
test3
test
aaaa
输出1;因为只有一个
});
alert("----");
var j=1;
$("div").each(function() {//以每一个匹配的元素作为上下文来执行这个函数
$.data(this,"a","wwww");//这里的this就是指$("div"),
//分别遍历每一个匹配的元素给它们每一个对象{}都保存一个key/value
alert(j++);//分别输出1 ,2 ,3 因为有三个
元素
});
alert($("#test").data("a"));//返回wwww,
//是不是很惊呀,我没有保存在它身上啊,怎么也有值,很明显是它是查这个div节点上有没有,
//肯定是有值了,因为上面给循环保存在div这Dom结点上了。
alert($("#test")===$("div"));//false证明两新建的对象不是同一个。
alert($("div").data("a"));//返回wwww,
//这里也是一样因为是div节点上都保存了"a"="wwww"这样一个键值对了。
});
});
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