Channels ▼
RSS

JVM Languages

Getting Started with jQuery


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.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video