Summary of common jQuery selectors

  • 2020-03-30 03:32:04
  • OfStack

In Dom programming, we can only use a limited number of functions to get Dom objects by id or TagName, whereas in jQuery, we have an extremely powerful selector to help us get objects on the page and return them as a jQuery wrapper set. This article mainly introduces and classifies the commonly used jQuery selectors.

JQuery selectors can be roughly divided into four categories: basic selectors, hierarchical selectors, filter selectors, and form selectors.
The filter selector can be divided into: simple filter selector, content filter selector, visibility filter selector, attribute filter selector, child element filter selector, form object attribute filter selector.

Basic selector:

$(" # 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 elements in the document [/code]
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 with an id value of main
The label + $(" input ")         Select the next input element node for all label elements
All input label elements directly following the label label are returned by the test selector
$(" # prev ~ div ")             Sibling selector
The selector 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 td 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: the contains (' John ') ")   Select all divs 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'])   Select all input elements whose name attribute is not equal to '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 the option: selected ")   Select the selected element of all child elements of the select


Related articles: