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") $("Div:animated") 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 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 the text value of the previous TD for the selected element in all of the Select's child elements to select a name of "S_03_22″" ("input[@ name") of the input text box .=S_03_22]. The parent (). Prev (). Text () name begins with "S_" and is not $ ("input[@ name" ending with "_r" ).^= ' S_ '). Not ("[@ name $= ' _r '] ") A value of $ (" input[@ name ") selected by radio named Radio_01=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: </label> <input name= "Newsletter"/></fieldset></form><input name= "None"/>jQuery Code: $ ("Form Input") Results: [<input name= "Name"/>, <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"/>, <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"/>]
jquery Selector Summary