jQuery Reference - Anatomy of a jQuery Script

by Jonathan Chaffer and Karl Swedberg A Comprehensive Exploration of the Popular JavaScript Library

A Dynamic Table of Contents

As an example of jQuery in action, we'll build a small script that will dynamically extract the headings from an HTML document and assemble them into a table of contents for that page.

We'll have it collapsed initially as shown above, 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 initially loaded, but when the user clicks on the word Introduction, the introductory 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 website (http://jquery.com/) 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 home page of the site. Several versions of jQuery may be available at any given moment; the latest uncompressed version will be most appropriate for us.

No installation is required for jQuery. To use jQuery, we just need to place it on our site in a public location. Since 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.

Setting Up the HTML Document

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

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html;
         charset=utf-8"/>
      <title>Doctor Dolittle</title>
      <link rel="stylesheet" href="dolittle.css" type="text/css" />
      <script src="jquery.js" type="text/javascript"></script>
      <script src="dolittle.js" type="text/javascript"></script>
   </head>
   <body>
      <div id="container">
         <h1>Doctor Dolittle</h1>
         <div class="author">by Hugh Lofting</div>
         <div id="introduction">
            <h2><a href="introduction.html">Introduction</a></h2>
         </div>
         <div id="content">
            <h2>Puddleby</h2>
            <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... -->
         </div>
      </div>
   </body>
</html>

NOTE: 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 absolute paths (/images/foo.png). This will allow the code to run locally without the need for a web server.

The stylesheet is loaded immediately after the standard <head> elements. Here are the portions of the stylesheet that affect our dynamic elements:

/* -----------------------------------
Page Table of Contents
-------------------------------------- */
#page-contents {
     position: absolute;
     text-align: left;
     top: 0;
     right: 0;
     width: 15em;
     border: 1px solid #ccc;
     border-top-width: 0;
     border-right-width: 0;
     background-color: #e3e3e3;
}
#page-contents h3 {
     margin: 0;
     padding: .25em .5em .25em 15px;
     background: url(arrow-right.gif) no-repeat 0 2px;
     font-size: 1.1em;
     cursor: pointer;
}
#page-contents h3.arrow-down {
     background-image: url(arrow-down.gif);
}
#page-contents a {
     display: block;
     font-size: 1em;
     margin: .4em 0;
     font-weight: normal;
}
#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.

jQuery Reference Guide

A Dynamic Table of Contents

Obtaining jQuery

Setting Up the HTML Document