Juri Strumpflohner
Juri Strumpflohner Juri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops. Juri is also a recognized Google Developer Expert in Web Technologies

Experiencing the jQuery 1.6 Breaking Changes

2 min read

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
comments powered by Disqus