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 ")