jQuery 1.4 Released: The 15 New Features you Must Know

jQuery 1.4 was recently released. This wasn't simply a maintenance release as some had speculated; there are many new features, enhancements and performance improvements included in 1.4! This post covers the new features and enhancements that you may find beneficial.

1. Passing Attributes to jQuery(…)

Pre 1.4, jQuery supported adding attributes to an element collection via the useful "attr" method, which can be passed both an attribute name and value, or an object specifying several attributes. jQuery 1.4 adds support for passing an attributes object as the second argument to the jQuery function itself, upon element creation.

Let's say you need to create an anchor element with several attributes. With 1.4 it's as simple as:

You may have noticed the "text" attribute— you'll probably be wondering what that's doing there, after all there's no "text" attribute for anchors! Well, jQuery 1.4 utilises its very own methods when you pass certain attributes. So the "text" attribute specified above would cause jQuery to call the ".text()" method, passing "Go to Google!" as its only argument.

2. Everything "until"!

Three new methods have been added to the DOM traversal arsenal in 1.4, "nextUntil", "prevUntil" and "parentsUntil". Each of these methods will traverse the DOM in a certain direction until the passed selector is satisfied. So, let's say you have a list of fruit:

4. Per-Property Easing

Instead of just defining one easing function for a single animation, you can now define a different easing function for each property that you're animating. jQuery includes two easing functions, swing (the default) and linear. For other ones you'll need to download them separately!

To specify an easing function for each property simply define the property as an array, with the first value being what you want to animate that property to, and the second being the easing function to use:

5. New Live Events!

jQuery 1.4 adds support for delegating the "submit", "change", "focus" and "blur" events. In jQuery, we use the ".live()" method to delegate events. This is useful when you have to register event handlers on many elements, and when new elements may be added over time (using ".live()" is less-costly than re-binding continually).

But, be careful! You must use the event names, "focusin" and "focusout" if you want to delegate the "focus" and "blur" events!

jQuery('input').live('focusin', function(){
// do something with this
});

6. Controlling a Function's Context

jQuery 1.4 provides a new "proxy" function under the jQuery namespace. This function takes two arguments, either a "scope" and a method name, or a function and the intended scope. JavaScript's "this" keyword can be quite tricky to keep a hold of. Sometimes you won't want it to be an element, but instead an object that you've previously created.

For example, here we've got an "app" object which has two properties, a "clickHandler" method and a config object:

The "clickHandler" method, when called like "app.clickHandler()" will have "app" as its context, meaning that the "this" keyword will allow it access to "app". This works quite well if we simply call:

app.clickHandler(); // "Hi!" is alerted

Let's try binding it as an event handler:

jQuery('a').bind('click', app.clickHandler);

When we click an anchor it doesn't appear to work (nothing is alerted). That's because jQuery (and most sane event models) will, by default, set the context of the handler as the target element,- that is, the element that's just been clicked will be accessible via "this". But we don't want that, we want "this" to be set to "app". Achieving this in jQuery 1.4 couldn't be simpler:

jQuery('a').bind(
'click',
jQuery.proxy(app, 'clickHandler')
);

Now whenever an anchor is clicked, "Hi!" will be alerted!

The proxy function returns a "wrapped" version of your function, with "this" set to whatever you specify. It's useful in other contexts too, such as passing callbacks to other jQuery methods, or to plugins.

7. Delay an Animation Queue

You can now add a delay to your animation queues. In fact, this works on any queue, but its most common use case will probably be with the "fx" queue. This allows you to pause between animations without having to mess with callbacks and calls to "setTimeout". The first argument to ".delay()" is the amount of milliseconds you want to delay for.

8. Check if an Element Has Something

jQuery 1.4 makes it easy to check if an element (or collection) ".has()" something. This is the programmatic equivalent to jQuery's selector filter, ":has()". This method will select all elements in the current collection that contain at least one element that complies with the passed selector.

jQuery('div').has('ul');

That would select all DIV elements that contain UL elements. In this situation you'd probably just use the selector filter (":has()"), but this method is still useful when you need to filter a collection programmatically.

jQuery 1.4 also reveals the "contains" function under the jQuery namespace. This is a low-level function that accepts two DOM nodes. It'll return a boolean indicating whether the second element is contained within the first element. E.g.

10. Remove Elements Without Deleting Data

The new ".detach()" method allows you to remove elements from the DOM, much like the ".remove()" method. The key difference with this new method is that it doesn't destroy the data held by jQuery on that element. This includes data added via ".data()" and any event handlers added via jQuery's event system.

This can be useful when you need to remove an element from the DOM, but you know you'll need to add it back at a later stage. Its event handlers and any other data will persist.

11. index(…) Enhancements

jQuery 1.4 gives you two new ways to use the ".index()" method. Previously, you could only pass an element as its argument and you'd expect a number to be returned indicating the index of that element within the current collection.

Passing no arguments now returns the index of an element amongst its siblings. So, assuming the following DOM structure:

12. DOM Manipulation Methods Accept Callbacks

Most of the DOM manipulation methods now support passing a function as the sole argument (or second, in the case of ".css()" & ".attr()"). This function will be run on every element in the collection to determine what should be used as the real value for that method.

13. Determine the Type of Object

jQuery 1.4 adds two new helper functions (stored directly under the jQuery namespace) that help you determine what type of object you're dealing with.

First, there's "isEmptyObject", this function returns a boolean indicating whether or not the the passed object is empty (devoid of properties - direct and inherited). Second, there's "isPlainObject", which will return a boolean indicating whether the passed object is a plain JavaScript object, that is, one created via "{}" or "new Object()".

14. Closest(…) Enhancements

jQuery's ".closest()" method now accepts an array of selectors. This is useful when you want to traverse the ancestors of an element, looking for (more than one) closest elements with certain characteristics.

In addition, it now accepts a context as the second argument, meaning that you can control just how far or how close you want the DOM traversed to. Both of these enhancements accommodate rare use cases but they are used internally to great effect!

15. New Events! focusIn and focusOut

As mentioned, to delegate the "focus" and "blur" events you must use these new events, called "focusin" and "focusout". These events allow you to take action when an element, or a descendant of an element, gains focus.

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We're looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you're of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

I'm a freelance web developer based in Hampton, UK. I write about and enjoy front-end web development. Most of what I write focuses on my favorite topic, JavaScript! To read my blog or find out more about me please visit my site!