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
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
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:
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.