jQuery 对比 .attr() 和 .prop()

引入

在 jq 中，.attr() 和 .prop() 函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。
但不得不说的是，这 2 个函数的用处却并不相同。

不同点

不同1——操作对象不同

很明显，.attr() 和 .prop() 分别是单词 attribute, property 的缩写，并且它们均表示 “属性” 的意思。
但，在 jq 中 attribute, property 却是 2 个不同的概念：

attribute：表示 HTML文档节点的属性；

<div id="message" class="test" data_id="123"></div>
<!-- 这里的 id, class, data_id 均是该元素 文档节点的 attribute -->

property：表示 JS 对象的属性。

var Person = { name: '小明', age: 18 }
// 这里的 name, age, 是 Person 的 property

【总结】jq 中，
attr() 函数的设计目标是：用于设置或获取指定 DOM 元素所对应的文档节点上的属性(attribute)；
prop() 函数的设计目标是：用于设置或获取指定 DOM 元素（指的是 JS 对象，Element 类型）上的属性(property)；

不同2——应用版本不同

attr() 是 jq 1.0 版本就有的；
prop() 是 jq 1.6 版本新增的函数；

1.6 之前，只能用 attr() 函数，1.6 以后可根据实际情况需要选择对应的函数。

不同3——用于设置的属性值类型不同

由于
attr() 函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其 toString() 方法，将其转为字符串类型。
prop() 函数操作的是 JS 对象的属性，因此设置的属性值可以为包括 数组 和 对象 在内的任意类型。

不同4——分别做不同工作

注意 1：1.6 版本后，2 个 api 分别做不同的工作。

在 jq 1.6 之前，只有 attr() 函数可用，该函数不仅承担了 attribute 的设置和获取工作，还同时承担了 property 的设置和获取工作。
例如： 在 jq 1.6 之前， attr() 也可设置 或 获取 tagName, className, nodeName, nodeType 等 DOM 元素的 property。

直到 jq 1.6 新增 prop() 函数，并用来承担 property 的设置或获取工作之后， attr() 才只用来负责 attribute 的设置和获取工作。

【特殊】.attr() 在获取表单的 checked, selected, disabled 属性时较特殊。

此外，对于表单元素的 “checked”, “selected”, “disabled” 等属性，

（1）在 jq 1.6 之前， attr() 获取这些属性的返回值为 Boolean 类型。
如果被选中（或禁用）就返回 true, 否则返回 false。

（2）但是从 1.6 开始， 使用 attr() 获取这些属性的返回值为 String 类型。
如果被选中（或禁用）就返回 “checked”, “selected”, “disabled”，否则（即元素节点没有该属性）返回 undefined。

（3）并且，在某些版本中，这些属性值表示文档加载时的初始状态值。
即使之后更改了这些元素的选中（或禁用）状态，对应的属性值也不会发生改变。
因为 jq 认为：
attribute 的 ‘checked’, ‘selected’, ‘disabled’ 就是表示 属性初始状态值，
property 的 checked, selected, disabled 才表示 属性实时状态值（只为 true 或 false）。

【经验】
因此，在 jq1.6 及以后版本中，请使用 prop() 函数来设置或获取 checked, selected, disabled 等属性。
对于其他能够用 prop() 实现的操作，也尽量使用 prop() 函数。

总结

操作表单的 checked, selected, disabled 属性要用 .prop() api。
其它 2 个都行。