测试代码

Question

现在这不仅仅是另一个有什么不同的问题，我done some tests(http://jsfiddle.net/ZC3Lf/)修改了prop和attr的{{1}}输出是：

1）道具修改测试
  道具：<form action="/test/"></form>
  Attr：http://fiddle.jshell.net/test/1

2）Attr修改测试
  道具：http://fiddle.jshell.net/test/1
  Attr：http://fiddle.jshell.net/test/1

3）Attr然后支柱修改测试
  道具：/test/1
  Attr：http://fiddle.jshell.net/test/11

4）支持Attr修改测试
  道具：http://fiddle.jshell.net/test/11
  Attr：http://fiddle.jshell.net/test/11

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

现在如果这是正确的，

为什么修改http://fiddle.jshell.net/test/11似乎使prop完全合格，反之为什么不修改属性？
为什么修改action中的prop会修改属性，对我来说没有意义？
为什么修改1)中的attr会修改属性，是否意味着要以这种方式进行关联？

<小时/>

测试代码

HTML

JavaScript

2)

Answer 1

不幸的是，你的链接都不起作用：（

虽然有些见解，attr适用于所有属性。 prop用于属性。

在较旧的jQuery版本（＆lt; 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

Answer 2

有一个明显的例子可以看到.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]

Answer 3

我试过这个

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

，输出如下

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

这可能表示action只有在{strong>读取 prop时才会正常化。

Answer 4

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

请注意返回值的微小变化。

e.g。

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

attr（'selected'）：返回1.6之前的真/假，因为1.6.1“选中”/未定义被返回

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

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

jQuery attr vs prop？

测试代码

4 个答案: