What do you get with Print?

Instant access to your digital copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Redeem a companion digital copy on all Print orders

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

jQuery 1.4 Reference Guide

Chapter 1. Anatomy of a jQuery Script

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, it's good to keep in mind the breadth of capabilities it provides.

This book will itemize every method and function found in the jQuery library. As there are so many to sort through, it will be useful to know what the basic categories of methods are and how they come to 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 it.

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 (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 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">
  <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" 
                                             media="screen" />
     <script src="jquery.js" type="text/javascript"></script>
     <script src="dolittle.js" type="text/javascript"></script>
  </head>
  <body>
    <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>
      <div class="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 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.

Note

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 http://developer.yahoo.com/performance/rules.html#js_bottom.

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() {
  this.toggleClass('arrow-down')
    .next().slideToggle('fast');
  return this;
};

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

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

  $('#introduction > h2 a').click(function() {
    $('#introduction').load(this.href);
    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.

Script dissection

This script has been chosen specifically because it illustrates the widespread capabilities of the jQuery library. Now that we've seen the code as a whole, we can identify the categories of methods used therein.

Note

We will not discuss the operation of this script in much detail here, but a similar script is presented as a tutorial on the Learning jQuery blog: http://www.learningjquery.com/2007/06/automatic-page-contents.

Selector expressions

Before we can act on an HTML document, we need to locate the relevant portions. In our script, we sometimes use a simple approach to find an element as follows:

$('#introduction')

This expression creates a new jQuery object that references the element with the ID introduction. On the other hand, sometimes we require a more intricate selector.

$('#introduction > h2 a')

Here we produce a jQuery object referring to potentially many elements. With this expression, elements are included if they are anchor tags that are descendants of <h2> elements, which are themselves children of an element with the ID introduction.

These selector expressions can be as simple or as complex as we need. Chapter 2, Selector Expressions, will enumerate all of the selectors available to us and how they can be combined.

DOM traversal methods

Sometimes we have a jQuery object that references a set of Document Object Model (DOM) elements already, but we need to perform an action on a different, related set of elements. In these cases, DOM traversal methods are useful. We can see this in part of our script:

this.toggleClass('arrow-down')
  .next()
  .slideToggle('fast');

Because of the context of this piece of code, the keyword this refers to a jQuery object (it often refers to a DOM element, instead). In our case, this jQuery object is in turn pointing to the toggler link of the table of contents. The .toggleClass() method call manipulates this element. However, the subsequent .next() operation changes the element we are working with, so that the following .slideToggle() call acts on the <div> containing the table of contents rather than its clicked link. The methods that allow us to freely move about the DOM tree like this are listed in Chapter 3, DOM Traversal Methods.

DOM manipulation methods

Finding elements is not enough; we want to be able to change them as well. Such changes can be as straightforward as changing a single attribute.

$chapterTitle.attr('id', chapterId);

Here we modify the ID of the matched element on the fly.

Sometimes the changes are further-reaching:

$('<div id="page-contents"></div>')
  .prepend('<a class="toggler" href="#">Page Contents</a>')
  .append('<div></div>')
  .prependTo('body');

This part of the script illustrates that the DOM manipulation methods can not only alter elements in place but also remove, shuffle, and insert them. These lines add a new link at the beginning of <div id="page-contents">, insert another <div> container at the end of it, and place the whole thing at the beginning of the document body. Chapter 4, DOM Manipulation Methods, will detail these and many more ways to modify the DOM tree.

Event methods

Even when we can modify the page at will, our pages will sit in place, unresponsive. We need event methods to react to user input, making our changes at the appropriate time.

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

In this snippet we register a handler that will execute each time the selected link is clicked. The click event is one of the most common ones observed, but there are many others; the jQuery methods that interact with them are discussed in Chapter 5, Event Methods.

Chapter 5 also discusses a very special event method, .ready().

$(document).ready(function() {
  // ...
});

This method allows us to register behavior that will occur immediately when the structure of the DOM is available to our code, even before the images have loaded.

Effect methods

The event methods allow us to react to user input; the effect methods let us do so with style. Instead of immediately hiding and showing elements, we can do so with an animation.

this.toggleClass('arrow-down')
  .next()
  .slideToggle('fast');

This method performs a fast-sliding transition on the element, alternately hiding and showing it with each invocation. The built-in effect methods are described in Chapter 6, Effect Methods, as is the way to create new ones.

AJAX methods

Many modern web sites employ techniques to load content when requested without a page refresh; jQuery allows us to accomplish this with ease. The AJAX methods initiate these content requests and allow us to monitor their progress.

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

Here the .load() method allows us to get another HTML document from the server and insert it in the current document, all with one line of code. This and more sophisticated mechanisms of retrieving information from the server are listed in Chapter 7, AJAX Methods.

Miscellaneous methods

Some methods are harder to classify than others. The jQuery library incorporates several miscellaneous methods that serve as shorthand for common JavaScript idioms. Even basic tasks like iteration are simplified by jQuery.

$('#content h2').each(function(index) {
  // ...
});

The .each() method seen here steps through the matched elements in turn, performing the enclosed code on all of them. In this case, the method helps us to collect all of the headings on the page so that we can assemble a complete table of contents. More helper functions like this can be found in Chapter 8, Miscellaneous Methods.

A number of additional pieces of information are provided by jQuery as properties of its objects. These global and object properties are itemized in Chapter 9, jQuery Properties.

Plug-in API

We need not confine ourselves to built-in functionality, either. The plug-in API that is part of jQuery allows us to augment the capabilities already present with new ones that suit our needs. Even in the small script we've written here, we've found use for a plug-in.

jQuery.fn.toggleNext = function() {
  this.toggleClass('arrow-down')
    .next().slideToggle('fast');
  return this;
};

This code defines a new .toggleNext() jQuery method that slides the following element open and shut. We can now call our new method later when needed.

$('#page-contents > a.toggler).click(function() {
  $(this).toggleNext();
  return false;
});

Whenever a code could be reused outside the current script, it might do well as a plug-in. Chapter 10, Plug-in API, will cover the plug-in API used to build these extensions.

Key benefits

Quickly look up features of the jQuery library

Step through each function, method, and selector expression in the jQuery library with an easy-to-follow approach

Understand the anatomy of a jQuery script

Write your own plug-ins using jQuery's powerful plug-in architecture

Written by the creators oflearningquery.com

Check out the new Learning jQuery Third Edition

Description

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.

Who is this book for?

This book is for you if you are a web developer who wants a broad, organized view of all that jQuery library has to offer or a quick reference on their desk to refer to for particular details. Basic knowledge of HTML and CSS is required. You should be comfortable with the syntax of JavaScript, but no knowledge of jQuery is assumed.This is a reference guide, not an introductory title and if you are looking to get started with jQuery (or JavaScript libraries in general) then you are looking for the companion title Learning jQuery 1.3.

What you will learn

Explore the impressive jQuery JavaScript library and its capabilities with a real-world example

Investigate jQuery s plug-in architecture, using a variety of approaches to extend the library s capabilities

Pull information from the server without refreshing a page using the AJAX capabilities of jQuery

Build a small script that dynamically extracts the headings from an HTML document and assembles them into a table of contents for the page

Discover the Form plug-in for combining AJAX techniques with HTML forms

Explore the Dimensions plug-in for getting the size and position of any element on the page—even the document and browser window

Determine whether an element is visible by testing its current width and height using a :visible selector

Inspect the browser environment and individual jQuery objects using the properties of jQuery

Create an extremely powerful jQuery toolset using a combined set of a selector expression and a corresponding DOM traversal method

Get complete and functional jQuery-powered scripts in this example-packed book

What do you get with Print?

Instant access to your digital copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Redeem a companion digital copy on all Print orders

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

$43.99

$43.99

Microsoft Dynamics CRM 2011 Scripting Cookbook

$54.99

Total $ 142.97

Filter reviews by

All

Amazon verified reviews

Juho Vepsäläinen Sep 12, 2010

Disclaimer: I received a digital review copy of this book from the publisher, Packt Publishing.I can't figure out anything negative to say about jQuery 1.4 Reference Guide. It probably serves best those already familiar with jQuery. Its explanations are clear and terse. Just the way I like it.In addition to reference material there's some nice information about anatomy of a jQuery script (first chapter) and plugins (last chapter). Despite this I believe that beginners will probably be served better by some other book, such as "Learning jQuery 1.3" or "jQuery in Action".If you need something quickly to refer to while developing using jQuery this is the book to pick. There's no way around that.

Amazon Verified review

J. Mccollum Mar 17, 2010

The jQuery 1.4 Reference Guide came out hot on the heels of jQuery 1.4, a landmark release for the project.jQuery 1.4 brought many new features and performance improvements, and this book does a great job of documenting them. As other reviewers have pointed out, there are 11 chapters into which all of the jQuery 1.4 methods are organised. The chapters include AJAX, animation, selectors, DOM traversal and manipulation among others. In addition, there is an excellent chapter on the jQuery plugin API - one of the highlights of the book for me. This chapter really demonstrated how easy it is to create plugins (of various types), encouraging code re-use and easier maintenance.The other highlight for me was a chapter at the beginning of the book - regarding selectors. Selectors are perhaps one of the first things you learn when you first begin to work with jQuery, but it was great to revisit this topic - the selector engine is much more powerful and flexible than I had realised.In addition, there are a couple of useful appendixes which provide a wealth of further information.The writing style is on the terse side, but for a book of this sort, that's a positive for me. There is very little 'fluff' here - the emphasis is on providing the necessary information quickly, with a minimal code sample to demonstrate the method.Consequently, this isn't a book for beginners, or for a reader looking for tutorials. For that, consider Learning jQuery 1.3 instead. However, if you're an intermediate to advanced jQuery developer looking to further your knowledge, this book is excellent.To top it all off, the publishers donate a portion of the profits from this book to the jQuery project, so in buying this book, you are indirectly helping to fund the project. 5 stars from me!

Dan Wellman Mar 16, 2010

I recently read through the newest revision of Karl and Jonathon's amazing jQuery reference manual, which has just been updated for the latest release of the jQuery library itself. Even though it's a reference manual used to refer to specific methods or properties of the library rather than a teaching book that takes the reader on a journey through the API I still wanted to read through it in its entirety in order to give it a balanced review and to see how much additional information it provided. I'm already fairly competent in using jQuery so I wanted to see if there was anything new it could show me. It did - there were subtle aspects to a number of methods that I had never used before, and with the new additions to the guide added for jQuery 1.4, there was actually a lot I took away from this book.The first chapter served as a very good general introduction to jQuery and what the library is capable of. The whole chapter is dedicated to an interactive example that uses a wide variety of different jQuery methods and functionality, and the accompanying text gradually picks apart all of the code to show what it does. The example is excellent for those new to jQuery and was a very good way to start the book.After the initial example-based chapter the book switches tone to more of a reference style guide; chapter 2 is a very detailed, quite lengthy chapter that covers all of the different types of selectors that can be used to select elements from the DOM. Many different selectors, including advanced ones like the different types of attribute selectors are covered.Remaining chapters look at the different types of methods that are exposed by the library; there is a chapter dedicated to DOM traversal methods, another that looks at AJAX-related methods, etc. Helpfully, the book is structured similarly to the online documentation so readers should be able to easily find the method they require information about without too much difficulty.Towards the end of the book there are chapters that look at the miscellaneous methods such as .grep(), .unique(), etc which don't fit neatly into any of the other categories, and the different properties of the jQuery object that can give us extra information about the environment that the library is executing in such as the .browser properties. These last chapters will be of huge importance to many developers that are familiar with some of the more common methods, but less familiar with some of these lesser-used methods and properties.There is also a chapter dedicated to the construction of jQuery plugins; the authors didn't have to include an entire chapter on this topic as it is sometimes seen as beyond the scope of general jQuery usage. They could have just included some basic information under the miscellaneous chapter perhaps, but they didn't, they provided a whole chapter to it because the topic deserves a whole chapter. It's a relatively short chapter, and the example plugins are very light, but it covers all of the essentials for plugin development such as the standard conventions, the object method and global functions, so this chapter adds a lot of value.The book also features some potentially very useful appendices including lists of useful tools for JS developers such as code minifiers and browser development tools, information about where to find useful JavaScript, (X)HTML and CSS references as well as a complete alphabetical listing of every jQuery method and property.Overall, I found this an excellent reference book for developers of all levels and would recommend it to anyone that was serious about jQuery development. Bear in mind that it is a reference manual opposed to a recipe-style example-based book, so the style is very concise and sometimes dry. Personally I think this was a good thing as it allowed the book to remain focused on the core topics without going off on a tangent about implementational specifics that the reader may never encounter. It's highly accessible, very information-heavy and literally covers every single method and property found in the library. This book will stay on my desktop (my real, actual desk) for some time to come and will remain my first point of contact from now on when looking up any method of the library.My one complaint is that some of the appendix items from previous versions of the book seem to have been removed; for example, there is an information box in one chapter which states `An in-depth discussion of closures can be found in Appendix C of the book Learning jQuery 1.3. I'm sure many people buying the 1.4 version of the book won't already have the previous edition so this is not helpful in any way. Leaving this non-essential but related information in the book would have been far better. Sometimes however, due to the limits that are placed on page count by publishers, old, less-related information has to be removed. It's not a massive complaint, and I can understand why the authors may have had to remove these extras to make room for information relating to all the cool new functionality of jQuery, but I think the book would have benefited from retaining this information if at all possible.

Boston Software Guy Feb 10, 2014

Although this book can serve as a learning book, it is also a solid reference book that along with the on-lineJQuery help is all you need. I keep a copy of this book nearby whenever I am developing.

Ben Nadel Feb 15, 2010

If you're a web developer, chances are good that you are building your web applications using the jQuery Javascript library. And, if you're doing that, chances are, you're loving it; jQuery's appeal comes from, in no small part, that fact that it provides a tremendous amount of power with a very small, very manageable API. And, while this is obviously a good thing, jQuery's ease of use can quickly allow us to become complacent in our learning. The jQuery development team is constantly making improvements to the library and it is important that we try to keep up with all the advancements such that we can leverage them to our benefit. Unfortunately, sometimes that means we have to Read The Manual (RTM).Luckily, with books like the jQuery 1.4 Reference Guide by Karl Swedberg and Jonathan Chaffer, reading the manual is not a bad thing. I had the opportunity to read this book over the weekend and it does a great job of outlining the entire jQuery API. I'm a slow reader and I was able to make it through this book in about 6 to 7 hours. But, make no mistake about it - it's a reference guide, not a learning manual; it does have code samples, but they go only slightly farther than what is required to demonstrate the given API method. For a more real-world, task-oriented exploration, you might want to check out Karl and Jonathan's other book, Learning jQuery 1.3.

jQuery 1.4 Reference Guide: This book and eBook is a comprehensive exploration of the popular JavaScript library

What do you get with Print?

jQuery 1.4 Reference Guide

Chapter 1. Anatomy of a jQuery Script

A dynamic table of contents

Obtaining jQuery

Setting up the HTML document

Note

Note

Writing the jQuery code

Script dissection

Note

Selector expressions

DOM traversal methods

DOM manipulation methods

Event methods

Effect methods

AJAX methods

Miscellaneous methods

Plug-in API

Summary

Page 1 of 4

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Product Details

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

Filter reviews by

People who bought this also bought

FAQs

jQuery 1.4 Reference Guide: This book and eBook is a comprehensive exploration of the popular JavaScript library

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

Filter reviews by

People who bought this also bought

FAQs

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access