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

    • 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/27551.html

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

    下一篇: Selecting element by data attribute