如何使用jquery获取数据属性.data()?在哪种情况下html5data-*属性会转换为小写字母和驼峰字母?使用自定义属性存储数据时应遵循的所有主要规则是什么?
.data()
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允许我们创建自己的自定义属性来存储数据。可以将自定义属性称为任何我们喜欢的名称,例如变量名,但是它们必须以单词“ data”开头,单词之间用短划线隔开。您可以将“ 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及更高版本(包括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的更改意味着数据属性现在被强制转换为小写,因此:
只能通过访问
$('.myButton').data('productid');
任何data-*属性都将成为元素的数据集对象的属性。新属性名称的派生如下:
data-
请注意,原始属性名称data-product- id已productId在数据集对象中转换为。命名data-*属性时必须考虑名称转换过程。由于属性名称会转换为小写,因此最好避免使用大写字母。以下示例显示了几个属性名称如何转换为数据集属性。
data-product- id
productId
"data-productId" translates to "productid" "data-product-id" translates to "productId" "data-PRODUCT-ID" translates to "productId" "data-ProDUctId" translates to "productid"
注意:
alt
在HTML5中实现自定义属性本身在技术上并不复杂,但是真正的困难在于选择是否适合在自己的项目中使用它们,以及如何有效地进行处理。最后,请记住,将数据集方法用于页面所依赖的功能还为时过早,因此请确保为不支持的浏览器提供替代方法。