只是HTML属性和DOM对象之间的区别导致了混淆。对于那些习惯于使用DOM元素的本地财产（比如this.src this.value this.checked等）的人来说，.prop是对这个家庭的热烈欢迎。对其他人来说，这只是增加了一层混乱。让我们澄清一下。

查看.attr和.prop之间差异的最简单方法是以下示例：

<input blah="hello">

$（'input'）.attr（'blah'）：按预期返回'hello'。这里没有惊喜。$（'input'）.prop（'blah'）：返回undefined——因为它正在尝试执行[HTMLInputElement].blah——并且该DOM对象上不存在这样的属性。它仅作为该元素的属性存在于作用域中，即[HTMLInputElement].getAttribute（'blah'）

现在我们改变了一些事情，比如：

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');

$（'input'）.attr（'beah'）：返回'apple'是吗？为什么不“梨”，因为这是最后一个元素。因为属性是在输入属性上更改的，而不是DOM输入元素本身——它们基本上彼此独立工作。$（'input'）.prop（'beah'）：返回'pear'

您真正需要注意的是，不要因为上述原因而在整个应用程序中混合使用相同的属性。

看到一把小提琴展示了不同之处：http://jsfiddle.net/garreh/uLQXc/

属性与属性：

第1轮：风格

<input style="font:arial;"/>

.attr（'style'）--返回匹配元素的内联样式，即“font:arial；”.prop（'style'）--返回一个样式声明对象，即CSSStyleDeclaration

第二轮：价值

<input value="hello" type="text"/>   

$('input').prop('value', 'i changed the value');

.attr（'value'）--返回'hello'*.prop（'value'）--返回'i changed the value'

*注意：出于这个原因，jQuery有一个.val（）方法，它在内部等同于.prop（'value'）

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

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的常见情况。

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/.

如果代码是以这种方式编写的，Gary Hole的答案与解决问题非常相关

obj.prop("style","border:1px red solid;")

由于prop函数返回CSSStyleDeclaration对象，上述代码在某些浏览器中无法正常工作（在我的例子中，使用带有Chrome框架插件的IE8进行了测试）。

因此，将其更改为以下代码

obj.prop("style").cssText = "border:1px red solid;"

解决了问题。

通常你会想使用财产。仅将属性用于：

获取自定义HTML属性（因为它未与DOM属性同步）。获取与DOM属性不同步的HTML属性，例如获取标准HTML属性的“原始值”，如＜input value＝“abc”＞。

属性->HTML

财产->DOM