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']就能拿到对应数据了
jquery的data、attr、expando的更多相关文章
- jQuery.data() 与 jQuery(elem).data()源码解读
之前一直以为 jQuery(elem).data()是在内部调用了 jQuery.data(),看了代码后发现不是.但是这两个还是需要放在一起看,因为它们内部都使用了jQuery的数据缓存机制.好吧, ...
- jQuery 中 data 方法的实现原理
前言:jQuery 作为前端使用最多最广泛的 JS 库,其源码每个 JSer 都应该研究一下.早就打算看却一直被各种事拖着,上次某公司面试时被问到 jQuery 中 data 方法是如何实现的,结果答 ...
- jQuery 的.data()方法
jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to ...
- jQuery的data()方法
jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to ...
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- html5的自定义data-*属性和jquery的data()方法的使用示例
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...
- html5的自定义data-*属性与jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- html5的自定义data-*属性和jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- Jquery下控制backgroundPosition位置的问题/jquery查找data id相等的元素
1:想通过控制backgroundPosition 来实现动态效果: $(this).animate({"background-positionY":-13},1); //但是火狐 ...
- jquery中data()和js中dataset属性的区别
INTRO html的标签属性data-允许用户自定义属性.原生javascript和jquery分别定义了dataset属性和data()方法对标签中的data属性进行操作. 取值: 如我们定义这样 ...
随机推荐
- Java基础 -- 深入理解迭代器
在Java基础 -- 持有对象(容器)已经详细介绍到,集合(Collection)的种类有很多种,比如ArrayList.LinkedList.HashSet.... 由于集合的内部结构不同,很多时候 ...
- UVA - 11427 Expect the Expected (概率dp)
Some mathematical background. This problem asks you to compute the expected value of a random variab ...
- 《Exception团队》第一次作业:团队亮相
一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 深入了解软件思想,强化编程技术 二.正文 1. ...
- Dynamics CRM 如何修复 Access Is Denied - ObjectTypeCode: 2500 的错误
最近被 Dynamics CRM 的权限配置问题恶心了一个星期,老是报“Access Is Denied”,几经波折,最后终于找到一个比较合适的解决方案,写个博客 mark 下来,方便以后查看. 首先 ...
- Win10+Ubuntu18.04双系统安装
Win10+Ubuntu18.04 亲测UEFI启动模式双硬盘+双系统成功安装经验 https://blog.csdn.net/xrinosvip/article/details/80428133 分 ...
- Ext.Net的一例Ext Undefined解决办法
在运行的产品里发现了一例Ext Undefined报错.经过仔细排查原因是一个Ext.net按钮控件前端显示部分使用了<% if() <%> 动态控制输出Html脚本(有对应的后端 ...
- 如何使用门罗币远程节点remote node?
当使用门罗币钱包的时候,都需要启动monerod,用来同步门罗币区块. 但是因为区块体积目前已经超过40G了, 所以需要花费很多天时间才能把数据同步完. 这对于使用门罗币非常的不方便. 远程节点rem ...
- THUWC2019 GG记
所以要什么时候才不会出现像这样的滚粗记呢? Day-?~Day-4 我也不清楚具体干了什么 不过学了很多东西,至少相对于去年还是个小菜鸡,今年已经变成大菜鸡了 Day-3~Day-1 几乎就是复习前面 ...
- JDK8源码阅读之Collection及相关方法
最近面试总会被问到JDK8中的一些新特性,所以闲下来抽时间看了一下8的源码,目前主要看的是数据结构部分,特此记录一下. 新增函数式接口,实现该接口的可以直接用lambda表达式. default和st ...
- jQuery mouse and lunbo
自动轮播 和 鼠标事件var arr = ["images/d.jpg", "images/q.jpg", "images/c.jpg", ...