jquery-powerful jquery selector (detailed) [Turn]1. Base Selector
Basics
Name |
Description |
Example |
#id |
Select based on element ID |
$ ("divID") select element with ID divid |
Element |
Depending on the name of the element, select |
$ ("a") Select all <a> elements |
. class |
Based on the CSS class selection of the element |
$ (". bgred") Select the element for which the CSS class is bgred |
* |
Select all elements |
$ ("*") Select all elements of the page |
Selector1, Selector2, Selectorn |
You can separate several selectors with "," and then spell a selector string. The contents of these selectors will be selected at the same time. |
$ ("#divId, A,. bgred") |
2. Hierarchy Selector
Hierarchy
Name |
Description |
Example |
Ancestor descendant |
Use form input to select all input elements in the form. That is, ancestor (ancestor) is from, descendant (descendants) is input. |
$ (". Bgred div") selects all <div> elements in the CSS class for bgred elements. |
Parent > Child |
Select the direct child node of parent. Child must be contained in parent and the parent class is the parents element. |
$ (". Mylist>li") Select the CSS class as a direct child node <li> object in the MyList element. |
Prev + Next |
Prev and Next are two elements of the same level. Select the next element after the Prev element. |
$ ("#hibiscus +img") is selected in the IMG object after the ID of the hibiscus element. |
Prev ~ siblings |
Select the element that is filtered according to siblings after Prev Note: Siblings is a filter |
$ ("#someDiv ~[title]") Select all elements with the title attribute after the object with ID somediv |
3. Basic Filter
Basic Filters
Name |
Description |
Example |
: First |
Match the first element found |
Find the first row of a table: $ ("Tr:first") |
: Last |
Match the last element found |
Find the last line of the table: $ ("Tr:last") |
: Not (selector) |
Removes all elements that match a given selector |
Find all the unselected input elements: $ ("Input:not (: Checked)") |
: Even |
Matches all elements with an even number of index values, counting from 0 |
Find table 1, 3, 5 ... line: $ ("Tr:even") |
: Odd |
Matches all elements with an odd index value, counting from 0 |
Find 2, 4, and 6 rows of a table: $ ("tr:odd") |
: EQ (Index) |
An element that matches a given index value Note: Index is counted starting from 0 |
Find second line: $ ("Tr:eq (1)") |
: GT (Index) |
Match all elements greater than the given index value Note: Index is counted starting from 0 |
Find the second third row, where the index value is 1 and 2, or greater than 0: $ ("tr:gt (0)") |
: LT (Index) |
Select elements with index less than N in the result set Note: Index is counted starting from 0 |
Find the first second row, that is, the index value is 0 and 1, which is smaller than 2: $ ("Tr:lt (2)") |
: Header |
Select All header tags of the h1,h2,h3 category. |
Add background color to all headings in the page: $ (": Header"). CSS ("Background", "#EEE"); |
: Animated |
Matches all elements that are performing an animation effect |
An animated effect is only performed on elements that do not animate: $ ("#run"). Click (function () { $ ("Div:not (: Animated)"). Animate ({left: "+=20"}, 1000); }); |
4. Content Filter Contents Filters
Name |
Description |
Example |
: Contains (text) |
Matches the element containing the given text |
Find all DIV elements that contain "John": $ ("Div:contains (' John ')") |
: Empty |
Matches all empty 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 that contains the element that the selector matches |
Add a text class to all DIV elements that contain the P element: $ ("Div:has (P)"). AddClass ("test"); |
:p arent |
Match elements that contain child elements or text |
Find all TD elements that contain child elements or text: $ ("td:parent") |
5. Visibility Filter
Visibility Filters
Name |
Description |
Example |
: Hidden |
Match all the Invisible elements Note: In the 1.3.2 release, hidden matches an element that itself or the parent does not occupy space in the document. If you use the CSS visibility property so that it does not display but occupies a placeholder, you do not enter hidden. |
Find all the Invisible TR elements: $ ("Tr:hidden") |
: Visible |
Match all visible elements |
Find all the Visible TR elements: $ ("tr:visible") |
6. Attribute Filter
Attribute Filters
Name |
Description |
Example |
[Attribute] |
Match the element containing the given property |
Find all DIV elements that contain ID attributes: $ ("Div[id]") |
[Attribute=value] |
Matches a given property as an element of a particular value |
Find all the name attribute is the INPUT element of newsletter: $ ("input[name= ' newsletter ')"). attr ("Checked", true); |
[Attribute!=value] |
Matches a given property is an element that does not contain a particular value |
Find all the name attributes that are not newsletter input elements: $ ("input[name!= ' newsletter ')"). attr ("Checked", true); |
[Attribute^=value] |
Matches a given property is an element that starts with some value |
$ ("input[name^= ' News ']") |
[Attribute$=value] |
Matches a given property is an element that ends with some value |
Find all input elements with the name ' letter ': $ ("input[name$= ' letter ']") |
[Attribute*=value] |
Matches a given property to an element that contains some value |
Find all the input elements that name contains ' man ': $ ("input[name*= ' Man ']") |
[AttributeFilter1] [AttributeFilter2] [Attributefiltern] |
A composite property selector that needs to be used when multiple conditions are met. |
Find all the ID attributes, and its name attribute is the end of the man: $ ("input[id][name$= ' Man ']") |
7. Sub-element filter child Filters
Name |
Description |
Example |
: Nth-child (Index/even/odd/equation) |
Matches the nth child or odd and even element under its parent element ': EQ (index) matches only one element, and this will match child elements for each parent element. : Nth-child starting from 1, and: Eq () is 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) |
Find the 2nd Li in each UL: $ ("UL Li:nth-child (2)") |
: First-child |
Match first child element ': First ' matches only one element, and this selector will match one child element for each parent element |
Find the first Li in each UL: $ ("ul Li:first-child") |
: Last-child |
Match last child element ': Last ' matches only one element, and this selector will match 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. |
Find the LI in ul that is the only child element: $ ("ul Li:only-child") |
8. Form selector Forms
Name |
Description |
Explain |
: input |
Matches all input, textarea, select, and button elements |
To find all input elements: $ (": input") |
: Text |
Match all the text boxes |
Find all text boxes: $ (": Text") |
:p Assword |
Match all Password boxes |
Find all Password boxes: $ (":p Assword") |
: 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 fields |
Match all image fields: $ (": 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 Filter Form Filters
Name |
Description |
Explain |
: Enabled |
Match all available elements |
To find all available input elements: $ ("input:enabled") |
:d isabled |
Match all unavailable elements |
To find all input elements that are not available: $ ("input:disabled") |
: Checked |
Matches all selected selected elements (Checkboxes, radio boxes, etc., excluding option in select) |
Find all selected check box elements: $ ("input:checked") |
: Selected |
Match all of the selected option elements |
To find all selected option elements: $ ("Select Option:selected") |
Based on jquery (v1.3.2) from:http://bbs.chinaandroid.com/showtopic-89.aspx
1). Basic
• #id match an element based on the given ID. For example: $ ("#id")
element matches all elements according to the given element name. For example: $ ("div")
·. class matches elements based on the given classes. For example: $ (". Style1");
* matches all elements. For example: $ ("*")
Selector1,selector2,selectorn The elements that each selector matches to and returns together. For example: $ ("#id, Div,.style1")
2). Form
:button matches all buttons. For example: $ (": Button")
:checkbox matches all check boxes. For example: $ (": checkbox")
:file matches all file domains. For example: $ (": File")
:hidden matches all invisible elements, or elements of type hidden. For example: $ ("Input:hidden")
:image matches all image fields. For example: $ (": Image")
:input matches all input, textarea, select, and button elements. For example: $ (": input")
•:p assword matches all password boxes. For example: $ (":p Assword")
:radio matches all radio buttons. For example: $ (": Radio")
:reset matches all reset buttons. For example: $ (": Reset")
:submit matches all submit buttons. For example: $ (": Submit")
:text matches all single-line text boxes. For example: $ (": Text")
:header matches header elements such as H1, H2, H3, and so on. For example: $ (": Header"). CSS ("Background", "#EEE");
2. Filter criteria
1). Attribute filtering
· [Attribute*=value] matches the given attribute to an element that contains some value. For example: $ ("input[name*= ' Man '")
· [Attribute!=value] matches all elements that contain the specified attribute, but the property is not equal to a specific value. For example: $ (input[name!= ' man ');
· [Attribute$=value] matches a given property that is an element that ends with some value. For example: $ ("input[name$= ' Man ']")
· [Attribute=value] matches the element of a given property that is a specific value. For example: $ ("Input[name= ' Man ']");
· [attribute] matches the element that contains the given property. For example: $ ("div[id]")
· [Attribute^=value] matches a given property is an element that starts with some value. For example: $ ("input[name^= ' Man ']")
· [Selector1] [Selector2] [Selectorn] satisfies multiple conditions at the same time. For example: $ ("input[id][name$= ' Man ']")
:hidden matches all the invisible elements. For example: $ ("Tr:hidden")
:visible matches all visible elements. For example: $ ("tr:visible")
:checked matches all selected selected elements (Checkboxes, radio boxes, and so on, excluding option in select). For example: $ ("input:checked") $ ("Input[name= ' Check ']:checked").
•:d isabled matches all unavailable elements. For example: $ ("input:disabled")
:enabled matches all available elements. For example: $ ("input:enabled")
:selected matches all of the selected option elements. For example: $ ("Select Option:selected")
2). Content filtering
:contains (text) matches the element that contains the given text. For example: $ ("Div:contains (' John ')")
:empty matches all empty elements that do not contain child elements or text. For example: $ ("Td:empty")
:has (selector) matches the element that contains the element that the selector matches. For example: $ ("Div:has (P)");
•:p arent matches elements that contain child elements or text. For example: $ ("td:parent")
3). Level filtering
ancestor descendant matches all descendant elements under a given ancestor element. For example: $ ("form input")
parent > Child matches all sub-elements under the given parent element. For example: $ ("form > Input")
prev + next matches all next elements immediately following the Prev element. For example: $ ("label + input")
prev ~ Siblings matches all siblings elements after the Prev element. For example: $ ("form ~ input")
:first-child matches the first child element. For example: $ ("ul Li:first-child")
:last-child matches the last child element. For example: $ ("ul Li:last-child")
:nth-child (index/even/odd/equation) matches the nth child or odd and even element under its parent element. For example: $ ("ul Li:nth-child (2)")
:o Nly-child If an element is the only child element in the parent element, it will be matched. For example: $ ("ul Li:only-child")
4). Method filtering
:animated matches all elements that are performing animation effects. For example: $ ("div:animated");
:eq (index) matches an element of a given index value. For example: $ ("Tr:eq (1)")
:even matches all elements with an even number of index values, counting from 0. For example: $ ("Tr:even")
:first matches the first element found. For example: $ ("Tr:first")
:GT (index) matches all elements that are greater than the given index value, counting starting at 0. For example: $ ("tr:gt (0)")
:last matches the last element found. For example: $ ("Tr:last")
:lt (index) matches all elements that are less than the given index value. For example: $ ("Tr:lt (2)")
:not (selector) removes all elements that match the given selector. For example: $ ("Input:not (: Checked)")
:o DD matches all elements with an odd index value, counting from 0 onwards. For example: $ ("tr:odd")
[Go]JQ Selector