html5元素属性data-*

html5引入了元素新属性data-*（其中*可以是任意字符），我们可以通过javascript的原生方法setAttribute（data-*，value）方法来给元素设置这样的属性，并且该属性值会显示在dom结点上，同时通过getAttribute（）方法来获取这个属性值；

同时，h5引入了dataset来实现属性data-*的读取和设置；

但是，如果通过jQuery或zepto的data（）方法来修改元素的data-*属性，我们发现dom元素的那个data-*属性并没有发生变化，并且此时若用dataset或getAttribute方法来获取我们刚刚用jQuery或zepto的data方法设置的data-*属性，还是原来没有修改之前的；

类似，如果先用 jQuery 读取一次，然后再用标准 JavaScript 修改，再用 jQuery 读取第二次，则发现读取的数据仍是修改之前的数据。

可是如果没有经过 jQuery 读取直接用标准 JavaScript 修改，这时再用 jQuery 读取，读到的就是新数据了。

这是因为，标准 JavaScript 直接对 DOM 进行读写（和我们设想的一致），但是 jQuery 不同。jQuery 的内部也维护着一份这些
data 数据。当第一次使用 jQuery 读取时，数据被从 DOM 读到

jQuery.cache

保存起来，以后使用
jQuery 修改时，修改的是内部维护的这个数据，同时再次读取也会从 jQuery 内部而非 DOM 读取数据。jQuery 如此设计的初衷就是为了减少 DOM 读写从而提高性能。

所以我们使用时不要混用原始javascript和jQuery，要么一直用标准 JavaScript，要么一直用 jQuery。