Channels ▼

JVM Languages

Getting Started with jQuery

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:


This will cause all div> elements in the document to be wrapped for manipulation. Another example is:


This wraps the DOM element with the id of someId for manipulation.

Here's yet a third example:


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.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.