在 jQuery 中，attr() / removeAttr() 和 prop() / removeProp() 是操作元素属性的核心方法，但两者的适用场景和底层逻辑有本质区别。下面将会从定义、用法、区别、示例四个维度详细讲解这四个方法。
在 HTML 中，元素的 “属性” 分为两类：
HTML 属性是写在 HTML 标签内部的 “附加信息”，就像给标签贴的 “标签”—— 用来定义元素的初始状态、特征或行为，是元素在 HTML 层面的 “初始值”。
通常，属性的书写规则如下：
写在标签的尖括号内，标签名之后；
格式通常是 属性名="属性值"（值建议用双引号包裹，单引号也可）；
部分“布尔属性”（如 checked、disabled）可省略值，仅写属性名即表示 “启用该状态”；
简单示例：
<input type="text" placeholder="请输入内容" />上述 <input> 标签中，type 和 placeholder 就是改标签的 HTML 属性。
DOM（文档对象模型）把 HTML 页面中的每个元素都转换成了JavaScript 对象，而 DOM 属性（Property）就是这个对象上的 “属性 / 变量”—— 它代表元素在运行时的当前值，是动态可修改的。
注意：
我们可以简单的认为：
（1）HTML 原生属性（Attribute）是元素的 “出厂设置”；
（2）DOM 属性（Property）是元素的 “当前运行状态”（比如手机出厂设置是静音，你现在把它调成响铃，“响铃” 就是当前状态）。
这也是区分 jQuery 中 attr() 和 prop() 的核心前提。
该方法用于读取或设置元素的 HTML 原生属性（Attribute）。语法如下表：
| 用法 | 说明 |
|---|---|
$(elem).attr(name) | 获取第一个匹配元素的 name 对应的 HTML 属性值 |
$(elem).attr(name, value) | 为匹配元素设置 name 对应的 HTML 属性值（value 可以是字符串 / 数字） |
$(elem).attr({name1:val1, name2:val2}) | 批量设置多个 HTML 属性 |
$(elem).attr(name, function(index, oldVal)) | 动态设置属性值（函数返回值为新值，index 是元素索引，oldVal 是原属性值） |
示例：
<div class="app">
<h3>属性</h3>
<p class="myClass">这是一个P标签</p>
<p class="myClass">这是一个P标签</p>
<input type="text" placeholder="请输入内容" />
</div>jQuery 代码：
// 给 p 标签添加 name 属性
$('.app p').attr('name', 'myName');
// 给 p 标签添加 name 属性
$('.app p').attr({
'name': 'myName',
'title': 'myTitle'
});
// 给 p 标签添加 name 属性
$('.app p').attr('name', function(){
return 'myName';
});注意，效果可以在本文最后完整示例中在线查看。
该方法用于删除元素的指定 HTML 属性，会同时影响 DOM 属性的初始值。语法：
$(elem).removeAttr(name)其中，name 为属性名，多个属性用空格分隔。
示例：
<div class="app">
<h3>属性</h3>
<p class="myClass">这是一个P标签</p>
<p class="myClass">这是一个P标签</p>
<input type="text" placeholder="请输入内容" />
</div>jQuery 代码：
// 移除 p 标签的 class 属性
$('.app p').removeAttr('class');注意，效果可以在本文最后完整示例中在线查看。
该方法用于读取或设置元素的 DOM 对象属性（Property），反映元素的实时状态。语法和 attr() 完全一致，只是操作的是 DOM 属性。如下表：
| 用法 | 说明 |
|---|---|
$(elem).prop(name) | 获取第一个匹配元素的 name 对应的 DOM 属性值 |
$(elem).prop(name, value) | 为匹配元素设置 name 对应的 DOM 属性值 |
$(elem).prop({name1:val1, name2:val2}) | 批量设置 DOM 属性 |
$(elem).prop(name, function(index, oldVal)) | 动态设置 DOM 属性值 |
示例：
<div class="app">
<h3>属性</h3>
<p class="myClass">这是一个P标签</p>
<p class="myClass">这是一个P标签</p>
<input type="text" placeholder="请输入内容" />
<p>
<input id="myCheckbox" type="checkbox" placeholder="已了解"/> 已了解
</p>
</div>jQuery 代码：
// 给 input 标签添加 myProp 属性
$('.app input').prop('myProp', '123');
// 获取添加的属性的值
log.info('myProp=' + $('.app input').prop('myProp'));
// 复选框勾选
$('#myCheckbox').prop('checked', true);注意，效果可以在本文最后完整示例中在线查看。
该方法用于删除通过 prop() 方法设置的自定义 DOM 属性（注意：不能删除原生 DOM 属性，如 checked、value）。语法：
$(elem).removeProp(name)注意：
原生 DOM 属性（如 checked、disabled、value）用 removeProp()无效，如需重置，应设置为默认值（如 prop('checked', false)）。
removeProp() 仅适用于删除通过 prop() 手动添加的自定义属性。
示例：先通过 pop() 方法添加一个名为 myProp 的自定义属性，然后使用 removeProp() 进行移除。
// 给 input 标签添加 myProp 属性
$('.app input').prop('myProp', '123');
// 不能移除，因为 disabled 是原生属性，不是自定义属性
$('.app input').removeProp('myProp');
// 获取移除属性的值
log.info('myProp=' + $('.app input').prop('myProp')); // 日志删除，myProp 为 undefined到这里，关于 jQuery 操作属性的四个方法就都介绍了，是不是已经了解了。最后，给出一个最佳实践：
（1）优先用 prop () 的场景：
复选框 / 单选框的 checked、selected、disabled 状态；
表单元素的 value（实时输入值）；
元素的 className、tagName 等 DOM 原生属性；
（2）优先用 attr () 的场景：
读取 / 设置 HTML 原生属性（如 id、href、title）；
自定义 HTML 属性（如 data-*，不过推荐用 data() 方法）；
下面示例通过“点击自己动手试一试”可以尝试各种方法的效果：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQeury 教程</title>
<!-- 引入 jQuery 库 -->
<script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 引入 loglevel 库，方便在 DOM 中打印日志 -->
<script src="https://www.hxstrive.com/preview_code/libs/custom_loglevel.js"></script>
<style>
button { background: #EEE !important; border: 1px solid #ccc !important;
min-width: 40px; padding: 5px; margin: 5px; cursor: pointer; }
sup {color: red; font-size: 12px; background: transparent !important;}
/* 效果样式 */
.myClass { box-shadow: inset 0 0 3px red; padding: 10px; }
p[name="myName"] { color: blue; }
p[title="myTitle"] { text-decoration: underline; }
input[myProp] { padding: 5px 10px; border:solid 1px green;}
</style>
</head>
<body>
<div class="app">
<h3>属性</h3>
<p class="myClass">这是一个P标签</p>
<p class="myClass">这是一个P标签</p>
<input type="text" placeholder="请输入内容" />
<p>
<input id="myCheckbox" type="checkbox" placeholder="已了解"/> 已了解
</p>
</div>
<div>
<!-- attr 操作 HTML 标签的自定义 / 原生特性 -->
<!-- attr(name|pro|key,val|fn) 设置或返回被选元素的属性值 -->
<button type="button" onclick="
// 给 p 标签添加 name 属性
$('.app p').attr('name', 'myName');
">$('.app p').attr('name', 'myName')</button>
<button type="button" onclick="
// 给 p 标签添加 name 属性
$('.app p').attr({
'name': 'myName',
'title': 'myTitle'
});
">$('.app p').attr({...})</button>
<button type="button" onclick="
// 给 p 标签添加 name 属性
$('.app p').attr('name', function(){
return 'myName';
});
">$('.app p').attr(key, function(){...})</button>
<!-- removeAttr(name) 从每一个匹配的元素中删除一个属性 -->
<button type="button" onclick="
// 移除 p 标签的 class 属性
$('.app p').removeAttr('class');
">$('.app p').removeAttr('class')</button>
<!-- prop 操作 DOM 元素的内置属性（property） -->
<!-- prop(n|p|k,v|f) 1.6+ 获取在匹配的元素集中的第一个元素的属性值 -->
<button type="button" onclick="
// 给 input 标签添加 myProp 属性
$('.app input').prop('myProp', '123');
//获取添加的属性的值
log.info('myProp=' + $('.app input').prop('myProp'));
// 复选框勾选
$('#myCheckbox').prop('checked', true);
">$('.app input').prop('myProp', '123')</button>
<!-- removeProp(name) 1.6+ 用来删除由.prop()方法设置的属性集 -->
<button type="button" onclick="
// 移除自定义 myProp 属性
$('.app input').removeProp('myProp');
// 获取移除属性的值，此时应为 undefined
log.info('myProp=' + $('.app input').prop('myProp'));
">$('.app input').removeProp('myProp')</button>
</div>
</body>
</html>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098