Jquery 标签属性操作attr、porp、data说明

[TOC]

## 1. Jquery 标签属性操作函数

### 1.1. 函数 prop

#### 1.1.1. 参数

+ **nodeName**：获取标签类型
示例：通过id选择器获取当前HTML的标签类型
```JS
//获取 id = StatrTimes 的元素标签类型
console.log($("#StatrTimes").prop("nodeName"))
//输出DIV
```

### 1.2. 函数 attr

Jquery 获取标签所有属性，并获取属性的名称和属性值
```JS
var attrs = $("#dataText")[0].attributes
$.each(attrs, function (index, item) {
    var attrName = $(item)[0].nodeName
    var attrVal = $(item).val()
    //筛选出包含data-属性的属性
    if (attrName.indexOf("data-") > -1) {
        console.log(attrVal)
    }
})
```
上述代码段中获取了id='dataText'标签上的所有属性并筛选出我们需要的属性的值

### 1.3. 函数 data

data() 函数是一个非常实用的方法，用于在 DOM 元素上存储和获取数据

**储存数据**

```js
//selector：用于选择要操作的 DOM 元素。
//key：要存储的数据的键名。
//value：要存储的数据的值。
$(selector).data(key, value);
```

**读取数据**

```js
//selector：用于选择要操作的 DOM 元素。
//key：要获取的数据的键名。如果不传入 key，则会返回元素上存储的所有数据对象。
$(selector).data(key);
```

**储存和读取单个属性示例**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="myDiv">这是一个示例 div</div>
    <script>
        // 存储数据
        $('#myDiv').data('name', '曹操');  //执行过后div元素上多了一个data-name属性
        // 获取数据
        var name = $('#myDiv').data('name');
        console.log(name); // 输出: 曹操
    </script>
</body>
</html>
```

**存储和读取多个属性示例**

```js
// 存储多个数据
$('#myDiv').data({
    age: 30,
    classname: '高三八班'
});

// 获取单个数据
var age = $('#myDiv').data('age');
console.log(age); // 输出: 30

// 获取所有数据
var allData = $('#myDiv').data();
console.log(allData); // 输出: {name: "曹操", age: 30, classname: "高三八班"}，这里延续了上面的示例，所有还有name属性
```

通过传递一个对象给 data() 函数来存储多个数据，然后可以通过指定键名获取单个数据，或者不传入键名获取所有存储的数据对象

**数据的作用域和生命周期**

+ 作用域：通过 data() 函数存储的数据是与特定的 DOM 元素关联的，不同的元素可以存储相同键名的数据，它们之间不会相互影响。
+ 生命周期：存储在元素上的数据会一直存在，直到元素被从 DOM 中移除或者手动删除数据。

**与 HTML5 数据属性的关联**

```HTML
<div id="perInfo" data-id="2" data-name="曹操" data-ClassName="高三八班" data-user-name="曹阿满"></div>
<script>
$("#perInfo").data("id")
$("#perInfo").data("name")
$("#perInfo").data("classname") // 无-链接全部转成小写
$("#perInfo").data("userName") // 有-链接则在-后面的需要转成大写
</script>
```

当使用 data() 函数获取数据时，如果元素上存在对应的 data-\* 属性，jQuery 会自动将其转换为 JavaScript 对象的属性并返回。需要注意的是，data- 前缀会被去掉，并且属性名会转换为驼峰命名法

> **Tips：**这里驼峰命明的方式需要注意，如果元素上`data-*`中的`*`是有大写的，使用data()时需要将其全部转成小写，如果`*`中还有`-`符号，则`-`后的字母需要转成大写

**删除数据**

可以使用 removeData() 函数来删除存储在元素上的数据。

```javascript
// 删除单个数据
$('#myDiv').removeData('name');
// 删除多个数据
$('#myDiv').removeData(['age', 'city']);
```

>**说明：**Jquery中data()的方法等效于原生js中的dataset属性，每个元素上都有dataset属性

## 2. prop 与 attr 比较

**案例说明：**

例如radio标签的使用，我们要使用脚本来选择我们要选中的项时使用attr是不会生效，页面上radio是不会变成选中样式的

```JS
$(function(){
 //点击id是SelectRadio的标签，id是radio1的元素变成选中状态
 $("#SelectRadio").click(function(){
  $("#RadioAll").each(function(){
    if($(this).attr("id") == "radio1"){
    //$(this).attr("checked",true); //此方法不会生效
    $(this).prop("checked",true);
    }else{
    $(this).prop("checked",false);
    //$(this).attr("checked",false);//此方法不会生效
    }
  })

//要获取radio的选中项使用prop函数
  $("#RadioAll").each(function(){
    if($(this).prop("checked") == true){
      console.log("我被选中了！")
      console.log(this)
    }
  })
 });
});
```

## 3. data 函数与标签属性 data- 说明

有时在DOM中设置了`data-index`属性，但在jQuery中使用`data("index")`无法获取到值，这是因为**jQuery的`data()`方法与HTML5的`data-*`属性存在区别**。具体原因和解决方案如下：

### 3.1. 核心原因：数据绑定机制不同

1. **HTML5的`data-*`属性**：
   直接在DOM标签中设置的`data-index`（如`<div data-index="123">`）属于**静态属性**，可以通过`element.getAttribute('data-index')`获取。

2. **jQuery的`data()`方法**：
   jQuery维护了一个**独立的数据缓存系统**，`data("index")`读取的是该缓存中的值，而非直接读取DOM属性。两者默认是**不同步的**。

### 3.2. 具体场景分析

#### 3.2.1. 场景1：只在HTML中设置`data-*`属性

```html
<div id="myDiv" data-index="123"></div>
```

```javascript
// ✅ 正确：通过attr()读取DOM属性
$('#myDiv').attr('data-index'); // 返回 "123"

// ❌ 错误：jQuery data()首次读取会同步DOM属性值，但后续修改不会互相影响
$('#myDiv').data('index'); // 首次返回 "123"（自动同步一次）

// 修改DOM属性后，data()无法获取最新值
$('#myDiv').attr('data-index', '456');
$('#myDiv').data('index'); // 仍返回 "123"（缓存未更新）
```

#### 3.2.2. 场景2：通过jQuery的`data()`设置值

```javascript
// 通过data()设置的值仅存在于jQuery缓存中
$('#myDiv').data('index', 123);

// ✅ 正确：通过data()读取缓存值
$('#myDiv').data('index'); // 返回 123

// ❌ 错误：DOM属性未同步更新
$('#myDiv').attr('data-index'); // 返回 undefined（DOM中没有该属性）
```

### 3.3. 如何保证标签元素data属性和Jquery中data方法取值正确

#### 3.3.1. 使用`attr()`而非`data()`

如果需要直接操作HTML的`data-*`属性，始终使用`attr()`：

```javascript
// 获取值
const index = $('#myDiv').attr('data-index'); // 返回 "123"

// 设置值（会直接修改DOM属性）
$('#myDiv').attr('data-index', '456');
```

#### 3.3.2. 通过jQuery的`data()`初始化数据

如果需要使用jQuery的数据缓存系统，**不要**在HTML中设置`data-*`属性，而是通过JS初始化：

```javascript
// 初始化数据到jQuery缓存
$('#myDiv').data('index', 123);

// 后续通过data()读写（与DOM属性无关）
$('#myDiv').data('index', 456); // 设置值
const index = $('#myDiv').data('index'); // 获取值
```

#### 3.3.3. 强制同步DOM属性和jQuery数据

如果你必须同时维护两者的同步，可以编写辅助函数：

```javascript
// 设置值时同步更新DOM属性和jQuery数据
function setData(element, key, value) {
  element.attr(`data-${key}`, value);
  element.data(key, value);
}

// 使用示例
setData($('#myDiv'), 'index', 123);

// 此时两者保持同步
$('#myDiv').attr('data-index'); // 返回 "123"
$('#myDiv').data('index'); // 返回 123
```

### 3.4. 关键区别总结

| 操作               | `attr('data-index')`          | `data('index')`               |
|--------------------|-------------------------------|-------------------------------|
| 读取HTML中设置的值 | ✅ 直接读取DOM属性值           | ✅ 首次读取时自动同步DOM值     |
| 修改值             | ✅ 修改DOM属性（但不更新缓存） | ✅ 更新jQuery缓存（但不同步DOM） |
| 数据类型           | 始终返回字符串                | 自动转换为数字/布尔/对象等类型 |

### 3.4. 最佳实践建议

1. **优先使用`attr()`**：如果数据需要在HTML中可见（如通过DOM操作或CSS选择器访问）。
2. **使用`data()`存储动态数据**：如果数据仅用于JS逻辑，不需要暴露在DOM中。
3. **避免混合使用**：尽量统一使用一种方式管理数据，防止同步问题。

通过以上方法，你可以明确控制数据的存储位置，避免`data()`和`data-*`属性之间的混淆。