2012年11月1日更新

我最初的答案特别适用于jQuery1.6。我的建议保持不变，但jQuery 1.6.1稍微改变了一些事情：面对预测的一堆破碎的网站，jQuery团队将attr（）恢复到了接近（但不完全相同）其布尔属性的旧行为。John Resig也在博客中谈到了这一点。我可以看到他们遇到的困难，但仍然不同意他的建议，更喜欢attr（）。

原答覆

如果您只使用过jQuery，而没有直接使用过DOM，那么这可能是一个令人困惑的变化，尽管这在概念上肯定是一个改进。不过，对于使用jQuery的大量网站来说，这并不太好，因为这一变化会导致网站崩溃。

我将总结主要问题：

通常需要prop（）而不是attr（）。在大多数情况下，prop（）执行attr（）以前的操作。在代码中用prop（（）替换对attr（的调用通常是有效的。财产通常比属性更容易处理。属性值只能是字符串，而属性可以是任何类型。例如，选中的属性是布尔值，样式属性是每个样式都有单独财产的对象，大小属性是数字。如果同时存在具有相同名称的属性和属性，通常更新一个属性会更新另一个属性，但输入的某些属性（例如value和checked）并非如此：对于这些属性，属性始终表示当前状态，而属性（旧版本的IE除外）对应于输入的默认值/检查（反映在defaultValue/defaultChecked属性中）。这一更改删除了一些停留在属性和财产前面的神奇jQuery层，这意味着jQuery开发人员必须了解财产和属性之间的区别。这是一件好事。

如果您是一名jQuery开发人员，对财产和属性的整个业务感到困惑，那么您需要后退一步，稍微了解一下，因为jQuery不再试图保护您不受这些东西的影响。关于这个主题的权威但有些枯燥的词汇，有一些规范：DOM4、HTMLDOM、DOMLevel 2、DOMLevel 3。Mozilla的DOM文档适用于大多数现代浏览器，并且比规范更容易阅读，因此您可能会发现它们的DOM参考很有用。有一节是关于元素财产的。

作为财产比属性更容易处理的示例，请考虑一个最初选中的复选框。这里有两种可能的有效HTML：

<input id="cb" type="checkbox" checked>
<input id="cb" type="checkbox" checked="checked">

那么，如何确定jQuery是否选中了复选框？查看堆栈溢出，您通常会发现以下建议：

如果（$（“#cb”）.attr（“checked”）==true）｛…｝如果（$（“#cb”）.attr（“check”）==“checked”）｛…｝如果（$（“#cb”）.is（“：checked”））｛…｝

这实际上是世界上使用选中的布尔属性最简单的事情，自1995年以来，它在每个主要的可脚本化浏览器中都存在并完美运行：

if（document.getElementById（“cb”）.checked）｛…｝

该属性还使选中或取消选中复选框变得微不足道：

document.getElementById（“cb”）.checked=false

在jQuery1.6中，这明确地变成

$（“#cb”）.prop（“checked”，false）

使用checked属性编写复选框脚本的想法是无益的，也是不必要的。这是你需要的。

使用checked属性来检查或取消选中复选框的正确方法并不明显属性值反映的是默认状态，而不是当前的可见状态（除了在一些旧版本的IE中，这使得事情变得更加困难）。属性告诉页面上的复选框是否被选中。看见http://jsfiddle.net/VktA6/49/.

TL；博士

在大多数情况下，使用prop（）而不是attr（）。

属性是输入元素的当前状态。属性是默认值。

属性可以包含不同类型的内容。属性只能包含字符串

.attr（）：

获取匹配元素集合中第一个元素的属性值。为您提供页面加载时html中定义的元素值

.prop（）：

获取匹配元素集合中第一个元素的属性值。提供通过javascript/jquery修改的元素的更新值

DOM中有一个属性；属性在HTML中，该HTML被解析为DOM。

进一步的细节

如果更改属性，则更改将反映在DOM中（有时使用不同的名称）。

示例：更改标记的class属性将更改DOM中该标记的className属性（这是因为类已被使用）。如果标记上没有属性，那么相应的DOM属性仍然为空或默认值。

示例：虽然标记没有class属性，但DOM属性className确实存在空字符串值。

edit

如果您更改一个，另一个将由控制器更改，反之亦然。该控制器不在jQuery中，而是在浏览器的本地代码中。

我认为蒂姆说得很好，但让我们后退一步：

DOM元素是一个对象，一个内存中的东西。与OOP中的大多数对象一样，它具有财产。另外，它还有一个在元素上定义的属性映射（通常来自浏览器为创建元素而读取的标记）。一些元素的财产从具有相同或相似名称的属性中获取初始值（value从“value”属性中获取其初始值；href从“href”属性中获得其初始值，但它不是完全相同的value；className从“class”属性中）。其他财产以其他方式获取其初始值：例如，parentNode属性根据其父元素的内容获取其值；元素始终具有style属性，无论它是否具有“style”属性。

让我们在以下页面中考虑此锚http://example.com/testing.html:

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

一些免费的ASCII艺术（并省略了很多东西）：

+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
|             HTMLAnchorElement             |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
| href:       "http://example.com/foo.html" |
| name:       "fooAnchor"                   |
| id:         "fooAnchor"                   |
| className:  "test one"                    |
| attributes:                               |
|    href:  "foo.html"                      |
|    name:  "fooAnchor"                     |
|    id:    "fooAnchor"                     |
|    class: "test one"                      |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+

请注意，财产和属性是不同的。

现在，尽管它们是不同的，因为所有这些都是从根本上发展而来的，而不是从头开始设计的，但是如果您设置了它们，许多财产会写回它们派生的属性。但并非所有人都这样做，正如您从上面的href中看到的，映射并不总是直接的“传递值”，有时会涉及到解释。

当我谈论财产是一个对象的财产时，我并不是抽象地说。下面是一些非jQuery代码：

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

（这些值与大多数浏览器相同；存在一些差异。）

链接对象是一个真实的对象，您可以看到访问它上的属性和访问属性之间存在真正的区别。

正如蒂姆所说，大多数时候，我们都想与财产合作。这部分是因为它们的值（甚至它们的名称）在浏览器之间趋于一致。我们通常只希望在没有与属性相关的属性（自定义属性）时使用属性，或者当我们知道特定属性的属性和属性不是1:1时（如上面的href和“href”）。

各种DOM规范中列出了标准财产：

DOM2 HTML（大部分已过时，请参见HTML规范）DOM2核心（过时）DOM3核心（过时）域4

这些规范有很好的索引，我建议将链接放在手边；我一直在用。

例如，自定义属性将包括任何数据xyz属性，您可以将这些属性放在元素上，以向代码提供元数据（现在，这在HTML5中是有效的，只要您坚持数据前缀）。（jQuery的最新版本允许您通过数据函数访问数据xyz元素，但该函数不仅仅是数据xyz属性的访问器[它做的更多也更少]；除非您实际需要它的功能，否则我会使用attr函数与数据xyz特性交互。）

attr函数过去有一些复杂的逻辑来获得他们认为你想要的东西，而不是从字面上获得属性。它将这些概念混为一谈。移动到prop和attr是为了将它们分开。简而言之，在v1.6.0中，jQuery在这方面做得太过火了，但功能很快被添加回attr，以处理人们在技术上应该使用prop时使用attr的常见情况。

有一件事.attr（）可以做到。prop（）不能做到：影响CSS选择器

这是我在其他答案中没有看到的问题。

CSS选择器[名称=值]

将响应.attr（'name'，'value'）但不总是.prop（'name'，'value'）

.prop（）仅影响少数属性选择器

输入[name]（谢谢@TimDown）

.attr（）影响所有属性选择器

输入[值]输入[名称]span[名称]input[data自定义属性]（.data（'custom-attribute'）都不会影响此选择器）