【发布时间】：2013-02-16 06:46:47
【问题描述】：
对于 HTML5 DOM 元素 -
<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 节点中。谁能证实这一点？
【问题讨论】：
-
$(this).data("btnno");有效（全部小写）。 -
@RocketHazmat 是的 :-) 你是对的。我刚刚遇到w3.org/TR/2011/WD-html5-20110525/…，它提到
data-后面应该至少有一个不是A-Z 的字符。 -
@ManseUK - 谢谢。这回答了很多我想知道的问题。它没有出现在我的搜索中。我想我应该使用更简单的关键字。
标签： jquery html html5-data