Now this isn't just another What's the difference question, I have done some tests(http://jsfiddle.net/ZC3Lf/) modifying the prop
and attr
of <form action="/test/"></form>
with the output being:
1) prop Modification test
Prop:http://fiddle.jshell.net/test/1
Attr:http://fiddle.jshell.net/test/1
2) Attr Modification test
Prop:http://fiddle.jshell.net/test/1
Attr:/test/1
3) Attr then Prop Modification test
Prop:http://fiddle.jshell.net/test/11
Attr: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,
prop
seem to make the action
fully qualified, and conversely why does modifying the attribute not?prop
in 1)
modify the attribute, that one makes no sense to me? attr
in 2)
modify the property, are they meant to be linked that way?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 />');
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: