现在这不仅仅是另一个What's the difference question,我有done some tests(http://jsfiddle.net/ZC3Lf/)个修改<form action="/test/"></form>
的prop
和attr
,输出是:
1) prop Modification test
props :http://fiddle.jshell.net/test/1
属性:http://fiddle.jshell.net/test/1
2) Attr Modification test
3) Attr then Prop Modification test
props :http://fiddle.jshell.net/test/11
属性:http://fiddle.jshell.net/test/11
4) Prop then Attr Modification test
Prop:http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11
Now I am confused about a couple of things, as far as my knowledge goes:
Prop: The value in its current state after any modifications via JavaScript
Attr: The value as it was defined in the html on page load.
Now if this is correct,
- Why does modifying the
prop
seem to make theaction
fully qualified, and conversely why does modifying the attribute not? - 为什么修改
1)
中的prop
会修改属性,这对我来说毫无意义? - 为什么修改
2)
中的attr
会修改属性,它们是否应该以这种方式链接?
Test Code
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 />');