jQuery属性与jQuery数据操作的核心方法包括attr()、removeAttr()、prop()、data()，四者分工明确，分别用于元素属性的获取与设置、属性删除、布尔值属性操作及元素自定义数据的管理，是jQuery DOM操作中处理元素属性与数据的核心功能。
attr()方法
attr()方法用于获取或设置元素的普通属性，适用于src、href、class、title等非布尔值属性。当方法无参数时，执行获取操作，返回匹配元素集合中第一个元素指定属性的值；当方法传入两个参数（属性名、属性值）时，执行设置操作，为所有匹配元素设置指定属性及对应值；也可传入对象，一次性设置多个属性。
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>attr()方法示例</title>
<script src="jquery-3.6.4.min.js"></script>
</head>
<body>
<img id="imgDemo" src="default.jpg" title="默认图片" class="img-item">
<script>
// 获取img元素的src属性值
var imgSrc = $("#imgDemo").attr("src");
console.log(imgSrc); // 输出：default.jpg
// 设置img元素的src属性值
$("#imgDemo").attr("src", "new.jpg");
// 一次性设置多个属性
$("#imgDemo").attr({
"title": "修改后图片",
"class": "img-item active"
});
</script>
</body>
</html>removeAttr()方法
removeAttr()方法用于删除元素的指定属性，仅需传入要删除的属性名，即可删除所有匹配元素上的该属性，删除后属性及其对应值将从元素中移除，无法通过attr()方法获取到已删除的属性值。该方法是jQuery属性操作中实现属性删除的核心方法，使用简洁且高效。
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>removeAttr()方法示例</title>
<script src="jquery-3.6.4.min.js"></script>
</head>
<body>
<a id="linkDemo" href="https://example.com" title="示例链接" target="_blank">示例链接</a>
<script>
// 查看删除前的href属性
console.log($("#linkDemo").attr("href")); // 输出：https://example.com
// 删除a元素的href属性和target属性
$("#linkDemo").removeAttr("href");
$("#linkDemo").removeAttr("target");
// 查看删除后的href属性
console.log($("#linkDemo").attr("href")); // 输出：undefined
</script>
</body>
</html>prop()方法
prop()方法专门用于获取或设置元素的布尔值属性，适用于checked、selected、disabled等表示状态的属性。与attr()方法不同，prop()方法获取的是元素的当前状态（布尔值true/false），而attr()方法获取的是HTML标签中属性的初始值；设置布尔值属性时，prop()方法更贴合元素的实际交互状态。
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>prop()方法示例</title>
<script src="jquery-3.6.4.min.js"></script>
</head>
<body>
<input type="checkbox" id="checkDemo" checked> 同意协议
<select id="selectDemo">
<option value="1">选项1</option>
<option value="2" selected>选项2</option>
</select>
<script>
// 获取复选框的checked状态（prop()获取当前状态）
console.log($("#checkDemo").prop("checked")); // 输出：true
// 获取下拉框选中项的selected状态
console.log($("#selectDemo option:eq(1)").prop("selected")); // 输出：true
// 设置复选框为未选中状态
$("#checkDemo").prop("checked", false);
// 设置下拉框第一个选项为选中状态
$("#selectDemo option:eq(0)").prop("selected", true);
</script>
</body>
</html>data()方法
data()方法用于获取或设置元素的自定义数据，无需修改元素的HTML属性，即可实现数据的存储与读取，是jQuery数据操作的核心方法。该方法可读取元素上以data-为前缀的自定义属性值，也可直接存储任意类型的数据（字符串、数字、对象等），存储的数据仅在内存中有效，不会体现在HTML标签上。
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>data()方法示例</title>
<script src="jquery-3.6.4.min.js"></script>
</head>
<body>
<div id="dataDemo" data-id="1001" data-name="jQuery教程">数据操作示例</div>
<script>
// 读取元素上data-前缀的自定义属性
var dataId = $("#dataDemo").data("id");
var dataName = $("#dataDemo").data("name");
console.log(dataId, dataName); // 输出：1001 jQuery教程
// 存储自定义数据（不会体现在HTML标签上）
$("#dataDemo").data("author", "教程作者");
$("#dataDemo").data("info", {version: "3.6.4", type: "DOM操作"});
// 读取存储的自定义数据
console.log($("#dataDemo").data("author")); // 输出：教程作者
console.log($("#dataDemo").data("info").version); // 输出：3.6.4
</script>
</body>
</html>attr()、removeAttr()、prop()、data()方法对比
| 方法 | 核心功能 | 适用场景 | 核心特点 |
|---|---|---|---|
| attr() | 获取/设置元素普通属性 | src、href、class、title等非布尔值属性 | 获取HTML标签中属性的初始值，可批量设置多个属性 |
| removeAttr() | 删除元素指定属性 | 需要移除元素已有属性的场景 | 删除后属性完全移除，无法通过attr()获取 |
| prop() | 获取/设置元素布尔值属性 | checked、selected、disabled等状态属性 | 获取元素当前状态（布尔值），贴合实际交互 |
| data() | 获取/设置元素自定义数据 | 元素数据存储、读取，无需修改HTML标签 | 可存储任意类型数据，仅在内存中有效 |
attr()、removeAttr()、prop()、data()共同构成了jQuery属性与jQuery数据操作的完整体系，根据操作需求（普通属性、布尔值属性、属性删除、自定义数据）选择对应方法，可规范、高效地完成元素属性与数据的管理，提升DOM操作的便捷性。