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