如何使用jquery
.data()获取数据属性？在这种情况下html5 data- *属性转换为小写和驼峰？使用自定义属性存储数据时要遵循的所有主要规则是什么？
<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允许我们创建自己的自定义属性来存储数据。自定义属性可以被称为任何我们喜欢的，像变量名称，但他们需要在前面加上“数据”一词，单词用短划线分隔。您可以将“foo”，“bar”和“foo bar”数据属性添加到输入，如下所示：
<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- *属性都成为元素的dataset对象的属性。新的属性名称派生如下：
>属性名称将转换为全部小写字母。
>从属性名称中删除数据前缀。
>任何连字符也从属性名称中删除。
>其余字符将转换为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中实现自定义属性本身在技术上并不复杂，但真正的困难在于选择在自己的项目中使用它们是否合适，如果是这样，如何有效地使用它们。最后，请记住，对于您的页面所依赖的函数，开始使用数据集方法还有点早，因此请务必为不支持的浏览器提供一个替代方案。
