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的好心帮了你的倒忙。