DOM Traversal Methods

Sometimes we have a jQuery object that already references a set of DOM elements, 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 instead to a DOM element). In our case, this jQuery object is in turn pointing to the <h3> heading of the table of contents. The .toggleClass method call manipulates this heading element. The subsequent .next() operation changes the element we are working with, though, so that the following .slideToggle method call acts on the <div> containing the table of contents rather than its header. The methods that allow us to freely move about the DOM tree like this are listed in Chapter 3.

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:

Here we modify the ID of the matched element on the fly.  Sometimes the changes are further-reaching, on the other hand:

$('<div id="page-contents"></div>')
     .prepend('<h3>Page Contents</h3>')
     .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 heading 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 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 anchor tag 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.

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 this 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 listed in Chapter 6, as is the way to create new ones.