A brief analysis of the common methods of element lookup in jquery

This article is a common element in jquery in the search method for a detailed summary and introduction, the need for friends to refer to the

$ ("#myELement") select an element with an ID value equal to MyElement, and the ID value cannot be repeated in the document only one ID value is myelement so the unique element is obtained
$ ("div") selects all div tag elements, returns an array of DIV elements
$ (". MyClass") Select all elements of a CSS that uses the MyClass class
$ ("*") Select all the elements in the document, and you can use a variety of options for joint selection: for example $ ("#myELement, Div,.myclass")

Cascade selector:
$ ("form input") select the INPUT element in all form elements
$ ("#main > *") Select all child elements of the ID value of main
$ ("label + input") selects the next INPUT element node for all the label elements, and the test selector returns all input label elements immediately following the label label with an input label
$ ("#prev ~ div") sibling selector, which returns all the div tags that belong to the same parent element for a LABEL element with ID prev

Basic Filter Selector:
$ ("Tr:first") selects the first of all TR elements
$ ("Tr:last") selects the last of all TR elements
$ ("Input:not (: Checked) + span")

Filter out: All input elements of the checked selector
$ ("Tr:even") Select all TR elements of the 0,2,4 ... Element (Note: Since the selected element is an array, the ordinal number is starting at 0)
$ ("tr:odd") Select all TR elements of the 1,3,5 ... An element
$ ("Td:eq (2)") select the TD element with the serial number 2 in all TD elements
$ ("TD:GT (4)") Select all TD elements with serial number greater than 4 in TD elements
$ ("Td:ll (4)") Select all TD elements with a serial number less than 4 in the TD element
$ (": Header")
$ ("div:animated")

Content Filter Selector:
$ ("Div:contains (' John ')") Select elements in all div that contain John text
$ ("Td:empty") selects all arrays of TD elements that are empty (and not including text nodes)
$ ("Div:has (P)") Select all DIV elements that contain p tags
$ ("td:parent") Select all array of elements with TD as parent node

Visual Filter Selector:
$ ("Div:hidden") Select all the hidden div elements
$ ("div:visible") Select all the visual div elements

Attribute Filter Selector:
$ ("Div[id]") Select all DIV elements that contain ID attributes
$ ("input[name= ' newsletter ']") selects all input elements that have the Name property equal to ' newsletter '
$ ("input[name!= ' newsletter ']") selects all input elements that are not equal to ' newsletter ' for all name properties
$ ("input[name^= ' News") selects all the input elements with the name attribute beginning with ' News '
$ ("input[name$= ' News '") Select all the input elements with the name attribute ending with ' news '
$ ("input[name*= ' Man ']") Select all the name attributes containing the ' news ' INPUT element
$ ("input[id][name$= ' man ')" can use multiple properties for joint selection, which is to get all the elements that contain the id attribute and then the attribute ends with a man

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 the array of the first child nodes of all DIV elements
$ ("div span:last-child")     Returns the array of the last node of all DIV elements
$ ("div button:only-child")   Returns an array of all child nodes in all div with only one child node

Form Element selector:
$ (": Input")        Select all form input elements, including input, textarea, Select and Button
$ (": Text")         Select all text input elements
$ (":p assword")  & nbsp;  Select all password input elements
$ (": Radio")        Select all radio input elements
$ (": CheckBox ")     Select all checkbox input elements
$ (": Submit ")       Select all Submit INPUT element
$ (": Image")        Select all image input elements
$ (": Reset")         Select all reset input elements
$ (": Button")       Select All button input elements
$ (": File ")         Select all file input elements
$ (": hidden ")       Select the hidden fields for all input elements or forms that are of type hidden

FORM Element Filter Selector:
$ (": Enabled")    Select all operable table cells
$ (":d isabled")   Select all of the form elements that are not operable
$ (": Checked")    Select all checked table cells
$ ("Select Option:selected") Select the element that is selected in all of the Select's child elements

Select the last TD's text value
$ ("input[@name =s_03_22]" For the input text box with the name "S_03_22″"). Parent (). Prev (). Text ()
name begins with "S_" And does not end with "_r"
$ ("input[@name ^= ' S_ ')"). Not ("[@name $= ' _r ']")
a radio_01 selected value
$ ("Radio @name = radio_01][@checked] "). Val ();

$ ("A B") finds all child nodes under the A element, include a direct child node
$ ("a>b") to find the direct child node under a element
$ ("a+b") to find the sibling node after the a element, including the indirect child node
$ ("a~b") Finds sibling nodes after the a element, excluding indirect child nodes

1. $ ("A B") finds all child nodes under a element, including indirect 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= "News Letter "/>]

2. $ ("a>b") looks for a 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"/>
jQuery Code:
$ ("form > Input")
Result:
[<input name= ' name '/>]

3. $ ("a+b") looks for sibling nodes following a element, including indirect child nodes
example: match all input elements following 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") looks for sibling nodes following a element, excluding indirect child nodes
Example: 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 '/>]