jQuery attr vs prop？

Question

现在,这不只是一个有什么区别的问题,我已经做了一些测试(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然后Prop Propification测试
Prop:http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

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

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

现在如果这是正确的,

• 为什么修改prop似乎使action完全合格,相反为什么修改属性不？
• 为什么修改propin 1)修改属性,对我来说没有意义？
• 为什么修改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 />');

Answer 1

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

但是,一些见解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