Summary of commonly used jQuery selectors_jquery

In Dom programming, we can only use limited functions to obtain Dom objects based on id or TagName. However, it is completely different in jQuery. jQuery provides extremely powerful selectors to help us obtain objects on the page and convert the objects Returned as a jQuery wrapper set. This article mainly introduces and categorizes commonly used jQuery selectors.

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

Basic selector:

$("#myELement") Select the element whose id value is equal to myElement. The id value cannot be repeated. There can only be one id value myElement in the document, so you get the only element
$("div") Select all div tag elements and return an array of div elements
$(".myClass") Select all elements using css of myClass class
$("*") Select all elements in the document[/code]
You can use a variety of selection methods for joint selection: for example $("#myELement,div,.myclass")

Cascading selector:

$("form input") Select all input elements in form elements
$("#main > *") Select all child elements with the id value of main
$("label input") Select the next input element node of all label elements
The tested selector returns all input tag elements
that are directly followed by an input tag after the label tag. $("#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
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 ... ... Personal element of all TR elements (Note: Because the multiple elements selected are the array when they choose, so the serial number starts from 0) $("tr:odd") Select the 1st, 3rd, 5th... elements of all tr ​​elements
$("td:eq(2)") Select the td element with serial number 2 among all td elements
$("td:gt(4)") Select all td elements with sequence numbers greater than 4
$ ("TD: LL (4)") Select all TD elements with a serial number of less than 4 in the TD element
$(":header")
$("div:animated")

Content filter selector:

$("div:contains('John')") Select all div elements that contain John text

$("td:empty") Selects an array of all td elements that are empty (not including text nodes)
$("div:has(p)") Select all div elements containing p tags
$("td:parent") Select all element arrays with td as the parent node

Visual filter selector:

$("div:hidden") Select all hidden div elements

$("div:visible") Select all visible div elements

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 input elements whose name attribute ends 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 gets all the elements that contain the id attribute and the attribute ends with 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 an 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 that have only one child node in all divs

Form element selector:

$(":input") Select all form input elements, including input, textarea, select and button
$(":text") Select all text input elements
$(":password") Select all password input elements
$(":radio") Select all radio input elements
$(":checkbox") Select all checkbox input elements
$(":submit") Select all submit input elements
$(":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 all input elements or hidden fields of the form that are of type hidden

Form element filter selector:

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