Exforsys.com
 
Home Tutorials jQuery
 

jQuery Reference

 

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
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="nofollow">
  4. <html xmlns="http://www.w3.org/1999/xhtml xml:lang="en" lang="en">
  5.    <head>
  6.       <meta http-equiv="Content-Type" content="text/html;
  7.         charset=utf-8"/>
  8.       <title>Doctor Dolittle</title>
  9.       <link rel="stylesheet" href="dolittle.css" type="text/css" />
  10.       <script src="jquery.js" type="text/javascript"></script>
  11.       <script src="dolittle.js" type="text/javascript"></script>
  12.    </head>
  13.    <body>
  14.       <div id="container">
  15.          <h1>Doctor Dolittle</h1>
  16.          <div class="author">by Hugh Lofting</div>
  17.          <div id="introduction">
  18.             <h2><a href="introduction.html">Introduction</a></h2>
  19.          </div>
  20.          <div id="content">
  21.             <h2>Puddleby</h2>
  22.             <p>ONCE upon a time, many years ago when our grandfathers
  23.                were little children--there was a doctor; and his name was
  24.                Dolittle-- John Dolittle, M.D. &quot;M.D.&quot; means
  25.                that he was a proper doctor and knew a whole lot.
  26.             </p><br>
  27.                <!-- More text follows... -->
  28.          </div>
  29.       </div>
  30.    </body>
  31. </html>
Copyright exforsys.com


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
  1. /* -----------------------------------
  2. Page Table of Contents
  3. -------------------------------------- */
  4. #page-contents {
  5.      position: absolute;
  6.      text-align: left;
  7.      top: 0;
  8.      right: 0;
  9.      width: 15em;
  10.      border: 1px solid #ccc;
  11.      border-top-width: 0;
  12.      border-right-width: 0;
  13.      background-color: #e3e3e3;
  14. }
  15. #page-contents h3 {
  16.      margin: 0;
  17.      padding: .25em .5em .25em 15px;
  18.      background: url(arrow-right.gif) no-repeat 0 2px;
  19.      font-size: 1.1em;
  20.      cursor: pointer;
  21. }
  22. #page-contents h3.arrow-down {
  23.      background-image: url(arrow-down.gif);
  24. }
  25. #page-contents a {
  26.      display: block;
  27.      font-size: 1em;
  28.      margin: .4em 0;
  29.      font-weight: normal;
  30. }
  31. #page-contents div {
  32.      padding: .25em .5em .5em;
  33.      display: none;
  34.      background-color: #efefef;
  35. }
  36. /* -----------------------------------
  37. Introduction
  38. -------------------------------------- */
  39. .dedication {
  40.      margin: 1em;
  41.      text-align: center;
  42.      border: 1px solid #555;
  43.      padding: .5em;
  44. }
Copyright exforsys.com


<

 

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





 

 

Comments



Post Your Comment:

Members Please Login
Your Name:*
e-mail ID:(required for notification)*
Image Verification: 
 
 Subscribe    

Sponsored Links

 

 
 


Get Daily Updates via Subscribe to Exforsys Free Training via email


Get Latest Free Training Updates delivered directly to your Inbox...

Enter your email address:


 

Subscribe to Exforsys Free Training via RSS
 

 
 
Partners -  Privacy and Legal Policy -  Site News -  Contact   Sitemap  

Copyright © 2000 - 2010 exforsys.com. All Rights Reserved

Page copy protected against web site content infringement by Copyscape