jquery获取data-属性（jquery获取value的方法）

简介：

在 web 开发中，我们常常需要从 DOM 元素中提取不同的信息，其中 data-属性可以为元素提供存储数据的方法。jQuery 提供了一种简单的方法来获取这些 data-属性的值。

多级标题：

一、什么是 data-属性？

二、jQuery 获取 data-属性的值

三、实例演示

内容详细说明：

一、什么是 data-属性？

data-属性是 HTML5 中的一个新特性，允许我们为 HTML 元素添加自定义数据属性。这些属性的名称应该以 "data-" 开头。

例如：

```

按钮

```

在该示例中，我们添加了一个自定义属性 "data-id"，并设置了其值为 "01"。这样，我们就可以将更多的信息附加到元素上，从而方便地从 DOM 中提取这些数据。

二、jQuery 获取 data-属性的值

jQuery 提供了 data() 方法来读取元素的 data-属性。该方法接收一个字符串作为参数，该参数代表要读取的属性名称。

例如：

```javascript

$(document).ready(function(){

var idValue = $('button').data('id');

console.log(idValue);

});

```

在该示例中，我们使用了 jQuery 的 $() 函数来选择了一个按钮元素，并使用了 data() 方法来获取其 "data-id" 属性的值。最后，我们在控制台输出了该值。

三、实例演示

下面的代码演示了如何使用 data-属性和 jQuery 获取元素属性值：

```html

按钮1

按钮2

按钮3

按钮4

```

在上述示例中，我们为四个按钮元素添加了不同的 data-属性。然后，我们使用了 jQuery 的 $() 函数来选择这些元素，并使用了 data() 方法来读取它们的属性值，并在控制台上输出了这些值。