如何在 jQuery 中添加数据模式目标属性

在 jQuery 中，可以使用 data 方法添加数据到 DOM 元素中，也可以使用 attr 方法添加属性到 DOM 元素中。但如果你想添加特定类型的数据到 DOM 元素中，比如“数据模式目标属性”，该怎么办呢？

这时就需要使用 data-* 属性了。data-* 属性是 HTML5 规范中定义的一种自定义属性，用于存储私有数据，可以通过 JavaScript 或 CSS 选择器进行访问和修改。

下面是使用 jQuery 在 DOM 元素中添加数据模式目标属性的步骤：

1. 选择需要添加数据模式目标属性的 DOM 元素

可以使用常见的 jQuery 选择器语法选择 DOM 元素，例如：

$('button')

2. 使用 data 方法添加数据

使用 data 方法将数据添加到 DOM 元素中。例如，将数据 123 添加到 <button> 元素中：

$('button').data('myData', 123);

3. 使用 attr 方法添加数据模式目标属性

使用 attr 方法将数据模式目标属性添加到 DOM 元素中，其中 data-* 中的 * 部分是自定义名称。例如，使用名称 my-data 添加数据模式目标属性：

$('button').attr('data-my-data', '');

注意，即使不需要存储任何值，也必须提供空字符串作为属性值。这是因为 HTML5 规范中规定，必须将 data-* 属性的值设置为空字符串或非法值，才能标识该属性存在，否则该属性不会被识别为有效。

4. 完整示例

下面是完整的代码示例：

$('button').data('myData', 123);
$('button').attr('data-my-data', '');

使用上述代码，就可以在指定的 DOM 元素中添加数据模式目标属性了。

现在你已经了解了在 jQuery 中添加数据模式目标属性的方法，赶快试试吧！