jQuery Reference

Article Index
jQuery Reference
Writing the jQuery Code
DOM Traversal Methods
AJAX Methods

Page 4 of 4

AJAX Methods

Many modern websites 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.

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 matched elements. 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 such as this can be found in Chapter 8.

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 the use for a plug-in:

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

This code defi nes 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 h3').click(function() 
{
     $(this).toggleNext();
});

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

Summary

We've now seen a complete, functional jQuery-powered script. This example, though small, brings a significant amount of interactivity and usability to the page. The script has illustrated the major types of tools offered by jQuery, as well. We've observed how the script finds items in the DOM and changes them as necessary. We've witnessed response to user action, and animation to give feedback to the user after the action. We've even seen how to pull information from the server without a page refresh, and how to teach jQuery brand new tricks in the form of plug-ins. We'll be stepping through each function, method, and selector expression in the jQuery library now, chapter by chapter. In illustrating many of them, a customized logging function will aid our examples. This .log method prints text to the screen in a useful context; we'll dissect it as an example of a plug-in at the end of Chapter 9. Each method will be introduced with a summary of its syntax and a list of its parameters and return value. Then we will offer a discussion, which will provide examples where applicable. For further reading about any method, consult the online resources listed in Appendix A.

Authors

Jonathan Chaffer

Jonathan Chaffer is the Chief Technology Officer of Structure Interactive, an interactive agency located in Grand Rapids, Michigan. There he oversees web development projects using a wide range of technologies, and continues to collaborate on day-to-day programming tasks as well.

In the open-source community, Jonathan has been very active in the Drupal CMS project, which has adopted jQuery as its JavaScript framework of choice. He is the creator of the Content Construction Kit, a popular module for managing structured content on Drupal sites. He is responsible for major overhauls of Drupal's menu system and developer API reference.

Jonathan lives in Grand Rapids with his wife, Jennifer.

Karl Swedberg

Karl Swedberg is a web developer at Structure Interactive in Grand Rapids, Michigan, where he spends much of his time implementing design with a focus on "web standards"—semantic HTML, well-mannered CSS, and unobtrusive JavaScript.

Before his current love affair with web development, Karl worked as a copy editor, a high-school English teacher, and a coffee house owner. His fascination with technology began in the early 1990s when he worked at Microsoft in Redmond, Washington, and it has continued unabated ever since.

Karl's other obsessions include photography, karate, English grammar, and fatherhood. He lives in Grand Rapids with his wife, Sara, and his two children, Benjamin and Lucia.