jQuery 获取数据属性 - Javascript

jQuery 是一个广泛应用于前端开发的 JavaScript 库。它简化了 JavaScript 与 HTML 文档、DOM 元素、事件处理、动画效果等的交互操作。在 jQuery 中，我们可以很方便地获取、设置以及操作数据属性。

数据属性是指 HTML 元素上的自定义属性，以 data- 前缀开头。它们被用于存储与元素相关的特定数据，可以通过 jQuery 轻松访问和操作。

获取数据属性

要使用 jQuery 获取数据属性，我们可以使用 .data() 方法。

语法

$(selector).data(key)

上述代码中，$(selector) 用于找到具有指定数据属性的元素，key 是要获取的数据属性的名称。

示例

HTML 代码：

<div id="myElement" data-name="John" data-age="25"></div>

JavaScript 代码：

var name = $('#myElement').data('name');
var age = $('#myElement').data('age');

console.log(name); // 输出：John
console.log(age); // 输出：25

在上述示例中，我们通过指定数据属性的名称来获取元素的数据属性值。.data() 方法会自动根据指定的数据属性名称在元素上进行匹配，并返回对应的值。

设置数据属性

要使用 jQuery 设置数据属性，我们可以使用 .data() 方法。

语法

$(selector).data(key, value)

上述代码中，$(selector) 用于找到具有指定数据属性的元素，key 是要设置的数据属性的名称，value 是要设置的数据属性的值。

示例

HTML 代码：

<div id="myElement"></div>

JavaScript 代码：

$('#myElement').data('name', 'John');
$('#myElement').data('age', 25);

var name = $('#myElement').data('name');
var age = $('#myElement').data('age');

console.log(name); // 输出：John
console.log(age); // 输出：25

在上述示例中，我们通过使用 .data() 方法来设置元素的数据属性值。在之后，我们又通过 .data() 方法获取了设置后的值。

总结

jQuery 提供了简便的方式来获取和设置 HTML 元素的数据属性。通过使用 .data() 方法，我们可以避免直接操作 HTML 元素的 data- 属性，使代码更加简洁和可读性更高。

以上是关于使用 jQuery 获取和设置数据属性的介绍，希望对你有所帮助！

相关链接：

• jQuery 官方文档
• jQuery .data() 方法文档