JQuery selector Usage Details

JQuery-powerful jQuery selector (detailed description) [go to] 1. basic selector Basics Name Description Example # id: Select $ (divId) based on the element Id. Select the element with ID as divId Based on the element name. $ (a) Select All a elements. class: Select $ (. bgRed) Select the element that uses the CSS class bgRed * jQuery-powerful jQuery selector (detailed description) [go to] 1. Basic SelectorBasics

Name	Description	Example
# Id	Select by element Id	$ ("DivId") Select the element whose ID is divId
Element	Select Based on the element name,	$ ("A") select all elements
. Class	Select Based on the css class of the element	$ (". BgRed") Select the element whose CSS class is bgRed
*	Select all elements	$ ("*") Select all elements on the page
Selector1, Selector2, SelectorN	Several selectors can be separated by commas (,) and then combined into a selector string. The matching contents of these selectors are selected at the same time.	$ ("# DivId, a,. bgRed ")

 

2. Hierarchical SelectorHierarchy

Name	Description	Example
Ancestor descendant	Use the "forminput" method to select all input elements in form. That is, the ancestor (ancestor) is from and the descendant (descendant) is input.	$ (". BgRed div") select all elements in the element whose CSS class is bgRed.
Parent> child	If you select parent, the child. child node must be included in the parent and the parent class must be a parent element.	$ (". MyList> li") Select the CSS class as the direct subnode in the myList element. Object.
Prev + next	Prev and next are two elements of the same level. Select the next element after the prev element.	$ ("# Hibiscuus + img") Select the img object after the id is the hibiscuus element.
Prev ~ Siblings	Select the elements filtered by siblings after prev. Note: siblings is a filter.	$ ("# SomeDiv ~ [Title] ") select all the elements with the title attribute after the object whose id is someDiv

 

3. Basic FilterBasic Filters

Name	Description	Example
: First	Match the first element found	Find the first row of the table: $ ("tr: first ")
: Last	Match the last element found	Find the last row of the table: $ ("tr: last ")
: Not (selector)	Removes all elements that match the given selector.	Find all unselected input elements: $ ("input: not (: checked )")
: Even	Matches all elements with an even index value and starts counting from 0.	Search for rows 1, 3, 5... of a table: $ ("tr: even ")
: Odd	Matches all elements with odd index values and starts counting from 0.	Search for rows 2, 4, and 6 of a table: $ ("tr: odd ")
: Eq (index)	Matches an element with a given index value. Note: index starts counting from 0.	Find the second row: $ ("tr: eq (1 )")
: Gt (index)	Match All elements greater than the given index value Note: index starts counting from 0.	Find the third row, that is, the index value is 1 and 2, which is greater than 0: $ ("tr: gt (0 )")
: Lt (index)	Select elements whose index is less than N in the result set. Note: index starts counting from 0.	Find the first and second rows, that is, the index values are 0 and 1, which is smaller than 2: $ ("tr: lt (2 )")
: Header	Select All header labels such as h1, h2, and h3.	Add the background color to all titles on the page: $ (": header" ).css ("background", "# EEE ");
: Animated	Match all the elements that are executing the animation effect	Only one animation effect is executed for elements that do not execute the animation effect: $ ("# Run"). click (function (){ $ ("Div: not (: animated)"). animate ({left: "+ = 20"}, 1000 ); });

 

4. Content filter Content Filters

Name	Description	Example
: Contains (text)	Match the elements that contain the given text	Find all div elements containing "John": $ ("div: contains ('john ')")
: Empty	Match All null elements that do not contain child elements or text	Find all empty elements that do not contain child elements or text: $ ("td: empty ")
: Has (selector)	Matches the element containing the element matched by the selector.	Add a text class to all div elements containing p: $ ("div: has (p)"). addClass ("test ");
: Parent	Match an element containing child elements or text	Find all td elements containing child elements or text: $ ("td: parent ")

 

5. Visibility FilterVisibility Filters

Name	Description	Example
: Hidden	Match all invisible elements Note: In Version 1.3.2, hidden matches its own or parent class elements that do not occupy space in the document. If the CSSvisibility attribute is used so that it is not displayed but occupies space, hidden is not entered.	Find all invisible tr elements: $ ("tr: hidden ")
: Visible	Match all visible elements	Find all visible tr elements: $ ("tr: visible ")

6. Attribute FilterAttribute Filters

Name	Description	Example
[Attribute]	Matches the element containing the given attribute.	Find all div elements containing the id attribute: $ ("Div [id]")
[Attribute = value]	Matching a given attribute is an element of a specific value	Find all the input elements whose name attribute is newsletter: $ ("Input [name = 'newsletter ']"). attr ("checked", true );
[Attribute! = Value]	Matching a given attribute is an element that does not contain a specific value	Find all input elements whose name attribute is not newsletter: $ ("Input [name! = 'Newsletter '] "). attr (" checked ", true );
[Attribute ^ = value]	Matching a given attribute is an element starting with some values	$ ("Input [name ^ = 'News']")
[Attribute $ = value]	Matches the given attribute with elements ending with some values.	Find all input elements whose names end with 'letter: $ ("Input [name $ = 'Letter ']")
[Attribute * = value]	Matching a given property is an element that contains certain values	Find all input elements whose names contain 'man: $ ("Input [name * = 'man']")
[AttributeFilter1] [attributeFilter2] [attributeFilterN]	Composite attribute selector, which must meet multiple conditions at the same time.	Find all the attributes with id and whose name attributes end with man: $ ("Input [id] [name $ = 'man']")

7. subelement FilterChild Filters

Name	Description	Example
: Nth-child (index/even/odd/equation)	Match the nth child or parity element under the parent Element ': Eq (index)' matches only one element, and this matches the child element for each parent element. : Nth-child starts from 1, while: eq () is counted from 0! You can use: Nth-child (even) : Nth-child (odd) : Nth-child (3n) : Nth-child (2) : Nth-child (3n + 1) : Nth-child (3n + 2)	Search for 2nd li entries in each ul: $ ("Ul li: nth-child (2 )")
: First-child	Match the first child element ': First' matches only one element, and this selector matches one child element for each parent element.	Find the first li in each ul: $ ("Ul li: first-child ")
: Last-child	Match the last child element ': La' matches only one element, and this selector matches one child element for each parent element.	Find the last li in each ul: $ ("Ul li: last-child ")
: Only-child	If an element is the only child element in the parent element, it will be matched. If the parent element contains other elements, it will not be matched.	In ul, find the li that is the only sub-element: $ ("Ul li: only-child ")

8. Form selector Forms

Name	Description	Explanation
: Input	Match All input, textarea, select, And button Elements	Find all input elements: $ (": Input ")
: Text	Match all text boxes	Find all text boxes: $ (": Text ")
: Password	Match all password boxes	Find all password boxes: $ (": Password ")
: Radio	Match All radio buttons	Find all radio buttons
: Checkbox	Match All check boxes	Find all check boxes: $ (": Checkbox ")
: Submit	Match all submit buttons	Find all submit buttons: $ (": Submit ")
: Image	Match All image Domains	Match All image domains: $ (": Image ")
: Reset	Match All reset buttons	Find all reset buttons: $ (": Reset ")
: Button	Match All buttons	Find all buttons: $ (": Button ")
: File	Match All file Domains	Find all file domains: $ (": File ")

9. Form FilterForm Filters

Name	Description	Explanation
: Enabled	Match all available elements	Find all available input elements: $ ("Input: enabled ")
: Disabled	Match All unavailable Elements	Find all the unavailable input elements: $ ("Input: disabled ")
: Checked	Match All selected elements (check box, single choice, etc., excluding option in select)	Find all selected check box elements: $ ("Input: checked ")
: Selected	Match All selected option Elements	Find all selected option elements: $ ("Select option: selected ")

 

From: http://bbs.chinaandroid.com/showtopic-89.aspx Based on jQuery (v1.3.2)

1). Basic

· # Id matches an element based on the given ID. Example: $ ("# id ")
· Element matches all elements according to the given element name. Example: $ ("div ")
·. Class matches elements based on the given class. Example: $ (". style1 ");
· * Match all elements. Example: $ ("*")
· Selector1, selector2, and selectorN combine the elements matched by each selector and return them together. For example: $ ("# id, div,. style1 ")

2). Form

·: The button matches all buttons. Example: $ (": button ")
·: Checkbox matches all check boxes. Example: $ (": checkbox ")
·: File matches all file fields. Example: $ (": file ")
·: Hidden matches all invisible elements or elements whose type is hidden. Example: $ ("input: hidden ")
·: Image matches all image domains. Example: $ (": image ")
·: Input matches all input, textarea, select, And button elements. Example: $ (": input ")
·: Password Matches all password boxes. Example: $ (": password ")
·: Radio matches all radio buttons. Example: $ (": radio ")
·: Reset matches all reset buttons. Example: $ (": reset ")
·: The submit matches all the submit buttons. Example: $ (": submit ")
·: Text matches all single-line text boxes. Example: $ (": text ")
·: The header matches title elements such as h1, h2, and h3. For example: $ (": header" ).css ("background", "# EEE ");

2. Filtering Conditions

1). Attribute Filtering

· [Attribute * = value] matching a given attribute is an element that contains certain values. Example: $ ("input [name * = 'man '")
· [Attribute! = Value] matches all elements that contain the specified attribute but are not equal to the specified value. Example: $ (input [name! = 'Man ');
· [Attribute $ = value] matches the given attribute with elements ending with some values. Example: $ ("input [name $ = 'man']")
· [Attribute = value] matches a given attribute as an element of a specific value. Example: $ ("input [name = 'man']");
· [Attribute] matches the elements that contain the given attribute. Example: $ ("div [id]")
· [Attribute ^ = value] matches the given attribute with elements starting with some values. Example: $ ("input [name ^ = 'man']")
· [Selector1] [selector2] [selectorN] Meet multiple conditions at the same time. Example: $ ("input [id] [name $ = 'man']")
·: Hidden matches all invisible elements. Example: $ ("tr: hidden ")
·: Visible matches all visible elements. Example: $ ("tr: visible ")
·: Checked matches all selected elements (check box, single-choice, etc., excluding option in select ). Example: $ ("input: checked ")
·: Disabled matches all unavailable elements. Example: $ ("input: disabled ")
·: Enabled matches all available elements. Example: $ ("input: enabled ")
·: Selected matches all selected option elements. Example: $ ("select option: selected ")

2). Content Filtering

·: Contains (text) matches the elements that contain the given text. Example: $ ("div: contains ('john ')")
·: Empty matches all null elements that do not contain child elements or text. Example: $ ("td: empty ")
·: Has (selector) matches the elements that contain the elements matched by the selector. Example: $ ("div: has (p )");
·: Parent matches the elements that contain child elements or text. Example: $ ("td: parent ")

3). Hierarchical Filtering

· Ancestor descendant matches all descendant elements under a given ancestor element. Example: $ ("form input ")
· Parent> child matches all child elements under the given parent element. Example: $ ("form> input ")
· Prev + next matches all next elements following the prev element. Example: $ ("label + input ")
· Prev ~ The siblings matches all the siblings elements after the prev element. Example: $ ("form ~ Input ")
·: First-child matches the first child element. Example: $ ("ul li: first-child ")
·: Last-child matches the last child element. Example: $ ("ul li: last-child ")
·: Nth-child (index/even/odd/equation) matches the nth child or parity element under its parent element. Example: $ ("ulli: nth-child (2 )")
·: Only-child: if an element is the only child element in the parent element, it will be matched. Example: $ ("ul li: only-child ")

4). Method Filtering

·: Animated matches all the elements that are executing the animation. Example: $ ("div: animated ");
·: Eq (index) matches the element of a given index value. Example: $ ("tr: eq (1 )")
·: Even matches all elements with an even index value and starts counting from 0. Example: $ ("tr: even ")
·: First matches the first element found. Example: $ ("tr: first ")
·: Gt (index) matches all elements greater than the given index value and starts counting from 0. Example: $ ("tr: gt (0 )")
·: The last element found by the last match. Example: $ ("tr: last ")
·: Lt (index) matches all elements smaller than the given index value. Example: $ ("tr: lt (2 )")
·: Not (selector) removes all elements that match the given selector. Example: $ ("input: not (: checked )")
·: Odd matches all elements with an odd index value and starts counting from 0. Example: $ ("tr: odd ")