|
Page 1 of 4
jQuery Reference Guide
by Jonathan Chaffer and Karl Swedberg A Comprehensive Exploration of the Popular JavaScript Library
jQuery
Reference Guide
http://www.packtpub.com/jquery-reference-guide-Open-Source/book
Anatomy of a jQuery Script
He's got a brand new start
Now he's a happy guy
—Devo,
"Happy Guy"
A typical jQuery script uses a wide assortment of the methods that the
library offers. Selectors, DOM manipulation, event handling, and so forth come
into play as required by the task at hand. In order to make the best use of
jQuery, we need to keep in mind the wide range of capabilities it provides.
This book will itemize every method and function found in the jQuery library.
Since there are many methods and functions to sort through, it will be useful to
know what the basic categories of methods are, and how they come into play
within a jQuery script. Here we will see a fully functioning script, and examine
how the different aspects of jQuery are utilized in each part of the script.
Thanks to Duane Moraes @ Packt
Publishing for giving opportunity to provide sample chapter for Exforsys
members.
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.
Our table of contents will be nestled on the top right corner of the 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. "M.D." means that he was a proper doctor and knew a whole lot. </p> <!-- More text follows... --> </div> </div> </body> </html>
%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20%3F%3E%0D%0A%3C%21DOCTYPE%20html%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20XHTML%201.0%20Transitional%2F%2FEN%22%0D%0A%20%20%20%22http%3A%2F%2Fwww.w3.org%2FTR%2Fxhtml1%2FDTD%2Fxhtml1-transitional.dtd%22%3E%0D%0A%3Chtml%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20xml%3Alang%3D%22en%22%20lang%3D%22en%22%3E%0D%0A%20%20%20%3Chead%3E%0D%0A%20%20%20%20%20%20%3Cmeta%20http-equiv%3D%22Content-Type%22%20content%3D%22text%2Fhtml%3B%0D%0A%20%20%20%20%20%20%20%20%20charset%3Dutf-8%22%2F%3E%0D%0A%20%20%20%20%20%20%3Ctitle%3EDoctor%20Dolittle%3C%2Ftitle%3E%0D%0A%20%20%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22dolittle.css%22%20type%3D%22text%2Fcss%22%20%2F%3E%0D%0A%20%20%20%20%20%20%3Cscript%20src%3D%22jquery.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E%0D%0A%20%20%20%20%20%20%3Cscript%20src%3D%22dolittle.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E%0D%0A%20%20%20%3C%2Fhead%3E%0D%0A%20%20%20%3Cbody%3E%0D%0A%20%20%20%20%20%20%3Cdiv%20id%3D%22container%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%3Ch1%3EDoctor%20Dolittle%3C%2Fh1%3E%0D%0A%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22author%22%3Eby%20Hugh%20Lofting%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22introduction%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%3E%3Ca%20href%3D%22introduction.html%22%3EIntroduction%3C%2Fa%3E%3C%2Fh2%3E%0D%0A%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22content%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%3EPuddleby%3C%2Fh2%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3EONCE%20upon%20a%20time%2C%20many%20years%20ago%20when%20our%20grandfathers%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20were%20little%20children--there%20was%20a%20doctor%3B%20and%20his%20name%20was%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Dolittle--%20John%20Dolittle%2C%20M.D.%20%26amp%3Bquot%3BM.D.%26amp%3Bquot%3B%20means%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20that%20he%20was%20a%20proper%20doctor%20and%20knew%20a%20whole%20lot.%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fp%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%21--%20More%20text%20follows...%20--%3E%0D%0A%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E
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; }
%2F%2A%20-----------------------------------%0D%0APage%20Table%20of%20Contents%0D%0A--------------------------------------%20%2A%2F%0D%0A%23page-contents%20%7B%0D%0A%20%20%20%20%20position%3A%20absolute%3B%0D%0A%20%20%20%20%20text-align%3A%20left%3B%0D%0A%20%20%20%20%20top%3A%200%3B%0D%0A%20%20%20%20%20right%3A%200%3B%0D%0A%20%20%20%20%20width%3A%2015em%3B%0D%0A%20%20%20%20%20border%3A%201px%20solid%20%23ccc%3B%0D%0A%20%20%20%20%20border-top-width%3A%200%3B%0D%0A%20%20%20%20%20border-right-width%3A%200%3B%0D%0A%20%20%20%20%20background-color%3A%20%23e3e3e3%3B%0D%0A%7D%0D%0A%23page-contents%20h3%20%7B%0D%0A%20%20%20%20%20margin%3A%200%3B%0D%0A%20%20%20%20%20padding%3A%20.25em%20.5em%20.25em%2015px%3B%0D%0A%20%20%20%20%20background%3A%20url%28arrow-right.gif%29%20no-repeat%200%202px%3B%0D%0A%20%20%20%20%20font-size%3A%201.1em%3B%0D%0A%20%20%20%20%20cursor%3A%20pointer%3B%0D%0A%7D%0D%0A%23page-contents%20h3.arrow-down%20%7B%0D%0A%20%20%20%20%20background-image%3A%20url%28arrow-down.gif%29%3B%0D%0A%7D%0D%0A%23page-contents%20a%20%7B%0D%0A%20%20%20%20%20display%3A%20block%3B%0D%0A%20%20%20%20%20font-size%3A%201em%3B%0D%0A%20%20%20%20%20margin%3A%20.4em%200%3B%0D%0A%20%20%20%20%20font-weight%3A%20normal%3B%0D%0A%7D%0D%0A%23page-contents%20div%20%7B%0D%0A%20%20%20%20%20padding%3A%20.25em%20.5em%20.5em%3B%0D%0A%20%20%20%20%20display%3A%20none%3B%0D%0A%20%20%20%20%20background-color%3A%20%23efefef%3B%0D%0A%7D%0D%0A%2F%2A%20-----------------------------------%0D%0AIntroduction%0D%0A--------------------------------------%20%2A%2F%0D%0A.dedication%20%7B%0D%0A%20%20%20%20%20margin%3A%201em%3B%0D%0A%20%20%20%20%20text-align%3A%20center%3B%0D%0A%20%20%20%20%20border%3A%201px%20solid%20%23555%3B%0D%0A%20%20%20%20%20padding%3A%20.5em%3B%0D%0A%7D
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.
|