jquery获取带有连字符和区分大小写的HTML 5数据属性

如何使用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"/>

HTML5允许我们创build自己的自定义属性来存储数据。 自定义属性可以被称为任何我们喜欢的东西，比如variables名称，但是它们需要预先加上单词'data'，而单词之间用破折号隔开。 您可以将“foo”，“bar”和“foo bar”数据属性添加到像这样的input： 

 <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代码的元数据。
  • 元素可以具有任意数量的自定义数据属性。
  • 自定义数据属性只能在更适合的元素或属性不存在的情况下使用。 例如，您不应该在图像上创build自定义“文本描述”属性。 现有的alt属性是一个更好的select。
  • HTML5规范明确指出data-*属性不应该被第三方应用程序使用。 这意味着search引擎等程序在准备search结果时不应该依赖自定义数据属性。

在HTML5中实现自定义属性在技术上本身并不复杂，但是真正的困难在于select在自己的项目中使用它们是否恰当，以及如何有效地使用它们。 最后，请记住对于您的页面所依赖的函数开始使用数据集方法还有一点时间，所以一定要为不支持的浏览器提供一个替代scheme。

DEMO

Interesting Posts