jQuery Pocket Reference

Chapter 1. Introduction to jQuery

JavaScript has an intentionally simple core API and an overly complicated client-side API that is marred by major incompatibilities between browsers. The arrival of IE9 eliminates the worst of those incompatibilities, but many programmers find it easier to write web applications using a JavaScript framework or utility library to simplify common tasks and hide the differences between browsers. At the time of this writing, jQuery is one of the most popular and widely used of these libraries.

Because it has become so widely used, web developers should be familiar with the jQuery library: even if you don’t use it in your own code, you are likely to encounter it in code written by others. Fortunately, jQuery is stable and small enough to document in pocket reference form.

jQuery makes it easy to find the elements of a document, and then manipulate those elements by adding content, editing HTML attributes and CSS properties, defining event handlers, and performing animations. It also has Ajax utilities for dynamically making HTTP requests, and general-purpose utility functions for working with objects and arrays.

As its name implies, the jQuery library is focused on queries. A typical query uses a CSS selector to identify a set of document elements and then returns an object that represents those elements. This returned object provides many useful methods for operating on the matching elements as a group. Whenever possible, these methods return the object on which they are invoked, allowing a succinct method-chaining idiom to be used. These features are at the heart of jQuery’s power and utility:

• An expressive syntax (CSS selectors) for referring to elements in the document

• An efficient query method for finding the set of document elements that match a CSS selector

• A useful set of methods for manipulating selected elements

• Powerful functional programming techniques for operating on sets of elements as a group, rather than one at a time

• A succinct idiom (method chaining) for expressing sequences of operations

This book begins with an introduction to jQuery that shows how to make simple queries and work with the results. The chapters that follow explain:

• How to set HTML attributes; CSS styles and classes; HTML form values; and element content, geometry, and data

• How to alter the structure of a document by inserting, replacing, wrapping, and deleting elements

• How to use jQuery’s cross-browser event model

• How to produce animated visual effects with jQuery

• jQuery’s Ajax utilities for making scripted HTTP requests

• jQuery’s utility functions

• The full syntax of jQuery’s selectors, and how to use jQuery’s advanced selection methods

• How to extend jQuery by using and writing plugins

• The jQuery UI library

The end of this book is a quick reference to all of jQuery’s methods and functions.

jQuery Basics

The jQuery library defines a single global function named jQuery(). This function is so frequently used that the library also defines the global symbol $ as a shortcut for it. These are the only two symbols jQuery defines in the global namespace.^[1]

This single global function with two names is the central query function for jQuery. Here, for example, is how we ask for the set of all <div> tags in a document:

var divs = $("div");

The value returned by this function represents a set of zero or more DOM elements and is known as a jQuery object. Note that jQuery() is a factory function rather than a constructor: it returns a newly created object, but it is not used with the new keyword. jQuery objects define many methods for operating on the sets of elements they represent, and most of this book is devoted to explaining those methods. Below, for example, is code that finds, highlights, and quickly displays all hidden <p> tags that have a class of “more”:

$("p.more").css("background-color", "gray").show("fast");

The css() method operates on the jQuery object returned by $(), and returns that same object so that the show() method can be invoked next in a compact “method chain”. This method-chaining idiom is common in jQuery programming. As another example, the code below finds all elements in the document that have the CSS class “hide”, and registers an event handler on each one. That event handler is invoked when the user clicks on the element, making it slowly “slide up” and disappear:

$(".hide").click(function() { $(this).slideUp("slow"); });

Obtaining jQuery

The jQuery library is free software you can download from http://jquery.com. Once you have the code, you can include it in your web pages with a <script> tag:

<script src="jquery-1.4.4.min.js"></script>

At the time of this writing, the current version of jQuery is 1.4.4. The “min” in the filename above indicates that this is the minimized version of the library, with unnecessary comments and whitespace removed, and internal identifiers replaced with shorter ones.

Another way to use jQuery in your web applications is to allow a content distribution network to serve it using a URL like one of these:

http://code.jquery.com/jquery-1.4.4.min.js

http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js

http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

Replace the “1.4.4” version number in the URLs above as necessary. If you use the Google CDN, you can use “1.4” to get the latest release in the 1.4.x series, or just “1” to get the most current release less than 2.0. The major advantage of loading jQuery from well-known URLs like these is that because of jQuery’s popularity, visitors to your website will likely already have a copy of the library in their browser’s cache and no download will be necessary.

---

^[1] If you use $ in your own code, or are using another library—such as Prototype—that uses $, you can call jQuery.noConflict() to restore $ to its original value.