JS JQuery获取data-*属性值方法解析

下面是JS JQuery获取data-*属性值方法解析的完整攻略：

1. 什么是data-*属性

在HTML5中，我们可以使用data-*属性来存储页面元素的自定义数据，比如：

<div data-id="1234" data-name="John" data-age="28">John, 28 years old</div>

这里，我们定义了一个div元素，其包含了三个data-*属性，分别为data-id、data-name和data-age，它们的值分别为1234、John和28。这一特性广泛应用于Web开发中，可以方便地保存和传递数据。

2. 如何使用JS获取data-*属性值

获取data-属性值的方法有很多，这里主要讲解在JavaScript和JQuery中如何获取data-属性值。

2.1 使用JavaScript获取data-*属性值

使用JavaScript获取data-*属性值需要通过getAttribute方法获取，代码如下：

var element = document.querySelector('div');
var id = element.getAttribute('data-id');
var name = element.getAttribute('data-name');
var age = element.getAttribute('data-age');
console.log(id, name, age);

这里我们使用了querySelector方法获取了第一个div元素，并使用了getAttribute方法获取了div元素的三个data-*属性的值。

2.2 使用JQuery获取data-*属性值

使用JQuery获取data-*属性值则更加简单，直接使用data方法即可，代码如下：

var element = $('div');
var id = element.data('id');
var name = element.data('name');
var age = element.data('age');
console.log(id, name, age);

这里我们使用了JQuery的$函数获取了第一个div元素，并使用了data方法获取了div元素的三个data-*属性的值。

3. 示例说明

下面通过两条示例来说明如何获取data-*属性值。

3.1 示例1

HTML代码如下：

<div id="userInfo" data-id="123" data-name="John" data-age="28">
  <p>User Information</p>
</div>

JavaScript代码如下：

var userInfo = document.querySelector('#userInfo');
var id = userInfo.getAttribute('data-id');
var name = userInfo.getAttribute('data-name');
var age = userInfo.getAttribute('data-age');
console.log(id, name, age);

这里我们使用了querySelector方法获取ID为userInfo的div元素，并使用了getAttribute方法获取了div元素的三个data-*属性的值。

3.2 示例2

HTML代码如下：

<div class="student" data-id="234" data-name="Lucy" data-age="18">
  <p>Student Information</p>
</div>
<div class="student" data-id="345" data-name="Lily" data-age="20">
  <p>Student Information</p>
</div>

JavaScript代码如下：

var students = $('.student');
students.each(function() {
  var id = $(this).data('id');
  var name = $(this).data('name');
  var age = $(this).data('age');
  console.log(id, name, age);
});

这里我们使用了JQuery的$函数获取class为student的两个div元素，并使用了data方法获取了这两个div元素的三个data-*属性的值，最后使用了each方法遍历了这两个元素并打印了它们的属性值。

4. 总结

以上就是JS JQuery获取data-属性值方法解析的完整攻略。使用getAttribute方法可以获取data-属性值，使用JQuery的data方法可以更加方便地获取data-*属性值。在实际开发中可根据自己的喜好和需求来选择使用哪种方法。