Go: jquery Selector

Source: Internet
Author: User

Basic selector:
    1. $ ("#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
    2. $ ("div")--selects all div tag elements and returns an array of DIV elements
    3. $ (". MyClass")--selects all elements of the CSS using the MyClass class
    4. $ ("*")--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:
    1. $ ("form input")--Select all the input elements in the form element
    2. $ ("#main > *")--selects all child elements with an ID value of main
    3. $ ("label + input")--The selector returns all input label elements that follow a label tag directly following the label label
    4. $ ("#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:
    1. $ ("Tr:first")--selects the first
    2. $ ("Tr:last") of all TR elements--selects the last
    3. $ ("Tr:even") of all TR elements--selects the 0,2,4 of all TR elements ... ... Element
    4. $ ("tr:odd")--selects the 1,3,5 of all TR elements ... Element
    5. $ ("Td:eq (2)")--Select the TD element with the ordinal 2 in all TD elements
    6. $ ("TD:GT (4)")--Select all TD elements in the TD element that have an ordinal greater than 4
    7. $ ("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:
    1. $ ("Div:contains (' John's)")--selects all elements in the div that contain the John text
    2. $ ("Td:empty")--Select all the array of TD elements that are empty (nor include text nodes)
    3. $ ("Div:has (P)")--selects all DIV elements that contain p tags
    4. $ ("td:parent")--selects all element arrays with TD as parent node
Visual Filter Selector:
    1. $ ("Div:hidden")--Select all the hidden div elements
    2. $ ("div:visible")--Select all of the visual DIV elements
Attribute Filter Selector:
    1. $ ("Div[id]")--Select all DIV elements that contain the id attribute
    2. $ ("input[name= ' newsletter ')"--selects all input elements that have the name attribute equal to ' newsletter '
    3. $ ("input[name!= ' newsletter ')"--Select all the name attribute not equal to ' newsletter ' INPUT element
    4. $ ("input[name^= ' News")--selects all input elements with the name attribute beginning with ' News '
    5. $ ("input[name$= ' News")--selects all input elements with the name attribute ending with ' news '
    6. $ ("input[name*= ' Man ']")--Select all the name attributes containing the ' news ' INPUT element
    7. $ ("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:
    1. $ ("div span:first-child")--Returns an array of the first child nodes of all DIV elements
    2. $ ("div span:last-child")--Returns an array of the last nodes of all DIV elements
    3. $ ("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:
    1. $ (": Input")--selects all form input elements, including input, textarea, select, and button
    2. $ (": Text")--selects all text input elements
    3. $ (":p assword")--selects all password input elements
    4. $ (": Radio")--selects all radio input elements
    5. $ (": CheckBox")--Select all the checkbox input elements
    6. $ (": Submit")--Select all the submit input elements
    7. $ (": Image")--Select all the image input elements
    8. $ (": Reset")--Select all reset input elements
    9. $ (": Button")--Select all the button input elements
    10. $ (": File")--Select all the file input elements
    11. $ (": Hidden")--Select all input elements of type hidden or hidden fields of the form
Form element Filter Selector:
    1. $ (": Enabled")--Select all the actionable form elements
    2. $ (":d isabled")--Select all of the non-actionable form elements
    3. $ (": Checked")--Select all the checked form elements
    4. $ ("Select Option:selected")--selects the element that is selected in the child element of all Select

Go: jquery Selector

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.