jQuery attr vs props？

IT技术 javascript jquery attr prop
2021-01-20 01:53:12

现在，这不只是一个有什么区别的问题，我已经做了一些测试（http://jsfiddle.net/ZC3Lf/）修改prop和attr的<form action="/test/"></form>​ 与输出是：

1) prop 修改测试
Prop: http://fiddle.jshell.net/test/1
Attr:http://fiddle.jshell.net/test/1

2) Attr 修改测试
Prop: http://fiddle.jshell.net/test/1
Attr:/test/1

3) Attr then Prop Modification test
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

4) Prop then Attr 修改测试
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

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

现在如果这是正确的，

  • 为什么修改prop似乎使action完全合格，相反为什么修改属性不是？
  • 为什么修改propin1)修改属性，那个对我来说没有意义？
  • 为什么修改attrin 会2)修改属性，它们是否意味着以这种方式链接？

测试代码

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)+'<br />');
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)+'<br />');
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)+'<br />');
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)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');
4个回答

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

不过，一些见解attr适用于所有属性。prop是为属性。

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

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

我发现一个问题，如果属性是自定义的，而不是 DOM 属性，prop() 返回undefined，并且 attr() 运行良好。
2021-03-23 01:53:12
测试链接是在上面的“完成一些测试”上我会让它更明显，但无论如何都在这里：jsfiddle.net/ZC3Lf
2021-04-11 01:53:12

有一个明显的案例可以看到 .prop 和 .attr 之间的差异

考虑下面的 HTML：

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

和下面的 JS 使用 jQuery ：

$(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') : [object HTMLInputElement]
$('form').attr('action') : #
document.form.action : [object HTMLInputElement]

我试过这个

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

它输出如下

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

这或许表明，action当它仅归读用prop。

@Hailwood 不会，因为您/test/可以访问attr，然后设置/test/1为attr，这是元素的属性。没有任何程序可以触发规范化。
2021-04-02 01:53:12
我不这么认为，否则输出2)将被标准化！
2021-04-03 01:53:12
我对您的意思感到困惑，2)上面的测试是element.attr(property, element.attr(property) + 1); body.append('Prop: '+element.prop(property)+'<br />'); body.append('Attr: '+element.attr(property)+'<hr />'); 如果读取时已标准化，那么那里的最后一行不会输出标准化版本吗？
2021-04-03 01:53:12
变量： property = 'action'; body = $('body'); element = $('form');
2021-04-08 01:53:12
归一化只会在prop被访问时触发，attr的访问不会。
2021-04-08 01:53:12

因为 jquery 1.6.1+ attr() 像 1.6 之前一样返回/更改属性。因此你的测试没有多大意义。

注意返回值的细微变化。

例如

attr('checked'): 从 1.6.1 开始，在 1.6 true/false 之前返回。返回“已检查”/未定义。

attr('selected'): 在 1.6 true/false 被返回之前，因为 1.6.1 “selected”/undefined 被返回

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

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

其它你可能感兴趣的问题
上一篇如何使用Javascript从输入框值中获取总和？ 下一篇Rails 5：如何将 $(document).ready() 与 turbo-links 一起使用