jQuery attr 与道具？

Question

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

1) 道具修改测试
道具：http://fiddle.jshell.net/test/1
联系人：http://fiddle.jshell.net/test/1

2) 属性修改测试
道具：http://fiddle.jshell.net/test/1
联系人：/test/1

3) Attr 然后 Prop 修改测试
道具：http://fiddle.jshell.net/test/11
联系人：http://fiddle.jshell.net/test/11

4) Prop 然后 Attr 修改测试
道具：http://fiddle.jshell.net/test/11
联系人：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)+'<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 />');

Answer 1

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

尽管有一些见解，attr 适用于所有属性。 prop 用于属性。

在旧的 jQuery 版本 (attr。要访问 DOM 属性，例如 nodeName、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 中定义的值。

这并不总是正确的，因为该属性实际上被更改了很多次，但是对于诸如选中的属性，没有要更改的属性，因此您需要使用prop。

参考资料：

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

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

Answer 2

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

Answer 3

我试过了

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

输出如下

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

这可能表明action 仅在使用prop 读取 时才被规范化。

Answer 4

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

注意返回值的细微变化。

例如

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

attr(‘selected’)：在1.6之前返回true/false，从1.6.1返回“selected”/undefined

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

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