data-* 全局属性 是一类被称为自定义数据属性的属性, 它赋予我们在所有 html 元素上嵌入自定义数据属性的能力, 并可以通过脚本 (一般指 JavaScript) 与 HTML 之间进行专有数据的交换.
简单的说就是 HTML 元素可以通过 data-* 属性存一些数据, 类似于一个 map, 如果我们想在 HTML 的元素上额外的存一些东西是非常方便的.
一: 读取是没问题的
比如我们读取 div 中 data-num 的数据:
- <div id="div1" data-num="1">
- dataSet
- </div>
分别用 jQuery 和 JS 的方法读取, 结果都是 1.
二: 修改就有坑了
但是修改的 data-num 的时候就有意思了:
jQuery 设置 data-num 中的值为 2
jQuery 读取值的值是 2
JS 读取值的值是 1, 奇怪, 查看下 HTML 元素
data-num 的值还是 1...
这个坑, 坑了我一早上, 后来百度下才知道, 原来 jQuery 设置的值是在缓存里...
果断查看下 jQuery 的源码, 真相都在代码里:
三: 正确的使用方式
如果需要修改 dom 元素上的 data 必须用 JS 的方式:
document.getElementById("div1").dataset.num = "3"
四: 结论
jQuery 用缓存的方式, 无疑是为了提高读写的效率, 但是缓存是个双刃剑, 方便我们使用的同时往往还是带来困扰. 建议对 data 的操作要统一, 都用 jQuery 或者都用 JS 方式, 不要混着用, 如果要改变 dom 上元素的值那只能用 JS 的方式.
PS: 类似缓存的坑还有 java 中的 Integer 类, Integer 中的 - 128 到 127 的值是存在缓存中的
所以两个 Integer 的值相互比较的时候, 如果值在 - 128 和 127 之间, 两个数相同, 用 == 号会返回 true, 在 - 128 和 127 范围之外会返回 false, 给人造成额外的困扰, 切记在 java 中 Integer 的比较一定要用 equals() 方法.
来源: https://www.cnblogs.com/zhanyd/p/11254936.html