### JS JQuery 获取 data-* 属性值方法解析
在前端开发中，`data-*`属性是 HTML5 引入的一种新特性，它允许开发者为页面或应用程序中的任何元素添加额外的自定义数据属性。这些属性非常有用，特别是在需要存储与特定元素相关联的数据时。本文将详细介绍四种方法来获取 `data-*` 属性的值，它们分别是：
1. **getAttribute() 方法**
2. **dataset() 方法**
3. **jQuery.data() 方法**
4. **jQuery.attr() 方法**
#### 一、getAttribute() 方法
`getAttribute()` 是一个原生 JavaScript 方法，用于获取指定元素的属性值。此方法不仅适用于普通的 HTML 属性，也适用于 `data-*` 属性。
**示例代码**:
```javascript
const getId = document.getElementById('getId');
console.log(getId.getAttribute("data-id")); // 输出: 122
console.log(getId.getAttribute("data-vice-id")); // 输出: 11
// 设置属性值
getId.setAttribute("data-id", "48");
console.log(getId.getAttribute("data-id")); // 输出: 48
```
该方法简单且直观，但在处理多个 `data-*` 属性时可能会显得有些繁琐。
#### 二、dataset() 方法
现代浏览器提供了一种更简便的方式来访问 `data-*` 属性——`dataset` 属性。这个属性可以让你直接读取或设置 `data-*` 属性，而无需担心 `data-` 前缀。
**示例代码**:
```javascript
// 直接通过 dataset 访问 data-* 属性
console.log(getId.dataset.id); // 输出: 122
console.log(getId.dataset.viceId); // 输出: 11 (注意驼峰命名法)
// 设置属性值
getId.dataset.id = "113";
getId.dataset.viceId--; // 将 viceId 的值减 1
console.log(getId.dataset.id); // 输出: 113
console.log(getId.dataset.viceId); // 输出: 10
// 新增 data 属性
getId.dataset.id2 = "100"; // 输出: 100
// 删除 data 属性
getId.dataset.id2 = null; // 输出: null
delete getId.dataset.id2; // 输出: undefined
```
`dataset` 方法的优势在于其语法简洁，支持链式调用，并且可以通过驼峰命名法来访问带有连字符的 `data-*` 属性。
#### 三、jQuery.data() 方法
对于使用 jQuery 的项目来说，`.data()` 方法是一个非常强大的工具，它提供了另一种获取和设置 `data-*` 属性的方法。与 `getAttribute()` 和 `dataset` 不同，`.data()` 方法具有缓存功能，这意味着它会在内存中存储数据，而不是直接在 DOM 元素上。
**示例代码**:
```javascript
var id = $("#getId").data("id"); // 输出: 122
var viceId = $("#getId").data("vice-id"); // 输出: 11
// 设置属性值
$("#getId").data("id", "100"); // 输出: 100
// 注意：data() 的值进行修改并不会影响到 DOM 元素上的 data-* 属性的改变
// 下面是一个具体的例子
var appId = $("#myDiv").data("appid"); // 输出: 123
$("#myDiv").data("appid", "666");
// 此时 HTML 代码中 div 的 data-appid 的值仍为 123
// 但是进行 $('#myDiv').data("appid") 操作，输出的结果为 666
```
**总结**：`.data()` 方法在不直接修改 DOM 的情况下，可以高效地存储和检索数据，这对于性能优化非常有帮助。
#### 四、jQuery.attr() 方法
`.attr()` 方法与 `.data()` 方法不同，它直接作用于 DOM 元素，获取或设置指定的属性值，包括 `data-*` 属性。
**示例代码**:
```javascript
var id = $("#getId").attr("data-id"); // 输出: 122
var viceId = $("#getId").attr("data-vice-id"); // 输出: 11
// 设置属性值
$("#getId").attr("data-id", "100"); // 输出: 100
```
`.attr()` 方法的主要优点是它可以用于所有类型的属性，而不仅仅是 `data-*` 属性。然而，如果只需要处理 `data-*` 属性，那么使用 `.data()` 或 `dataset` 可能会更合适。
### 总结
根据上述四种方法的介绍，我们可以得出以下结论：
- 如果项目中没有使用 jQuery，推荐使用 `getAttribute()` 和 `dataset` 方法。
- 如果项目中使用了 jQuery，则可以根据具体需求选择 `.data()` 或 `.attr()` 方法。其中，`.data()` 更适合于数据管理和缓存，而 `.attr()` 则适用于直接修改 DOM 元素。
希望这篇教程能帮助你更好地理解和使用 `data-*` 属性以及相关的获取方法。
