.prop（）vs .attr（）

 

所以jQuery 1.6有了新的函数prop() 。 

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

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

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

UPDATE 

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>

2012年11月1日更新

我原来的回答特别适用于jQuery 1.6。 我的建议仍然是一样的，但jQuery 1.6.1稍微改变了一些事情：面对预测的大量破损网站，jQuery团队将attr()恢复为接近（但不完全相同）其布尔属性的旧行为。 约翰Resig也博客了。 我可以看到他们遇到的困难，但仍然不同意使用attr()的建议。

原始答案

如果你只使用过jQuery而不是直接使用DOM，这可能是一个令人困惑的变化，尽管它在概念上绝对是一个改进。 对于那些使用jQuery的网站来说，这样做并不是那么好，但是由于这种变化，网站会因此而中断。

我将总结一下主要问题：

  • 你通常需要prop()而不是attr() 。
  • 在大多数情况下， prop()执行attr()用来做的事情。 用代码中的prop()替换对attr()调用通常会起作用。
  • 属性通常比属性更容易处理。 属性值可能只是一个字符串，而属性可以是任何类型。 例如， checked属性是布尔值， style属性是每个样式都有单独属性的对象， size属性是一个数字。
  • 在存在同名属性的情况下，通常更新一个会更新另一个属性，但对于输入的某些属性（例如value和checked ，情况并非如此：对于这些属性，该属性始终代表当前状态而属性（除旧版本的IE外）对应于输入的缺省值/检查（反映在defaultValue / defaultChecked属性中）。
  • 这种改变消除了在属性和属性前停留的一些魔法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进行检查？ 看看堆栈溢出，你通常会发现以下建议：

  • if ( $("#cb").attr("checked") === true ) {...}
  • if ( $("#cb").attr("checked") == "checked" ) {...}
  • if ( $("#cb").is(":checked") ) {...}

    • 这实际上是世界上最简单的事情，使用checked Boolean属性，该属性自1995年以来在每个主要的可脚本化浏览器中都存在并运行得非常完美：

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

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

    DOM元素是一个对象，是内存中的一件事物。 像OOP中的大多数对象一样，它具有属性。 它还分别具有元素上定义的属性的映射（通常来自浏览器读取以创建元素的标记）。 某些元素的属性从具有相同或相似名称的属性中获取它们的初始值（ value从“value”属性获取其初始值; href从“href”属性获取其初始值，但它不完全相同; className属性中的className ）。 其他属性以其他方式获取其初始值：例如， 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"

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

    link对象是一个真实的东西，你可以看到访问它上面的属性和访问属性之间存在真正的区别。

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

    标准属性在各种DOM规范中进行了规定：

  • DOM2 HTML（很大程度上已经过时，请参阅HTML规范）
  • DOM2核心（过时）
  • DOM3核心（过时）
  • DOM4

    • 这些规格具有出色的索引，我建议保持与他们的链接方便; 我一直都在使用它们。

    例如，自定义属性可能包括任何data-xyz属性，您可能会将这些属性放在元素上以向您的代码提供元数据（现在，只要您坚持使用data-前缀，那么该属性在HTML5中是有效的）。 （jQuery的的最新版本给你访问data-xyz通过要素data的功能，但该功能不只是一个访问data-xyz属性[它都越来越小于];除非你真正需要它的功能，我'使用attr函数与data-xyz属性进行交互。）

    attr函数过去有一些令人费解的逻辑来获得他们认为你想要的东西，而不是逐字地获取属性。 它混淆了这些概念。 转向prop和attr是为了将它们混淆。 简要V1.6.0 jQuery的去在这方面太远，但很快就被加回功能attr处理，人们使用常见的情况attr时，技术上应该使用prop 。

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

    为了充分理解它们是如何工作的，下面是关于HTML属性和DOM属性之间差异的扩展解释：

    HTML属性

    句法：

    <body onload="foo()">

    目的：允许标记为了事件，渲染和其他目的而具有与其关联的数据。

    可视化： HTML属性 类属性在此处显示在主体上。 它可以通过以下代码访问： 

    var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

    属性以字符串形式返回，并且可能从浏览器到浏览器不一致。 但是，在某些情况下，它们可能至关重要。 如上所示，IE 8 Quirks Mode（及以下）需要get / set / removeAttribute中DOM属性的名称，而不是属性名称。 这是为什么了解其差异很重要的众多原因之一。

    DOM属性

    句法：

    document.body.onload = foo;

    目的：提供对属于元素节点的属性的访问。 这些属性与属性类似，但只能通过JavaScript访问。 这是一个重要的区别，有助于阐明DOM属性的作用。 请注意，属性与属性完全不同 ，因为此事件处理程序分配是无用的，并且不会收到事件（主体没有onload事件，只有onload属性）。

    可视化： DOM属性

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

    文档

  • JavaScript：David Flanagan的权威指南
  • HTML属性，Mozilla开发人员中心
  • DOM元素属性，Mozilla开发人员中心

    • 例

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

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

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

    没有浏览任何一个函数的新代码，我可以放心地说，混淆与HTML属性和DOM属性之间的区别更多地与代码本身相关。 希望这能为你解决一些问题。

    -Matt

    链接地址: http://www.djcxy.com/p/717.html

    上一篇: .prop() vs .attr()

    下一篇: How do you check for an empty string in JavaScript?