Response title
This is preview!
Move this topic
Please explain .attr vs .prop change in 1.6
in Using jQuery
•
12 years ago
I don't think i'm alone in not understanding what this change does and how it is going to affect my code. I've implemented 1.6 in some of my newer applications without any issues, however, for all i know something might not be working quite right and it will end up showing itself later down the road after i move this to a production environment.
-- Kevin
When should i use .attr?
When should i use .prop?
-- Kevin
1
Replies(9)
Re: Please explain .attr vs .prop change in 1.6
12 years ago
I believe the most significant difference is, having changed an attribute value programmatically, when you
need to test its value:
So if we want to see if a checkbox is currently checked we should use (1.6):
This seems a little naughty. If we have existing code that checks
need to test its value:
- $(elem).attr('checked') // returned true (Boolean) prior to 1.6
- $(elem).attr('checked') // now returns "checked" (string) 1.6
- $(elem).prop('checked') // now returns true (Boolean) 1.6
So if we want to see if a checkbox is currently checked we should use (1.6):
- if ( $(elem).prop('checked') == true ) // or
- if ( $(elem).prop('checked') )
This seems a little naughty. If we have existing code that checks
- ( $(elem).attr('checked') == false )
Leave a comment on andrewgsw's reply
Re: Please explain .attr vs .prop change in 1.6
12 years ago
I was thinking the difference was more along the lines of .attr retrieves the html value, where as .prop retrieves the property value.
Edit: the above line is also supported by your code above. .attr("checked") returns the str value of the attribute in 1.6
Take the input value example:
<input value="foo" type="text" id="demo" />
<button id="btn">alert values</button>
<script>
var inp = $("#demo");
$("#btn").click(function(){
alert(inp.val());
alert(inp.attr("value"));
alert(inp.prop("value"));
});
</script>
First, it will alert "foo" three times.
If you change the value to "foobar", it will alert "foobar" "foo" "foobar"
Of course, this is probably a bad example because you should never use .attr('value') to get the value of an input, however it does show whats confusing me. Are there any other situations where this behavior may happen other than input elements?
That still doesn't really tell me if i should be using $('a').attr("href") or $('a').prop("href"), or $("form").attr("action") vs $("form").prop("action"), etc.
-- Kevin
-- Kevin
Re: Re: Please explain .attr vs .prop change in 1.6
12 years ago
For an obvious sample, innerHTML is a property. Prior to 1.6 using FF 4.0, you can
access it using attr(). In 1.6 you'll get undefined (IE works using both functions bug?). You'll have to
look up the element docs in order to know the properties. In you sample
href and action are properties.
http://www.w3schools.com/jsref/prop_anchor_href.asp
http://www.w3schools.com/jsref/prop_form_action.asp
http://www.w3schools.com/jsref/prop_anchor_href.asp
http://www.w3schools.com/jsref/prop_form_action.asp
Leave a comment on Kevin B's reply
Re: Please explain .attr vs .prop change in 1.6
12 years ago
I believe the distinction should be as follows:
and move away from using attr() to change (what should really be) a property of the element.
- <button id="theBtn" value="taDa" disabled="disabled">Hi There</button>
- $('#theBtn').attr('disabled') // to return the initial value of this attribute as a string "disabled"
- // and
- $('#theBtn').prop('disabled') // to return the current state of this property (true or false)
- $('#theBtn').prop('disabled',true) // to change the property - using a correct data-type
and move away from using attr() to change (what should really be) a property of the element.
Leave a comment on andrewgsw's reply
Re: Please explain .attr vs .prop change in 1.6
12 years ago
I copied the following from an answer to a previous post - it might help 
Yes, attr is meant for html attributes as they are strictly defined. prop is for properties. So for instance, say you have a node elem with class "something" (raw element not jQuery object). elem.className is the property, but <div class="something"></div> is where the attribute resides. Changing the class attribute also changes the property automatically and vise versa. Currently, attr is jumbled and confusing because it has tried to the job of both functions and there are many bugs because of that. The introduction of jQuery.fn.prop will solve several blockers, separate code as it should have been separated from the beginning, and give developers faster functions to do what they expect them to do. Let me make up a percentage for a sec and say that from my experience in the support IRC and reading other's code, 95% of the use cases for attr will not have to switch to prop.
Leave a comment on andrewgsw's reply
Re: Please explain .attr vs .prop change in 1.6
12 years ago
I came across a page that uses jQuery 1.6 and generated an error:
The code that originated the error was in a slider plug-in - so not easy to fix. (I suppose updating the plug-in might fix this particular issue - or giving the element a dummy class name - but the problem will still recur elsewhere.)
I wonder how many others are coming across similar issues? I think I'll stick with 1.5.1 for the moment
Within the html I believe this was referring to an element where 'class' was not present as an HTML attribute.$(this).attr("class") is undefned
The code that originated the error was in a slider plug-in - so not easy to fix. (I suppose updating the plug-in might fix this particular issue - or giving the element a dummy class name - but the problem will still recur elsewhere.)
I wonder how many others are coming across similar issues? I think I'll stick with 1.5.1 for the moment
Leave a comment on andrewgsw's reply
Re: Please explain .attr vs .prop change in 1.6
12 years ago
See this question/answer:
There is a whole discussion there of what to use
Leave a comment on maniator's reply
Re: Please explain .attr vs .prop change in 1.6
12 years ago
Thanks for the link.
I understand the differences and the implementation of prop(). It is a good thing, and to be welcomed. But I still wonder how many existing pages will break when people adopt 1.6. The future will tell us. Andy.
I understand the differences and the implementation of prop(). It is a good thing, and to be welcomed. But I still wonder how many existing pages will break when people adopt 1.6
. The future will tell us. Andy.
Leave a comment on andrewgsw's reply
Re: Please explain .attr vs .prop change in 1.6
12 years ago
It is definitely a change that will break a lot of functionality, but it is a change that needs to happen. Better to do it now than two years from now i guess.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Kevin B's question