Tuesday, May 17, 2011

Jquery 1.6 .attr() vs.prop()

If you've only ever used jQuery and not the DOM directly, this could be a confusing change, although it is definitely an improvement conceptually. Not so good for the bazillions of sites using jQuery that will break as a result of this change though.
I'll summarize the main issues:
  • You usually want prop() rather than attr().
  • In the majority of cases, prop() does what attr() used to do. Replacing calls to attr() with prop() in your code will generally work.
  • Forget about attributes. You nearly always want a property, not an attribute. Where both a property and an attribute with the same name exists, the property always represents the current state while the attribute (in most browsers) represents the initial state. This affects properties such as the value property of <input> elements.
  • This change removes some of the layer of misguided magic jQuery stuck in front of attributes and properties, meaning jQuery developers will have to learn a bit about the difference between properties and attributes. This is a good thing.
  • Properties are generally simpler to deal with than attributes.
If you're a jQuery developer and are confused by this whole business about properties and attributes, you need to take a step back and learn a little about it, since jQuery is no longer trying to shield you from this stuff. For the authoritative but somewhat dry word on the subject, there's the specs: HTML DOM spec, DOM Level 2 spec, DOM Level 3 spec. Mozilla's DOM documentation is valid for most modern browsers and is easier to read than the specs, so you may find their DOM reference helpful. There's a section on element properties.
As an example of how properties are simpler to deal with than attributes, consider a checkbox that is initially checked. Here are two possible pieces of valid HTML to do this:
<input id="foo" type="checkbox" checked>
<input id="foo" type="checkbox" checked="checked">
So, how do you find out if the checkbox is checked with jQuery? Look on Stack Overflow and you'll commonly find the following suggestions:
  • if ( $("#cb").attr("checked") === true ) {...}
  • if ( $("#cb").attr("checked") == "checked" ) {...}
  • if ( $("#cb").is(":checked") ) {...}
This is actually the simplest thing in the world to do with the checked Boolean property, which has existed and worked flawlessly in every major scriptable browser since 1995:
if (document.getElementById("cb").checked) {...}
The property also makes checking or unchecking the checkbox trivial:
document.getElementById("cb").checked = false
In jQuery 1.6, this unambiguously becomes
$("#cb").prop("checked", false)
The idea of using the checked attribute for scripting a checkbox is unhelpful and unnecessary. The property is what you need.
  • It's not obvious what the correct way to check or uncheck the checkbox is using the checked attribute
  • The attribute value never changes to reflect the current state (except in some older versions of IE, thus making things still harder). Once the checkbox has been checked or unchecked (either by the user or by script), the attribute tells you nothing about the current state and is entirely useless. See http://jsfiddle.net/VktA6/.
.prop() -> http://api.jquery.com/prop/
.attr() -> http://api.jquery.com/attr/

No comments:

Post a Comment