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

当前回答

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

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

由于prop函数返回CSSStyleDeclaration对象，上述代码在某些浏览器中无法正常工作（在我的例子中，使用带有Chrome框架插件的IE8进行了测试）。

因此，将其更改为以下代码

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

解决了问题。

2015-10-15 08:38:56

其他回答

所有内容都在文档中：

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

所以使用道具！

2011-05-03 19:35:47

对于jQuery来说，这一变化已经发生了很长时间。多年来，他们一直满足于一个名为attr（）的函数，该函数主要检索DOM财产，而不是您期望从名称中得到的结果。attr（）和prop（）的分离应该有助于缓解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");

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

DOM财产

语法：

document.body.onload=foo；

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

可视化：

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

文档

JavaScript：最终指南大卫·福莱纳根HTML属性，Mozilla开发中心Mozilla开发中心DOM元素财产

实例

HTML:<textarea id=“test”value=“foo”></textarea>

JavaScript：警报（$（'#test'）.attr（'value'））；

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

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

-马特

2011-05-03 20:05:31

属性->HTML

财产->DOM

2014-12-26 13:28:55

属性在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

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

进一步的细节

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

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

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

edit

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

2011-09-27 16:55:09