Overview of JQuery

The idea behind jQuery is to simplify the task of getting a selected subset of DOM elements to work with. In other words, the jQuery library is mostly intended to run queries over the page DOM and execute operations over returned items. But the query engine behind the library goes far beyond the simple search capabilities of, say, document.getElementById (and related functions) that you find natively in the DOM. The query capabilities of jQuery use the powerful CSS syntax which gives you a surprising level of expressivity. For example, you can select all elements that share a given CSS class, have a given combination of attribute values, appear in a fixed relative position in the DOM tree, and are in particular relationship with other elements. More importantly, you can add filter conditions and chain all queries together to be applied sequentially.

The root of the jQuery library is the function defined as follows:

var jQuery = window.jQuery = window.$ = function( selector, context ) 
{
   return new jQuery.fn.init( selector, context );
};

Nearly any jQuery script is characterized by one or more calls to the $ function -- an alias for the root jQuery function. Any line of jQuery code is essentially a query with some optional action applied to the results.

When you specify a query, you call the root function and pass it a selector plus an optional context. The selector indicates the query expression; the context indicates the portion of the DOM where to run the query. If no context is specified, the jQuery function looks for DOM elements within the entire page DOM. The jQuery root object performs some work on the provided arguments, runs the query, and then returns a new jQuery object that contains the results. The newly created jQuery object can, in turn, be further queried, or filtered, in a new statement as well as in chain of statements; for example:

$("div.Tooltip")

The call selects all DIV tags with a CSS class attribute of Tooltip. Written that way, however, the code has no significant effect. The$ function selects one or more DOM elements and that's all of it. It just returns a new jQuery object that contains the DOM elements. The resulting set is known as the "wrapped set". You can grab the size of this set by calling the size method, as shown below:

alert($("div.Tooltip").size());

Any function you invoke on the wrapped set is called for each element in the set. For example, consider the following code:

$("div.Tooltip:hidden").fadeIn(500);

The query selects all DIV elements currently hidden where the class attribute equals Tooltip. Each of these hidden DIV elements is then displayed using a fade-in algorithm that takes half a second to complete.

You can also loop over each element in the wrapped set using the each function:

$("div.Tooltip:hidden").each(
    function() {
      this.fadeIn(500);
    }
);

The each function gets a JavaScript callback function and plays that function for each element. The difference between the function each and a manual JavaScript loop lies in the fact that the function each automatically maps the this object (as in the snippet) to the element in the collection being processed. The callback function, however, also receives an integer parameter being the 0-based index of the iteration. If you are interested in using this piece of information, you just add a parameter to the definition of the callback passed to each.

$("div.Tooltip:hidden").each(
    function(index) {
        :
    }
);

As you can see, most of the time by simply calling the function directly on the wrapped set you obtain the same effect as writing the loop yourself. The each function is reserved for special situations where you need to employ some application-specific logic to determine the action to take.

An extract from this article from Dr. Dobbs Journal.