Basic selector:
- $ ("#myELement")--Select an element with an ID value equal to myelement, the ID value cannot be duplicated in the document only one ID value is myelement so get the unique element
- $ ("div")--selects all div tag elements and returns an array of DIV elements
- $ (". MyClass")--selects all elements of the CSS using the MyClass class
- $ ("*")--Select all the elements in the document to use a variety of options for federated selection: for example $ ("#myELement, Div,.myclass")
JQuery uses CSS selectors to select HTML elements.
$ ("P") select the <p> element.
$ ("P.intro") selects all the <p> elements of the class= "Intro".
$ ("P#demo") Select the first <p> element of id= "demo".
Cascade selector:
- $ ("form input")--Select all the input elements in the form element
- $ ("#main > *")--selects all child elements with an ID value of main
- $ ("label + input")--The selector returns all input label elements that follow a label tag directly following the label label
- $ ("#prev ~ div")--the selector returns all DIV tags belonging to the same parent element for the label element with ID prev
Group selector:
Here is a convention: the "tag name or #id name or. Class name" As a mix, then mix represents a label name, or a #id or a. class.
$ ("Mix,mix,mix,..."), such as: $ ("Div, #test1, p,.test2, #test3 ″)
Descendant selector:
$ ("Mix"), of course, can be multiple nested, but the descendant selector can be a deep descendant, so the $ ("Mix mix ...") is not very useful. Example: $ ("div. Test"): all descendant elements of class with test within the DIV tag ( is the tag of the class attribute that is nested by DIV as test)
Near selector:
$ ("Mix+mix"), select the next sibling node. For example: $ ("div + #test"), the node with ID test must be the next sibling node of the Div.
<div></div><p id= "Test" ></p> in $ ("div + #test") can be taken to the P-paragraph node
<div></div><p></p><p id= "Test" ></p> cannot be taken to
Basic Filter Selector:
- $ ("Tr:first")--selects the first
- $ ("Tr:last") of all TR elements--selects the last
- $ ("Tr:even") of all TR elements--selects the 0,2,4 of all TR elements ... ... Element
- $ ("tr:odd")--selects the 1,3,5 of all TR elements ... Element
- $ ("Td:eq (2)")--Select the TD element with the ordinal 2 in all TD elements
- $ ("TD:GT (4)")--Select all TD elements in the TD element that have an ordinal greater than 4
- $ ("Td:ll (4 )--Selects all TD elements in the TD element with an ordinal less than 4
Colon-Qualified node selector: $ ("mix:condition"): the mix tag, and satisfies the qualifying conditions.
E:root: Type E, and is the root element of the document
E:nth-child (N): is a child of the nth type E of its parent element, and the cardinality starts at 1
E:first-child: Is the 1th child of the parent element of type E
E:last-child: Is the last child of the parent element whose type is E
E:only-child: And is the only child element of the parent element whose type is E
E:empty: An element of type E with no child elements (including text nodes)
E:enabled
e:disabled: User interface elements of type E, allowed or forbidden
e:checked: User interface Element (for example, radio button or check box) that is in the selected state of type E
E:visible: Selects all visible elements (display value is block or visible,visibility value is the visible element, excluding hide field)
E:hidden: Selects all hidden elements (not the Hide field, and the display value is block or visible,visibility value is the visible element)
E:not (s): Type E, mismatch selector s
E:eq (n), E:GT (n), E:lt (n): element-Qualified
E:first: Equivalent to E:eq (0)
E:last: Last matching element
E:even: Taking an even-numbered element from a matched set of elements
E:odd: Taking an odd ordinal element from a matched set of elements
E:parent: Selects all elements that contain child elements (containing text nodes)
E:contains (' Test '): Selects all elements that contain the specified text
Content Filter Selector:
- $ ("Div:contains (' John's)")--selects all elements in the div that contain the John text
- $ ("Td:empty")--Select all the array of TD elements that are empty (nor include text nodes)
- $ ("Div:has (P)")--selects all DIV elements that contain p tags
- $ ("td:parent")--selects all element arrays with TD as parent node
Visual Filter Selector:
- $ ("Div:hidden")--Select all the hidden div elements
- $ ("div:visible")--Select all of the visual DIV elements
Attribute Filter Selector:
- $ ("Div[id]")--Select all DIV elements that contain the id attribute
- $ ("input[name= ' newsletter ')"--selects all input elements that have the name attribute equal to ' newsletter '
- $ ("input[name!= ' newsletter ')"--Select all the name attribute not equal to ' newsletter ' INPUT element
- $ ("input[name^= ' News")--selects all input elements with the name attribute beginning with ' News '
- $ ("input[name$= ' News")--selects all input elements with the name attribute ending with ' news '
- $ ("input[name*= ' Man ']")--Select all the name attributes containing the ' news ' INPUT element
- $ ("input[id][name$= ' Man ')")--you can use multiple attributes for federated selection, which is to get all the elements that contain the id attribute and then the property ends with a man
child element Filter Selector:
- $ ("div span:first-child")--Returns an array of the first child nodes of all DIV elements
- $ ("div span:last-child")--Returns an array of the last nodes of all DIV elements
- $ ("div button:only-child")--Returns an array of all child nodes with only one child node in all Div
$ ("Mix>mix"), which is placed behind the descendant selector to make comparisons with it. The child selector can only select the first generation of descendants. Deep nesting is not handled. Example:
$ ("Div>.test")
<div><p></p></div> is valid for P-paragraph tags here. but to
<div><p><p></p></p></div> the P-paragraph tag here is not valid, here to use
$ ("div. Test")
Form element selector:
- $ (": Input")--selects all form input elements, including input, textarea, select, and button
- $ (": Text")--selects all text input elements
- $ (":p assword")--selects all password input elements
- $ (": Radio")--selects all radio input elements
- $ (": CheckBox")--Select all the checkbox input elements
- $ (": Submit")--Select all the submit input elements
- $ (": Image")--Select all the image input elements
- $ (": Reset")--Select all reset input elements
- $ (": Button")--Select all the button input elements
- $ (": File")--Select all the file input elements
- $ (": Hidden")--Select all input elements of type hidden or hidden fields of the form
Form element Filter Selector:
- $ (": Enabled")--Select all the actionable form elements
- $ (":d isabled")--Select all of the non-actionable form elements
- $ (": Checked")--Select all the checked form elements
- $ ("Select Option:selected")--selects the element that is selected in the child element of all Select
Go: jquery Selector