jQuery attr vs prop?

Solution 1:

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

Solution 2:

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]

Solution 3:

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.

Solution 4:

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/