jquery Selector Summary (GO)

Source: Internet
Author: User

The JQuery selector is incredibly powerful, and here's a simple summary of common element lookup methods $ ("#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"Select all div tag elements, return the DIV element array $ (". MyClass"Select all elements of CSS using the MyClass class $ ("*") selects all the elements in the document and can be selected in a variety of ways: for example $ ("#myELement, Div,.myclass") Cascade selector: $ ("Form Input"Select all of the input elements in the form element $ ("#main > *"Select all the child elements of the ID value of main, $ ("Label + input"selects the next INPUT element node of all the label elements, and the test selector returns a LABEL element with all input tags directly following the label tag ("#prev ~ Div"the sibling selector, which returns all of the tag elements that are ID prev, belongs to the same parent element of the DIV tag Base filter selector: $ ("Tr:first") Select the first $ of all TR elements ("Tr:last") Select the last $ of all TR elements ("Input:not (: Checked) + span"filter out: All input elements of the checked selector $ ("Tr:even") Select the 0,2,4 of all TR elements... ... Element (note: Because multiple elements are selected as an array, the sequence number is starting from 0) $ ("Tr:odd") Select the 1,3,5 of all TR elements... ... Elements of $ ("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 with an ordinal greater than 4 $ ("Td:ll (4)"selects all TD elements in the TD element with an ordinal less than 4 $ (": Header") selects all heading elements (H1-h6) $ ("Div:animated") Select the current animation element content Filter Selector: $ ("Div:contains (' John ')"Select all the 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)"Select all DIV elements that contain the P tag $ ("Td:parent"Select all the element arrays with TD as parent node to visualize the filter selector: $ ("Div:hidden"Select all of the hidden div elements $ ("Div:visible"Select all of the visual div element properties of the filter selector: $ ("Div[id]"Select all DIV elements that contain the id attribute $ ("Input[name= ' newsletter ')" selects all the name attributes equal to ' newsletter 'the INPUT element $ ("input[name!= ' newsletter ')" selects all name attributes not equal to ' newsletter 'the INPUT element $ ("Input[name^= ' News") Select all the name attributes with ' news 'the INPUT element starting with $ ("Input[name$= ' News") Select all the name attributes with ' news 'the end of the INPUT element $ ("Input[name*= ' man ']") Select all the name attributes that contain ' news 'the INPUT element $ ("Input[id][name$= ' man ']"You can use multiple properties for federated selection, which is to get all the element elements that contain the id attribute and then the property to end with man: $ ("UL Li:nth-child (2)"), $ ("ul Li:nth-child (Odd)"), $ ("ul Li:nth-child (3n + 1)")$("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 the child nodes of the div that have only one child node in the form element selector: $ (": Input"Select all of the form input elements, including input, textarea, select, and button$ (": Text"Select all the text INPUT element $ (":p Assword") Select all the password input elements $ (": Radio") Select all the radio input elements $ (": CheckBox") Select all the checkbox INPUT element $ (": Submit") Select all the submit input elements $ (": Image") Select all the image input elements $ (": Reset") Select all the 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 form's hidden fields form element Filter Selector: $ (": Enabled") Select all the actionable form elements $ (":d isabled"Select all the non-actionable form elements $ (": Checked"Select all of the checked form elements $ ("Select Option:selected"Select an instance of the element that is selected in the child elements of all select: Choose a name of"S_03_22"the text value of the previous TD of the input text box is $ ("Input[name =s_03_22]"). Parent (). Prev (). Text () name to"S_" started, and not with "_r"End of $ ("Input[name ^= ' S_ ']"). Not ("[Name $= ' _r ']"a value of $ (radio) selected by a radio_01 named"Input[name =radio_01][checked]"). Val (); $ ("A B"finds all child nodes under the a element, including the non-direct child node $ ("A>b"find the direct child node under the A element $ ("A+b"find the sibling node after the a element, including the non-direct child node $ ("A~b"find the sibling nodes that follow the a element, not including the non-direct child nodes1. $ ("A B"Find all the sub-nodes under the a element, including the non-direct child node Example: Find all the INPUT element HTML code in the form:<form> <label>Name:</label> <input name= "Name"/> <fieldset> <label>newsletter:& lt;/label> <input name= "Newsletter"/> </fieldset> </form> <input name= "None"/>jQuery Code: $ ("Form Input") Results: [<input name= "Name"/&GT;, <input name= "newsletter"/> ]    2. $ ("A>b"Find an example of a direct child node below the A element: matches all the child input elements in the form. HTML Code:<form><label>name:</label><input name= "Name"/><fieldset> <label>Newsletter: </label> <input name= "Newsletter"/></fieldset></form><input name= "None"/>jQuery Code: $ ("Form > Input") Results: [<input name= "name"/>]3. $ ("A+b"find the sibling node behind the a element, including the non-direct child node example: matches all the INPUT element HTML code that follows the label:<form><label>name:</label><input name= "Name"/><fieldset> <label>Newsletter: </label> <input name= "Newsletter"/></fieldset></form><input name= "None"/>jQuery Code: $ ("Label + input") Results: [<input name= "Name"/&GT;, <input name= "newsletter"/> ]4. $ ("A~b"find the sibling node behind the a element, excluding the non-direct child node Example: Find all the INPUT element HTML code with the form's peers:<form><label>name:</label><input name= "Name"/><fieldset> <label>Newsletter: </label> <input name= "Newsletter"/></fieldset></form><input name= "None"/>jQuery Code: $ ("Form ~ Input") Results: [<input name= "None"/>]

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.