- jQuery 1.4 Reference Guide
- Jonathan Chaffer Karl Swedberg Karl Swedberg
- 719字
- 2025-02-18 07:15:24
The jQuery function
The following function underpins the entire jQuery library. It serves as an "object factory," which allows us to create the jQuery objects that all of the other methods are attached to. The function is named jQuery(), but as with all uses of that identifier throughout the library, we typically use the alias $() instead.
$()
Note
Create a new jQuery object matching elements in the DOM.
$(selector[, context]) $(element) $(elementArray) $(object) $(html)
Parameters (first version)
selector: A string containing a selector expressioncontext(optional): The portion of the DOM tree within which to search
Parameters (second version)
element: A DOM element to wrap in a jQuery object
Parameters (third version)
elementArray: An array containing a set of DOM elements to wrap in a jQuery object
Parameters (fourth version)
object: An existing jQuery object to clone
Parameters (fifth version)
html: A string containing an HTML snippet describing new DOM elements to create
Return value
The newly constructed jQuery object.
Description
In the first formulation of this function, $() searches through the DOM for any elements that match the provided selector and creates a new jQuery object that references these elements.
$('div.foo');
In Chapter 2, Selector Expressions, we explored the range of selector expressions that can be used within this string.
Selector context
By default, selectors perform their searches within the DOM starting at the document root. However, an alternative context can be given for the search by using the optional second parameter to the $() function. For example, if we wish to do a search for an element within a callback function, we can restrict that search like this:
$('div.foo').click(function() {
$('span', this).addClass('bar');
});
As we've restricted the span selector to the context of this, only spans within the clicked element will get the additional class.
Internally, selector context is implemented with the .find() method, so $('span', this) is equivalent to $(this).find('span').
Using DOM elements
The second and third formulations of this function allow us to create a jQuery object using a DOM element(s) that we have already found in some other way. A common use of this facility is to call jQuery methods on an element that has been passed to a callback function through the this keyword.
$('div.foo').click(function() {
$(this).slideUp();
});
This example causes elements to hide with a sliding animation when clicked. Because the handler receives the clicked item in the this keyword as a bare DOM element, the element must be wrapped in a jQuery object before we can call jQuery methods on it.
When XML data is returned from an AJAX call, we can use the $() function to wrap it in a jQuery object that we can easily work with. Once this is done, we can retrieve individual elements of the XML structure using .find() and other DOM traversal methods.
Cloning jQuery objects
When a jQuery object is passed as a parameter to the $() function, a clone of the object is created. This new jQuery object references the same DOM elements as the initial one.
Creating new elements
If a string is passed as the parameter to $(), jQuery examines the string to see if it looks like HTML. If not, the string is interpreted as a selector expression, as previously explained. However, if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML. Then a jQuery object that refers to these elements is created and returned. We can perform any of the usual jQuery methods on this object:
$('<p>My <em>new</em> paragraph</p>').appendTo('body');
When the parameter has multiple tags in it, as it does in this example, the actual creation of the elements is handled by the browser's innerHTML mechanism. Specifically, jQuery creates a new <div> element and sets the innerHTML property of the element to the HTML snippet that was passed in. When the parameter has a single tag, such as $('<img />') or $('<a>hello</a>'), jQuery creates the element using the native JavaScript createElement() function.
To ensure cross-platform compatibility, the snippet must be well formed. Tags that can contain other elements should be paired with a closing tag as follows:
$('<a></a>');
Alternatively, jQuery allows XML-like tag syntax (with or without a space before the slash) such as this:
$('<a/>');
Tags that cannot contain elements may or may not be quick-closed.
$('<img />');
$('<input>');