所以jquery 1.6有了新的函数prop() 。
1
$( selector) .click ( function ( ) { //instead of: this .getAttribute ( 'style' ) ; //do i use: ( this ) .prop ( 'style' ) ; //or: ( this ) .attr ( 'style' ) ; } )
或者在这种情况下，他们会做同样的事情吗？
如果我必须切换到使用prop() ，那么如果切换到1.6，所有旧的attr() 调用都将中断？
更新
1
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' ) ; log ( getAtt, thisProp, thisAttr) ; } ) ;
1
< script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" >
(另请参见此小提琴：http://jsfiddle.net/maniator/jpuf2/)
控制台将getAttribute 记录为字符串，attr 记录为字符串，而prop 记录为CSSStyleDeclaration ，为什么？这对我未来的编码有何影响？
这将引起一定的兴趣：books.google.ca/&hellip；
@尼尔，这是因为这个变化超越了jquery。HTML属性和DOM属性之间的差异很大。
@马特，但是在1.6之前，attr 返回了什么？它不是总是返回一个字符串吗？
.attr()在jquery 1.6中发生了显著变化。这里的问题解释如下：edgarinvillegas.wordpress.com/2011/05/10/&hellip；
@Edgar，jquery 1.6.1中解决了很多问题。
看到jquery恢复了更改，我很难过。他们走错了方向。
@尼尔。是的，它只是使问题进一步复杂化，而不是将两种方法分开。
删除了1.9.0+中的降级ATTR。
从1.9版开始，Afaik将不再对属性使用"魔法"。因此，江户十一〔二〕不会像人们所期望的那样做。
@neal-对于从1.9.0 jquery jquery.com/upgrade guide/1.9开始的某些内容，已删除通过attr()访问属性的权限。attr()与.prop()的布尔属性(如复选框上的选中和禁用)受此更改影响。
请参阅此fiddle jsfiddle.net/h682v/4，将其更改为1.9.1版本，并使用attr查看禁用的属性没有更改-选中/取消选中底部的这两个属性仍然可以访问，直到您将attr() 资料更改为prop() -更改的一个实例。
您对jquery的集体知识令人印象深刻。然而，当有人说x和y时，他们只需要一个简单的比较，何时使用一个而不是另一个。他们不是在深海潜水之后。这就是他们不在这里阅读文档的原因。所有可怕的答案
@英国开发人员的答案比简单地说总是使用x或y要复杂得多，因为这取决于你想要得到什么。您想要属性还是属性？它们是两个截然不同的东西。
另请参见HTML中的属性和属性
@NealDunno，它并不像这里的问题那样关注jquery，所以它可能是更好的duppe目标。
@这里的答案实际上并没有引用jquery那么多，基本上是don属性和属性的规范点。
更新时间：2012年11月1日
我的原始答案专门适用于jquery 1.6。我的建议保持不变，但jquery 1.6.1稍微改变了一些：面对预测到的一堆被破坏的网站，jquery团队将attr() 恢复为接近(但不完全相同)其布尔属性的旧行为。约翰·雷西格也在博客中提到了这一点。我可以看出他们所处的困难，但我仍然不同意他的建议，即选择attr() 。
原始答案
如果您只使用过jquery而没有直接使用DOM，那么这可能是一个令人困惑的更改，尽管它在概念上确实是一个改进。不过，对于使用jquery的无数网站来说，这并不是很好，因为这种变化会导致大量网站中断。
我将总结主要问题：
你通常想要prop() ，而不是attr() 。
在大多数情况下，prop() 会像attr() 那样做。用代码中的prop() 替换对attr() 的调用通常是有效的。
属性通常比属性更容易处理。属性值只能是字符串，而属性可以是任何类型。例如，checked 属性是布尔值，style 属性是每种样式都有单独属性的对象，size 属性是数字。
当属性和同名属性同时存在时，通常更新一个属性会更新另一个属性，但输入的某些属性(如value 和checked 不是这样的：对于这些属性，属性总是表示当前状态，而属性(除旧版本的IE外)对应于输入的默认值/检查性(反映在defaultValue /defaultChecked 属性中)。
这一改变消除了一些卡在属性和属性前面的magic jquery层，这意味着jquery开发人员必须了解一些属性和属性之间的区别。这是件好事。
如果您是一个jquery开发人员，并且对整个业务中的属性和属性感到困惑，那么您需要后退一步，稍微了解一下它，因为jquery已经不再那么努力地保护您不受这些影响了。对于这个主题权威但有些枯燥的词，有一些规范：dom4、html dom、dom级别2、dom级别3。Mozilla的DOM文档对大多数现代浏览器都有效，并且比规范更容易阅读，因此您可能会发现它们的DOM引用很有用。有一个关于元素属性的部分。
作为属性比属性更容易处理的示例，请考虑最初选中的复选框。下面是两个有效的HTML文件：
1
< 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") ) {...}
这实际上是世界上处理checked 布尔属性最简单的方法，自1995年以来，checked 布尔属性在每种主要的可脚本浏览器中都存在并运行良好：
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/。
所以，如果我想升级，我必须返回并将attr 的所有引用更改为prop ？
@尼尔：是的，我怀疑这在大多数情况下是可行的，尽管我没有研究过jquery attr() 和prop() 代码的每一个部分，但我不能保证它在每一个情况下都能工作。
@那么现在把input 元素恢复到初始状态会更容易吗？
@尼尔："那么，如果我想升级，我必须回去把attr 的所有引用都改成prop "？不是全部，不是。很多，可能是大部分，但可能不是全部。
@T.J.克劳德，那是哪一个？
@Neal：如果你想知道dom元素有什么属性，以及属性如何为它们的值设定种子，请将这些链接保存在手边：dom2 html规范、dom2规范和dom3规范。在每种情况下，索引都是很好的，可以直接将你链接到属性的完整描述，属性的值来自何处等等。
@t.j.crowder但是如果我升级，那么attr 不是一直都是字符串吗？所以不管我是否改变它都不重要？prop 不是一个字符串，我现在知道它是一个dom元素。
@尼尔：(我们交叉评论)事实上，我想到的唯一真正的例子是你自己的data-xyz 属性，除非你想使用jquery的data ，否则你可以使用attr ，这是我最初避免使用的，但最近可能会开始使用。了解属性的另一个好处是可以提高代码的效率。如果你曾经写过var link = $(this).attr("href") 来获取事件处理程序中锚的href ，一旦你知道了你的反射属性，你就会有信心写var link = this.href 。
@T.J.Crowder那么说this.href 还是我要做$(this).prop('href') 呢？
@尼尔：不，看文档：prop 返回一个字符串。它是从基础dom元素(如element.href )的属性中获取的字符串，而不是从基础dom元素(如element.getAttribute("href") )的属性中获取的字符串。attr 通常也会这样做。在大多数情况下(绝大多数)，只需将prop 改为attr ，一切都很好。只有当你知道你真的，真的想要实际的属性值时，你才会使用attr 。这将是罕见的。
@T.J.Crowder它不会返回字符串！看我的小提琴…
@尼尔："那么，不管你喜欢哪一种，我都会做，他们会有同样的结果。后者更为冗长，涉及到几个不必要的函数调用，但是它的优点是您不必担心jquery为您处理的一些特殊情况。
@T.J.Crowder我认为我们的评论越来越离谱了…
@尼尔：是你的小提琴。你碰巧选了一个棘手的("风格")。(令我惊讶的是，文档说它返回了一个字符串，它们应该解释像style 这样的复合属性。)style 属性引用了一个带有样式信息的对象。这是一个非常，非常少的性质，像这样，绝大多数要么是字符串或数字。(attr 用什么换回"Style"？)
@克劳德，我想我从帽子里挑了一个有趣的。但是如果usually 返回一个字符串，在这些情况下，它与attr 有什么不同？
@尼尔：是什么让它与众不同：信息的来源和性质。例如，看看Tim的value 示例。一个名为attr 的函数，它检索属性value 而不是属性"value"，没有多大意义(它们可以是不同的)。展望未来，attr 做属性和prop 做属性将更加清晰，尽管这种转变对某些人来说是痛苦的。别误会了，没有什么比退后阅读规格说明书更能了解什么是属性了。
@T.J.Crowder那么你的意思是，attr 是硬编码的值，prop 是动态的，在整个dom中不断变化的值？
@尼尔：哎呀，对不起，埃多克斯1〔0〕就是个坏例子，忘了我说过了。
@T.J.克劳德，你能给出一个更好的解释吗？现在我认为@timdown的回答是好的，但不是the best
@Neal："那么你的意思是attr是硬编码的值，prop是动态的，在整个dom中不断变化的值？"当然，属性也可以更改(通过attr 或底层dom setAttribute 函数，或者——令人困惑的是——因为某些属性在更改时会更改底层属性)。(续)
@尼尔：T.J.取得了一些很好的成绩。我建议您开始尝试直接使用属性、规范和公司的jquery免费书籍或教程来操作DOM。其实并不像你想象的那么难。
@T.J.克劳德，你能给出一个完整的答案，而不是这些破碎的评论吗？将来的用户可能更容易阅读
@neal:dom元素是一个对象。属性是该对象的属性，就像其他编程对象一样。其中一些属性的初始值来自标记中的属性，这些属性也存储在单独的属性映射中的DOM对象上。在大多数情况下，写入道具只会更改道具，尽管遗憾的是，有些道具会将任何更改写入底层属性(例如value )，但我们尽量忽略这一点。99%的时候，你想用道具。如果您需要使用一个实际的属性，您可能会知道这一点。
@T.J.在现代浏览器中，更改输入的value 属性不会更改其value 属性。
@蒂姆："在现代浏览器中，改变输入的value 属性并不会改变它的value 属性。"我不认为它改变了，这就是为什么我开始把它作为一个例子使用，但是当我开始编写这个例子时，如果它没有在chrome、firefox、opera、ie上得到更新，那就太遗憾了。-jsbin.com/ahire4原来是因为我在用input[type="button"] 做实验。它不会更新input[type="text"] 上的属性-jsbin.com/ahire4/2谈论复杂！！不仅仅是元素，它的类型…
@T.J.啊，是的，我承认我只考虑文字输入。
@T.J.Crowder，这是因为input[type="button"] 的脏值标志不能为真。
这里可以找到与此答案相关的一些性能测试。jspef.com/prop-vs-ischecked/5
对于jquery 1.9.1，像$('#chk').checked 这样的选择器返回undefined-worked-prior-1.9.0，按它应该工作的方式提交bug，.prop("checked") 按预期工作。
$('#chk').checked 从来没用过…这根本不是正确的jquery…这个使用1.4.2的小提琴表示它确实使用了形式$(selector)[0]，选中jsfiddle.net/h682v/4。
我认为正确的形式是：$('#chk')[0].checked 。
我更新了jsFiddle，将原生JavaScript和jQuery的prop、attr和i s("：checked")进行了比较。jsfiddle.net/6ee7k/2
因此，多年后，远远超出了范围：attr 不会返回disabled 属性的原始值！getAttribute() 也没有。有人知道怎么做吗？
@Charleswood:disabled 属性与disabled 属性保持同步。禁用更改后无法访问原始值。
我觉得蒂姆说得很好，但让我们退一步：
dom元素是一个对象，是内存中的一个东西。与OOP中的大多数对象一样，它也具有属性。另外，它还分别具有在元素上定义的属性映射(通常来自浏览器读取以创建元素的标记)。元素的某些属性从具有相同或相似名称的属性中获取其初始值(value 从"value"属性中获取其初始值；href 从"href"属性中获取其初始值，但其值并不完全相同；className 从"class"属性中获取)。其他属性以其他方式获取其初始值：例如，parentNode 属性根据其父元素是什么来获取其值；元素始终具有style 属性，不管它是否具有"style"属性。
让我们在http://example.com/testing.html 的页面中考虑这个锚：
一些免费的ASCII艺术(并且遗漏了很多东西)：
1
+???????????????????????????????????????????+ | 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代码：
1
var link = document.getElementById ( 'fooAnchor' ) ; ( link.href ) ; // alerts"http://example.com/foo.html" ( link.getAttribute ( "href" ) ) ; // alerts"foo.html"
(这些值与大多数浏览器相同；有一些变化。)
link 对象是真实的，您可以看到访问它上的属性和访问属性之间有一个真正的区别。
正如蒂姆所说，绝大多数情况下，我们都想与物业合作。部分原因是它们的值(甚至名称)在浏览器中趋向于更加一致。我们通常只想在没有相关属性(自定义属性)的情况下使用属性，或者当我们知道对于该特定属性，属性和属性不是1:1(与上面的href 和"href"一样)。
标准属性在各种DOM规范中列出：
dom2 html(大部分已过时，请参阅html规范)
DOM2核心(过时)
DOM3核心(过时)
DOM4
这些规范有很好的索引，我建议您随时使用它们的链接。
例如，自定义属性将包括您可能放在元素上以向代码提供元数据的任何data-xyz 属性(现在，只要您坚持使用data- 前缀，HTML5就有效了)。(jquery的最新版本允许您通过data 函数访问data-xyz 元素，但该函数不仅仅是data-xyz 属性的一个访问器[它的作用大于或小于此]；除非您确实需要它的功能，否则我将使用attr 函数与data-xyz 属性交互。)
attr 函数过去有一些复杂的逻辑来获得他们认为你想要的东西，而不是从字面上获得属性。它混淆了这些概念。移到prop 和attr 是为了消除它们之间的混淆。简言之，在v1.6.0版中，jquery在这方面做得太过分了，但很快又将功能添加回attr ，以处理人们在技术上应该使用prop 时使用attr 的常见情况。
真的。新的1.6.1更新确实使这个问题无效了一点。(但不多)但这个链接现在基本上可以回答了
它并没有使我无效，我只是使用jquery1.7修复了一个bug，当时我在这里设置了.attr("class"，"bla")，但它在.prop("classname"，"bla")工作的地方不起作用。
@Pandawood:.attr('class', 'bla') 在Chrome17、FireFox 11、Opera 11、IE6、IE8、IE9和Safari 5上的1.7.0、1.7.1和1.7.2中与我预期的一样工作。
谢谢，在我的案例中一定有一些特定的东西，让我检查一下，然后再带一个测试案例回来。但是现在我们把代码改成了"prop/classname"，而不是"attr"，这为我们修复了一个巨大的错误，当我们从jquery1.4移到1.7时，在所有浏览器上都会遇到这个问题。
@t.j.crowder为什么在标记中没有指定value属性时，.attr('value') 返回单选按钮的on ？
@安德鲁：因为很快就把attr 和prop 分开了，他们不得不明显地后退，让attr 做很多prop 的事情。见答案的最后一段。
@t.j.crowder那么，检查value 属性(或任何其他属性)最安全的跨浏览器方式是什么？.attr 不起作用，.val 也不起作用。element.hasAttribute 和element.getAttribute 是否在所有浏览器中都得到了正确的实现？
@安德鲁：value 属性是一种特殊情况，因为ie8和更早版本(以及"兼容模式"下的ie9)很容易出错。如果您想知道在加载标记时属性的值是什么(而不是您或用户自那以后设置的任何更新值)，那么即使是getAttribute 和attributes NamedNodeMap 也将是这些属性的当前值(其他浏览器理解这一区别)。好消息是，您可以通过元素的defaultValue 属性到达那里。我很好奇，为什么你想要属性的值而不是当前的值？
@T.J.Crowder谢谢-我正在研究一些代码，作为框架的一部分，如果在标记中没有指定某些表单元素的value 属性，例如foo</option> foo</option>
@安德鲁：我明白了。好吧，祝你好运，ie7和更早的版本甚至没有hasAttribute ，如果没有value 属性(而不是null ，那么getAttribute('value') 会返回"" ，这是它应该返回的，而对其他属性也是如此)。你可能会发现玩这个游戏很有趣：jsbin.com/aneyap/6 ie也有其他getAttribute 问题，比如getAttribute('class') 总是null 的事实(你必须使用'className' ，这在getAttribute 中没有任何意义，当然这就是反射属性的名称)。
@t.j.crowder re:.data -它将读取属性的默认值(如果存在)，但如果写入属性，它将更改元素的隐藏属性，而不更新属性。
@好吧，它是不对称的。第一次在元素上使用它时，它会从data-* 属性中播种自己，但不会有任何回写，也不会保持同步。(我从来没有为data-* 属性使用过它，正是因为这个原因。)
@T.J.克劳德谢谢你的回答。非常有帮助。然而，它确实给我留下了一个问题。在上面的回答中，您说：如果设置了一些属性，那么它们将写回从中派生的属性。但并非所有人都能……所以这让我想到了，那么当您设置一个属性，而该属性可能没有对应的DOM对应项时会发生什么呢？然后它是否只是设置/创建一个新的？或者，它只是将其保留为一个属性，因为它需要位于定义的属性的指定列表中(如果有属性的话)，才能作为一个属性写入？
@T.J.Crowder举例来说，有一个jquery错误是关于在IE7模式下尝试结合某些属性(aria autocomplete)使用.attr 时遇到的错误。在阅读了attr 和prop 是如何相互转换的之后，我尝试使用.prop 作为一种解决方法来设置aria属性.prop('aria-autocomplete', 'list') ，虽然我对所有情况和副作用不是100%确定，但它似乎是有效的。这是使用.prop 的有效方法吗？
对于jquery来说，这种变化已经很久了。多年来，它们一直满足于一个名为attr() 的函数，该函数主要检索DOM属性，而不是您期望的名称结果。attr() 和prop() 的分离有助于缓解HTML属性和DOM属性之间的一些混淆。$.fn.prop() 获取指定的dom属性，而$.fn.attr() 获取指定的html属性。
为了充分理解它们的工作原理，下面是关于HTML属性和DOM属性之间区别的扩展说明：
HTML属性Syntax：
用途：允许标记具有与之关联的数据，用于事件、呈现和其他目的。
可视化：
1
var attr; = document.body .getAttribute ( "class" ) ; //IE 8 Quirks and below = document.body .getAttribute ( "className" ) ;
属性以字符串形式返回，并且在浏览器和浏览器之间可能不一致。然而，在某些情况下，它们可能是至关重要的。如上示例所示，IE8 quirks模式(及以下)要求get/set/removeattribute中的dom属性名而不是属性名。这是了解差异很重要的原因之一。
DOM属性Syntax：
document.body.onload = foo;
用途：允许访问属于元素节点的属性。这些属性与属性类似，但只能通过JavaScript访问。这是一个重要的区别，有助于澄清DOM属性的作用。请注意，属性与属性完全不同，因为此事件处理程序分配是无用的，不会接收事件(主体没有onload事件，只有onload属性)。
可视化：
在这里，您会注意到Firebug中"dom"选项卡下的属性列表。这些是DOM属性。你会立刻注意到其中的很多，因为你以前在不知道的情况下使用过它们。它们的值就是您将通过JavaScript接收到的值。
文档
javascript：最终指南作者
HTML属性，Mozilla开发中心
Dom元素属性，Mozilla开发中心
例子
html:
javascript:alert($('#test').attr('value')); 。
在jquery的早期版本中，这将返回一个空字符串。在1.6中，它返回正确的值foo 。
在没有浏览过这两个函数的新代码的情况下，我可以自信地说，这种混淆更多地与HTML属性和DOM属性之间的区别有关，而不是与代码本身有关。希望这能帮你解决一些问题。
-马特
@Matt这对jQuery中的prop() 没有任何解释。
$.prop() 获取dom属性，$.attr() 获取html属性。我试着在心理上弥合这一鸿沟，这样你就能理解两者之间的区别。@马特，你的回答中没有说明…你能解释一下什么是prop() 吗？
孩子，我现在也很困惑。所以$('#test').prop('value') 没有退货吗？.attr('checked') 也不是复选框？但过去呢？现在你必须把它改成prop('checked') ？我不理解这种区别的必要性——为什么区分HTML属性和DOM属性很重要？什么是常见的用例使得这个更改"很长一段时间就要到来"？抽象这两者之间的区别有什么错，因为看起来它们的用例大多是重叠的？
在您最后的示例中，我认为alert($('#test').attr('value')); 中的attr 意味着prop 。
@blueraja：因为这两个概念之间存在严重的潜在差异，如果像jquery那样将其刷在地毯下，会导致意外的失败。value 是最明显的情况之一，因为value 属性将为您提供字段的当前值，但value 属性将为您提供value="..." 属性中声明的原始值，实际上是defaultValue 属性。(尽管在IE<9中，这个特定的案例再次被错误所混淆。)
@波宾斯：那么，如果你设置了.attr('value', 'something') ，会发生什么？当前字段的值是更改的，还是只更改了"原始值"？如果是后者，这似乎是一个巨大的错误，我可以看到造成的问题比它解决的问题要多得多…(如果前者，我认为更改属性会更改属性，这会令人困惑，但反之亦然)
@布鲁拉贾：前者。在大多数情况下，attr() pre-1.6映射到属性。
@布鲁拉贾：答案更为复杂。：-)在jquery<1.6中设置attr('value', ...) 设置该属性，因此当前值更改而默认值不更改。在1.6中设置该属性，因此理论上默认值更改而当前值不更改。但是，在设置value 属性的具体操作上存在(更多)浏览器不一致。在IE中，它也设置当前值；在某些浏览器中，它只设置当前值(如果以前没有设置当前值)。[哭泣]
@马特你的形象好像消失了…
正如@quentin所说，"属性是由HTML定义的。属性由dom定义。"我读过的最简单的版本。
minus1弱示例：value 属性来设置其初始内容。
一个属性在DOM中；一个属性在被解析为DOM的HTML中。
进一步细节
如果更改属性，更改将反映在DOM中(有时名称不同)。
示例：更改标记的class 属性将更改DOM中该标记的className 属性。如果标记上没有属性，则相应的DOM属性仍然为空或默认值。
示例：虽然标记没有class 属性，但dom属性className 确实存在一个空字符串值。
编辑
如果您更改一个，另一个将由控制器更改，反之亦然。此控制器不在jquery中，而是在浏览器的本机代码中。
所以，这是否意味着更新属性更好，因为这样可以确保属性和属性都得到更新并保持一致？
@dom是内部技术表示，模型。HTML属性是一个外部表示，一个视图。如果您更改一个，另一个将由控制器更改，反之亦然。
@卢克看这个：jsfiddle.net/pms3w
@Herrserker所以他们都通过控制器保持同步？我假设这只是在jquery的attr和prop方法中？下面是对您的小提琴的修改，在这里我将进一步探讨这个问题——jsfiddle.net/v8wry——到目前为止，它们似乎是等效的。
"如果您更改一个，另一个将由控制器更改，反之亦然。此控制器不在jquery中，而是在浏览器的本机代码中。"对于大多数属性/属性，这不是真的。对于大多数人来说，它只是一种单向转换，其中属性决定了相应属性的初始值。前两个答案详细解释了这一点。
@ Vincent。我不明白，前两个答案和我的答案有什么不同。当然，大多数属性都是相应的DOM属性的初始值。但它们是相互依赖的。在chrome控制台中尝试类似于jQuery('p').prop('className', 'foo'); 的方法，您将看到，每个段落如何获得'foo' 的thg class 属性。当然不是源代码，它来自服务器。这是一个常数。
HTML属性和DOM对象之间的区别导致了混淆。对于那些对DOM元素自然属性(如this.src this.value this.checked 等)感到舒适的人来说，.prop 是一个非常热烈的家庭欢迎。对于其他人来说，这只是一个额外的混乱层。让我们澄清一下。
查看.attr 和.prop 之间区别的最简单方法是以下示例：
$('input').attr('blah') ：按预期返回'hello' 。这里没有惊吓。$('input').prop('blah') ：返回undefined ，因为它试图执行[HTMLInputElement].blah ，并且该dom对象上不存在这样的属性。它只作为该元素的属性存在于作用域中，即[HTMLInputElement].getAttribute('blah') 。
现在我们改变一些事情，比如：
1
$( 'input' ) .attr ( 'blah' , 'apple' ) ; ( 'input' ) .prop ( 'blah' , 'pear' ) ;
$('input').attr('blah') 返回'apple' 嗯？为什么不把"梨"放在最后一个元素上呢？因为属性是在input属性上更改的，而不是dom输入元素本身——它们基本上彼此独立工作。$('input').prop('blah') ：返回'pear' 。
您真正需要注意的是，由于上述原因，不要在整个应用程序中为同一属性混合使用这些属性。
请参阅演示差异的小提琴：http://jsfiddle.net/garreh/ulqxcxc/
.attr 与
.prop 比较：第1轮：风格
1
< input style= "font:arial;" />
.attr('style') —返回匹配元素的内联样式，即"font:arial;" 。.prop('style') —返回一个样式声明对象，即CSSStyleDeclaration 。
第2轮：价值
1
< 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') 方法。
@Neal Becauee更好地参考了jquery函数的结构。"$('input').prop('blah')：返回未定义的--因为它正尝试执行[htmlinputelement].blah--并且该dom对象上不存在此类属性。它只作为元素的属性存在于作用域中，即[htmlinputeElement].getattribute('blah')"
似乎与文档api.jquery.com/prop不同："应该使用.prop()方法来设置disabled和checked，而不是使用.attr()方法。.val()方法应用于获取和设置值。"
DR
在大多数情况下，使用prop() 而不是attr() 。
属性是输入元素的当前状态。属性是默认值。
属性可以包含不同类型的内容。属性只能包含字符串
如果可能的话，提供一些你所说的简单样本，并说明何时使用prop() and when to go for attr() 。等待回答：)
肮脏的检查
这个概念提供了一个可以观察到差异的例子：http://www.w3.org/tr/html5/forms.html concept input checked dirty
试一试：
单击按钮。两个复选框都被选中。
取消选中两个复选框。
再次单击按钮。只选中了prop 复选框。砰！
1
$( 'button' ) .on ( 'click' , function ( ) { ( '#attr' ) .attr ( 'checked' , 'checked' ) ( '#prop' ) .prop ( 'checked' , true ) } )
1
< script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > < 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>
对于button 上的disabled 等属性，添加或删除内容属性disabled="disabled" 总是切换属性(在html5中称为idl属性)，因为http://www.w3.org/tr/html5/forms.html attr fe disabled表示：
The disabled IDL attribute must reflect the disabled content attribute.
因此，您可能会摆脱它，虽然它是丑陋的，因为它修改HTML不需要。
对于其他属性，如input type="checkbox" 上的checked="checked" ，事情会中断，因为一旦单击它，它就会变脏，然后添加或删除checked="checked" 内容属性将不再切换检查性。
这就是为什么您应该主要使用.prop ，因为它直接影响有效属性，而不是依赖修改HTML的复杂副作用。
为了完整起见，还可以尝试以下变化：1)在单击按钮之前，选中并取消选中第一个复选框2(对于此复选框，您需要更改代码段)给第一个输入一个checked 属性：checked="checked" 。
全部在文档中：
The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
所以使用道具！
这意味着当我切换到1.6时，很多事情都会破裂？？
不，这只是一种不一致的行为，如果它以前工作过，它将始终与jquery 1.6一起工作，只是prop更安全；)
我似乎还记得，$.attr() 在我使用它的大部分时间里都在检索属性，而不是"有时"。由此引起的混乱在今天仍然引起共鸣。不幸的是，我很难找到一个关于HTML属性和DOM属性的最终阅读，所以我可以在这里写一点答案。
@arnaud-f不是真的。1.6之前使用ATTR("选中")选中复选框的所有代码现在都将被破坏。
@尼尔，我和你在同一条船上。如果我是你，我会坚持1.5。如果你真的想升级到1.6版本，并且你有你正在处理的实时网站，我会把你所有的文件放到1.6版本的测试环境中，确保所有的代码都有效，搜索所有的.attr()实例，看看你使用它的方式是否有意义。如果没有，请替换为.prop()。测试，测试，测试。
@杰克船长，这真让人恼火……
@马特·麦克唐纳：什么类型的"…很难找到一个关于HTML属性和DOM属性的最终阅读…"你的意思是？属性(反射的和其他的)在dom2 html规范中描述；您可能还需要参考dom2和dom3规范。
在你的文本属性是HTML文档/文件(= =这是你想象的结果，而parsed HTML标记)属性是在HTML DOM树(一=目前的一些基本性质，在JS对象义)。
重要的是，许多学院都是同步的(如果你在更新class 物业，class HTML属性也将被更新，和其他)。但对一些意外的性质，可能是同步的属性，如属性，属性对应于checked defaultChecked ，这样
手动检查复选框，将在.prop('checked') 值变化，但不会改变.attr('checked') 和.prop('defaultChecked') 值
设置$('#input').prop('defaultChecked', true) .attr('checked') 也将变化，但是这将是不可见的在线一元。
Rule of thumb is: .prop() method should be used for boolean attributes/properties and for properties which do not exist in html.attr()
这是显示在表和地方的优先.prop() (虽然.attr() 仍然可以被使用)。
.prop() 可以返回任何类型的字符串，整数，布尔，在.attr() 总是返回的字符串。.prop() 说是约2.5倍，是比.attr() 更快。
有些事情已经改变了，比如：$('#myImageId').prop('src', 'http://example.com/img.png') 、var class = $('.myDivClass').prop('class') 或$('#myTextBox').prop('type', 'button') 。等等…
@沃尔夫先生，对不起，我还是不明白你的意思。什么"改变了"？语法一直是这样的。
我认为你答案中的表格是不必要的。因为.prop() 对所有属性都很好。您不想在.prop() 列中标记所有属性，是吗？
@沃尔夫先生，我认为这是必要的，因为，正如前面所说，它"显示了.prop() 的首选位置(即使.attr() 仍然可以使用)"。
我通常用.attr() 来定义一个事件，而.prop() 不能。像这样：$('.myDiv').attr('onclick', 'alert("Hello world!")') 。如果你把.attr() 改成.prop() ，它就不起作用了。总的来说，我认为没有理由使用.attr() 来设置或获取id/class/href/checked/src..... 的值。注意我没有说你错了。
.attr() ：
获取属性值的第一组匹配的元素中的元素。
给你的价值，这是定义的元素的HTML页面中的网络负载
.prop() ：
得到的价值的财产的第一个匹配的元素中的元素集。
好的，这是最新的价值观的路径元素的jQuery JavaScript /改性
通常，您需要使用属性。仅将属性用于：
获取自定义HTML属性(因为它没有与DOM属性同步)。
获取与dom属性不同步的html属性，例如获取标准html属性的"原始值"，如
attributes →HTML
properties ->礼品
我知道你想说什么，但是HTML是一种标记语言，而DOM是用HTML创建的一种表示。domElement具有属性和属性。
@t.niese，attirbutes 也是DOM 的财产之一。
简短的回答很简单。
在jQuery的方法了attr() 1.6，有时对客户查询的属性值的属性时，这相当不一致的行为。
在介绍的方法提供了prop() 明确检索属性值的方式，而.attr() retrieves属性。
该文档：
jQuery.attr() 获取属性值的第一组匹配的元素中的元素。
jQuery.prop() 得到的价值的财产的第一个匹配的元素中的元素集。
jquery 1.6引入了.prop()函数，分离了dom属性和属性，对.attr和.prop函数的区别提出了很多问题。
见以下示例：
例子：1)
1
< input id= "demo" type= "text" dbvalue= "Kansagara" /> ( "#demo" ) .attr ( "dbvalue" ) ; // returns Kansagara ( "#demo" ) .prop ( "dbvalue" ) ; // returns undefined
.prop()只返回html dom属性的值，它不返回自定义属性的值，.attr()也返回自定义属性值，如上图所示。
例子：2)
1
< input id= "demo" type= "text" value= "Kansagara" />
现在，我在文本框中将文本"kansagara"改为"hitesh"。
1
$( "#demo" ) .attr ( "value" ) ; // returns Kansagara ( "#demo" ) .prop ( "value" ) ; // returns Hitesh
现在你知道它的意思了。只有元素的属性被更改，因为它在dom和dynamic中。但元素的属性是HTML文本，不能更改。从广义上讲，属性总是表示当前状态，而属性(旧版IE除外)表示初始状态，或者是严格定义的HTML属性。该属性不会告诉您有关当前状态的任何信息。
对于复选框(jquery 1.6+)
1
< input id= "check1" checked= "checked" type= "checkbox" /> attr ( 'checked' ) //returns checked prop ( 'checked' ) //returns true is ( ':checked' ) //returns true
prop方法为checked、selected、disabled、readonly等返回布尔值，而attr返回定义的字符串。因此，您可以直接在if条件中使用.prop("checked")。
.attr()在内部调用.prop()，因此.attr()方法将比直接通过.prop()访问它们稍慢。
对于jquery 1.6+，将主要使用prop，因为它比attr简单且更宽。在大多数老项目中，ATTR用于获取元素的当前状态信息。但现在道具已经接受了这个任务，ATTR将被道具取代。
希望，它有帮助。
轻轻地提醒我们：利用prop() ，例子
1
if ( $( "#checkbox1" ) .prop ( 'checked' ) ) { = 1 ; } else { = 0 ; }
这些功能是用来检查如果checkbox1检查或不检查，如果是，返回1；如果不返回0。在这里使用的道具()函数获得的功能。
1
if ( $( "#checkbox1" ) .prop ( 'checked' , true ) ) { = 1 ; } else { = 0 ; }
这些功能是用来设置checkbox1被检查和总是返回1。现在使用的道具()函数的功能集。
Don’t混乱起来。
P / S：当我检查图像的src属性。如果src是空，返回当前页面的URL的(错误的)和属性(右)返回空字符串。
在这个例子中，您是错误的：
如果SRC为空
1) A property is in the DOM; an attribute is in the HTML that is
2) $( elem ).attr("checked" ) (1.6.1+) "checked" (String) Will
3) $( elem ).attr("checked" ) (pre-1.6) true (Boolean) Changed
我们要使用的是定制的，而当时的DOM对象的属性data-img, data-xyz 样。
也有些时候checkbox href 访问值和差分一个具有attr() 和prop() 的变化与输出与礼品的链接和来自全prop() origin Boolean 值的复选框(pre-1.6)
我们可以只读访问DOM元素，然后使它与其他undefined prop
1
< script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" > <! doctype html> < html lang= "en" > < head> < meta charset= "utf-8" > < style> { : 20px 0 0 ; } { : blue; } </ style> </ head> < body> < input id= "check1" type= "checkbox" checked= "checked" > < label for = "check1" > Check me</ label> < p> </ p> ( "input" ) .change ( function ( ) { var $input = $( this ) ; ( "p" ) .html ( ".attr( " checked" ):" + $input.attr ( "checked" ) + "" + ".prop( " checked" ):" + $input.prop ( "checked" ) + "" + ".is( " : checked" ):" + $input.is ( ":checked" ) ) + "" ; } ) .change ( ) ; </ body> </ html>
加里回答之间的孔是非常相关的问题，如果是在这样的方式编写的代码
1
obj.prop ( "style" , "border:1px red solid;" )
由于函数返回的对象上的CSSStyleDeclaration 道具，将不恰当的一些代码在浏览器的工作(在我的测试案例与IE8 with Chrome Frame Plugin )。
因此，下面的代码将改变它
1
obj.prop ( "style" ) .cssText = "border:1px red solid;"
解决该问题。
类属性显示在主体上。可通过以下代码访问：
为什么你会想使用.prop .attr()()而不是在adviced则是正式的吗？