Selector Selector |
Describe |
Return |
Example |
Basic Selector |
#id |
Matches an element according to the given ID |
Single element |
$ ("#test") select element with ID test |
. class |
Matches the element according to the given class name |
Collection elements |
$ (". Test") to select an element of class test |
Element |
Matches an element based on the given element name |
Collection elements |
$ ("P") selects all P-elements |
* |
Match all elements |
Collection elements |
$ ("*") Select all elements |
Selector1,selector2,....., Selectorn |
Merges the elements of each selector to return together |
Collection elements |
$ ("Div,span,p.myclass") selects all Div,span and a set of elements that have a P tag of class MyClass |
Hierarchy Selector |
$ ("ancestor descendant") |
Selects all descendant (descendant) elements in the ancestor element |
Collection elements |
$ ("div span") selects all the span elements in all div |
$ ("Parent > Child") |
Select the child element under the parent element, which differs from $ ("ancestor descendant"), and $ ("ancestor descendant") selects the descendant element |
Collection elements |
$ ("Div>span") Select child element under DIV element named span |
$ ("prev + next") |
Select the next element immediately after the Prev element |
Collection elements |
$ (". One+div") Select the next div element of class |
$ ("prev~siblings") |
Selects all siblings elements after the Prev element |
Collection elements |
$ ("#two ~div") selects all the div sibling elements that follow the element with the ID of both |
Basic Filter Selector |
: First |
Select the first element |
Single element |
$ ("Div:first") selects the first DIV element in all DIV elements |
: Last |
Select the last Element |
Single element |
$ ("Div:last") selects the last div element in all DIV elements |
: Not (selector) |
Removes all elements that match a given selector |
Collection elements |
$ ("Input:not (. MyClass)") Select an element of class other than MyClass |
: Even |
Select all elements with an even number of indexes, starting from 0 |
Collection elements |
$ ("input:event") Select INPUT element with an even number of indexes |
: Odd |
Selects all elements with an odd number of indices, starting from 0 |
Collection elements |
$ ("input:odd") Select index is an odd INPUT element |
: EQ (Index) |
Select an element with index equal to index (index starting from 0) |
Collection elements |
$ ("Input:eq (1)") Select INPUT element with index equal to 1 |
: GT (Index) |
Select an element with index greater than index (index starting from 0) |
Collection elements |
$ ("INPUT:GT (1)") Select INPUT element with index greater than 1 (note: greater than 1, not including 1) |
: LT (Index) |
Select an element with index less than index (index starting from 0) |
Collection elements |
$ ("Input:lt (1)") Select INPUT element with index greater than 1 (note: Less than 1, not including 1) |
: Header |
Select all the caption elements, such as H1,H2,H3, etc. |
Collection elements |
$ (": Header") Select all the h1,h2,h3 in the Web page ... |
: Animated |
Selects all elements that are currently performing an animation |
Collection elements |
$ ("div:animted") pick the div element that is performing the animation |
Content Filter Selector |
: Contains (text) |
Select the element with the text content as "text" |
Collection elements |
$ ("Div:contains (' I ')") Select the div element that contains the text "I" |
: Empty |
Select empty elements that do not contain child elements or text |
Collection elements |
$ (div:empty) Select a div empty element that does not contain resources (including text elements) |
: Has (selector) |
Select the element that contains the element that the selector matches |
Collection elements |
$ ("Div:has (P)") select the div element that contains the P element |
:p arent |
Select an element that contains child elements or text |
Collection elements |
$ ("div:parent") Select a DIV element that has child elements (including text elements) |
Visibility Filter Selector |
: Hidden |
Select all elements that are not visible |
Collection elements |
$ (": Hidden") selects all elements that are not visible. Elements such as "Input type=" hidden "/", "div style=" display:none "and" div style= "Visibility:hidden" are included. If you want to select only the INPUT element, you can use $ ("Input:hidden") |
: Visible |
Select all visible elements |
Collection elements |
$ ("div:visible") selects all visible div elements |
Attribute Filter Selector |
[Attribute] |
Select the element that owns this property |
Collection elements |
$ ("Div[id]") Select the element that owns the property ID |
[Attribute=value] |
Select an element with the value of a property |
Collection elements |
$ ("div[title=test]") Select the div element with the property title test |
[Attribute!=value] |
Select an element of an attribute that is not equal to value |
Collection elements |
$ ("div[title!=test]") Select the Divy element with the attribute title not equal to "test" (note: div elements with no attribute title will also be selected) |
[Attribute^=value] |
Select the element with the value of the property starting with value |
Collection elements |
$ ("div[title^=test]") Pick property title div element starting with "test" |
[Attribute$=value] |
Select an element that ends with the value of the property as value |
Collection elements |
$ ("div[title$=test]") Pick property title div element ending with "test" |
[Attribute*=value] |
Select the value of the attribute that contains the element of value |
Collection elements |
$ ("div[titel*=test]") Select attribute title contains ' test ' div element |
[Selector1] [Selector2] [Selectorn] |
A composite property selector is combined with a property selector to satisfy multiple conditions. Reduce the range once per selection. |
Collection elements |
$ ("div[id][title$= ' Test ']") Select the div element that owns the property ID, and the property title ends with "test" |
child element Filter Selector |
: Nth-child (Index/event/odd/equation) |
Select the index child element or the odd and even element under each parent element. (index from 1) |
Collection elements |
: EQ (index) matches only one element, whereas: Nth-child will match elements for each parent element, and the index of Nth-child (index) starts at 1, and: EQ (index) is calculated from 0 |
: Frist-child |
Select the first child element of each parent element |
Collection elements |
: First returns only a single element, whereas: The First-child selector will match each parent element with the one child element. For example $ ("ul li:first-child"); Select the first LI element in each UL |
: Last-child |
Select the last child element of each parent element |
Collection elements |
Similarly,: Last returns only a single element, whereas: The Last-child selector matches each parent element to the final child element. For example $ ("ul li:last-child"); Select the last Li element in each UL |
: Only-child |
If an element is the only child element in its parent element, it will be matched. If the parent element contains other elements, it will not be matched |
Collection elements |
$ (UL li:only-child) in UL Select the LI element that is the only child element |
Form object property Filter Selector |
: Enabled |
Select all available elements |
Collection elements |
$ ("#form1: Enabled") selects all available elements in a form with id "Form1" |
:d isabled |
Select all unavailable elements |
Collection elements |
$ ("#form2:d isabled") Select all the unavailable elements in the form with ID "Form2" |
: Checked |
Select all selected elements (Radio box, check box) |
Collection elements |
$ ("input:checked") selects all selected input elements |
: Selected |
Select All selected option elements (drop-down list) |
Collection elements |
$ ("select:selected"); Select all selected option elements |
Form object property Filter Selector |
Collection elements |
Collection elements |
Collection elements |
Collection element A |