Blog

jQuery 1.6 Release Executive Brief

The jQuery Project released version 1.6 earlier this week. The following is an executive brief of the new features and our recommendations for use of jQuery 1.6 in your applications. While the goal of the jQuery Team is to never break existing code there are also a few rare exceptions. jQuery 1.6 comes with a couple of breaking changes. Let’s try to understand what’s going on here.

BREAKING CHANGE: Case-mapping of data- attributes

A new .data() feature that was introduced in jQuery 1.5 allowed the import of values to JavaScript values using JSON semantics from data- attributes that were set on the element. A change in the case mapping in 1.6 is something you may want to be aware of when testing in your application. Consider the following HTML:

HTML

<p
  data-max-value="22"
  data-BEST-value="33"
  data-LaSt="44" ></p>

We can get the values of these attributes by calling .data() on them.

In jQuery 1.5.0-1.5.2 you would get:

> $("p").data();
{"max-value":22,"best-value":33,"last":44}

Now in jQuery 1.6 you’ll get:

> $("p").data();
{"maxValue":22,"bestValue":33,"last":44}

Notice that the data object is now camel-casing data attributes that have embedded dashes. This change is to conform to the W3C HTML5 spec.

BREAKING CHANGE: Separating DOM Attributes and Properties

This change is really hard to understand because up until now jQuery handled all this for you without the need for you to think about it. Typically, one would handle attributes and properties identically. In jQuery 1.6, the attr() method has been completely rewritten. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() only retrieves attributes.

Let’s look at an example:

<input type="checkbox"  checked>

The checked attribute signifies that the checkbox should load as checked.

In jQuery previous:

> $("input[type=checkbox]").attr("checked");
true

In jQuery 1.6:

> $("input[type=checkbox]").attr("checked");
""

It’ll return an empty string because the attribute was not set to anything. attr() now gets at the values of the attribute. jQuery 1.6 did provide two new methods to get at the properties of an element. .prop() and .removeProp()

So in jQuery 1.6:

> $("input[type=checkbox]").prop("checked");
true

To find out more about what is happening behind the scenes visit the updated .attr() documentation for jQuery 1.6 online.

Regarding performance, the .attr() rewrite and .val() has seen significant gains over 1.5.2.

NEW: Boolean Attributes

In jQuery 1.6 you can now toggle Boolean attributes by passing true/false to attr():

> $("input[type=checkbox]").attr("checked", false);

ENHANCEMENT: jQuery.map()

In jQuery 1.6, it is now possible to use jQuery.map() to map objects into a new array of items. Previously, this was only took in other arrays.

names = { firstname: "Elijah", lastname: "Mannor", age: "OLD"};

names = jQuery.map(names, function(v) {
    return v.toLowerCase();
});

returns: ["elijah", "manor", "old"]

ENHANCEMENT: Relative CSS

In jQuery 1.6, you now have the ability to set CSS properties using relative values.

> $("div").css("width", "+=100px");

PERFORMANCE: .data()

Large performance improvements for .data() were achieved by improving event triggering, specifically getData and setData.

NEW: deferred.always()

New handler for Deferreds: add handlers to be called when the Deferred object is either resolved or rejected. deferred.always()

$.get("test.php").always( function() {
  alert("$.get completed with success or error callback arguments");
} );

NEW: deferred.pipe()

Utility method to filter and/or chain Deferreds. deferred.pipe()

NEW: Effects method deferred.promise()

$.animate() now has a deferred method .promise(). When all simultaneous animations are completed a promise can be observed. This benefits us as we now can avoid running timers and depend on the browser to provide the best animation experience. See the API site for further examples.

NEW: jQuery.holdReady()

jQuery 1.6 provides a new mechanism, jQuery.holdReady(), for delaying the execution of the .ready() event. The intended use case for this is primarily directed at plugin authors.

// Pause execution of the ready event
jQuery.holdReady(true);

//Resume it’s execution
jQuery.holdReady(false);

ENHANCEMENT: :focus

In jQuery 1.6, the :focus selector now works properly across all browsers. Use this selector to find the currently focused element on the page.

$("input:focus").addClass("active");

ENHANCEMENT: Traversing improvements

In jQuery 1.6, find(), closest(), and is() now all take DOM elements AND jQuery objects in addition to selectors.

$("div").find($("p"));

appendTo’s Recommendation

While there are many great benefits to this release the breaking changes that revolve around .attr() and .prop() have sparked many discussions in the community that the jQuery team is currently addressing. We are noticing a trend in the development channels towards a new update to jQuery 1.6.1 that is being pushed through to fix and revert changes made to .attr(). It is our recommendation to hold off on updating to the latest version until at least jQuery 1.6.1 is released. Indications a jQuery 1.6.1 release could happen as early as Tuesday, May 10, 2011.

These recommendations are based on feedback from the community and observations of the public IRC development channels (#jquery-dev on freenode.net). We feel that a planned quick turn around on a minor release is enough to recommend a wait-and-see approach to upgrading applications to the latest version. We’ll review and provide an executive summary with the new release as well.

Tweet about this on TwitterShare on FacebookShare on RedditShare on Google+Share on LinkedIn