Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Yesterday, the jQuery Project released minor version 1.6.1. This release comes as a response to confusion in the community regarding the breaking changes that we mentioned last week in the 1.6 Executive Brief. Let’s understand what’s involved in this minor point release.
In jQuery 1.6.1, you will now be able to use .attr() the same as you would in jQuery 1.5.2.
The jQuery Team used this release to educate users regarding the proper use of attr() and prop(). The difference between attributes and properties is simple. When you look at HTML markup and see an element such as:
<a href="https://amplifyjs.com">Amplify JS</a>href is the attribute. When the page is loaded the DOM tree is loaded into memory and the href attribute is able to be read and set using .attr().
Boolean attributes allow an element’s corresponding property to be set as true. Boolean attributes can still have property values set using attr() but you are advised to use the .prop() method to get and set the Boolean attributes properties since that is where the value changes are stored. Example:
<input checked type="checkbox">Checked is a Boolean attribute, its existence in this element sets the property for checked to true.
The jQuery 1.6.1 release notes provide an attribute/property lookup and the recommended method usage:
| Attribute/Property | .attr() |
.prop() |
|---|---|---|
| accesskey | ✓ | |
| align | ✓ | |
| async | ✓ | ✓ |
| autofocus | ✓ | ✓ |
| checked | ✓ | ✓ |
| class | ✓ | |
| contenteditable | ✓ | |
| defaultValue | ✓ | |
| draggable | ✓ | |
| href | ✓ | |
| id | ✓ | |
| label | ✓ | |
| location | ✓ | ✓ |
| multiple | ✓ | ✓ |
| nodeName | ✓ | |
| nodeType | ✓ | |
| readOnly | ✓ | ✓ |
| rel | ✓ | |
| selected | ✓ | ✓ |
| selectedIndex | ✓ | |
| src | ✓ | |
| style | ✓ | |
| tabindex | ✓ | |
| tagName | ✓ | |
| title | ✓ | |
| type | ✓ | |
| width | ✓ |
The gray checks indicate that .attr() can be used to set the attribute value but the preferred method would be to use .prop().
You should use the .val() method to get or set the value of a form element.
Recommended Usage from the jQuery Team
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.
appendTo Recommendation
With the breaking changes being reverted for a smooth transition from jQuery 1.5.2 to jQuery 1.6.1, we recommend upgrading to this version of jQuery. Although if you are using jQuery UI 1.8.12 then we recommend waiting until the next version of jQuery UI is released as 1.8.12 has not been tested against jQuery 1.6+ and unexpected issues might be present with that combination of libraries. This is a general rule for using the latest version of jQuery with jQuery UI.
Additionally, we would recommend listening to Episode 44 of the jQuery Podcast as they walk through and explain the new features of the last few releases.
