如何操作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？

回答

相关问题