今天无意中遇到 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. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  2. python计算斐波那契数列

    斐波那契数列就是黄金分割数列 第一项加第二项等于第三项,以此类推 第二项加第三项等于第四项 代码如下 这一段代码实现fib(n)函数返回第n项,PrintFN(m,n,i)函数实现输出第i项斐波那契数 ...

  3. (十一) UVC调节亮度

    目录 UVC调节亮度 引入 硬件协议速览 代码框架 属性初始化 属性支持查询 具体属性值获取 具体属性值设置 代码实现 title: UVC调节亮度 date: 2019/4/23 20:30:00 ...

  4. Tomcat系列(2)——Tomcat文件目录7个

    核心部分 bin (运行脚本) conf (配置文件) lib (核心库文件) logs (日志目录) temp (临时目录) webapps (自动装载的应用程序的目录) work (JVM临时文件 ...

  5. Angular+Ionic+RSA实现后端加密前端解密功能

    因业务需要,需要给android应用安装证书,通过读取证书文件内容实现某些功能的控制: 流程:后台通过publicKey对指定内容的文件进行加密,生成文件共客户下载,客户下载后选择该证书文件读取到应用 ...

  6. css/css3 未知元素宽高,垂直居中和水平居中

    未知元素的宽高情况下  垂直居中和水平居中 第一种 flex盒布局 (推荐) /*弹性盒模型*/ /*主轴居中对齐*/ /*侧轴居中对齐*/ .ele{ display:flex; justify-c ...

  7. 试用VS2019正式版

    1.下载地址https://visualstudio.microsoft.com/zh-hans/downloads/2.安装,安装过程比较简单,直接下一步,下一步即可,现在的网速一般下载+安装要2个 ...

  8. Kafka(一)简介

    1.Kafka简介 Kafka已经被很多公司广泛应用,一款实时流式消息组件.发送消息端称为Producer,接收端称为Consumer,Kafka集群有多个kafka实例组成,每个实例称为broker ...

  9. Luogu P2158 仪仗队 题解报告

    题目传送门 [题目大意] 给定一个n×n的点方阵,求站在左下角的点能看到的点数 注意同一条直线上只能看到一个点 [思路分析] 因为是一个方阵,所以可以对称地算,那么对于半个方阵,这里假设是左上的半个方 ...

  10. Windows10配置JDK环境变量

    一. 系统和JDK版本 系统:Windows10 JDK版本:1.8 二. 配置步骤 1. 右键单击“我的电脑” >> 属性 >> 高级系统设置 2. 环境变量 3. 系统变量 ...