Preview of what's new in jQuery 1.4

Wednesday, 21 October 2009


This post was written before jQuery 1.4 was released and is now out of date. If you would like to see a run down of what is in the jQuery 1.4 release, look at my latest post here

jQuery and other javascript libraries have significantly changed the way that sites are written. In particular, with visual elements and selectors it has opened up a whole new world of speed and accessabilty for developers. With an easy to use API, long gone are the days of writing lengthy javascript code; we can now build fast, attractive and responsive elements with a few lines of code. With all of this it is with great excitement that we look forward to the next major release of jQuery, jQuery 1.4. And why wouldn't you be? The team behind jQuery guarantees that this next release will be better, faster and contain even more useful functionality.

It is awesome to think that as jQuery pushes the boundaries that they uncover the need for newer functionality. So as jQuery grows we discover even more ways to improve the way we code and approach site design.

So when can we expect the jQuery 1.4 release to arrive? John recently mentioned on the jQuery blog that we could be seeing 1.4 arrive as soon as January 2010. In his own words: "we'll probably release 1.4 on jQuery’s 4th birthday in January."

In this post I am going to provide a sneak peak of some of the features listed on the jQuery 1.4 Roadmap. These are the features that may make it in to the 1.4 release of jQuery. As you can see, some of these have been knocked off in earlier releases so this is a give or take list, but will give us a good idea on what the jQuery team are looking to deliver.

As the 1.4 roadmap is not a detailed document I will do my best to spell out what these features are likely to include. As the roadmap is not a definitive document this is speculative, but gives a good insight into what we might see in a few months time.

Lazy loader / require

The example given at the beginning of the roadmap indicates the possiblity to require certain js/css files to load before the document ready function with the use of a function call similar to jQuery.require("foo.js");. It is currently possible to load CSS and javascript files on-the-fly easily using something like firebug and also destroy css files. I suspect this feature will include both options; being able to have certain .js and .css files completed loading before the $("document").ready function is called and also the ability to include .js and .css files on-the-fly with an easy to use API. Also have a look at this link for similar existing functionality.


$.contains which may end up being $.has is used to determine if an element is inside another one e.g. jQuery("div").contains(DOMElement). This functionality already exists in this form $(".container").contains( would return the same elements as $(".container:has(" + + ")").

radio class

The idea is that radioClass method (inspired by Ext Core) adds a class to one element and removes it from its siblings. The idea would be something similar to this $(foo).radioClass('on'); would be equivelant of $(foo).addClass('on').siblings().removeClass('on');

copy entire object

Would provide a method to clone an element as well as the associatied data objects (see bug filed here. Currently the clone method allows you to clone the element as well as its event handlers, but not the associated data objects. We may end up seeing a single method to deep copy and element including all events, data etc.

set offset

Code sample already provided so we can see what is likely to be included. A method to set or get the specific left and top position of the matched elements, relative the the browser window by calling setXY

mouse wheel

I have come across many places asking why this hasn't been included in jQuery yet. This an event listener for the mouse wheel and would trigger an event when the mouse wheel is rolled. Don't expect anything magic out of this like tracking velocity as this is usually just a 1 or a 0 in most browsers. Here is a good rundown

new live events

1.4 should see four new $.live event handlers with the implementation of .live("change"), .live("submit"), .live("blur") and .live("focus") added to the existing events already available.

improved param serialization

Ability to serialize paramaters within an object. You begin with something like this $.param({page: {name: 'Foo', author: 'Bar'}) and end up with something like page[name]=Foo&page[author]=Bar. Have a look at this request for more detail.

Synchronized animations

The demonstration here speaks for itself. A way to have animations happening synchronously. Good idea to view source on that page a have a look through the code. John has definitely been working hard with animations and javascript, have a look at his processing.js project if you would like a good idea of what's possible.
blog comments powered by Disqus