jquery Selector Detailed

@1. Base Selector

Element selector: $ ("Div,input") indicates the HTML element of the selected div,input;

ID Selector: $ ("#big") indicates that an element with ID big in the HTML element is selected, and if there are multiple IDs, only one ID is valid, because the ID is a unique identifier;

Class Selector: $ (". Big") indicates that the element in the HTML element is selected with the class big;

Wildcard * Selector: $ ("*") means matching all elements of HTML;

> or child matches all sub-elements: $ ("Div>span") or $ ("div"). Next ("span") indicates that all child elements of span are selected under the DIV, noting that the grandson element or the following does not match;

+ or Next matches the element in the following: $ ("Div+span") indicates that all elements of span are selected behind the div;

~ or prev matches the sibling element in the following: $ ("Div~span") indicates that a SPAN element with the same sibling is selected after the Div, sub-generation or below is mismatched;

@2. Filter Selector

: First means getting a match for the initial element: $ ("Li:first") means L matches the first list element;

: Last represents the final element to get a match: $ ("Li:last") represents the last list element of the match;

: Not remove element: $ ("div:not") means matching HTML elements except Div;

: Even matches all elements with an even number of index values: $ ("Div:even") that matches the index value of the div under the 0,2,4 ... element;

: Odd matches all elements with an odd index value: $ ("div:odd") that matches the index value of the div under the 1,3,5 ... element;

: EQ (index) matches the element of a given index value: $ ("Div:eq (1)") means that the second DIV element is matched because the index value starts at 0;

: GT (index) matches all elements that are greater than the given index value: $ ("DIV:GT (2)") represents all DIV elements that match the third DIV element;

: LT (index) matches all elements that are less than the given index value: $ ("Div:lt (2)") that matches all DIV elements in front of the third DIV element;

Header elements such as header matching H1-h6: $ (": Header") that matches all H1-h6 header elements;

: Animate matches the element that is performing the animation: $ ("Div:not (: Animate)"). CSS ("Color", "red") changes the color of all elements that do not animate to red;

: Focus triggers a matching element's focus event: $ ("#input: Focus"). Functin () {} triggers a function when the cursor moves above an element with the ID of input;

@ Content Filter Selector

: Contains matches the element of the given text: $ (": Contains (' John ')") matches all elements that contain John;

: Has (selector) matches all elements containing selector: $ (": Has (P)") matches all elements containing p elements;

: Empty matches all elements that do not contain elements or text: $ ("Div:empty") matches all the empty DIV elements (No child elements, no text, I am a carefree grass ...);

:p arent matches all elements that contain child elements or text: $ ("div:parent") matches all DIV elements that contain child elements or child elements that are not empty;

: Hidden matches all invisible elements, or elements of type hidden: $ ("Div:hidden") matches elements such as HTML <div style= "Display:none" ></div> or < Div type= "hidden" ></div>

: None matches all invisible elements

: Visible matches all visible elements: Contrary to: hidden example;

@ Property Selector

[attribute] matches all elements that contain the attribute: $ ("Div[id") matches all DIV elements that contain the ID value;

[Attribute=value] matches all elements that contain the attribute and value of the property: $ ("div[id=1]") matches all id=1 div elements;

[Attribute!=value] matches all elements that contain the attribute but the property value is not of value;

[Attribute^=value] matches all elements that contain the property value and the property value begins with value: $ ("div[id^=news]") matches elements such as HTML <div id=newspaper></div> and <div id=newspara></div>;

[Attribute$=value] matches all elements that contain the property value and the property value ends with value: similar to the meaning of ^ and $ in regular expressions;

[Attribute*=value] matches all elements that contain the attribute and value in the attribute values: * indicates a wildcard;

[Selector1] [Selector2]: conform to the selector, need to meet multiple conditions when used;

: Nth-child (Index) matches the first index element under the parent element: $ ("ul li:nth-child[2]") Note that here the index value is starting from 1;

: First-child matches the first child element;

: Last-child matches the last child element;

: Only-child indicates that if this element is the only child element of the parent element, it will be matched;

: Selected matches all selected option elements;