Detailed explanation of using jquery selector_jquery

jQuery's selector is extremely powerful. Here is a brief summary of commonly used element search methods

$("#myELement") Select the element whose id value is equal to myElement. The id value cannot be repeated in the document Only one ID value is myElement, so what you get is the only element
$ ("div") to select all the DIV tag elements, return the DIV element array
$ (". MyClass") Select the use of the MyClass class class All elements of css
$("*") To select all elements in the document, you can use a variety of selection methods for joint selection: For example, $("#myELement,div,.myclass")

Cascading selector:
$("form input") Selects all input elements in form elements
$("#main > *") Selects all sub-elements with the id value of main
$("label input") Selects the next input element node of all label elements. After testing, the selector returns all input label elements that are directly followed by an input label
$("#prev ~ div" ) Sibling selector, this selector returns all div tags belonging to the same parent element of the tag element with id prev

Basic filter selector:
$("tr:first") Select the first
$("tr:last") of all tr ​​elements Select the last
$("input:not(:checked) span") of all tr ​​elements Filter out

: All input elements of the checked selector

$("tr:even")                                                                                                                          can select the 0th, 2nd, 4th... elements of all tr ​​elements (note: because the selected When there are multiple elements, it is an array, so the sequence number starts from 0)

$("tr:odd")                                                                                                                                                                                                                                                From the 1st, 3rd, 5th... elements can be selected. 🎜>$("td:eq(2)")                                                                  can select the td element with the serial number 2 among all the td elements
$ ("td: gt (4)")                                                       can select the td element with the serial number greater than 4 among all the td elements
$("td:gt(4)")          Element
$("td:ll(4)")                                                                                                                                       ‐                                                                          ‐           out out out of td element
$(":header")  
$("div:animated")  
Content filter selector:

$("div:contains('John')") Selects all elements containing John text in the div
$("td:empty") Selects all elements that are empty Array of td elements (not including text nodes)
$("div:has(p)") Select all div elements containing the p tag Visual filter selector for the element array
of the parent node:

$("div:hidden") Select all hidden div elements
$("div:visible") Select all Visual div element
attribute filter selector:

$("div[id]") Select all div elements containing the id attribute
$("input[name='newsletter']" ) Select all input elements whose name attribute is equal to 'newsletter'

$("input[name!='newsletter']") Select all input elements whose name attribute is not equal to 'newsletter'

$("input[name^='news']") Select all input elements whose name attribute starts with 'news'
$("input[name$='news']") Select all name Input elements whose attributes end with 'news'
$("input[name*='man']") Select all input elements whose name attribute contains 'news'

$("input[id ][name$='man']") You can use multiple attributes for joint selection. This selector is a filter selector for obtaining all

sub-element elements that contain id attributes and whose attributes end with man:

$("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 all div elements The array of the last node
$("div button:only-child") Returns the array of all child nodes that have only one child node in all divs

Form element selector:

$(":input")                                                                                           can select all form input elements, including input, textarea, select and button " )              Select all password input elements
$(":radio")                                                                                                                                  using out using using together out out using using                                                           out out – out out All submit input elements
$(":image")                                                                                                can select all button input element
$(":file") Select all file input elements
$(":hidden") Select all input elements of type hidden or hidden fields of the form

form elements Filter selector:

$(":enabled") Select all operable form elements
$(":disabled") Select all inoperable form elements
$(": checked") Select all checked form elements
$("select option:selected") Select all selected elements in the child elements of select



Select a name The text value of the previous td of the input text box of "S_03_22"
$("input[@ name =S_03_22]").parent().prev().text()

The name starts with
$("input[@ name ^='S_']").not("[@ name $='_R']")

The selected value of a radio named radio_01
$("input[@ name =radio_01][@checked]").val();


$("A B" ) Find all child nodes under the A element, including indirect child nodes
$("A>B") Find the direct child nodes under the A element
$("A B") Find the sibling nodes behind the A element , including indirect child nodes
$("A~B") Find the sibling nodes behind the A element, excluding indirect child nodes

1. $("A B") Find the sibling nodes below the A element All child nodes, including indirect child nodes

Example: Find all input elements in the form

HTML code:

Name:

                                                                                  "newsletter" />

jQuery code:

$( "form input")
Result:

[ , ]

2. $ ("A>B") Find the direct child nodes below the A element
Example: Match all child input elements in the form.

HTML code:




Copy code


The code is as follows:

Name:

           Newsletter:       

jQuery code:




Copy code

The code is as follows:

$("form > input") Result:

Copy code

The code is as follows:

[ ]

3. $("A B") Find the sibling nodes after the A element, including indirect child nodes
Example: match all input elements following label

HTML code:

Copy code The code is as follows:

Name :

  Newsletter:
newsletter" />

jQuery code:

Copy code The code is as follows:

$("label input" )

Result:

Copy code The code is as follows:

[ , ]

4. $("A~B") Find the sibling nodes after the A element, excluding Non-direct child node
Example: Find all input elements that are siblings of the form

HTML code:

Copy codeThe code is as follows:

Name:

< ;fieldset>



jQuery code:

Copy code

The code is as follows:$("form ~ input ")

Result:

Copy code

The code is as follows:[ ]