Summary of Common elements finding methods in jquery
$ ("#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 $ ("*") Select all the elements in the document, you can use a variety of selection methods for federated selection: for example $ ("#myELement, Div,.myclass") Cascade selector: $ ("form input") Select the INPUT element $ ("#main > *") in all form elements Select all 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 all input tag elements that follow the label tag directly followed by a $ ("#prev ~ div") Fellow selector, the selector returns all the DIV tags that belong to the same parent element for the label element with ID prev basic filter selector: $ ("tr: First ") select $ for all TR elements ("Tr:last") Select the last $ of all TR elements ("inPut:not (: Checked) + span ") filter out: All input elements of checked selector $ (" Tr:even ") Select all TR elements of 0,2,4 ... Element (Note: Since multiple elements are selected as an array, the sequence number is starting from 0) $ ("tr:odd") Select all TR elements of 1,3,5 ... 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)") Select all TD elements in the TD element with an ordinal less than 4 $ (": Header") $ ("div:animated") Content Filter Selector: $ ("DIV: Contains (' John ') ") Select the element $ (" Td:empty ") that contains the John text in all div Select all the array $ ("Div:has (P)") of TD elements that are empty (nor include text nodes) SelectAll DIV elements containing the P tag $ ("Td:parent") Select all element array 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 with id attribute $ ("Input[name=" Newsletter '] ") Select all the name attribute equals ' newsletter ' INPUT element $ (" input[name!= ' newsletter '] ") Select all the name attribute is not equal to ' newsletter ' INPUT element $ ("input[name^= ' News ']") Select all the name attributes to start with ' news ' 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$= ' Man ')") Multiple properties can be used for federated selection, and the selector is to get all the containedThe id attribute and then the attribute with the man end 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 child nodes with only one child node in all div form element selector: $ (": Input") Select all of the form input elements, including input, textarea, select, and button $ (": Text") Select all text input elements $ (":p assword") Select all password INPUT element $ (": Radio") Select all radio input elements $ (": checkbox") Select all checkbox INPUT Element $ (": Submit") Select all the Submit input elements $ (": Image") Select all the image input elements $ (": Reset") Select all Reset INPUT element $ (": 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 operable table cell $ (": Disabled ") Select all non-operable table cell $ (": Checked ") Select all of the checked table cell $ ("Select option: Selected ") selects all the elements of the selected in the child element 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 (). Text ()
The name begins with "S_" and is not a $ ("input[@name ^= ' S_ ')" ending with "_r". Not ("[@name $= ' _r ']")
A radio named RADIO_01 has the value $ ("input[@name =radio_01][@checked]") selected. 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, Do not include non-direct child nodes
1. $ ("a B") Find all child nodes under the a element, including non-direct child nodes
Example: Find all 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") Result:
[<input name= "name"/>, <input name= "newsletter"/>]
2. $ ("a>b") find the direct sub-node below 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"/> JQuery code:
$ ("form > Input") Results:
[<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 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"/>, <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><input name= "Name"/><fieldset> <label>Newsletter: </label> <input name= "Newsletter"/></fieldset></form><input name= "None"/> JQuery code:
$ ("form ~ input") Result:
[<input name= "None"/>]
jquery Element Lookup method