attr() VS prop()

首先：attribute VS property

当编写 HTML 源码时，你能在 HTML 元素里定义 attributes。然后，一旦浏览器解析你的代码，该 HTML 元素相应的 DOM 节点就会被创建。该节点是一个对象，因此它就拥有 properties。 因此，我们知道：attributes 是 HTML 元素（标签）的属性，而 properties 是 DOM 对象的属性。

当一个 DOM 节点为某个 HTML 元素所创建时，其大多数 properties 与对应 attributes 拥有相同或相近的名字，但这并不是一对一的关系，value property 反映了 input 的当前文本内容，而 value attribute 则是在 HTML 源码 value 属性所指定的初始文本内容

eg:

<input blah="hello">

1. $('input').attr('blah'): returns 'hello' 
2. $('input').prop('blah'): returns undefined 

attribute 与 property是相互独立存在的

但是他们之间存在着映射关系：

<input id="the-input" type="text" value="Name:">

其对应 DOM 节点会拥有如下properties： id、type 和 value：

• id property是 id attribute 的映射：获取该 property 即等于读取其对应的 attribute 值，而设置该 property 即为 attribute 赋值。id 是一个纯粹的映射 property，它不会修改或限制其值。

• type property 是 type attribute 的映射：获取该 property 即等于读取其对应的 attribute 值，而设置该 property 即为 attribute 赋值。但 type 并不是一个纯粹的映射 property，因为它的值被限制在已知值（即 input 的合法类型，如：text、password）。如果你有 <input type="foo">，然后 theInput.getAttribute("type") 会返回 "foo"，而 theInput.type 会返回 "text"。

• 相比之下，value property 并不会映射 value attribute。取而代之的是 input 的当前值。当用户手动更改输入框的值，value property 会反映该改变。所以，如果用户在 input 输入 John，然后：

  theInput.value // 返回 "John" 然而： theInput.getAttribute('value') // 返回 "Name:"

value property 反映了 input 的当前文本内容，而 value attribute 则是在 HTML 源码 value 属性所指定的初始文本内容。

因此，如果你想知道文本框的当前值，则读取 property。而如果你想知道文本框的初始值，则读取 attribute。或者你也可以利用 defaultValue property，它是 value attribute 的纯粹映射。

jQuery官方文档：

attributes和properties之间的差异在特定情况下是很重要。jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值时，会返回 property 的值，这就导致了结果的不一致。从 jQuery 1.6 开始， .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。 在jQuery1.6之前，这些属性使用.attr()方法取得，但是这并不是元素的attr属性。他们没有相应的属性（attributes），只有特性(property)。

在checked属性是一个布尔属性， 这意味着,如果这个属性（attribute）是目前存在， 即使，该属性没有对应的值，或者被设置为空字符串值，或甚至是"false"，相应的属性（property）为true。 这才是真正的所有布尔属性（attributes）。

然而，要记住的最重要的概念是checked特性（attribute）不是对应它checked属性（property）。特性（attribute）实际对应的是defaultChecked属性（property），而且仅用于设置复选框最初的值。checked特性（attribute）值不会因为复选框的状态而改变，而checked属性（property）会因为复选框的状态而改变

因此使用时：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()