New methods in jQuery 1.6

Oct 24, 2011
jQuery News
177 Shares
By

jQuery is an actively-developed JavaScript library with a fairly rapid release cycle. As well as general enhancements, performance tweaks and bug fixes, new methods are frequently added to the library.

In this article we’ll take a look at the new methods that have been added to the 1.6+ release and some of the enhancements.

Delaying the ready event with the holdReady() method

The holdReady() method is used to delay the firing of jQuery’s ready event, a cornerstone event which is popularly used to execute custom code once the DOM is ready to be manipulated. As of jQuery 1.6 we can now postpone the triggering of this event for an arbitrary length of time in order to wait for other conditions to be satisfied, such as the loading of a plugin.

It’s a dual-purpose method, as is the jQuery way, and can be used to both delay the event and release the event using the same simple signature. The method accepts a Boolean argument which specifies whether the event should be held or released.

One downside to this method is that it should be called as early in the document as possible, such as in the <head> of the page, and can obviously only be called after jQuery itself has loaded. As we know, for performance reasons, scripts should usually be placed as close to the end of the document as possible, so moving jQuery to the <head> should only be considered when absolutely required.

Using holdReady() is super easy; as early in the document loading as possible simply call the method with the value true as the argument:

jQuery.holdReady(true);

Then, once the additional file(s) you require have loaded, call the method again with the value false:

jQuery.holdReady(false);

Adding and removing element properties

The prop() method is a way to explicitly retrieve element property values. There is a subtle difference between properties and attributes and this difference used to cause occasional issues when trying to get or set property values using jQuery’s attr() method.

The classic example is with checkbox elements; there were sometimes issues when trying to dynamically set the checked property using the attr() method. When the prop() method was released in version 1.6 the attr() method was changed so that it retuned only the initial state of the property, however this was changed in the 1.6.1 release so that it also returns the current state when using attr(). To use the prop() method we use the same syntax as with attr():

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

The method in this format returns the current value. To use the method in setter mode we just supply a second argument specifying what we would like the value to be.

The prop() method can also be used to set custom properties on elements, and you should note that the method only returns the property value for the first element in a collection, not each element in the collection.

To remove custom properties, the new removeProp() method is also available since jQuery 1.6. This method should only be used to remove custom properties; if native properties are removed it is not possible for them to be re-added. Custom properties should always be removed before the element that they have been added to is removed from the DOM in order to prevent memory leaks in old versions of IE.

Promise objects

The new promise() method returns a promise object that can be used to execute arbitrary code once all actions on each element in the collection the method is attached to have completed. By default the promise object monitors fx queues, but custom queues can also be specified by supplying an optional first argument to the method. The object that the promise methods are attached to can also be specified using an optional second argument to avoid creating a new object.

The method can be used in conjunction with methods such as done() to execute a function when all animations on an element have completed:

$("#animated").promise().done(function () {
    //do stuff
});

A new selector

We can now make use of the :focus pseudo-selector to select a focused element, or determine whether an element has focus, a great new addition that could help save on convoluted work-arounds.

New deferred methods

jQuery 1.6 brings two new methods for use with deferred objects; the first is the always() method which can be used to execute a function regardless of whether the deferred object is resolved or rejected. The second new method is pipe(), which can be used to filter deferred objects either when they resolve or fail. The method returns either a filtered value which can be passed to the done() or fail() methods of the deferred object the pipe() method is attached to, or a new promise object.

Method updates

In addition to the totally new methods we’ve looked at so far, some of jQuery’s existing methods have also been modified, these include:

attr() This method now returns undefined when retrieving an attribute that has not been set
closest() This method now accepts jQuery elements and DOM nodes as the filter
find() This method now accepts jQuery elements and DOM nodes as the filter
Is() This method now accepts jQuery elements and DOM nodes as the filter
map() This method can now iterate over objects as well as arrays
nextUntil() This method now accepts jQuery elements and DOM nodes as the filter
parentsUntil() This method now accepts jQuery elements and DOM nodes as the filter
prevUntil() This method now accepts jQuery elements and DOM nodes as the filter
Undelegate() This method can now unbind all event handlers from a namespace

Summary

In this article we’ve focused on the new methods exposed by the 1.6 version of the jQuery JavaScript library, as well as the changes to existing methods. The information provided is just a quick summary, so I’d recommend a trip to the jQuery docs pages for further information when using any of the new methods.

I’d also recommend learning how they work and getting familiar with them quickly, it won’t be long before jQuery 1.7 is released.

Author: Dan Wellman
Dan Wellman is an author and front-end developer based in the UK.
  • http://www.webmaisterpro.com/ Kaloyan Banev

    jQuery is one of my favorite frameworks, probably same apply for MooTools. Recently I’ve checked different libraries, but none is getting even closer to jQuery

  • Anonymous

    Currying, $.proxy(myFunc, this, arg1, arg2, etc), is a very welcome feature, albeit undocumented.