肮脏的检查

该概念提供了一个可观察到差异的示例：http://www.w3.org/TR/html5/forms.html#concept-输入检查过脏

试试看：

单击按钮。两个复选框都被选中。取消选中这两个复选框。再次单击按钮。只有道具复选框被选中。砰！

$（'按钮'）.on（'单击'，函数（）{$（'#attr'）.attr（'checked'，'checked'）$（'#prop'）.prop（'checked'，true）})<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><label>attr<input id=“attr”type=“checkbox”></label><label>prop<input id=“prop”type=“checkbox”></label><button type=“button”>设置选中的属性和属性</按钮>

对于某些属性，如按钮上的disabled，添加或删除content属性disabled=“disabled”总是切换属性（在HTML5中称为IDL属性），因为http://www.w3.org/TR/html5/forms.html#attr-fe残疾人说：

禁用的IDL属性必须反映禁用的内容属性。

所以你可以摆脱它，尽管它很难看，因为它不需要修改HTML。

对于其他属性，如inputtype=“checkbox”上的checked=“checked”，事情就会中断，因为一旦单击它，它就会变脏，然后添加或删除checked=”checked“内容属性将不再切换checked。

这就是为什么应该主要使用.prop，因为它直接影响有效属性，而不是依赖于修改HTML的复杂副作用。

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

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

在prop（）与attr（）中，几乎没有其他注意事项：

selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected。。应使用.prop（）方法检索和设置。这些属性没有相应的属性，只是财产。输入类型复选框.attr（'checked'）//返回已检查.prop（'checked'）//返回true.is（“：checked”）//返回trueprop方法返回选中、选中、禁用或禁用的布尔值，只读。。而attr返回定义的字符串。所以，你可以直接在if条件下使用.prop（'checked'）。.attr（）在内部调用.prop（），因此.attr比直接通过.prop（）访问它们慢。

在jQuery1.6之前，attr（）方法在检索属性时有时会考虑属性值，这会导致相当不一致的行为。

prop（）方法的引入提供了一种显式检索属性值的方法，而.attr（）检索属性。

文件：

jQuery.attr（）获取匹配元素集合中第一个元素的属性值。

jQuery.prop（）获取匹配元素集合中第一个元素的属性值。

轻轻提醒使用prop（），例如：

if ($("#checkbox1").prop('checked')) {
    isDelete = 1;
} else {
    isDelete = 0;
}

上面的函数用于检查checkbox 1是否选中，如果选中：返回1；如果没有：返回0。函数prop（）在这里用作GET函数。

if ($("#checkbox1").prop('checked', true)) {
    isDelete = 1;
} else {
    isDelete = 0;
}

上面的函数用于设置要检查的checkbox 1，并始终返回1。现在函数prop（）用作SET函数。

别搞砸了。

P/S：当我检查Image src属性时。如果src为空，prop返回页面的当前URL（错误），attr返回空字符串（正确）。