jQuery attr vs道具？

2018-05-30 15:07:53

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

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

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

3）然后进行支柱修改测试
支柱： http://fiddle.jshell.net/test/11 : http://fiddle.jshell.net/test/11
Attr： 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
Attr： http://fiddle.jshell.net/test/11 : http://fiddle.jshell.net/test/11

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

现在，如果这是正确的，

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

为什么修改prop在1)修改属性，那对我没有意义？

为什么修改attr 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 />');

不幸的是你的链接没有工作:(

尽管有一些洞察， attr是针对所有属性的。 prop属性。

在较老的jQuery版本（<1.6）中，我们只有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中定义的值。

这并非总是如此，因为属性实际上已经改变了很多次，但是对于诸如checked这样的属性，没有属性可以改变，所以你需要使用prop。

参考文献：

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

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

有一个明显的例子来看看.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') + 'rn');
    $("#return").append("$('form').attr('action') : " + $('form').attr('action') + 'rn');
    $("#return").append("document.form.action : " + document.form.action);
});

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

我试过这个

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

并输出如下

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

这可能表明只有使用prop 读取 action时才会对其进行标准化。

链接地址: http://www.djcxy.com/p/4733.html

上一篇: jQuery attr vs prop?

下一篇: jQuery Data vs Attr?