Dymystifier, yeah right, more like a helper but, if you are reading this, I guess that the title did it’s job. Moving swiftly along though, this post is all about the new prop() function introduced in jQuery 1.6. After it’s initial introduction with 1.6 the folks behind jQuery got a ton of feedback from the community as there existed a lot of confusion about attributes, properties, how they relate to each other and when to use the well known attr() function and when to use the new prop().

With that, jQuery 1.6.1 was released to make jQuery more backwards compatible and aim to prevent the confusion that was causes initially. The latest release goes a long way in reaching this goal but, there still is some confusion out there among new users as well as seasoned users of the jQuery API.

Thing is, while the attr() function will now work in most, if not all instances where it did before, some of the use cases actually calls for the use of prop() and internally jQuery will defer attr() over to prop(). While this is great for backwards compatibility, there is a couple of trade offs. First, it would be a positive move if users started using the ‘appropriate’ function for the task at hand and so help move jQuery forward:

From John Resig’s post: “In 1.6 we wanted to take the major step of completely separating the two, allowing us to create an .attr() method that wasn’t quite so mealy-mouthed with regards to how attributes were handled.”

Having this backwards compatibility does not really push developers to start thinking, before choosing a function and hence allowing the above change to be landed in say, jQuery 1.7.  The other trade-off is performance as certain calls to attr() will be mapped to the more appropriate prop() function.

So why all the confusion? Well, trying to find a clear cut answer to understanding what is an attribute and what is a property is not an easy task, if even possible at all and therefore we need to understand usage.

The one rule that is very cut and dry is, when setting or reading anything from either document or window, you have to use prop(). There is then also a preferred usage statement on the jQuery 1.6.1 release notes further aiding developers in the right direction:

The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.

While all of this makes the transition easier, I do believe it is important that developers start to actively make the transition to using the best function for the task at hand. To make the transition a little easier, I create the ‘Which Should I Use app‘. This is early days and is under constant development but, you can go ahead and start using it, contributing to it and sending your feedback. I hope this helps some people out and makes the transition smoother and your code more performant. I look forward to hearing from everyone.

Image Courtesy: Garrettc