JQuery atr vs？

现在这不仅仅是另一个 有什么区别吗，我有 做了一些测试( 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)进行支柱改性试验
道具: http://fiddle.jshell.net/test/11
引用: http://fiddle.jshell.net/test/11

4)支持然后经过修改试验
道具: http://fiddle.jshell.net/test/11
引用: http://fiddle.jshell.net/test/11

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

如果这是正确的,

  • 为什么修改 prop似乎使得 action完全符合条件，反之，为什么不修改属性呢？
  • 为什么修改 1)中的 prop会修改属性，这对我来说毫无意义？
  • 为什么修改 2)中的 attr会修改属性，它们是否应该以这种方式链接？

测试代码

超文本标示语言

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 />');
37196 次浏览
小开
最佳答案

Unfortunately none of your links work :(

Some insight though, attr is for all attributes. prop is for properties.

In older jQuery versions (<1.6), we just had attr. To get to DOM properties such as nodeName, selectedIndex, or defaultValue you had to do something like:

var elem = $("#foo")[0];
if ( elem ) {
index = elem.selectedIndex;
}

That sucked, so prop was added:

index = $("#foo").prop("selectedIndex");

This was great, but annoyingly this wasn't backward compatible, as:

<input type="checkbox" checked>

has no attribute of checked, but it does have a property called checked.

So, in the final build of 1.6, attr does also do prop so that things didn't break. Some people wanted this to be a clean break, but I think that the right decision was made as things didn't break all over the place!

Regarding:

Prop: The value in it's current state after any modifications via JavaScript

Attr: The value as it was defined in the html on page load.

This isn't always true, as many times the attribute is actually changed, but for properties such as checked, there isn't an attribute to change, so you need to use prop.

References:

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

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

小开

I have tried this

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

and it outputs as below

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

this may indicates that the action is normalized only when it is read with prop.

小开

There is a clear case to see differences between .prop and .attr

consider the HTML below :

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

and the JS below using 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);
});

creates the following output:

$('form').prop('action') : [object HTMLInputElement]
$('form').attr('action') : #
document.form.action : [object HTMLInputElement]
小开

since jquery 1.6.1+ attr() returns/changes property like before 1.6. thus your tests do not make much sense.

be aware of minor changes in return values.

e.g.

attr(‘checked’): before 1.6 true/false is returend, since 1.6.1. “checked”/undefined is returned.

attr(‘selected’): before 1.6 true/false is returned, since 1.6.1 “selected”/undefined is returned

a detailed overview to this topic in german can be found here:

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


提交答案