jquery的data、attr、expando
今天无意中遇到 data和 attr的问题
场景是这样
需要给一个标签赋值,data-skin
同事用data赋值
$("#div").data("skin",2131); // 标签上并没有出现 data-href的属性
$("#div").attr("data-skin",2131); // 如果用attr就是 ok的
花了时间弄了下他们的区别
data赋值是存在$.cache中,不是在标签中
attr是通过绑定在标签中
但是,data会先去 $.cache中找,没有则去 data- 属性中
其它情况下,它们互不影响
<div id="div" data-skin="init">
123132
</div> console.log($("#div").data("skin")); // init $.cache中找,没有则去 data- 属性中 $("#div").data("skin",2131); console.log($("#div").data("skin")) //2131 console.log($("#div").attr("data-skin")); //init console.log($("#div")); console.log($.cache);
这个时候 attr绑定的数据已经到标签中
而通过 data绑定的数据在 $.cache中
去看 jquery源码,data不存在时,的确是去拿了attribute的值
$.cache的解构十分简单,是如何对应上dom的呢?
$("#div").data("skin",2131); console.log($("#div"))
我们输出data操作之后的dom,看看有什么不同
有一个键名为 jquery ********** ,键值为 1,刚好和我们的 $.cache的键名 1 相同,这样就能对应起来了
这个字符串由 jquery.expando生成 ,是一个随机字符串
jquery.expando只生成一次,多个dom使用data赋值,他们的这一串是相同的
取的时候 先拿到 id
再去
$.cache['id']就能拿到对应数据了