引:

  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标签进行了操作。

注意:

  1:不要混用

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

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

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

  2:不要相信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的好心帮了你的倒忙。