Tuesday, July 5, 2011

The jQuery wrapper means and does

When CSS was introduced to web technologies in order to separate design from content,

a way was needed to refer to groups of page elements from external style sheets.

The method developed was through the use of selectors, which concisely represent

elements based upon their type, attributes, or position within the HTML document.

Those familiar with XML might be reminded of XPath as a means to select elements

within an XML document. CSS selectors represent an equally powerful concept,

but are tuned for use within HTML pages, are a bit more concise, and are generally

considered easier to understand.

For example, the selector

p a

refers to the group of all links (<a> elements) that are nested inside a <p> element.

jQuery makes use of the same selectors, supporting not only the common selectors

currently used in CSS, but also some that may not yet be fully implemented by all

browsers, including some of the more powerful selectors defined in CSS3.

To collect a group of elements, we pass the selector to the jQuery function using

the simple syntax

$(selector)

or

jQuery(selector)

Although you may find the $() notation strange at first, most jQuery users quickly

become fond of its brevity. For example, to wrap the group of links nested inside any

<p> element, we can use the following:

$("p a")

The $() function (an alias for the jQuery() function) returns a special JavaScript

object containing an array of the DOM elements, in the order in which they are defined

within the document, that match the selector. This object possesses a large number of

useful predefined methods that can act on the collected group of elements.

In programming parlance, this type of construct is termed a wrapper because it

wraps the collected elements with extended functionality. We’ll use the term jQuery

wrapper or wrapped set to refer to this set of matched elements that can be operated on

with the methods defined by jQuery.

No comments :

Post a Comment