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.

You can download jQuery 1.4 right now, here: http://code.jquery.com/jquery-1.4.js

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:

jQuery('<a/>', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!'
});

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.

A better example of this in action:

jQuery('<div/>', {
    id: 'foo',
    css: {
        fontWeight: 700,
        color: 'green'
    },
    click: function(){
        alert('Foo has been clicked!');
    }
});

The "id" is added as a regular attribute, but the "css" and "click" properties trigger calling of each respective method. The above code, before the 1.4 release, would have been written like this:

jQuery('<div/>')
    .attr('id', 'foo')
    .css({
        fontWeight: 700,
        color: 'green'
    })
    .click(function(){
        alert('Foo has been clicked!');
    });

Read more about jQuery(…)

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:

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>

    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

You want to select all of items after "Apple", but you want to stop once you reach "Strawberry". It couldn’t be simpler:

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');
// Selects Banana, Grape, Strawberry

Read more about: prevUntil, nextUntil, parentsUntil

3. Binding Multiple Event Handlers

Instead of chaining a bunch of event binding methods together, you can lump them all into the same call, like so:

jQuery('#foo).bind({
    click: function() {
        // do something
    },
    mouseover: function() {
        // do something
    },
    mouseout: function() {
        // do something
    }
})

This also works with ".one()".

Read more about .bind(…)

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:

jQuery('#foo').animate({
    left: 500,
    top: [500, 'easeOutBounce']
}, 2000);

See this code in action!

You can also define per-property easing functions in the optional options object as property name-value pairs in the "specialEasing" object:

jQuery('#foo').animate({
    left: 500,
    top: 500
}, {
    duration: 2000,
    specialEasing: {
        top: 'easeOutBounce'
    }
});

Editor’s Note – The author of this article, James Padolsey, is being modest. This new feature was his idea!

Read more about per-property easing

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:

var app = {
    config: {
        clickMessage: 'Hi!'
    },
    clickHandler: function() {
        alert(this.config.clickMessage);
    }
};

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.

Read more about jQuery.proxy

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.

jQuery('#foo')
    .slideDown() // Slide down
    .delay(200) // Do nothing for 200 ms
    .fadeIn(); // Fade in

If you want to delay a queue other than the default "fx" queue, then you’ll need to pass the queue name as the second argument to ".delay()".

Read more about .delay(…)

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.

jQuery.contains(document.documentElement, document.body);
// Returns true - <body> is within <html>

Read more about: .has(…), jQuery.contains(…)

9. Unwrap Elements!

We’ve had the ".wrap()" method for a while now. jQuery 1.4 adds the ".unwrap()" method which does the complete opposite. If we assume the following DOM structure:

<div>
    <p>Foo</p>
</div>

We can unwrap the paragraph element like so:

jQuery('p').unwrap();

The resulting DOM structure would be:

<p>Foo</p>

Essentially, this method simply removes the parent of any element.

Read more about .unwrap(…)

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.

var foo = jQuery('#foo');

// Bind an important event handler
foo.click(function(){
    alert('Foo!');
});

foo.detach(); // Remove it from the DOM

// … do stuff

foo.appendTo('body'); // Add it back to the DOM

foo.click(); // alerts "Foo!"

Read more about .detach(…)

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:

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>

    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

When a list item is clicked you want to find out the index of the clicked element amongst all the other list items. It’s as simple as:

jQuery('li').click(function(){
    alert( jQuery(this).index() );
});

jQuery 1.4 also allows you to specify a selector as the first argument to ".index()", doing so will give you the index of the current element amongst the collection produced from that selector.

You should note that what’s returned from this method is an integer, and it will return -1 if the selector/element passed cannot be found in the document.

Read more about .index(…)

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.

The following methods have this capability:

• after
• before
• append
• prepend
• addClass
• toggleClass
• removeClass
• wrap
• wrapAll
• wrapInner
• val
• text
• replaceWith
• css
• attr
• html

Within the callback function, you’ll have access to the current element in the collection via "this" and its index via the first argument.

jQuery('li').html(function(i){
    return 'Index of this list item: ' + i;
});

Also, with some of the above methods you’ll also get a second argument. If you’re calling a setter method (like ".html()" or ".attr('href)") you’ll have access to the current value. E.g.

jQuery('a').attr('href', function(i, currentHref){
    return currentHref + '?foo=bar';
}); 

As you can see, with the ".css()" and ".attr()" methods, you would pass the function as the second argument, since the first would be used to name the property you wish to change:

jQuery('li').css('color', function(i, currentCssColor){
    return i % 2 ? 'red' : 'blue';
});

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()".

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false

jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false 
jQuery.isPlainObject(jQuery()); // false

Read more about: isPlainObject(…), isEmptyObject(…)

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!

Read more about .closest(…)

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.

jQuery('form')
    .focusin(function(){
        jQuery(this).addClass('focused');
    });
    .focusout(function(){
        jQuery(this).removeClass('focused');
    });

You should also note that both of these events do not propagate ("bubble"); they are captured. This means that the outermost (ancestor) element will be triggered before the causal "target" element.

Read more about the focusIn and focusOut events.

Enjoy jQuery 1.4, the most anticipated, most feature-rich, best performing release of jQuery yet!

Well, that’s it! I’ve tried to cover the changes which I think will have an impact on you!

If you haven’t already, you should check out the "14 days of jQuery", an awesome online event marking the release of jQuery 1.4, and jQuery’s fourth birthday!

And don’t forget to checkout the new API documentation!

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.

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.