Wednesday, June 10, 2009

jQuery selectors are one of the most important aspects of the jQuery library. These selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods. Understanding jQuery selectors is the key to using the jQuery library most effectively. This reference card puts the power of jQuery selectors at your very fingertips.

Complete Selectors List

Selector: Element
Example: $("td")
Description: Select an HTML element tag

Selector: #id
Example: $("#divMessage")
Description: Selects an element by its id

Selector: .cssclass
Example: $(".gridalternate")
Description: Selects a CSS style

Selector: selector,selector
Example: $("input:button,input:text")
Description: Multiple comma separated selectors can be combined into a single selection.

Selector: ancestor descendant
Example: $("#divMessage a")
Description: A space between selectors/elements/tags finds nested elements. This syntax is similar to Css ancestor descendant syntax.

Selector: parent > child > child
Example: $("p > b")
Description: Matches all immediate children of an element or selector expression that match the right element/selector.

Selector: prev ~ siblings ~ siblings
Example: $("#row_11:nth-child(2)~td")
Description: Matches the next siblings at the sample level as the preceeding expression. Example, matches 3-nth columns of a table row. Best used as a find() or filter() against an existing jQuery instance.

Selector: prev + nextsibling + nextsibling
Example: $("#tdMoneyCol+td")
Description: Matches the following sibling. Works best with find() or filter() against an existing jQuery object.

Selector: filter
Example: $("input:button")
Description: applies filters to the query. jQuery support CSS 3 filters plus a number of custom filters.
Examples: :not,:button,:visible,:hidden,:checked,:first,nth-child(1),:has,:is,:contains,:parent

Selector: [@attribute]
Example: $("p[class=gridalternate]
Description: Selects an attribute of an element
= equals string
^= startswith
$= endswith
*= contains

No comments: