Question

如何使用jquery .data()获取数据属性？在哪种情况下，html5 data-*属性转换为小写和camelcase？使用自定义属性存储数据时要遵循的主要规则是什么？

<input type="button" class="myButton" value="click me" data-productId="abc"/>
<input type="button" class="myButton" value="click me" data-product-id="abc"/>
<input type="button" class="myButton" value="click me" data-PRODUCT-ID="abc"/>
<input type="button" class="myButton" value="click me" data-ProDUctId="abc"/>

Answer 1

HTML5允许我们创建自己的自定义属性来存储数据。自定义属性可以被称为任何我们喜欢的东西，比如变量名称，但是它们需要加上单词＆＃39; data＆＃39;，并且单词用短划线分隔。你可以添加＆＃34; foo＆＃34;，＆＃34; bar＆＃34;和＆＃34; foo bar＆＃34;数据属性输入到这样的输入：

<input type="button" class="myButton" value="click me" data-foo="bar" 
data-bar="baz" data-foo-bar="true">

jQuery的.data()方法可让您访问data-*个属性。

使用jQuery（包括版本1.4），数据属性不区分大小写，因此：

<input type="button" class="myButton" value="click me" data-productId="abc"/>

可以通过

访问

$('.myButton').data('productId');

jQuery 1.5和1.6

但是，jQuery 1.5和1.6中的更改意味着数据属性现在被强制为小写，因此：

<input type="button" class="myButton" value="click me" data-productId="abc"/>

只能通过

访问

$('.myButton').data('productid');

任何data-*属性都将成为元素数据集对象的属性。新属性名称的推导如下：

属性名称将转换为全部小写字母。
从属性名称中删除data-前缀。
也会从属性名称中删除任何连字符。
其余字符将转换为CamelCase。紧接在步骤3中删除的连字符后面的字符变为大写。

请注意，原始属性名称data-product-id已在数据集对象中转换为productId。在命名data-*属性时，必须考虑名称转换过程。由于属性名称转换为小写，因此最好避免使用大写字母。以下示例显示了多个属性名称如何转换为数据集属性。

"data-productId"  translates to "productid"
"data-product-id" translates to "productId"
"data-PRODUCT-ID" translates to "productId"
"data-ProDUctId"  translates to "productid"

注意：

自定义数据属性通常用于存储有助于/简化JavaScript代码的元数据。

元素可以包含任意数量的自定义数据属性。

只有在不存在更合适的元素或属性时才应使用自定义数据属性。例如，您不应在图像上创建自定义“文本描述”属性。现有的alt属性是更好的选择。

HTML5规范明确规定第三方应用程序不应使用data-*属性。这意味着搜索引擎等程序在准备搜索结果时不应依赖自定义数据属性。

在HTML5中实现自定义属性本身并不复杂，但真正的困难在于选择在自己的项目中使用它们是否合适，如果是，那么如何有效地进行。最后，请记住，对于您的网页所依赖的功能，开始使用数据集方法还为时尚早，因此请务必为不支持的浏览器提供替代方案。

<强> DEMO

Answer 2

“ data-product-id”转化为对我有用的“ productId”。

jquery使用连字符和区分大小写获取HTML 5数据属性

2 个答案: