如何操作HTML5數據 - 使用jQuery？

對於HTML5的DOM元素 -如何操作HTML5數據 - 使用jQuery？

<div style="border:1px solid; width:100px; background:#FFF" class="btn" data-btnNo="1">Button</div>

兩者有什麼下面的javascript線之間的區別？

$(this).attr("data-btnNo");

和

$(this).data("btnNo");

據我tests on JSFiddle，我看到的第一個作品，而第二個則沒有。我正試圖理解'爲什麼？'

jQuery是否爲每個DOM元素維護一個單獨的數據？根據JQuery doc of .data()，我明白了.data（）會將HTML5的data-*中的值存入它自己的數據中。相反嗎？如果我做$(this).data("myData","jkl345");，它會在$(this)上創建HTML5屬性data-myData="jkl345"？

我也遇到jQuery.data()似乎擴展.data（）應用數據到任何DOM元素。

後來補充：似乎有是在 'jQuery Data vs Attr?' 的答案。唯一沒有回答的是$(this).data("newDataAttri","myVal")創建data-newDataAttri="myVal"？我開始相信它不會，只會將它存儲在DOM節點中。任何人都可以確認嗎？

來源

2013-03-01 Lord Loh.

'$（this）.data（「btnno」）;'作品（全部小寫）。 – 2013-03-01 17:21:16

@RocketHazmat是:-)你說得對。我剛剛遇到了http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes，其中提到「數據-'之後應該至少有一個不是AZ的字符。 – 2013-03-01 17:23:12

@ManseUK - 謝謝。這回答了我想知道的很多東西。它沒有出現在我的搜索中。我想我應該使用更簡單的關鍵字。 – 2013-03-01 17:26:08

幫助調試使用控制檯並做console.log($('.btn').data());您將看到對象和鍵。您需要使用'btnno'小寫'n'

來源

2013-03-01 17:27:38 CR41G14

我曾嘗試過console.log（），但它並沒有讓我有太多進展。正如@RocketHazmat也指出的，小寫不起作用:-) – 2013-03-01 17:29:38

如何操作HTML5數據 - 使用jQuery？

回答

相關問題