首页 文章

jQuery attr vs prop？

提问于
浏览 次
98

现在这不只是另一个什么是差异问题，我有done some tests(http://jsfiddle.net/ZC3Lf/)修改 prop 和 attr 的 <form action="/test/"></form> 输出为：

1）道具修改测试道具：http：//fiddle.jshell.net/test/1 Attr：http：//fiddle.jshell.net/test/1 2）Attr修改测试道具：http：//fiddle.jshell .net / test / 1 Attr：/ test / 1 3）Attr然后Prop Propification test Prop：http：//fiddle.jshell.net/test/11 Attr：http：//fiddle.jshell.net/test/11 4然后支持Attr修改测试道具：http：//fiddle.jshell.net/test/11 Attr：http：//fiddle.jshell.net/test/11

现在我对几件事情感到困惑，据我所知：
Prop: 通过JavaScript进行任何修改后的当前状态值
Attr: 在页面加载的html中定义的值 .

现在如果这是正确的，

  • 为什么修改 prop 似乎使 action 完全合格，相反为什么不修改属性？

  • 为什么修改 1) 中的 prop 修改属性，那对我来说没有意义？

  • 为什么修改 2) 中的 attr 修改属性，它们是否意味着以这种方式链接？

测试代码

HTML

JavaScript

var element = $('form');
var property = 'action';

/*You should not need to modify below this line */

var body = $('body');
var original = element.attr(property);

body.append('<h1>Prop Modification test</h1>');
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'
');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr Modification test</h1>');
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'
');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr then Prop Modification test</h1>');
element.attr(property, element.attr(property) + 1);
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'
');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Prop then Attr Modification test</h1>');
element.prop(property, element.prop(property) + 1);
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'
');
body.append('Attr: '+element.attr(property)+'<hr />');
javascript jquery attr prop

4 回答

  • 70

    不幸的是，你的链接都不起作用:(

    但是有些见解， attr 适用于所有属性 . prop 是属性 .

    在较旧的jQuery版本（<1.6）中，我们只有 attr . 要获得诸如 nodeName ， selectedIndex 或 defaultValue 之类的DOM属性，您必须执行以下操作：

    var elem = $("#foo")[0];
if ( elem ) {
  index = elem.selectedIndex;
}

    那很糟糕，所以添加了 prop ：

    index = $("#foo").prop("selectedIndex");

    这很棒，但令人讨厌的是这不是向后兼容的，因为：

    <input type="checkbox" checked>

    没有 checked 的属性，但它确实有一个名为 checked 的属性 .

    所以，在1.6的最终版本中， attr 也会做 prop 所以事情并没有突破到所有地方！

    关于：

    Prop：通过JavaScript Attr进行任何修改后的当前状态值：在页面加载的html中定义的值 .

    这并非总是如此，因为很多时候属性实际上已更改，但对于诸如checked之类的属性，没有要更改的属性，因此您需要使用prop .

    参考文献：

    http://blog.jquery.com/2011/05/03/jquery-16-released/

    http://ejohn.org/blog/jquery-16-and-attr

    回复于
  • 1

    有一个明显的例子可以看到.prop和.attr之间的区别

    考虑下面的HTML：

    <form name="form" action="#">
    <input type="text" name="action" value="myvalue" />
    <input type="submit" />
</form>
<pre id="return">
</pre>

    以及使用jQuery的JS：

    $(document).ready(function(){
    $("#return").append("$('form').prop('action') : " + $('form').prop('action') + '\r\n');
    $("#return").append("$('form').attr('action') : " + $('form').attr('action') + '\r\n');
    $("#return").append("document.form.action : " + document.form.action);
});

    $（'form'） . prop（'action'）将返回document.form.action node => HTMLInputElement
    $（'form'） . attr（'action'）将返回action属性=>＃

    回复于
  • 1

    我试过这个

    console.log(element.prop(property));
console.log(element.attr(property));

    它输出如下

    http://fiddle.jshell.net/test/
/test/

    这可能表示 action 仅在 read 与 prop 时进行了规范化 .

    回复于
  • 3

    因为jquery 1.6.1 attr（）返回/更改属性，就像1.6之前一样 . 因此你的测试没有多大意义 .

    注意返回值的微小变化 .

    例如

    attr（'checked'）：1.6之前的真/假是回归，因为1.6.1 . 返回“checked”/ undefined .

    attr（'selected'）：返回1.6之前的true / false，因为返回1.6.1“selected”/ undefined

    可以在此处找到德语对该主题的详细概述：

    http://mabraham.de/jquery-prop-attr-val-richtig-verwenden/

    回复于

相关问题