jquery中“data-*”说明

        Jquery是一款封装的很好的javascript框架，极大的简化了javascript编程，并且抑郁学习，缩短了程序员入门的时间。但是任何一门技术都不是随随便便可以精通的，世界上也没有100%完美的产品，更何况是代码呢！程序有些地方的漏洞直到真正用的时候才能体现出来。

        刚开始接触前端的时候，根本不知道“data-*”属性，每次遇到事件传值的时候，返回页面在传值的时候会是一件很麻烦的事情。也只会οnclick=“”来传值。直到2017年小程序开发里面有个“data-*”的设置，获取让我感觉到了传值的快感，才让我深入地去了解jquery的“data-*”属性，在实际运用中也发现了几处比较坑的地方。

data-* 自定义数据属性

        HTML5规定可以为元素添加非标准型的属性，只需添加前缀data-，这些属性可以随意添加，随意命名，目的是为元素提供与渲染无关的信息，或提供语义信息。（来自官方手册）

        虽然官方说添加的这些信息都是无关信息，只是用来提供语义信息，可以被当成属性值来获取，修改，而且是自定义的。这个属性的发明对我来说，带来了花式传值，不在局限于之前只会οnclick=" "传值。

        我们用

获取id

为例子来说明问题。

        jquery提供了两种方法来获取 data-* 的值，分别是data（）函数和attr（）函数。原理都是一样，里面两个参数，一个为 data-*里 * 的内容（即名字），只有第一个参数为获取值；如果需要修改值，则添上第二个参数，写上修改的内容。

        data()函数在一次开发的时候，发现了个问题，那就data()函数修改的值是个“假值”。后来在一个大神的博客里对此深度解析时，data()的值进行修改并不会影响到DOM元素上的data-*属性的改变。data()的本质其实是将一个 “cache” 附加到了对象上，并使用了一个特殊的属性名称。也就是DOM元素上的值没发生变化，仅在cache上作了修改，只是显示的改变，刷新页面清掉缓存后，又变回了原来的属性（实际上没变）。