jquery中data()和js中dataset属性的区别

INTRO

　　html的标签属性data-允许用户自定义属性。原生javascript和jquery分别定义了dataset属性和data()方法对标签中的data属性进行操作。

取值:

　　如我们定义这样两个标签：　　

<h1 data-attrname="balabala"></h1>
<h2 data-attrname="[1,2,3,4]"></h2>

　　javascript的访问方式是dataset.attrname。我们分别访问h1和h2标签的attrname会得到"balabala"和"[1,2,3,4]"两个字符串。

　　jquery的访问方式是data("attrname")。访问两个标签的attrname会得到"balabala"和[1,2,3,4]。

　　在取值的时候JQuery可以帮我们直接还原数据类型。

赋值：

　　Javascript对data自定义属性的赋值操作是dataset.attrname="new value"。  也可以这样赋值：data.attrname=true, =123, =[1,2,3]。当然正如上面说的，再拿到它们的时候依然只是字符串。

　　JQuery对data自定义属性的赋值操作是data("attrname","new value")。同样可以这样赋值：data("attrname",123),data("attrname",[1,2,3]),data("attrname",true)。不同的是它不会“好心”的帮我们转换为字符串，会保留原来的数据类型。

　　

　　这里你可能会非常痛恨JS的“好心”。但其实，真相是它“好心”的还不够。

　　HTML本身只支持字符串。JS的好心是帮你把所有类型转换成字符串，JQuery的“好心”是它根本就不相信HTML标签。

　　因为如果在赋值的过程中仔细观察标签属性就会发现，只有JS对HTML标签进行了操作。

注意:

　　1st：不要混用

　　所以当用JQUERY进行赋值的之后，JS是访问不到的。

　　你可能会好奇，反过来呢？当然是。。。。也访问不到╮(╯▽╰)╭

　　JQUERY的data()访问的逻辑是，如果曾经用data()赋值过，就会装作不认识HTML标签去找赋过的值，如果没有在去找“妈妈”要。

　　2nd:不要相信JS的“好心”

　　针对没那么“好心”的JS，聪明的孩子可能会想到两个解决办法：eval()，JSON。

　　如果标签是这样的<h1 data-attrname="[1,2,3]"></h1>。eval(),和JSON.parse()都会给你你想要的。

　　但如果是用JS进行赋值dataset.attrname=[1,2,3,4];  JS会帮你转换为"1,2,3,4"。如果你用了eval()就会拿到number 4。至于JSON。。。它根本就不认识这个货。

　　所以如果你就是想用js就老老实实的赋值dataset.attrname="[1,2,3,4]";别让JS的好心帮了你的倒忙。