<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=1;
$("div").each(function() {//以每一个匹配的元素作为上下文来执行这个函数
$.data(this,"a","wwww");//这里的this就是指$("div"),
//分别遍历每一个匹配的元素给它们每一个对象{}都保存一个key/value
alert(j++);//分别输出1 ,2 ,3 因为有三个<div>元素
});
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的源代码。下载地址: