The jquery selector USES detail

  • 2020-03-30 02:33:13
  • OfStack

JQuery's selectors are incredibly powerful, and here's a quick summary of the common ways to find elements

$(" # myELement ")       Select the element whose id value is equal to myElement. The id value cannot be repeated. Only one id value in the document can be myElement, so you get a unique element
$(" div ")                     Select all div tag elements and return an array of div elements
$(" myClass ")           Select all elements of CSS that use the myClass class
$(" * ")                         Select all the elements in the document, and you can combine them in a number of ways: for example, $("#myELement,div,.myclass")

Cascade selector:
$(" form input ")                 Select the input element in all form elements
$(" # main > * ")                   Select all child elements with an id value of main
The label + $(" input ")         Select the next input element node of all label elements, and the test selector returns all input label elements directly following the label label with an input label
$(" # prev ~ div ")             Sibling selector that returns all divs belonging to the same parent element for the tag element with id prev

Basic 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. . Elements (note: since multiple elements are selected as an array, the sequence number starts at 0)

Tr: $(" odd ")                               Select all tr elements 1,3,5... . An element
$(" td: eq. (2) ")                         Select the number 2 of all td elements
$(" td: gt (4) ")                         Select all td elements whose serial number is greater than 4
$(" td: ll (4) ")                           Select all td elements whose order number is less than 4
$(" : the header ")
$(" div: animated ")
Content filter selector:

$("div:contains('John')") selects all elements in a div that contain John text
Td: $(" empty ")                     Select an array of all td elements that are empty (also excluding text nodes)
$(" div: from the (p) ")               Select all div elements with a p tag
Td: $(" parent ")                   Select all the array of elements with td as the parent node
Visual filter selector:

$(" div: hidden ")               Select all the divs that are hidden
$(" div: visible ")               Select all visual div elements
Property filter selector:

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

$("input[name!='newsletter']") selects all input elements whose name attribute does not equal 'newsletter'

$(" input [name ^ = 'news'] ")                 Select all input elements with the name attribute beginning with 'news'
$(" input $= 'news' [name] ")                 Select all input elements whose name attribute ends in 'news'
$(" input [name * = 'man'] ")                   Select all the input elements with 'news' in the name attribute

$(" input [id] [$= 'man' name] ")       Multiple attributes can be used for joint selection, and the selector is to get all the elements that have an id attribute and that end in man

Child element filter selector:

$(" ul li: the NTH - the child (2) ") and $(" ul li: the NTH - the child (odd) ") and $(" ul li: the NTH - the child (3 n + 1) ")

$(" div span: first - the child ")                   Returns an array of the first child nodes of all div elements
$(" div span: the last - the child ")                     Returns an array of the last node of all div elements
$(" div button: only - child ")             Returns an array of all child nodes in all divs that have only one child node

Form element selector:

: $(" input ")                                   Select all of the form input elements, including input, textarea, select, and button

$(" : the text ")                                         Select all the text input elements
: $(" password ")                     Select all of the password input elements
$(" : the radio ")                                     Select all of the radio input elements
$(" : "checkbox)                       Select all of the checkbox input elements
: $(" submit ")                             Select all submit input elements
: $(" image ")                                 Select all image input elements
: $(" reset ")                                     Select all the reset input elements
: $(" button ")                               Select all of the button input elements
$(" : the file ")                                         Select all of the file input elements
: $(" hidden ")                             Select all input elements or hidden fields of the form of type hidden

Form element filter selector:

: $(" enabled ")                         Select all the actionable form elements
: $(" disabled ")                       Select all non-operational form elements
: $(" checked ")                       Select all checked form elements
$("select option:selected") selects the selected element from all children of the select

   

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

Names begin with "S_" and do not end with "_R"
$(" input[@name ^= S_'] ").not(" [@name $='_R'] ")

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

   
  $("A B") finds all child nodes under the A element, including indirect child nodes
$(" A> B") find the direct child node under the A element
$("A+B") looks for siblings after the A element, including indirect children
$("A~B") looks for siblings after the A element, excluding indirect children

1. $("A B") finds all children under the A element, including indirect children

Example: find all the input elements in the form

HTML code:

< Form>
< Label> Name: < / label>
< The input name = "name" / >
< Fieldset>
            < Label> Newsletter: < / label>
            < The input name = "newsletter" / >
< / fieldset>
< / form>
< The input name = "none" / >
JQuery code:

$(" form input ")
Results:

[<input name="name" />, <input name="newsletter" />]

2. $(" A> B") find the direct child node under the A element
Example: match all sublevel 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") looks for siblings after the A element, including indirect children
Example: matches all the input elements that follow the label

HTML code:
The same code at the page code block index 0

JQuery code:
 


$("label + input") 

Results:


[ <input name="name" />, <input name="newsletter" /> ] 


4. $("A~B") looks for siblings after the A element, excluding indirect children
Example: find all input elements that are peer to the form

HTML code:
The same code at the page code block index 0

JQuery code:


$("form ~ input") 

Results:


[ <input name="none" /> ] 


Related articles: