为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

沧海一幻觉 2019-11-30 13:53:14
如何使用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"/>
查看完整描述

3 回答

?
慕神8447489

TA贡献1780条经验 获得超1个赞

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的更改意味着数据属性现在被强制转换为小写,因此:


<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中实现自定义属性本身在技术上并不复杂,但是真正的困难在于选择在您自己的项目中使用它们是否合适,以及如何有效地进行处理。最后,请记住,将数据集方法用于页面所依赖的功能还为时过早,因此请确保为不支持的浏览器提供替代方法。


查看完整回答
反对 回复 2019-11-30
?
慕仙森

TA贡献1827条经验 获得超7个赞

我发现值得注意的是,使用jquery仍然可以通过带连字符的名称访问data属性的值,例如$('<a data-product-id="One2Three"></a>').data('product-id')will One2Three。之前使用jQuery 3.3.1进行了检查,但1.6也是如此。

查看完整回答
反对 回复 2019-11-30
  • 3 回答
  • 0 关注
  • 746 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信