Javascript .prop（）与.attr（）的比较

新功能也是如此

或者在这种情况下，他们会做同样的事情吗

如果我必须切换到使用

prop（）

，那么如果我切换到1.6，所有旧的

attr（）

调用都将中断

更新

selector='#id'
$（选择器）。单击（函数（）{
//而不是：
var getAtt=this.getAttribute（'style'）；
//我是否使用：
var thisProp=$（this.prop（'style'）；
//或：
var thisAttr=$（this.attr（'style'）；
日志（getAtt、thisProp、thiattr）；
});

测试
全部在：

属性和属性之间的差异在特定情况下可能很重要。在jQuery1.6之前，.attr（）方法在检索某些属性时有时会考虑属性值，这可能会导致不一致的行为。从jQuery1.6开始，.prop（）方法提供了一种显式检索属性值的方法，而.attr（）则检索属性

所以使用道具
 对于jQuery来说，这种变化已经持续了很长时间。多年来，他们一直满足于一个名为
attr（）
的函数，该函数主要检索DOM属性，而不是您期望的名称结果。和的分离应有助于缓解HTML属性和DOM属性之间的一些混淆
$.fn.prop（）
获取指定的DOM属性，而
$.fn.attr（）
获取指定的HTML属性

为了充分理解它们是如何工作的，这里有一个关于HTML属性和DOM属性之间区别的扩展说明：

HTML属性
语法：

目的：
允许标记具有与之关联的数据，以用于事件、呈现和其他目的

可视化：
class属性显示在主体上。可通过以下代码访问：

var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

属性以字符串形式返回，在不同浏览器中可能不一致。然而，在某些情况下，它们可能是至关重要的。如上所示，IE8Quirks模式（及以下）要求在get/set/removeAttribute中使用DOM属性的名称，而不是属性名称。这是了解差异非常重要的众多原因之一

DOM属性
语法：
document.body.onload=foo

目的：
允许访问属于元素节点的属性。这些属性类似于属性，但只能通过JavaScript访问。这是一个重要的区别，有助于澄清DOM属性的作用请注意，属性与属性完全不同，因为此事件处理程序分配无效且不会接收事件（正文没有onload事件，只有onload属性）

可视化：

在这里，您会注意到Firebug中“DOM”选项卡下的属性列表。这些是DOM属性。您会立即注意到其中相当多，因为您以前会在不知情的情况下使用它们。它们的值就是您将通过JavaScript接收到的值

文档





例子
HTML:

JavaScript:
alert（$（'#test'）.attr（'value'）

在jQuery的早期版本中，这将返回一个空字符串。在1.6中，它返回正确的值，
foo

在没有浏览过这两个函数的新代码的情况下，我可以自信地说，混淆更多地与HTML属性和DOM属性之间的差异有关，而不是与代码本身有关。希望这能帮你解决一些问题

-马特于2012年11月1日更新

我最初的答案特别适用于jQuery1.6。我的建议仍然是一样的，但是jQuery 1.6.1稍微改变了一些事情：面对预测中的一堆破碎的网站，jQuery团队。约翰·雷斯格也是。我可以看出他们所面临的困难，但仍然不同意他的建议，即选择
attr（）

原始答案

如果您只使用过jQuery，而没有直接使用DOM，那么这可能是一个令人困惑的变化，尽管这在概念上无疑是一个改进。但是，对于使用jQuery的数以百万计的网站来说，这并不是一件好事，因为这种改变将导致jQuery崩溃

我将总结主要问题：


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

如果您是一名jQuery开发人员，并且对整个业务中的属性和属性感到困惑，那么您需要后退一步，了解一下它，因为jQuery不再那么努力地保护您不受这些东西的影响。对于权威的，但有点
var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

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

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

+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
|             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"                      |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

<input blah="hello">

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

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

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

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

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

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

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

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

   .attr('checked') //returns  checked
   .prop('checked') //returns  true
   .is(':checked') //returns true