jQuery: A new way to write JavaScript for rich web UI

Created by John Resig in early 2006, jQuery provides the following main features to simplify JavaScript development:

• Easy HTML DOM traversal using jQuery selectors and binding selected elements to events.
• API to create special visual effects.
• API for simplified AJAX development.

JQuery Selectors

The basic premise in jQuery is a jQuery selector, which can be used to select elements from an HTML DOM and operate on them. For example, the following jQuery code snippet will show an alert message whenever a link on a page is clicked:

$("a").click(function() { alert("You are leaving this page!");});

$("a") is a jQuery selector. In this case, it selects all anchor elements. $ itself is an alias for the jQuery "class", therefore $() constructs a new jQuery object. The click() function is a method of the jQuery object. It binds a click event to all selected elements (in this case, a single anchor element) and executes the provided function when the event occurs.

Off course, you can apply filters if you want the alert to be shown only for certain links.

The traditional JavaScript will accomplish the same by:

<a href="http://www.infoq.com" onclick="alert('You are leaving this page!')">infoQ</a>

With jQuery, we don't need to write an onclick for every single element. We have a clean separation of structure (HTML) and behavior (JavaScript).

Special Effects

Here is another example of a special effect feature in jQuery. The following code snippet looks for all paragraphs that have a class of "surprise", adds the class "shock" to them, then slowly reveals them:

$("p.surprise").addClass("shock").show("slow");

Ajax Development

A common use of Ajax is to load a chunk of HTML into an area of the page. With jQuery, you simply have to select the element you need and use the load() function. Here's an example that updates some statistics:

$('#stats').load('stats.html');

The latest version, jQuery 1.1.3 has recently been released with DOM traversal over 800% faster than in 1.1.2. Other major enhancements include a re-written event system , with more graceful handling of keyboard events and a re-written special effects system.