Experiencing the jQuery 1.6 Breaking Changes

Unfortunately I did not actively follow the release of jQuery 1.6 as I would probably have noted that they introduced some breaking changes which would have prevented some issues at my side. So I needed to experience them the hard way :). Fortunately, though, our app was not yet in production but just end-user acceptance testing, so it didn't cause any major problem, but still...

Consider for instance the simple case of using the nice .attr() jQuery function for verifying whether a checkbox is checked or not. So in < jQuery 1.6 I'd have written something like

$("#mycheckBox").attr("checked") === true){
   //my custom logic
}

But, exactly this code would no more work reliably on jQuery 1.6 but rather I'd have to change it to

$("#mycheckBox").prop("checked") === true){
   //my custom logic
}

This is because with the latest jQuery release, they made a clear distinction between DOM attributes and properties.

In the 1.6 release we’ve split apart the handling of DOM attributes and DOM properties into separate methods. The new .prop() method sets or gets properties on DOM elements, and .removeProp() removes properties. In the past, jQuery has not drawn a clear line between properties and attributes.
Source: jQuery Blog

So what is the exact difference between a DOM attribute and property? Again...

Generally, DOM attributes represent the state of DOM information as retrieved from the document, such as the value attribute in the markup <input type="text" value="abc">. DOM properties represent the dynamic state of the document; for example if the user clicks in the input element above and types def the .prop("value") is abcdef but the .attr("value") remains abc.
Source: jQuery Blog

---

Questions? Thoughts? Hit me up on Twitter