Book Image

jQuery 1.4 Reference Guide

By : Jonathan Chaffer, Karl Swedberg, jQuery Foundation
Book Image

jQuery 1.4 Reference Guide

By: Jonathan Chaffer, Karl Swedberg, jQuery Foundation

Overview of this book

If you are looking for a comprehensive reference guide to this popular JavaScript library, this book and eBook is for you. To make optimal use of jQuery, it's good to keep in mind the breadth of capabilities it provides. You can add dynamic, interactive elements to your sites with reduced development time using jQuery.Revised and updated for version 1.4 of jQuery, this book offers an organized menu of every jQuery method, function, and selector. Each method and function is introduced with a summary of its syntax and a list of its parameters and return value, followed by a discussion, with examples where applicable, to assist in getting the most out of jQuery and avoiding the pitfalls commonly associated with JavaScript and other client-side languages.In this book you will be provided information about the latest features of jQuery that include Sizzle Selector, Native event delegation, Event triggering, DOM manipulation, and many more. You won't be confined to built-in functionality, you'll be able to examine jQuery's plug-in architecture and we discuss both how to use plug-ins and how to write your own. If you're already familiar with JavaScript programming, this book will help you dive right into advanced jQuery concepts. You'll be able to experiment on your own, trusting the pages of this book to provide information on the intricacies of the library, where and when you need it.This book is a companion to Learning jQuery 1.3. Learning jQuery 1.3 begins with a tutorial to jQuery, where the authors share their knowledge, experience, and enthusiasm about jQuery to help you get the most from the library and to make your web applications shine.jQuery 1.4 Reference Guide digs deeper into the library, taking you through the syntax specifications and following up with detailed discussions. You'll discover the untapped possibilities that jQuery 1.4 makes available, and polish your skills as you return to this guide time and again.
Table of Contents (19 chapters)
jQuery 1.4 Reference Guide
About the Authors
About the Reviewers

A dynamic table of contents

As an example of jQuery in action, we'll build a small script that dynamically extracts the headings from an HTML document and assembles them into a table of contents for the page. Our table of contents will be nestled on the top-right corner of the page as shown in the following screenshot:

We'll have it collapsed initially as shown, but a click will expand it to full height.

At the same time, we'll add a feature to the main body text. The introduction of the text on the page will not be loaded initially, but when the user clicks on Introduction, the intro text will be inserted in place from another file.

Before we reveal the script that performs these tasks, we should walk through the environment in which the script resides.

Obtaining jQuery

The official jQuery web site ( is always the most up-to-date resource for code and news related to the library. To get started, we need a copy of jQuery, which can be downloaded right from the front page of the site. Several versions of jQuery may be available at any given moment; the most appropriate for us will be the latest uncompressed version. As of the writing of this book, the latest version of jQuery is 1.4.

No installation is required. To use jQuery, we just need to place it on our site in a web-accessible location. As JavaScript is an interpreted language, there is no compilation or build phase to worry about. Whenever we need a page to have jQuery available, we will simply refer to the file's location from the HTML document with a <script> tag as follows:

<script src="jquery.js" type="text/javascript"></script>

Setting up the HTML document

There are three pieces to most examples of jQuery usage—the HTML document itself, CSS files to style it, and JavaScript files to act on it. For this example, we'll use a page containing the text of a book:

<!DOCTYPE html>
<html lang="en">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Doctor Dolittle</title>
    <link rel="stylesheet" href="dolittle.css" type="text/css" 
                                             media="screen" />
     <script src="jquery.js" type="text/javascript"></script>
     <script src="dolittle.js" type="text/javascript"></script>
    <div class="container">
      <h1>Doctor Dolittle</h1>
      <div class="author">by Hugh Lofting</div>
      <div id="introduction">
        <h2><a href="introduction.html">Introduction</a></h2>
      <div class="content">
        <p>ONCE upon a time, many years ago when our 
           grandfathers were little children--there was a 
           doctor; and his name was Dolittle-- John Dolittle,
           M.D.  &quot;M.D.&quot; means that he was a proper
           doctor and knew a whole lot. </p>
         <!-- More text follows... -->


The actual layout of files on the server does not matter. References from one file to another just need to be adjusted to match the organization we choose. In most examples in this book, we will use relative paths to reference files (../images/foo.png) rather than root-relative path (/images/foo.png). This will allow the code to run locally without the need for a web server.

Immediately following the standard <head> elements, the stylesheet is loaded. Here are the portions of the stylesheet that affect our dynamic elements:

/** =page contents
#page-contents {
  position: absolute;
  text-align: left;
  top: 0;
  right: 0;
  width: 15em;
  border: 1px solid #ccc;
  border-top-width: 0;
  background-color: #e3e3e3;
#page-contents a {
  display: block;
  margin: .25em 0;
#page-contents a.toggler {
  padding-left: 20px;
  background: url(arrow-right.gif) no-repeat 0 0;
  text-decoration: none;
#page-contents a.arrow-down {
  background-image: url(arrow-down.gif);
#page-contents div {
  padding: .25em .5em .5em;  
  display: none;
  background-color: #efefef;

/** =introduction

.dedication {
  margin: 1em;
  text-align: center;
  border: 1px solid #555;
  padding: .5em;

After the stylesheet is referenced, the JavaScript files are included. It is important that the script tag for the jQuery library be placed before the tag for our custom scripts; otherwise, the jQuery framework will not be available when our code attempts to reference it.


To enable faster rendering of visual elements on the page, some developers prefer to include JavaScript files at the end of the document just before the closing </body> tag, so that the JavaScript file is not requested until the majority of the document has been loaded. For more information about this perceived performance boost, see

Writing the jQuery code

Our custom code will go in the second, currently empty, JavaScript file that we included from the HTML using <script src="dolittle.js" type="text/javascript"></script>. Despite how much it accomplishes, the script is fairly short.

jQuery.fn.toggleNext = function() {
  return this;

$(document).ready(function() {
  $('<div id="page-contents"></div>')
    .prepend('<a class="toggler" href="#">Page Contents</a>')

  $('.content h2').each(function(index) {
    var $chapterTitle = $(this);
    var chapterId = 'chapter-' + (index + 1);
    $chapterTitle.attr('id', chapterId);
        'title': 'Jump to ' + $chapterTitle.text(),
        'href': '#' + chapterId
      .appendTo('#page-contents div');
  $('#page-contents > a.toggler').click(function() {
    return false;

  $('#introduction > h2 a').click(function() {
    return false;

We now have a dynamic table of contents that brings users to the relevant portion of the text, and an introduction that is loaded on demand.