jQuery技术

jQuery对象数据缓存Cache原理及jQuery.data详解(3)

字号+ 作者:H5之家 来源:H5之家 2015-11-14 12:35 我要评论( )

divtest2/div divtest3/div divtest/div paaaa/p script $(document).ready(function(){ $("#test").click(function(){ alert("JQUERY"); var i=0; $("#abc3").each(function() { alert(++i);//只输出1;因为只有一


<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的源代码。下载地址:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
a