jQuery Reference

Category: jQuery
Comments (0)

jQuery Reference

Writing the jQuery Code

DOM Traversal Methods

AJAX Methods

jQuery Reference

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.

Sponsored Links

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:

Sample Code

<?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" target="_blank" rel="nofollow">
<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><br>
</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:

Sample Code

/* -----------------------------------
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;
}

Sponsored Links

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.

Next Page: Writing the jQuery Code

Read Next: Learn How to Restrict jQuery

Sponsored Links

jQuery Tutorials

jQuery Reference

Table of Contents

jQuery Reference

jQuery Reference Guide

A Dynamic Table of Contents

Obtaining jQuery

Setting Up the HTML Document

Comments

Post Your Comment:

Sponsored Links