.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记录，为什么？这对我未来的编码有何影响？

当前回答

DOM中有一个属性；属性在HTML中，该HTML被解析为DOM。

进一步的细节

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

示例：更改标记的class属性将更改DOM中该标记的className属性（这是因为类已被使用）。如果标记上没有属性，那么相应的DOM属性仍然为空或默认值。

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

edit

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

2011-09-27 16:55:09

其他回答

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

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的常见情况。

2011-05-04 14:27:19

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

重要的是，其中许多都是同步的（如果您更新了class属性，那么html中的class属性也将被更新；否则）。但某些属性可能会与意外的财产同步，例如，checked属性对应于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（），后者是官方推荐的？

.prop（）可以返回任何类型-string、integer、boolean；而.attr（）始终返回字符串。.prop（）据说比.attr（）快2.5倍。

2015-06-12 05:56:56

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

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

文件：

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

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

2015-10-25 00:05:40

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

.prop（）与.attr（）

推荐文章

最新文章

标签