今天无意中遇到 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的更多相关文章

  1. jQuery.data() 与 jQuery(elem).data()源码解读

    之前一直以为 jQuery(elem).data()是在内部调用了 jQuery.data(),看了代码后发现不是.但是这两个还是需要放在一起看,因为它们内部都使用了jQuery的数据缓存机制.好吧, ...

  2. jQuery 中 data 方法的实现原理

    前言:jQuery 作为前端使用最多最广泛的 JS 库,其源码每个 JSer 都应该研究一下.早就打算看却一直被各种事拖着,上次某公司面试时被问到 jQuery 中 data 方法是如何实现的,结果答 ...

  3. jQuery 的.data()方法

    jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to ...

  4. jQuery的data()方法

    jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to ...

  5. HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  6. html5的自定义data-*属性和jquery的data()方法的使用示例

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...

  7. html5的自定义data-*属性与jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  8. html5的自定义data-*属性和jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  9. Jquery下控制backgroundPosition位置的问题/jquery查找data id相等的元素

    1:想通过控制backgroundPosition 来实现动态效果: $(this).animate({"background-positionY":-13},1); //但是火狐 ...

  10. jquery中data()和js中dataset属性的区别

    INTRO html的标签属性data-允许用户自定义属性.原生javascript和jquery分别定义了dataset属性和data()方法对标签中的data属性进行操作. 取值: 如我们定义这样 ...

随机推荐

  1. Java基础 -- 深入理解迭代器

    在Java基础 -- 持有对象(容器)已经详细介绍到,集合(Collection)的种类有很多种,比如ArrayList.LinkedList.HashSet.... 由于集合的内部结构不同,很多时候 ...

  2. UVA - 11427 Expect the Expected (概率dp)

    Some mathematical background. This problem asks you to compute the expected value of a random variab ...

  3. 《Exception团队》第一次作业:团队亮相

    一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 深入了解软件思想,强化编程技术 二.正文 1. ...

  4. Dynamics CRM 如何修复 Access Is Denied - ObjectTypeCode: 2500 的错误

    最近被 Dynamics CRM 的权限配置问题恶心了一个星期,老是报“Access Is Denied”,几经波折,最后终于找到一个比较合适的解决方案,写个博客 mark 下来,方便以后查看. 首先 ...

  5. Win10+Ubuntu18.04双系统安装

    Win10+Ubuntu18.04 亲测UEFI启动模式双硬盘+双系统成功安装经验 https://blog.csdn.net/xrinosvip/article/details/80428133 分 ...

  6. Ext.Net的一例Ext Undefined解决办法

    在运行的产品里发现了一例Ext Undefined报错.经过仔细排查原因是一个Ext.net按钮控件前端显示部分使用了<% if()  <%> 动态控制输出Html脚本(有对应的后端 ...

  7. 如何使用门罗币远程节点remote node?

    当使用门罗币钱包的时候,都需要启动monerod,用来同步门罗币区块. 但是因为区块体积目前已经超过40G了, 所以需要花费很多天时间才能把数据同步完. 这对于使用门罗币非常的不方便. 远程节点rem ...

  8. THUWC2019 GG记

    所以要什么时候才不会出现像这样的滚粗记呢? Day-?~Day-4 我也不清楚具体干了什么 不过学了很多东西,至少相对于去年还是个小菜鸡,今年已经变成大菜鸡了 Day-3~Day-1 几乎就是复习前面 ...

  9. JDK8源码阅读之Collection及相关方法

    最近面试总会被问到JDK8中的一些新特性,所以闲下来抽时间看了一下8的源码,目前主要看的是数据结构部分,特此记录一下. 新增函数式接口,实现该接口的可以直接用lambda表达式. default和st ...

  10. jQuery mouse and lunbo

    自动轮播 和 鼠标事件var arr = ["images/d.jpg", "images/q.jpg", "images/c.jpg", ...