.prop（）与.attr（）

因此jQuery 1.6具有新功能prop()。

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

还是在这种情况下他们做同样的事情？

如果我确实必须切换到using prop()，attr()那么如果我切换到1.6 ，所有旧呼叫都会中断？

更新

selector = '#id'

$(selector).click(function() {
    //instead of:
    var getAtt = this.getAttribute('style');
    //do i use:
    var thisProp = $(this).prop('style');
    //or:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id='id' style="color: red;background: orange;">test</div>

（另请参见此提琴：http : //jsfiddle.net/maniator/JpUF2/）

控制台将记录getAttribute为字符串，将记录attr为字符串，但是将记录prop为CSSStyleDeclaration，为什么？将来如何影响我的编码？

2012年11月1日更新

我的原始答案专门适用于jQuery 1.6。我的建议保持不变，但jQuery 1.6.1进行了些微更改：面对预料之中的一堆破损网站，jQuery团队恢复attr()为接近（但不完全相同）布尔属性的旧行为。约翰·雷西格（John Resig）也对此发表了博客。我可以看到他们所遇到的困难，但仍然不同意他的推荐attr()。

原始答案

如果您只使用过jQuery，而没有直接使用过DOM，那么这可能是一个令人困惑的更改，尽管从概念上来说绝对是一种改进。对于使用jQuery的成千上万的网站来说，效果不是很好，但是由于此更改，这些网站将中断。

我将总结主要问题：

• 您通常想要prop()而不是attr()。
• 在大多数情况下，prop()照常attr()做。通常，attr()可以prop()在代码中替换对的调用。
• 属性通常比属性更容易处理。属性值只能是字符串，而属性可以是任何类型。例如，该checked属性是布尔值，该style属性是一个对象，每种样式都有各自的属性，该size属性是一个数字。
• 当一个属性和一个具有相同名称的属性同时存在时，通常更新一个属性会更新另一个属性，但是对于某些输入属性（例如value和）则不是这种情况checked：对于这些属性，属性始终表示当前状态，而属性（旧版本的IE中除外）对应于输入的默认值/检查性（反映在defaultValue/ defaultChecked属性中）。
• 这项更改消除了固定在属性和属性前面的jQuery魔术层，这意味着jQuery开发人员将不得不学习一些有关属性和属性之间差异的知识。这是一件好事。

如果您是jQuery开发人员，并且对整个业务都对属性和属性感到困惑，那么您需要退后一步，并对其有所了解，因为jQuery不再那么努力地使您远离这些东西。对于有关该主题的权威性但有些措手不及的单词，有以下规范：DOM4，HTML DOM，DOM Level 2和DOM Level 3。Mozilla的DOM文档对大多数现代浏览器均有效，并且比规范更易于阅读，因此您可能会发现其DOM参考有用。关于元素属性的一节。

作为如何比属性更容易处理属性的示例，考虑一个最初选中的复选框。这是有效的HTML可能有两个片段：

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

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

• if ( $("#cb").attr("checked") === true ) {...}
• if ( $("#cb").attr("checked") == "checked" ) {...}
• if ( $("#cb").is(":checked") ) {...}

这实际上是世界上最简单的与checkedBoolean属性有关的事情，自1995年以来，该属性在每个主要的可编写脚本的浏览器中都已经存在并且可以完美地工作：

if (document.getElementById("cb").checked) {...}

该属性还会使选中或取消选中复选框变得很简单：

document.getElementById("cb").checked = false

在jQuery 1.6中，这无疑变成了

$("#cb").prop("checked", false)

使用该checked属性编写复选框脚本的想法是无益且不必要的。该属性是您所需要的。

• 目前尚不清楚使用该checked属性检查或取消选中复选框的正确方法是什么
• 该属性值反映的是默认值，而不是当前的可见状态（某些IE的较旧版本除外，因此使操作更加困难）。该属性不会告诉您是否已选中页面上的复选框。参见http://jsfiddle.net/VktA6/49/。

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

DOM元素是对象，是内存中的东西。像OOP中的大多数对象一样，它具有properties。它还分别具有在元素上定义的属性的映射（通常来自浏览器为创建元素而读取的标记）。有些元素的属性得到他们最初从值属性具有相同或相似名称（value从“值”属性获取其初始值; href从“href”属性获取其初始值，但它不是完全一样的值; className从“类别”属性）。其他属性以其他方式获取其初始值：例如，该parentNode属性根据其父元素是什么来获取其值；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” |
| 名称：“ fooAnchor” |
| id：“ fooAnchor” |
| className：“测试一个” |
| 属性：
| href：“ foo.html” |
| 名称：“ fooAnchor” |
| id：“ fooAnchor” |
| 类：“测试一个”
+----------------+

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

现在，尽管它们是截然不同的，但是由于所有这些都是进化而来的，而不是从头开始设计的，因此，如果您设置了它们，则许多属性会写回到它们派生的属性上。但是，并非所有事情都如此，正如您从href上面可以看到的那样，映射并不总是直接的“传递值”，有时涉及到解释。

当我说属性是对象的属性时，我并不是在抽象地说。这是一些非jQuery代码：

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

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

该link物体是一个真实的东西，你可以看到有访问之间的真正的区别属性就可以了，和访问的属性。

正如Tim所说，在绝大多数情况下，我们希望与物业合作。部分原因是它们的值（甚至是它们的名称）在浏览器之间趋于一致。我们大多只想在没有与之相关的属性（自定义属性）时使用属性，或者当我们知道该特定属性的属性和属性不是1：1时（如href上述和“ href”一样） 。

在各种DOM规范中列出了标准属性：

• DOM2 HTML （已过时，请参阅HTML规范）
• DOM2 Core （已淘汰）
• DOM3核心 （已淘汰）
• DOM4

这些规范具有出色的索引，我建议您随时保持指向它们的链接；我一直都在用它们。

自定义属性包括，例如，data-xyz您可以放置​​在元素上以向代码提供元数据的任何属性（现在，只要您坚持使用data-前缀，该属性从HTML5开始就有效）。（最新版本的jQuery使您可以data-xyz通过data函数访问元素，但该函数不仅是data-xyz属性的访问器[它所做的更多和更少]；除非您确实需要其功能，否则我将使用该attr函数进行交互带有data-xyz属性。）

该attr函数以前在获取他们认为想要的东西时有一些复杂的逻辑，而不是从字面上获取属性。它混淆了这些概念。移至prop并attr打算取消合并它们。简而言之，在v1.6.0中，jQuery在这方面走得太远了，但是很快又增加了功能，attr以处理人们attr在技​​术上应该使用的常见情况prop。

对于jQuery来说，这种变化已经很长时间了。多年来，他们一直对名为的函数感到满意，该函数attr()主要检索DOM属性，而不是您期望从该名称获得的结果。的隔离attr()和prop()应有助于缓解一些HTML之间的属性和DOM属性的混乱。$.fn.prop()获取指定的DOM属性，而$.fn.attr()获取指定的HTML属性。

为了完全理解它们的工作原理，这是对HTML属性和DOM属性之间区别的扩展解释：

HTML属性

句法：

<body onload="foo()">

目的： 允许标记具有与之相关联的数据，以用于事件，渲染和其他目的。

可视化： 类属性显示在此处。可通过以下代码进行访问：

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

属性以字符串形式返回，并且在浏览器之间可能不一致。但是，它们在某些情况下可能至关重要。如上所示，IE 8 Quirks模式（及以下版本）期望get / set / removeAttribute中的DOM属性名称而不是属性名称。这是了解差异很重要的众多原因之一。

DOM属性

句法：

document.body.onload = foo;

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

可视化：

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

文献资料

• JavaScript：David Flanagan的权威指南
• HTML属性，Mozilla开发人员中心
• DOM元素属性，Mozilla开发中心

例

HTML： <textarea id="test" value="foo"></textarea>

JavaScript： alert($('#test').attr('value'));

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

不用看任何一个函数的新代码，我可以自信地说，混淆更多是与HTML属性和DOM属性之间的差异有关，而不是与代码本身有关。希望这可以为您解决一些问题。

-马特

属性在DOM中；HTML中的一个属性被解析为DOM。

更多细节

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

示例：更改class标签的属性将更改classNameDOM中该标签的属性。如果标签上没有属性，则仍然具有带有空值或默认值的相应DOM属性。

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

编辑

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

只是HTML属性和DOM对象之间的区别引起了混乱。对于那些愿意使用DOM元素等原生属性的人this.src this.value this.checked，.prop非常欢迎该家庭。对于其他人，这只是增加了一层混乱。让我们澄清一下。

最简单的方法，看看之间的区别.attr，并.prop为下面的例子：

<input blah="hello">

1. $('input').attr('blah')：'hello'按预期返回。这里没有惊奇。
2. $('input').prop('blah')：返回undefined-因为它正在尝试执行[HTMLInputElement].blah-并且该DOM对象上不存在此类属性。它仅在范围内作为该元素的属性存在，即[HTMLInputElement].getAttribute('blah')

现在，我们进行如下更改：

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

1. $('input').attr('blah')：返回'apple'?？为什么不将“梨”设置为该元素的最后一个。因为属性是在输入属性上更改的，而不是DOM输入元素本身的更改-它们基本上几乎彼此独立地工作。
2. $('input').prop('blah')：返回 'pear'

出于上述原因，您真正需要注意的事情是不要在整个应用程序中为同一属性混用这些用法。

看到说明不同的小提琴： http : //jsfiddle.net/garreh/uLQXc/

.attrvs .prop：

第一轮：风格

<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')

TL; DR

使用prop()了attr()在大多数情况下。

甲属性是输入元件的当前状态。一个属性是默认值。

一个属性可以包含不同类型的事物。属性只能包含字符串

脏检查

这个概念提供了一个可以观察到差异的示例：http : //www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

试试看：

• 单击按钮。两个复选框都被选中。
• 取消选中两个复选框。
• 再次单击该按钮。仅prop选中该复选框。砰！

$('button').on('click', function() {
  $('#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">Set checked attr and prop.</button>

对于诸如disabledon的某些属性button，添加或删除content属性disabled="disabled"始终会切换属性（在HTML5中称为IDL属性），因为http://www.w3.org/TR/html5/forms.html#attr-fe-disabled表示：

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

因此尽管它很丑陋，因为它不需要修改HTML，但您可能会摆脱它。

对于诸如checked="checked"on的其他属性input type="checkbox"，事情会中断，因为一旦单击它，它就会变脏，然后添加或删除checked="checked"content属性将不再切换检查状态。

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

全部都在文档中：

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

所以使用道具！

属性位于HTML 文本文档/文件中（==想象这是您对html标记进行解析的结果），而
属性位于HTML DOM树中（==基本上是JS意义上某个对象的实际属性）。

重要的是，其中许多同步（如果更新class属性，则classhtml中的属性也将更新；否则）。但是某些属性可能会同步到意外的属性-例如，attribute checked对应于property defaultChecked，因此

• 手动选中一个复选框将更改.prop('checked')值，但不会更改.attr('checked')和.prop('defaultChecked')值
• 设置$('#input').prop('defaultChecked', true)也会更改.attr('checked')，但是在元素上不可见。

经验法则是：.prop()方法应用于布尔属性/属性以及html中不存在的属性（例如window.location）。所有其他属性（您可以在html中看到的属性）都可以并且应该继续使用该.attr() 方法进行操作。（http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/）

这是一张表格，显示了.prop()首选位置（即使.attr()仍然可以使用）。

在正式建议使用后者的情况下，为什么有时要使用.prop（）而不是.attr（）？

1. .prop()可以返回任何类型-字符串，整数，布尔值；而.attr()总是返回一个字符串。
2. .prop()据说比快2.5倍.attr()。

.attr()：

• 获取匹配元素集中第一个元素的属性值。
• 给您元素的值，就像在页面加载时在html中定义的那样

.prop()：

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

通常，您需要使用属性。仅将属性用于：

1. 获取自定义HTML属性（因为它未与DOM属性同步）。
2. 获取与DOM属性不同步的HTML属性，例如，获取标准HTML属性的“原始值”，例如 <input value="abc">.

attributes -> HTML

properties -> DOM

在jQuery 1.6之前，该attr()方法有时在检索属性时会考虑属性值，这会导致行为不一致。

该prop()方法的引入提供了一种在检索属性的同时显式检索属性值的方法.attr()。

文件：

jQuery.attr() 获取匹配元素集中第一个元素的属性值。

jQuery.prop() 获取匹配元素集中第一个元素的属性值。

轻轻提醒使用prop()，例如：

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

上面的函数用于检查是否选中了checkbox1，如果选中，则返回1；否则，返回0。如果不是，则返回0。函数prop（）在此处用作GET函数。

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

上面的函数用于将checkbox1设置为选中状态，并始终返回1。现在将函数prop（）用作SET函数。

别搞砸了

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

一件事.attr()能做不到.prop()：影响CSS选择器

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

CSS选择器 [name=value]

• 会回应 .attr('name', 'value')
• 但并不总是 .prop('name', 'value')

.prop() 仅影响几个属性选择器

• input[name] （感谢@TimDown）

.attr() 影响所有属性选择器

• input[value]
• input[naame]
• span[name]
• input[data-custom-attribute]（都不会.data('custom-attribute')影响此选择器）

1）属性在DOM中；HTML中的一个属性被解析为DOM。

2）$（elem）.attr（“ checked”）（1.6.1+）“ checked”（String）将随着复选框状态而变化

3）$（elem）.attr（“ checked”）（1.6之前）true（布尔值）更改为复选框状态

• 通常，我们要用于DOM对象，而不要使用像这样的自定义属性data-img, data-xyz。

• 也有一些区别的访问时checkbox价值href 与attr()和prop()作为东西变化与DOM输出， prop()从完整链接origin并Boolean为复选框值 (pre-1.6)

• 我们只能与prop其他元素一起访问DOM元素undefined

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
    p {
      margin: 20px 0 0;
    }
    b {
      color: blue;
    }
  </style>

</head>

<body>

  <input id="check1" type="checkbox" checked="checked">
  <label for="check1">Check me</label>
  <p></p>

  <script>
    $("input").change(function() {
      var $input = $(this);
      $("p").html(
        ".attr( \"checked\" ): <b>" + $input.attr("checked") + "</b><br>" +
        ".prop( \"checked\" ): <b>" + $input.prop("checked") + "</b><br>" +
        ".is( \":checked\" ): <b>" + $input.is(":checked")) + "</b>";
    }).change();
  </script>

</body>

</html>

在prop（）与attr（）中没有更多注意事项：

• 应该检索selectedIndex，tagName，nodeName，nodeType，ownerDocument，defaultChecked和defaultSelected..etc并使用.prop（）方法进行设置。这些没有相应的属性，而仅仅是属性。

• 对于输入类型复选框

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

• prop方法返回布尔值，用于检查，选择，禁用，readOnly..etc等，而attr返回定义的字符串。因此，您可以在if条件中直接使用.prop（'checked'）。

• .attr（）在内部调用.prop（），因此.attr（）方法比通过.prop（）直接访问它们要慢一些。

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

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

由于prop函数返回CSSStyleDeclaration对象，因此上述代码在某些浏览器中无法正常工作（IE8 with Chrome Frame Plugin在我的情况下已通过测试）。

因此将其更改为以下代码

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

解决了问题。