jQuery 获取data-* 属性详解
简介
在前端开发中，我们经常需要从 HTML 元素中获取自定义的数据。为了解决这个问题，HTML5 引入了一个新的属性 data-*，可以用来在元素上存储自定义数据。而在 jQuery 中，我们可以通过 data() 方法轻松地获取和设置这些自定义的数据。
本文将详细介绍 jQuery 中如何获取 data-* 属性的值，并用实例代码演示其用法和应用场景。
获取 data-* 属性值的方法
1. 通过 data() 方法获取属性值
在 jQuery 中，我们可以通过 data() 方法来获取元素的 data-* 属性的值。该方法返回一个对象，其中包含了所有 data-* 属性的键值对。
下面是一个示例，展示如何使用 data() 方法获取 data-* 属性的值：
// HTML 代码
<div id="myDiv" data-name="John" data-age="30"></div>
// JavaScript 代码
var name = $('#myDiv').data('name');
var age = $('#myDiv').data('age');
console.log(name); // 输出 "John"
console.log(age); // 输出 30
在上面的代码中，data() 方法传入 data-* 属性的名称作为参数，然后返回该属性的值。
需要注意的是，data() 方法会自动将属性值的类型转换为相应的 JavaScript 类型。例如，如果 data-* 属性的值是一个数字，那么 data() 方法返回的就是一个数值类型的值。
2. 通过 attr() 方法获取属性值
除了使用 data() 方法，我们还可以使用 attr() 方法来获取 data-* 属性的值。attr() 方法是 jQuery 提供的用于操作元素属性的方法。
下面是一个示例，展示如何使用 attr() 方法获取 data-* 属性的值：
// HTML 代码
<div id="myDiv" data-name="John" data-age="30"></div>
// JavaScript 代码
var name = $('#myDiv').attr('data-name');
var age = $('#myDiv').attr('data-age');
console.log(name); // 输出 "John"
console.log(age); // 输出 "30"
与 data() 方法不同的是，attr() 方法返回的是一个字符串类型的值，无论 data-* 属性的值是什么类型。
使用示例
示例 1：存储和获取用户信息
假设我们需要在一个网页中存储和获取用户的姓名和年龄信息。我们可以通过在 HTML 元素上添加 data-* 属性来实现这个功能。
以下是一个基本的 HTML 结构：
<div id="user" data-name="John Doe" data-age="25"></div>
现在，我们可以使用 jQuery 来获取和显示用户信息：
// 获取用户信息
var name = $('#user').data('name');
var age = $('#user').data('age');
// 显示用户信息
$('#user-info').text('姓名：' + name + '，年龄：' + age + '岁');
这样，我们就成功地从 data-* 属性中获取了用户的姓名和年龄，并将其显示在页面上。
示例 2：动态更新数据
data-* 属性的另一个重要用途是用于存储和更新动态数据。例如，我们可以使用 data-* 属性来存储和更新用户的余额。
以下是一个示例：
<div id="user" data-balance="100"></div>
<button id="btn-add">增加 50 元</button>
<button id="btn-subtract">减少 50 元</button>
我们可以使用以下 JavaScript 代码来实现增加和减少余额的功能：
// 增加余额
$('#btn-add').click(function() {
var balance = $('#user').data('balance');
balance += 50;
$('#user').data('balance', balance);
});
// 减少余额
$('#btn-subtract').click(function() {
var balance = $('#user').data('balance');
balance -= 50;
$('#user').data('balance', balance);
});
在这个例子中，当用户点击 "增加 50 元" 按钮时，我们从 data-* 属性中获取当前余额，然后增加 50 元，并将更新后的余额存储回 data-*
