Chaining jQuery Operations
jQuery sensibly allows us to string together numerous operations into a single expression. Most of the jQuery wrapper methods return a reference to the jQuery wrapper object itself so that we can just keep tacking operations onto a single expression when we need to perform multiple manipulations on the wrapped object(s).
Consider the case where we might want to add a CSS class to an element (whose id is something) and then cause it to be shown (assuming it was initially hidden). Rather than
$('#something').addClass('someClass');
$('#something').show();
we would write:
$('#something').addClass('someClass').show();
Executing Code When the Document Is Ready
Frequently on our pages, we need some initialization code to execute in order to prepare the page before the user gets a chance to interact with it. Generally we use the window's onload event handler for such initializations. This guarantees that the page has completed loading prior to executing the onload code, thereby guaranteeing that the DOM elements exist and are ready for manipulation.
But one problem with relying on onload is that not only does it wait until the document body has been loaded, but it also waits for images to load. Since images must be fetched from the server if the browser has not cached them, this can sometimes extend the point at which the initialization code runs far beyond the point at which the document has been loaded and the code is safe to execute.
jQuery solves this problem for us by introducing the concept of the "document ready handler." This mechanism causes a function to execute when the document has loaded but prior to waiting for any images and the onload event handler.
The syntax for employing this mechanism is to wrap the document element and to call the ready(). method on the wrapped document:
$(document).ready(function);
Whatever function is passed to ready() will execute when the DOM is ready for manipulation. Note that when you use both the ready mechanism and an onload event handler on a page, both handlers will execute, with the ready event handler triggered prior to the onload event handler.
A shorthand notation for a ready() handler can be used by wrapping a function in the jQuery wrapper. The code fragment
$(function);
is equivalent to the code fragment for declaring a ready() handler that was presented earlier.
Using jQuery and Prototype Together
Prototype is a very popular library, and jQuery is rapidly gaining ground. As such, it's not unlikely that page authors might wish to use the power of both libraries on the same page.
In general, jQuery follows best-practice guidelines and avoids polluting the global namespace; for example, by placing such constructs as utility functions within the jQuery namespace. But one area of conflict, which we've already alluded to earlier, is the use of the $ as a global name.
jQuery, being a good library citizen, has anticipated this issue. When using Prototype and jQuery on the same page, calling the jQuery utility function jQuery.noConflict() any time after both libraries have been loaded will cause the functionality of the $ name to revert to Prototype's definition.
jQuery functionality will still be available through the jQuery namespace, or you could define your own shorthand alias. For those times when you use jQuery together with Prototype, the jQuery documentation suggests the following alias:
var $j = jQuery;
That's enough preliminaries!
We'll see more use of jQuery methods within the solutions in this section. But even so, we'll only be lightly touching on jQuery's capabilities. If after reading these solutions you find yourself intrigued by jQuery's capabilities, we strongly urge you to visit http://docs.jquery.com/ to read the extensive online documentation and find out what other capabilities jQuery has to offer.
