所以jQuery 1.6有了新的功能。prop()

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

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

如果我确实必须切换到使用，如果我切换到 1.6，所有旧调用都会中断？prop()attr()

更新

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

控制台将 记录为 字符串和 as 字符串，但 as 记录为 ，为什么？这对我未来的编码有何影响？getAttributeattrpropCSSStyleDeclaration

网友回答：

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

DOM 元素是一个对象，一个内存中的东西。与 OOP 中的大多数对象一样，它具有属性。它还单独具有在元素上定义的属性映射（通常来自浏览器读取以创建元素的标记）。元素的某些属性从具有相同或相似名称的属性中获取其初始值（从“value”属性获取其初始值; 从“href”属性获取其初始值，但它的值并不完全相同; 从“类”属性）。其他属性以其他方式获取其初始值：例如，属性根据其父元素获取其值;元素始终具有属性，无论它是否具有“style”属性。valuehrefclassNameparentNodestyle

让我们在页面中考虑这个锚点：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"

（这些值与大多数浏览器一样;有一些变化。

该对象是真实的东西，您可以看到访问其上的属性和访问属性之间存在真正的区别。link

正如蒂姆所说，绝大多数时候，我们希望与房产合作。部分原因是它们的值（甚至名称）在浏览器中往往更加一致。我们通常只想在没有与之相关的属性（自定义属性）时，或者当我们知道对于该特定属性，属性和属性不是 1：1 时（如上面的“href”）。href

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

• DOM2 HTML（基本上已经过时，请参阅HTML规范）
• DOM2 核心（已过时）
• DOM3 核心（已过时）
• DOM4

这些规范具有出色的索引，我建议随身携带指向它们的链接;我一直在使用它们。

例如，自定义属性将包括您可能放在元素上的任何属性，以便为代码提供元数据（现在，只要您坚持使用前缀，HTML5 就有效了）。（最新版本的jQuery允许你通过函数访问元素，但该函数不仅仅是属性的访问器[它的作用更多和更少];除非你真的需要它的功能，否则我会使用该函数与属性进行交互。data-xyzdata-data-xyzdatadata-xyzattrdata-xyz

该函数过去有一些复杂的逻辑来获取他们认为您想要的内容，而不是从字面上获取属性。它混淆了这些概念。搬到并旨在将它们分开。简而言之，在 v1.6.0 中，jQuery 在这方面走得太远了，但功能很快被添加回去，以处理人们在技术上应该使用时使用的常见情况。attrpropattrattrattrprop

网友回答：

更新 1年2012月<>日

我最初的答案特别适用于jQuery 1.6。我的建议保持不变，但jQuery 1.6.1稍微改变了一些事情：面对预测的大量损坏网站，jQuery团队恢复了接近（但不完全相同）布尔属性的旧行为。约翰·雷西格（John Resig）也在博客上写了这篇文章。我可以看到他们遇到的困难，但仍然不同意他的建议。attr()attr()

原答案

如果你只使用过jQuery而不是直接使用DOM，这可能是一个令人困惑的变化，尽管它在概念上绝对是一个改进。对于使用jQuery的无数网站来说不太好，但是由于此更改而中断。

我将总结主要问题：

• 您通常想要而不是 .prop()attr()
• 在大多数情况下，做过去做的事情。在代码中替换 to 的调用通常有效。prop()attr()attr()prop()
• 属性通常比属性更易于处理。属性值只能是字符串，而属性可以是任何类型的。例如，属性是布尔值，属性是具有每种样式的单独属性的对象，属性是一个数字。checkedstylesize
• 如果同时存在属性和具有相同名称的属性，通常更新一个属性会更新另一个属性，但对于输入的某些属性，例如 和 ： 对于这些属性，属性始终表示当前状态，而属性（旧版本的 IE 除外）对应于输入的默认值/检查性（反映在 / 属性中）。valuecheckeddefaultValuedefaultChecked
• 此更改消除了卡在属性和属性前面的一些神奇的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选中了呢？查看Stack Overflow，您通常会找到以下建议：

• if ( $("#cb").attr("checked") === true ) {...}
• if ( $("#cb").attr("checked") == "checked" ) {...}
• if ( $("#cb").is(":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/。

网友回答：

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

为了完全理解它们是如何工作的，这里有一个关于HTML属性和DOM属性之间区别的扩展说明。

网页属性

语法：

<body onload="foo()">

用途：
允许标记具有与其关联的数据，以用于事件、呈现和其他目的。

可视化：

class 属性显示在正文上。可通过以下代码访问它：

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 属性的作用。请注意，属性与属性完全不同，因为此事件处理程序赋值是无用的，并且不会接收事件（body 没有 onload 事件，只有一个 onload 属性）。

可视化：

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

文档

• JavaScript： The Definitive Guide
  by David Flanagan
• HTML 属性，
  Mozilla Dev Center
• DOM Element Properties， Mozilla Dev Center

例

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

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

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

无需浏览任一函数的新代码，我可以自信地说，混淆更多地与 HTML 属性和 DOM 属性之间的差异有关，而不是与代码本身有关。希望这能为您澄清一些问题。

-马 特