by Rick Strahl
Feb 16, 2009
Page 1 of 7
Key Features of jQuery
To evaluate jQuery, you should look at these key features:
DOM Element Selectors: jQuery Selectors let you select DOM elements so that you can apply functionality to them with jQuery's operational methods. jQuery uses a CSS 3.0 syntax (plus some extensions) to select single or multiple elements in a document. You're probably already familiar with the CSS syntax from HTML styling. Even if you're not, it's fairly easy to pick up the key CSS selector features. I'll go as far as saying that jQuery is the reason I really started to grok CSS. Using CSS syntax you can select elements by ID, CSS class, attribute filters, or by their relationship to other elements. You can even chain filter conditions together. Look at this simple example, which selects all second-column TD elements in a table using a simple selector: $("#gdEntries td:nth-child(2)").
The jQuery Object: The Wrapped Set: Selectors return a jQuery object known as the "wrapped set," which is an array-like structure that contains all the selected DOM elements. You can iterate over the wrapped set like an array or access individual elements via the indexer ($(sel) for example). More importantly, you can also apply jQuery functions against all the selected elements.
Wrapped Set Operations: The real power of the wrapped set comes from applying jQuery operations against all selected DOM elements simultaneously. The jQuery.fn object exposes about 100 functions that can operate on wrapped sets, and allows you to manipulate and retrieve information from the selected DOM objects in a batch. For example, you can easily manipulate all alternate rows in a table by adding a CSS class with $("#gdEntries tr:odd").addClass("gridalternate"). jQuery applies the .addClass() function against each of the matched elements with one command. Intuitive methods such as .css() let you get and set CSS styles directly, and include smart logic that accounts for browser differences in assignment types (number and string translations mostly) and values (for example, opacity does the right thing on all browsers, even though different browsers treat it differently). You can set and retrieve attributes with .attr(), or retrieve or set values with .val(), .text(), or .html(). You can clone selected DOM elements or create new elements from HTML text used as a selector and inject them into the document with methods such as .appendTo() and .prependTo(). You can find and use a parent element to which to .append() or .prepend() the new or selected element(s). You can apply some basic but useful effects methods to .show() and .hide() elements in an intelligent manner that checks for opacity, display, and visibility, and adjusts all those values to show or hide elements. Remember, you can do all of this (and much more) against all of the selected elements in a wrapped set.
Most wrapped set operations are also chainable; they return the jQuery wrapped set object as a result. This means you can chain many methods together in a single command. Effectively, this means you can select once and subsequently operate many times against the same object. You can even filter or expand the wrapped set with methods such as .find(), .filter(), or .add(). The beauty of many of these functions is that they do things you actually want to do, and they are intuitively overloaded. For example the .val() and .text() methods work for both retrieval (getter) and setter methods. Methods that deal with numeric values can accept either text or numeric values. jQuery automatically fixes CSS assignments to browser-dependent tags. Although the number of functions provided by jQuery is relatively small, many of the functions provide overloaded functionality to perform intuitive behaviors. The end result is that you have a relatively small API to learn, but one that provides a broad range of functionality.
Small FootprintjQuery is a fairly compact base library, yet it's packed with features you'll actually use. During my relatively short time using jQuery, I've gone through well over 85% of the jQuery functions with my code, which points at how useful the library is. All this functionality ends up in a compressed size of just around 16 KB (94 KB uncompressed with comments). For that you get selectors, a whole slew of operations that you can perform on the wrapped set, DOM normalization for most browsers, AJAX functionality, a host of utility functions for object/array manipulation, and a number of basic effect functionality. Given my high utilization of jQuery, this 16 KB of script download provides a tremendous amount of "Bang for the Buck."
Easy Plug-in Extensibility: When jQuery's language and DOM extension library features aren't enough, jQuery provides a simple plug-in API that has spawned hundreds of plug-ins for almost every conceivable common operation you might think up to perform on a set of DOM elements. jQuery's API allows extending the core jQuery object's operations simply by creating a function and passing the jQuery wrapped set as a parameter, which lets plug-ins operate on it and participate in jQuery chaining. This simple but powerful plug-in model is likely the key to both the large number of plug-ins exist and the reason why jQuery has become so popular so quickly. If you need some specialty functionality, chances are that a plug-in already exists with the functionality you're looking for—and if it doesn't, it's easy enough to create it yourself or extend an existing plug-in.
Ok, so now that you have some idea of what jQuery provides, I'll show you how to take it for a spin. This article introduces the jQuery concepts of document manipulation purely from a client-side perspective. A follow-up article will discuss how to use jQuery in combination with ASP.NET on the server for AJAX callbacks, and how to integrate jQuery with server-side controls and components.
Editor's Note: This article was first published in the January/February 2009 issue of CoDe Magazine, and is reprinted here by permission.