MSDN Magazine - March 2009 - (Page 22) Figure 1 Helper Methods on the jQuery Object Methods each( callback ) length eq( position ) get() get( index ) index( element ) Description Loops over the content of the wrapped set and executes the specified callback function. Property that returns the number of elements in the wrapped set. Reduces the wrapped set to the single element at the specified position. Returns the content of the wrapped set as an array of DOM elements. Returns the DOM elements at the specified position in the wrapped set. Returns the 0-based index in the wrapped set of the specified DOM element, if any. a callback function and runs it on the entire document, as soon as the page’s document is fully loaded. In addition, the root jQuery object also features a few helper methods, as listed in Figure 1. Of particular interest to developers is the each method, which you can use as a shorthand for a manual iteration over the content of a jQuery object—typically the DOM elements selected via a CSS selector. Here’s a code snippet that shows the each method in action. The loop processes all tags in a form: $("form input").each( function(i) { this.title = "Input #" + i; } ); AJAX, and core functions for working with arrays, filtering data, and detecting browser capabilities. The jQuery Object The word “query” in the library’s name says it all. It refers to running queries over the DOM of the page, which is where jQuery gets its power. The library supplies a powerful interface for selecting DOM elements that goes far beyond the simple search for elements that match a given ID. For example, you can easily select all elements that share a given CSS class, have certain attributes, appear in a given position in the tree, or have a relationship to other elements. More importantly, you can add filter conditions and you can chain all these query features together, much like you can query data in SQL. The root of the jQuery library is the jQuery function, defined as follows: var jQuery = window.jQuery = window.$ = function( selector, context ) { return new jQuery.fn.init( selector, context ); }; The difference between each () and a manual JavaScript loop is that each() automatically maps the “this” object to the element in the collection being processed. The callback function, however, receives an optional integer parameter that is the (-based) index of the iteration. Let’s learn more about jQuery selectors and their CSS-based syntax. Selectors Here’s the simplest use of the $ function: var elem = $("#grid"); The $ function in the code snippet retrieves all DOM element(s) whose ID property matches the specified expression. The # symbol doesn’t belong to the ID string, but is just a prefix for the $ function to disambiguate ID strings, CSS classes and HTML tag names. (The # symbol is part of standard CSS syntax for ID selection.) The preceding code snippet is functionally equivalent to the following DOM statement: var elem = document.getElementById("grid"); It is worth noting that in the HTML DOM, unlike in ASP.NET, multiple elements can share the same ID. If an array of elements Figure 2 Supported jQuery Selectors Selector #id element .class * selector1, , selectorN ancestor descendant Description Returns the first element, if any, in the DOM with a matching ID attribute. Returns all elements with a matching tag name. Returns all elements with a matching CSS class. Returns all elements in the page. Applies all given basic selectors and returns the combined results. Given an ancestor selector, returns the collection of all descendant elements that match the descendant selector. For example, “div p” returns all elements within a . Given a selector, returns the collection of all child elements that match the child selector. Given a selector, returns the collection of all sibling elements that match the next selector and are located next to the prev selector. Given a selector, returns the collection of all sibling elements that match the sibling selector and follows the prev selector. Cutting Edge The $ function is an alias for the jQuery function. When you create a jQuery object, you pass a selector and a context. The selector indicates the query expression; the context indicates the portion of the DOM on 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 (as well as its $ alias) performs some work on the provided arguments, runs the query, and then returns a new jQuery object that contains the results. The newly created jQuery object can, in turn, be further queried, or filtered, in a new statement as well as in a chain of statements. The root jQuery object supports the following signatures: jQuery( jQuery( jQuery( jQuery( expression, [context] ) html, [ownerDocument] ) elements ) callback ) parent > child prev + next The first takes a CSS selector and returns a wrapped array of HTML elements, the so-called wrapped set. The second accepts an HTML string, creates the related subtree, and appends it to the specified owner documents, if any. The third overload picks up the specified DOM element or elements. Finally, the fourth just takes 22 msdn magazine prev ~ sibling
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.