Bear Bibeault is a Java developer living in Austin, TX. He's the co-author of Ajax in Practice and Prototype and Scriptaculous in Action. Along with Yehuda Katz, Bear is currently writing a jQuery book for Manning. This article is excerpted from Ajax in Practice (ISBN 193294990).
Sometimes other people make our lives easier. Sometimes we pay them for this service. And sometimes we can actually get something for nothing. The Internet is full of open source tools that people have made available for others to use without charge, free for the taking.
Whether the motivation behind making their labors freely available is a matter of seeking recognition, resume building, free advertising for other services, bragging rights, or just plain old-fashioned altruism, we can gratefully take advantage of these tools. jQuery is one such tool.
Introducing jQuery
jQuery, a self-professed "new type" of JavaScript library, operates from a slightly different viewpoint than other toolkits like Dojo and Prototype. It purports to change the way that you write JavaScript, and quite truly, adopting the jQuery philosophy can make a huge impact on how you develop the script for your pages.
In either case, import the jQuery script file into any pages on which you wish to use jQuery. For the purposes of this section, we'll use the uncompressed (readable) version of the script file, place it in the same folder as our example pages (for easy importing), and name it jquery.js.
jQuery Basics
Before diving into making Ajax requests with jQuery, let's take a look at some of the basic concepts that we need to have under our belts before beginning to make sense of how jQuery operates.
This will by no means be a complete primer on jQuery -- that would take much more space than we have allotted here -- but it should give you an idea of the philosophy behind jQuery's modus operandi.
The jQuery wrapper
Other libraries that we have seen, particularly Prototype, operate by introducing new classes and by extending the built-in JavaScript classes in order to augment the capabilities of the script on our pages. jQuery takes a different approach.
Rather than extending classes, jQuery provides a new class, appropriately named jQuery, that serves as a wrapper around other objects in order to provide extended operations upon those objects. The concept of a wrapper object is not foreign to advanced developers of object-oriented programs. This pattern is often used as an adapter to present an interface for manipulating an object that is different from the original object's interface.
In jQuery, most operations are performed by using the jQuery wrapper around a set of items and calling wrapper methods that operate upon the wrapped items. In order to make expressions and statements containing jQuery wrappers terser, the jQuery class is mapped to $. This is not to be confused with Prototype's use of $(), which serves a completely different purpose.
The jQuery object can wrap a number of different object types, and what it can do for us depends on what has been wrapped. For example, we can wrap an HTML snippet:
$("<p>What's cooking?</p>")
This constructs a DOM fragment from the HTML that we can then operate upon with jQuery's methods. For example, if we wanted to append this fragment to the end of the document, we could use
$("<p>What's cooking?</p>").appendTo("body");
As Ajax developers who often have a need to generate new DOM elements, the advantages of this convenient and short means to effect such additions should be readily apparent.
In addition to adding new DOM elements, we often find ourselves needing to manipulate existing elements in our pages. The jQuery wrapper also allows us to wrap existing elements by passing a string to the $() wrapper that provides a number of ways to identify the items to be wrapped: CSS selectors, XPath expressions, and element names. We'll be using CSS selectors a great deal within our example code. Consider the following:
$("div")
This will cause all 
div> elements in the document to be wrapped for manipulation. Another example is:
$("#someId")
This wraps the DOM element with the id of someId for manipulation.
Here's yet a third example:
$(".someClass")
This will wrap all elements, regardless of type, that possess the CSS class name of someClass.
The authors of jQuery were very clever in using CSS selectors and XPath to identify target elements as opposed to inventing some jQuery-specific syntax that users of jQuery would be forced to adopt. By using mechanisms that we, as page developers, are already familiar with, they have made it far easier for us to adopt and use jQuery to identify the elements that we wish to manipulate.
It is also possible to wrap other items such as elements and functions. We'll be seeing examples later in this section.
