Common element lookup methods summarized by jQuery selector

There is no fixed definition for selectors, and to some extent, selectors in jQuery are similar to selectors in stylesheets. The selector has the following characteristics:

1. Simplify code writing

2. Implicit iteration

3. There is no need to judge whether the object exists or not

The selector of jQuery can be described as extremely powerful, here is a brief summary of 1 commonly used element search methods

$("# myELement") Select an element whose id value is equal to myElement. id value cannot be repeated. Only one id value is myElement in the document, so you get only one element

$("div") selects all div tag elements and returns an array of div elements
$(". myClass") Select all elements of css that use the myClass class
$("*") selects all the elements in the document. You can use a variety of selection methods for joint selection: for example, $("# myELement, div,. myclass")
$("form input") Select the input element from all form elements
$("#main > * ") Select all child elements whose id value is main
$("label + input") Select the next input element node of all label elements. After testing, the selector returns all input tag elements directly followed by an input tag after the label tag
$("# prev ~ div") sibling selector which returns all div tags belonging to the same parent element of the tag element id is prev

Basic filter selector:

$("tr: first") Select the first of all tr elements
$("tr: last") Select the last one of all tr elements
$("input: not (: checked) + span") Filters out all input elements of the selector of checked
$("tr: even") Selects the 0, 2, 4... of all tr elements (Note: Since multiple selected elements are arrays, the sequence number starts from 0)
$("tr: odd") Select the 1st, 3rd, 5th...... Elements of all tr Elements
$("td: eq (2)") Select the td element with sequence number 2 of all td elements
$("td: gt (4)") Select all td elements with sequence number greater than 4 in td elements
$("td: ll (4)") Select all td elements with sequence number less than 4 in td elements
$(": header") Select all header elements such as h1, h2, h3, etc
$("div: animated") Select all elements that are performing animation effects

Content Filter Selector:

$("div: contains ('John')") Select all div elements that contain John text
$("td: empty") Select an array of all empty td elements (excluding text nodes)
$("div: has (p)") Select all div elements with p tags
$("td: parent") Select all element arrays with td as the parent node

Visual filter selector:

$("div: hidden") Select all div elements that are hidden
$("div: visible") Select all visual div elements

Property filter selector:

$("div [id]") Select all div elements with id attributes
$("input [name= 'newsletter']") Select all input elements whose name attribute equals' 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 attributes begin with 'news'
$("input [name $= 'news']") Select all input elements whose name attribute ends with 'news'
$("input [name*= 'news']") Select all name attributes that contain input elements of 'news'
The $("input [id] [name $= 'man']") can use multiple attributes for joint selection, and the selector is to obtain all elements that contain id attributes and whose name attributes end with man

Sub-element filter selector:

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span: first-child") returns span elements under all div elements, taking only the first
$("div span: last-child") returns the span element under all div elements, taking only the last one
$("div button: only-child") Returns an array of only 1 child of all button elements under all div

Form element selector:

$(": input") Select all form input elements, including input, textarea, select, and button
$('input: text') Select the input element of type text from all input elements
$('input: password') Select the input element of type password from all input elements
$('input: radio') Select the input element of type radio from all input elements
$('input: checkbox') Select the input element of type checkbox from all input elements
$('input: submit') Select the input element of type submit from all input elements
$('input: image') Select the input element of type image from all input elements
$('input: button') Select the input element of type button from all input elements
$('input: file') Select the input element of type file from all input elements
$("input: hidden") Select the input element of type hidden from all input elements

Form Element Filter Selector:

$(": enabled") Select all operational form elements
$(": disabled") Select all inoperable form elements
$(": checked") Select all checked form elements
$("select option: selected") selects all the child elements of select that are selected