What’s new in jQuery 1.9


The latest major iteration of jQuery was released on January 15, 2013. But before you run off to update your applications with jQuery 1.9, be sure to read the rest of this article. JQuery 1.9 is a major milestone in the library’s evolution as it:

  • removes some of the deprecated features, leaving a slimmer library (90.4kb)
  • is the last major version to support IE6,7 and 8.

The removal of some of the most used but now deprecated features from the library, means that not many sites will go unaffected by simply swapping old for new as jQuery 1.9 is not backward compatible. You should not despair however as three jQuery enthusiasts have written jQuery migrate plugin which detects and re-enables deprecated features found in existing code. These are logged in the developer console making it easy for the developer to fix the issues. The plugin is very well documented and hosted on github.

Caveat: Make sure you load the plugin immediately after jQuery 1.9 as demonstrated below.

jQuery migrate plugin

  <script src="http://code.jquery.com/jquery-1.9.0.js" ></script>
  <script src="http://code.jquery.com/jquery-migrate-1.1.1.js" ></script>

Quick tip: To quickly test how your site handles the update, you can use a debugging proxy tool such as fiddler to swap out your current jQuery version for 1.9. This allows you to test locally without affecting any of your user’s experience.

The plugin will also work when upgrading to jQuery 2.0 which among other things, will be abandoning legacy IE. Is dropping support for IE6,7,8 premature? That’s a question that I am sure divides opinion but one that I am not going to address in this article.

Features removed

  • die() – use off() instead
  • andSelf() – use addBack() instead
  • live() – use on() instead
  • The “hover” pseudo event is no longer supported as a synonym for “mouseenter mouseleave”
  • $.browser() – removed

The above list is not definitive but those are the most commonly used features that are bound to be flagged up in most code.

New features

.css() multiple property getter

You can now pass an array of css properties to the .css() method. This will return an object of the property values passed e.g:

.css() Multiple property getter

  var elDims = $('elm').css(['width','height','backgroundColor']);
  //{ width:"50px", height:"50px", backgroundColor:"#c0ffee" } 

.finish() method

Until now queued animations have been handled by the .stop() and .clearQueue() methods. .finish() is the new way to stop animations and place them in their final state

CSS3 selector support

The following CSS3 selectors are now supported in all browsers:

  • :first-of-type
  • :last-of-type
  • :nth-last-child
  • :nth-last-of-type
  • :nth-of-type
  • :only-of-type
  • :target
  • :root

prop() vs attr()

jQuery 1.9 encourages the use the right method for the occasion. In most cases where attr() is used, prop() is probably the right method to use albeit attr() working. However, the method you use should always be determined by what you are trying to retrieve or achieve. There is a very good discussion thread on stackoverflow that explains the difference.

Source maps support

jQuery 1.9 adds the ability to map minified versions of code to the un-minified versions making debugging easier.

This is a welcome addition as often times the errors are tacked away in some minified code. It also means that we can minify our code before deployment which will improve performance.

I am not going to go into details about source maps in this article but their is a very good article titled The Magic of the jQuery 1.9 Source Map
by Elijah Manor that goes into details on how to set up this feature

Ajax events

Ajax events must now be attached to the document not the DOM node when using the ajaxStart() method. i.e $(document).ajaxStart(…); and not $(‘#node’).ajaxStart(…);

The ajaxStart() method specifies what function to run when the AJAX request starts. For example, let’s say you had a button on a page that loads some content asynchronously e.g. $(‘button’).on(‘click’, function(){ $(‘#elem’).load(‘some_page.html’) })
You can show a pre-loader (animated gif) while the content loads by using the ajaxStart()method. Something like; $(‘#elem’).ajaxStart(function(){ $(this).html(‘<img src=”preloader.gif”/>’); })
This will show a animated gif as soon as the request is made, which in turn is replaced by the content once a response is complete.

To upgrade or not to upgrade

As is the case for any new library, it’s advisable to wait for some time before you install, or upgrade to the new iteration. I’d suggest you wait for a few more weeks while all the issues that may arise are ironed out.

Unlike it’s predecessors, jQuery 1.9 will not be a straightforward plug and play upgrade because of the aforementioned changes, but the jQuery migrate plugin provides a bridge that will make the process less painful. jQuery is evolving, and soon or later we must/will embrace the change.

In closing…

jQuery 1.9 lays the foundation for the big one, jQuery 2.0 which drops support for IE6, 7 and 8. Now, IE8 is the highest version that you can run on windows XP and there is still a high percentage of windows XP users who see no reason to upgrade to windows 7. This means that developers will continue to support IE8 for a while yet.

Here is a dilemma that is going to face developers; should we have two jQuery code bases for our applications, conditionally loading a jQuery version depending on which OS the user is running? Or are we going to stick to jQuery 1.9 foregoing all the added features in jQuery 2.0? There is a conundrum for you to ponder.

Useful resources