Programming Microsoft ASP.NET 4 - Dino Esposito [471]
The Gist of jQuery
The main reason for the worldwide success of the jQuery library is its unique mix of functional and DOM programming. The library works by selecting DOM elements and applying functions over them, which is just what client Web developers need to do most of the time.
Details of the Library
The library is made of a single .js file you can download from http://jquery.com. Most ASP.NET Visual Studio templates already include a version of the jQuery library, even though the one included in the template might not be the latest. From the site, you can pick both the minified and debug versions. Compressed, they are a bit more than 20 KB in size. Here’s what you need to link the jQuery library (keeping in mind that the path can change on a per-application basis):
So if jQuery is not the only option, why is it so popular?
In the first place, the library is lightweight and cross-browser capable. Second, it works by selecting DOM elements via a Cascading Style Sheet 3.0 (CSS3)-compliant syntax and applying functions to each of them. Functions are mostly user-defined, but a number of predefined (and commonly used) functions exist. Third, the library is based on an extensible model that enables developers to write and share their own plug-ins, thus contributing to making the library even more successful.
Microsoft offers support 24 hours a day, seven days a week for the jQuery library when used with ASP.NET and contributes developers to the project. Template support recently added to version 1.4.5 of the library has been contributed by Microsoft. Visual Studio recognizes jQuery code via a proper .vsdoc file and provides IntelliSense support. (See Figure 21-2.)
Figure 21-2. IntelliSense support for jQuery code.
For development purposes, you reference the VSDOC file, as shown here:
You can get the latest VSDOC IntelliSense file from the Microsoft CDN at the following address: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4-vsdoc.js. Obviously, you might need to change the file name to get a newer version. The naming convention of the jQuery library is jquery-n.n.n.js, where n.n.n stands for the current version number.
The Root Object
The word query in the library’s name says it all—the jQuery library is primarily designed for running (clever) queries over the DOM. The library supplies a powerful interface to select DOM elements that goes far beyond the simple search for an element that matches a given ID. For example, you can easily select all elements that share a given cascading style sheet (CSS) class, have certain attributes, or appear in a given position in the tree. More importantly, you can chain multiple clauses together and prepare complex queries.
The root of the jQuery library is the jQuery function. Here’s the overall structure of the library:
(
function( window, undefined )
{
var jQuery = (function() {...})();
/* the rest of the library goes here */
}
) (window);
The jQuery function just shown is then mapped as an extension to the browser’s window object and is aliased with the popular $ function. The function has the following prototype:
function(selector, context)
The selector indicates the query expression to run over the DOM; the context indicates the portion of the DOM from which to run the query. If no context is specified, the jQuery function looks for DOM elements within the entire page DOM.
The jQuery function typically returns a wrapped set, namely a collection of DOM elements. Nicely enough, this wrapped set is