jQuery属性操作手册

.attr() 获取与设置属性

.attr() 方法在 jQuery 属性操作中处于核心地位。其功能是获取匹配元素集合中第一个元素的特定属性值，或为每一个匹配元素设置一个或多个属性。

获取属性时，.attr() 方法仅返回集合中第一个元素指定属性的值。若需要获取每个元素的属性值，应结合遍历方法使用。

// 获取图像 src 属性
var imgSrc = $('img').attr('src');

// 获取包含特定 href 的第一个链接的 title 属性
var linkTitle = $('a[href^="https"]').attr('title');

设置属性时，.attr() 方法能够处理单个属性键值对，或多个属性组成的对象。此操作作用于集合内的所有元素。

// 为所有图像设置 alt 属性
$('img').attr('alt', '这是一张图片');

// 为所有链接同时设置 target 和 rel 属性
$('a.external').attr({
    target: '_blank',
    rel: 'noopener noreferrer'
});

在 jQuery 1.6 版本之前，.attr() 方法有时会在获取某些属性（如 checked、selected、disabled）时返回不一致的值。1.6 版本引入了 .prop() 方法来专门处理这类属性，从而明确了属性（Attribute）与特性（Property）的职责。

版本变更

• jQuery 1.0：.attr() 方法被引入，用于基本的属性获取和设置。
• jQuery 1.6：.attr() 方法的语义被重新定义，专注于 HTML 属性。对于 DOM 特性（如 checked、selected），推荐使用新增的 .prop() 方法。同时，.attr() 在设置属性的值作为 null 或 undefined 时，会移除该属性。
• jQuery 4.0：对布尔属性的处理方式有重要调整。在 4.0 版本中，对于非 ARIA 的布尔属性，.attr( name, false ) 明确地用于移除该属性，这与过去版本的行为一致并得到强化。要设置布尔属性为其他非空字符串值，现在应直接传递该字符串值。若要移除 ARIA 属性，推荐显式使用 .removeAttr() 或传递 null 值给 .attr()。

.removeAttr() 移除属性

.removeAttr() 方法执行与 .attr() 设置操作相反的功能，用于从匹配元素集合的每一个元素中移除一个或多个属性。移除属性会将该属性的值清空，并从 DOM 元素上彻底删除该属性。

该方法接受一个字符串参数，指定要移除的属性名。若要同时移除多个属性，可以在属性名之间使用空格分隔。

// 移除所有图像的 title 属性
$('img').removeAttr('title');

// 从所有输入框中移除 disabled 和 readonly 属性
$('input').removeAttr('disabled readonly');

.removeAttr() 方法在 jQuery 1.0 版本中即已存在。它在处理内联属性时非常有效，但对于某些与浏览器状态紧密相关的特性（如 checked、selected），使用 .prop() 将其设置为 false 通常是更合适的选择。

.prop() 获取与设置特性

.prop() 方法专用于处理 DOM 元素的特性（Property）。它获取匹配元素集合中第一个元素的特性值，或为每一个匹配元素设置一个或多个特性。

特性与属性的区别是 jQuery 属性操作中的关键概念。HTML 属性（Attribute）是在 HTML 文档中定义的，其值始终是字符串形式。而 DOM 特性（Property）是浏览器解析 HTML 后生成的 DOM 对象所具有的字段，其值可以是任意类型（布尔值、数字、对象等）。

// 获取复选框的选中状态（返回 true 或 false）
var isChecked = $('#agreeCheckbox').prop('checked');

// 设置输入框为只读（通过特性设置为 true）
$('#username').prop('readonly', true);

// 一次性设置多个特性
$('#element').prop({
    tagName: 'div',
    className: 'highlight'
});

在绝大多数情况下，处理元素的固有特性（如 checked、selected、disabled、tagName、nodeName、ownerDocument）以及自定义的 DOM 特性时，应优先使用 .prop() 方法。.attr() 则更适合用于操作自定义的 HTML 属性或标准属性的初始值。

版本变更

• jQuery 1.6：.prop() 方法被正式引入，以解决 .attr() 在处理布尔值或非字符串类型特性时的不一致问题。
• jQuery 1.6.1：调整了部分场景下 .attr() 与 .prop() 的映射关系，以更好地保持向后兼容性，但核心职责区分得以确立。

.removeProp() 移除特性

.removeProp() 方法用于移除由 .prop() 方法设置的 DOM 元素特性。该方法会从匹配元素集合的每一个元素中删除指定的特性。

使用此方法通常用于清理自定义添加到 DOM 元素上的特性。强烈不建议尝试移除浏览器原生的特性（如 checked、disabled、selected 等），因为这可能会导致不可预知的行为。

// 为元素设置一个自定义特性
$('#element').prop('customProperty', 'someValue');

// 稍后移除该自定义特性
$('#element').removeProp('customProperty');

.removeProp() 方法同样在 jQuery 1.6 版本中被引入。移除原生特性不仅无法将元素恢复到预期状态（例如，移除 checked 特性不会使复选框变为未选中状态），还可能破坏该元素的正常功能。若要改变原生特性的状态，应使用 .prop() 将其设置为 false 或 true。

.val() 获取与设置值

.val() 方法主要用于获取或设置表单元素的值。它能够处理 input、select 和 textarea 等元素。

获取值时，.val() 返回匹配元素集合中第一个元素的值。

• 对于多选列表 (<select multiple>)，.val() 方法返回一个包含所有选中项的 value 的数组。
• 对于其他表单元素，它返回一个字符串。

// 获取文本框的当前值
var inputValue = $('#nameInput').val();

// 获取多选下拉框选中的所有值
var selectedValues = $('#multiSelect').val(); // 返回数组，如 ["val1", "val2"]

设置值时，.val() 方法会为集合中的每一个元素设置值。传递的参数可以是字符串、数字或字符串/数字组成的数组。当向 <select> 元素传递数组时，任何与数组中值匹配的选项都将被选中，而其他选项将被取消选中。

// 设置文本框的值
$('#addressInput').val('请输入地址...');

// 通过传递数组来设置多选列表的选中项
$('#multiSelect').val(['option2', 'option4']);

// 设置单选按钮组或下拉框的选中项
$('input[name=gender]').val(['female']);
$('#singleSelect').val('option3');

.val() 方法从 jQuery 1.0 版本开始就是核心 API 的一部分。需要注意的是，.val() 操作的是元素的当前值（即 DOM 特性的 value），而不是 HTML 属性中定义的 value="..." 初始值。这意味着它的行为更接近于 .prop(‘value’)。

属性操作方法的演进与选择

jQuery 提供了多个用于属性操作的方法，它们在版本迭代中不断演进，以适应 Web 开发的需求变化。下面的表格总结了这些核心方法及其适用场景。

在 jQuery 属性手册的语境下，选择正确的操作方法至关重要。对于标准的 HTML 属性，使用 .attr() 和 .removeAttr()。对于动态的 DOM 特性，尤其是那些反映元素状态的布尔值，使用 .prop()。对于表单元素的当前值，.val() 是最直接和可靠的选择。理解这些方法从 jQuery 1.0 到 4.0 的演进，能够更精准地编写出健壮且可维护的代码。

总结

jQuery 属性手册所涵盖的方法构成了操作元素特性与属性的完整工具箱。从早期版本中引入的 .attr() 和 .val()，到 1.6 版本为了清晰区分职责而加入的 .prop()，再到 jQuery 4.0 中对布尔属性行为的现代化调整，这些 API 的演进反映了 Web 标准的成熟和对开发者体验的持续优化。掌握 .attr()、.prop()、.val() 以及对应的移除方法 .removeAttr() 和 .removeProp() 的区别与联系，是进行精确 DOM 操作的基础。这套 API 不仅简化了跨浏览器的属性访问，也为现代前端开发中处理元素状态和配置提供了坚实的基础。