What’s New in jQuery 2.0

by admin admin Date: 21-04-2013

The second branch of the web’s most popular JavaScript library was released on April 18, 2013. jQuery 2.0 is now available for download but don’t rush off and install it just yet — there is one major change…

No More Support for IE6/7/8

(or IE9 and IE10 if they’re used in “Compatibility View” mode).

I still think it’s a little premature to abandon IE8 but the team couldn’t wait any longer. jQuery 2.0 removes all the legacy IE code for node selection, DOM manipulation, event handling and Ajax.

This has resulted in a 11% file size reduction from 32,819 bytes to 29,123 bytes. That’s 3.6Kb for the gzipped minified version — it’s unlikely to be noticeable even on a dial-up connection. Admittedly, the team hoped to save more but discovered that Android/Webkit 2.x browsers still required many workarounds.

If you need to support IE8 and below, stick with jQuery 1.9.x for now. You could conditionally load version 2.0 in all other browsers, but:

conditional loading will offset any gains in file size reduction and processing, and
you may encounter differences between the two jQuery branches. The team has pledged to minimize API divergence but there will almost certainly be issues. jQuery 1.10 will address known compatibility problems.

Custom Builds

The custom build feature has been refined in version 2.0 so you can exclude any of 12 unused modules and shrink jQuery below 10Kb. The modules which can be omitted are:

ajax: all Ajax functionality, transports, and event shorthands.
ajax/xhr: XMLHTTPRequest Ajax transport only.
ajax/script: <script> Ajax transport only.
ajax/jsonp: JSONP Ajax transport only (depends on ajax/script).
css: The .css() method plus non-animated .show(), .hide() and .toggle().
deprecated: deprecated methods (currently .andSelf() only).
dimensions: .width() and .height() methods, including inner- and outer- variations.
effects: the .animate() method and its shorthands such as .slideUp().
event-alias: event attaching/triggering shorthands such as .click().
offset: the .offset(), .position(), .offsetParent(), .scrollLeft(), and .scrollTop() methods.
wrap: the .wrap(), .wrapAll(), .wrapInner(), and .unwrap() methods.
sizzle: the Sizzle selector engine. When this module is excluded, it is replaced by a rudimentary selector engine based on the native querySelectorAll method which does not support some advanced jQuery selectors.

For example, if you are using CSS3 animations rather than jQuery methods, you could omit the effectsmodule and possibly dimensions, offset, wrap and sizzle.

Creating your own custom build is not for the faint-hearted and you’ll require some knowledge of Git, Node.js and Grunt. Full instructions are available but, longer term, I hope the team can implement an online build process similar to Modernizr.