.prop（）与.attr（）

所以jQuery1.6有了新的函数prop（）。

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

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

如果我必须切换到使用prop（），那么如果我切换到1.6，所有旧的attr（）调用都会中断？

更新

选择器='#id'$（选择器）.click（函数）{//而不是：var getAtt=this.getAttribute（'style'）；//我是否使用：var thisProp=$（this）.prop（'style'）；//或：var thisAttr=$（this）.attr（“样式”）；console.log（getAtt、thisProp、thisAttr）；});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js“></script>测试</div>

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

控制台将getAttribute作为字符串记录，将attr作为字符串记录但将prop作为CSSStyleDeclaration记录，为什么？这对我未来的编码有何影响？

当前回答

1） DOM中有一个属性；HTML中有一个属性解析为DOM。2） $（elem）.attr（“检查”）（1.6.1+）“检查”（字符串）将更改复选框状态3） $（elem）.attr（“已检查”）（1.6之前）true（布尔值）已更改带有复选框状态

大多数情况下，我们希望使用DOM对象，而不是自定义属性如数据img、数据xyz。访问复选框值和href时也有一些不同属性（）和属性（）随DOM输出的变化而变化prop（）作为来自原点的完整链接和复选框的布尔值（1.6之前）我们只能使用propother访问DOM元素，否则它将不定义

2015-12-18 09:28:27

其他回答

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

2011-05-03 23:06:19

肮脏的检查

该概念提供了一个可观察到差异的示例：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的复杂副作用。

2014-07-06 11:43:32

TL；博士

在大多数情况下，使用prop（）而不是attr（）。

属性是输入元素的当前状态。属性是默认值。

属性可以包含不同类型的内容。属性只能包含字符串

2014-07-16 09:45:52

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