explains everything you need to know about jQuery, completely and comprehensively."/>
jQuery Pocket Reference
David Flanagan
Copyright 2010 David Flanagan
OReilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (.
Nutshell Handbook, the Nutshell Handbook logo, and the OReilly logo are registered trademarks of OReilly Media, Inc. The Pocket Reference series designation, jQuery Pocket Reference , the image of a rufous-necked weaver bird, and related trade dress are trademarks of OReilly Media, Inc.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and OReilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.
O'Reilly Media
Preface
This book covers version 1.4 of the jQuery library for client-side JavaScript programming. It is one chapter from my much longer book JavaScript: The Definitive Guide . jQuery is such a powerful library and so well suited to pocket reference format that it seemed worth publishing this material on its own.
This book assumes that you already know how to program with JavaScript, and that you are familiar with the basics of client-side JavaScript programming without jQuery. For example, you should know about DOM methods like getElementById()
, getElementsByTagName()
, and addEventListener()
.
Thanks to Raffaele Cecco for a timely and thorough review of the book and of the code it contains. Thanks also to John Resig and the entire jQuery team for creating such a useful library, to my editor Mike Loukides for his enthusiasm for this project, and to the OReilly production department for getting this book out so quickly.
The examples in this book can be downloaded from the books web page, which will also include errata if any errors are discovered after publication:
http://oreilly.com/catalog/0636920016182/ |
In general, you may use the examples in this book in your programs and documentation. You do not need to contact us for permission unless youre reproducing a significant portion of the code. We appreciate, but do not require, an attribution like this : From jQuery Pocket Reference by David Flanagan ( OReilly ). Copyright 2011 David Flanagan , 978-1-449-39722-7. If you feel your use of code examples falls outside fair use or the permission given here, feel free to contact us at .
To comment or ask technical questions about this book, send email to:
This book is also available from the Safari Books Online service. For full digital access to this book and others on similar topics from OReilly and other publishers, sign up at http://my.safaribooksonline.com.
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 dont 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 jQuerys 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 jQuerys cross-browser event model
How to produce animated visual effects with jQuery
jQuerys Ajax utilities for making scripted HTTP requests
jQuerys utility functions
The full syntax of jQuerys selectors, and how to use jQuerys 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 jQuerys 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.]
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
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
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