JQUERY Selector Summary, compare all

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. ID values cannot be duplicated in the document only one ID value is myelement so get the unique element $ ("div") to select all div tag elements, return the DIV element array $ (". MyClass") Select the CSS that uses the MyClass class There is an element of $ ("*") to select all the elements in the document, which can be selected in a variety of ways: for example $ ("#myELement, Div,.myclass") Cascade selector: $ ("form input") selection All of the input elements in the form element $ ("#main > *") Select all the child elements of the ID value of main ("label + input") to select all the label elements of the next INPUT element node, and the test selector returns Back to the label tag is directly followed by a input label all input tag element $ ("#prev ~ div") sibling selector, the selector returns all of the tag elements that are ID prev for the same parent element of the DIV tag Base filter selector: $ (" Tr:first ") Select the first $ (" Tr:last ") of all TR elements to select the last $ (" Input:not (: Checked) + span ") of all TR elements to filter out : All input elements of the checked selector $ ("Tr:even") Select all the TR elements of the 0,2,4 ... Element (Note: Because the selected element is an array, the ordinal is starting from 0) $ ("tr:odd") selects all the TR elements of the 1,3,5 ...              Element $ ("Td:eq (2)") selects all TD elements with the number 2 in the TD element $ ("TD:GT (4)") selects 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 4Vegetarian $ (": Header") $ ("div:animated") Content Filter Selector: $ ("Div:contains (' John ')") Select all the elements in the div that contain the John text $ ("Td:empty") Select the There is an array of TD elements that are empty (also excluding text nodes) $ ("Div:has (P)") Select all the DIV elements that contain the P tag $ ("Td:parent") Select all the element array with TD as parent node to visualize the filter selector: $ ( "Div:hidden") Select all the hidden div elements $ ("div:visible") to select all the visual div element attribute filter selectors: $ ("Div[id]") Select the There is a DIV element containing the id attribute $ ("input[name= ' newsletter ')" selects all of the name attributes equal to the INPUT element of ' newsletter ' ("input[name!= ' newsletter ')")         The name attribute is not equal to ' newsletter ' of the INPUT element $ ("input[name^= ' News '") to select all the name attributes with ' news ' beginning with the INPUT element $ ("input[name$= ' News ')") Select all the Name property with ' News ' to end the INPUT element $ ("input[name*= ' Man ')") Select all the Name property containing the ' news ' INPUT element $ ("input[id][name$= ' m An '] ") can use multiple attributes for federated selection, the selector is to get all the elements containing the id attribute and then the attribute with the man ending element child element filter Selector: $ (" 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 element selector: $ (": Input") Select all form input elements, including INP UT, textarea, select and button $ (": Text") Select all the text INPUT element $ (":p assword") to select all password               INPUT element $ (": Radio") Select all the radio INPUT element $ (": checkbox") to select all the checkbox INPUT element $ (": Submit")  Select all the submit input elements $ (": Image") to select all the image input elements $ (": Reset") to select all Reset               The INPUT element $ (": Button") selects all the button input elements $ (": File") to 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 actionable form elements $ (":d isabled") Select all the non-operational form elements $ (": Checked") to select all the checked form elements $ ("select Option:selected") to select the selected of all the sub-elements of the Select Select the text value of the previous TD of the input text box named "S_03_22″" ("input[@ name =s_03_22]"). Parent (). Prev (). The text () name begins with "S_" and does not Is the $ ("input[@ nam" ending with "_r"E ^= ' S_ '). Not ("[@ name $= ' _r ']") a radio_01 named Radio selected value $ ("input[@ name =radio_01][@checked]"). Val (); $ ("a B") finds all child nodes under the a element, including the non-direct child node $ ("A>b") looking for a element below the direct child node $ ("A+b") finds the sibling node behind the a element, including the non-direct child node $ ("A~b") looking for the sibling node behind the A element, Does not include non-direct child node 1. $ ("a B") Find all child nodes below the a element, including the non-direct child node Example: Find all the input elements in the form HTML code: <form> <label>Name:</label> <i Nput name= "name"/> <fieldset> <label>Newsletter:</label> <input name= "Newsletter"/&G T  </fieldset> </form> <input name= "None"/> JQuery Code: $ ("form input") Result: [<input name= "name" /&gt, <input name= "Newsletter"/>] 2.    $ ("a>b") Find the direct child node under the A element example: 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"/&  Gt JQuery Code: $ ("form > Input") Result: [<input name=" name "/>] 3. $ ("a+b") find the sibling node behind the A element, including an example of a non-direct child node: matches all the input elements following the label HTML code: <form> <label>Name:</label> <input name= "name"/> <fieldset> <label>Newsletter:</label> <input name= "Newsletter "/> </fieldset> </form> <input name=" None "/> JQuery Code: $ (" label + input ") Result: [<input Name= "Name"/&GT;, <input name= "Newsletter"/>] 4. $ ("a~b") find the sibling node behind the A element, excluding the example of a non-direct child node: Find all input elements with form peers HTML code: <form> <label>Name:</label> <i Nput name= "name"/> <fieldset> <label>Newsletter:</label> <input name= "Newsletter"/&G T </fieldset> </form> <input name= "None"/> JQuery Code: $ ("form ~ input") Result: [<input name= "Non E "/>]