With several hundred JavaScript client libraries in existence today, it is not always easy to choose the right one for a particular project. jQuery was first released at the start of 2006, but is already becoming one of the most popular JavaScript libraries. jQuery's 20KB download size and unobtrusive API make it ideal for light JavaScript tasks to full-blown Ajax applications.

In a recent blog post, jQuery for JavaScript programmers, Simon Willison, co-creator of the Django content management system, re-visited his early impressions of jQuery, highlighting the most important features of this library:

When jQuery came out back in January 2006, my first impression was that it was a cute hack. Basing everything around CSS selectors was a neat idea ... but the chaining stuff looked like a bit of a gimmick and the library as a whole didn’t look like it would cover all of the bases. I wrote jQuery off as a passing fad.

Over the past few months it’s become clear to me exactly how wrong I was. jQuery is an exceptionally clever piece of engineering. It neatly encapsulates an extraordinary range of common functionality, and provides a clever plugin API for any functionality not included by default.

A key design feature of jQuery is its use of CSS selectors to choose DOM elements. Willison shows several examples of selecting and then altering DOM elements with jQuery:

jQuery('div#primary').width(300);

Set the width of div id=“primary” to 300 px.

jQuery('p').css('line-height', '1.8em');

Apply a line-height of 1.8em to all paragraphs.

jQuery('li:odd').css({color: 'white', backgroundColor: 'black'});

Apply two CSS rules to every other list item; note that the css() function can take an object instead of two strings.

jQuery('a').html('Click here!');

Replace all link text on the page with the insidious “Click here!”.

While jQuery features enhancements to the JavaScript language as well as many API elements to manipulate DOM objects, it also sports an extension mechanism:

Considering the amount of functionality you get out of the box, jQuery is actually pretty small—it comes in at 20KB when minified, even smaller when gzipped. Additional functionality outside the framework is handled using plugins...

jQuery’s plugin mechanism provides documented hooks for adding that method to the jQuery system. The ease with which these can be created has attracted an impressive community of plugin authors; the Plugin directory lists well over 100.

Willison especially points out jQuery's ability to remain unobtrusive to other page elements, allowing a page to degrade when a browser's JavaScript support is disabled:

I still believe that the best Web applications are the ones that are still usable with scripting turned off, and that the best way to achieve that is through unobtrusive scripting, with events being assigned to elements after the regular page has been loaded... jQuery has excellent support for this...

The key to writing good, reusable JavaScript is to zealously manage your namespace... jQuery introduces just one symbol to the global namespace: the jQuery function. Everything else is either a property of jQuery or a method of the object returned by calls to the jQuery function.

Willison describes in detail some of jQuery's APIs for loading HTML via Ajax invocations and event handling as well.

What do you think of jQuery's CSS selector-based approach to JavaScript?