htmldata,html中data属性
jquery操作HTML data全局属性缓存的坑
data-* 全局属性 是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换。
简单的说就是html元素可以通过data-*属性存一些数据，类似于一个map，如果我们想在html的元素上额外的存一些东西是非常方便的。
一：读取是没问题的
比如我们读取p中data-num的数据：
p id="p1" data-num="1"
dataSet
/p
分别用jquery和js的方法读取，结果都是1。
二：修改就有坑了
但是修改的data-num的时候就有意思了：
jquery设置data-num中的值为2
jquery读取值的值是2
js读取值的值是1，奇怪，查看下html元素
data-num的值还是1。。。
这个坑，坑了我一早上，后来百度下才知道，原来jquery设置的值是在缓存里。。。
果断查看下jquery的源码，真相都在代码里：
三：正确的使用方式
如果需要修改dom元素上的data必须用js的方式：
document.getElementById("p1").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()方法。
HTML5里的data-*是用来做什么的？
那个其实不属于正规的HTML属性，是jquery这个库专门用来寻址的一种自定属性，其他库也有类似的这种；利用它的目的是库自定义的属性，所以可以在库中更方便的区分其他HTML自带的属性，用获得的值来做的事情很多，比如data-target=id2，可以取得id2这个相关联的DOM元素
HTML data 元素
data 元素表示其内容，以及值属性中这些内容的机器可读形式。Edge、Firefox 和 Safari 都支持 data 元素。
value 属性是必需的，其值必须以机器可读的格式表示元素的内容。 HTML 标准建议 如下：
怎样获取html5的data
1、浏览器必须能够支持 querySelector/querySelectorAll 方法
2、只能从获取元素的方法提供 dataset。比如事件处理器中参数 e 的 e.tartget. dataset 则是空对象。
3、单个的 querySelector() 是经过 querySelectorAll()，当中遍历数组可以获取html的data值。
html 的data自定义属性能随便修改吗
没问题的。不过你最好就是按照“data-自定义名"的格式来进行定义。因为data自定义属性属于html5的新特性，它可以通过js进行设置和通过其名字进行索引修改元素样式。
例子：
div?id="dt"?data-wq="123"html?的data自定义属性能随便修改吗？/div
js设置:
document.getElementById('dt').dataset.new=?'321';//变成了div?id="dt"?data-new="231"?data-wq="123"/div
css样式设置：
style?type="text/css"
????????[data-wq]
????????{
????????????background-color:?red;
????????}
/style
此时元素背景为红色的了。
当然如果你不按照规定格式来自定义的话是用不到上面的方的，不过可以通过js的
getAttribute/setAttribute
方法来随意命名。