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

Posted 2023-05-08

【中文标题】jquery 获取带有连字符和区分大小写的 HTML 5 数据属性

【英文标题】：jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity

【发布时间】：2014-05-10 07:45:16

【问题描述】：

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

【问题讨论】：

请注意，使用 .data() 只会在页面加载或使用 .data() 更改时为您提供属性值。如果使用 .attr() 设置属性，则 .data() 不会返回更新后的值。

@Bochu 和任何使用 jQuery 添加或更改的新数据，data() 不会在 DOM 中添加或更改。对于数据和 DOM 之间的 2 方式更改，最好使用 element.dataset

【参考方案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 及以下版本，数据属性不区分大小写，因此：

<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- 前缀已从属性名称中删除。 还会从属性名称中删除任何连字符。 剩余的字符被转换为驼峰式。紧跟在第 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

【讨论】：

不错的资源.. 以前没听说过这个.. +1

这不仅仅是一个 jquery 的东西，这里是规范：developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset 自定义数据属性名称转换为具有以下规则的 DOMStringMap 条目的键： 1. 前缀 data- 是删除（包括破折号）； 2. 对于后跟 ASCII 小写字母 a 到 z 的任何破折号 (U+002D)，将删除破折号并将字母转换为对应的大写字母； 3. 其他字符（包括其他破折号）保持不变。

我发现值得注意的是，使用 jquery 仍然可以通过 hyphenated 名称访问数据属性的值，例如$('<a data-product-id="One2Three"></a>').data('product-id') 将是 One2Three。刚才使用 jQuery 3.3.1 进行了检查，但 1.6 也是如此。

【参考方案2】：

“data-product-id”翻译为“productId”为我工作。