Jquery selector Summary

There are four types of jquery selectors: Basic selector, hierarchical selector, filter selector, and form selector. Below we will summarize them separately.

1. What is the basic selector?

The basic selector is the most common selector in jquery and the simplest selector. it searches for DOM elements by element Tag Name, element ID, and class. There are five basic selectors, which are summarized as follows:

Selector	Return	Example
Element tag Selector	Set Element	$ ("P") selects all <p> elements.
Id Selector	Single element	$ ("# Test") Select the element whose ID is test.
Class Selector	Set Element	$ (". Test") select all elements whose class is test.
Wildcard Selector	Set Element	$ ("*") Selects all elements.
Group Selector	Set Element	$ ("Div, span, P. myclass") select all <div>, <span>, and a group of elements with the <p> label whose class is myclass.

2. Hierarchy selector?

It is suitable for retrieving specific elements, such as descendant elements, child elements, adjacent elements, and sibling elements, through hierarchical relationships between DOM elements.

Selector	Return	Example
Descendant element Selector	Set Element	$ ("Div span") select all <span> elements in <div>.
Child element Selector	Set Element	$ ("Div> span") Select the child element whose element name is <span> under <div>.
Adjacent element Selector	Set Element	$ (". One + Div") Select the next <div> sibling element whose class is one.
Sibling element Selector	Set Element	$ ("# Two ~ Select all <div> sibling elements after the element whose ID is two.

Note: $ ("Prev ~ Siblings ") selector and siblings () method.

$ ("# Prev ~ "Div") select all peer DIV elements following the "# Prev" element. The siblings () method is independent of the front and back positions, and can be matched as long as it is a peer node.

3. Filter selector?

The filter selector mainly uses specific filtering rules to filter out the required DOM elements. The filter rules are the same as the pseudo-class selector syntax in CSS, that is, the selector starts with a colon. Based on different filtering rules, the filter selector can be divided into six types: basic filtering, content filtering, visibility filtering, attribute filtering, subelement filtering, and form object attribute filtering selector.

Here, we only summarize the basic filters. You can check other filters when necessary during the actual development process.

Selector	Return	Example
: First	Single element	$ ("Div: First") selects 1st <div> elements from all <div> elements.
: Last	Single element	$ ("Div: Last") Select the last <div> element from all <div> elements.
Not (selector)	Set Element	$ ("Input: Not (. myclass)") Select the <input> element whose class is not myclass.
: Even	Set Element	$ ("Input: Even") Select the <input> element whose index is an even number.
: Odd	Set Element	$ ("Input: odd") Select the <input> element with an odd index.
: Eq (INDEX)	Single element	$ ("Input: eq (1)") Select the <input> element whose index is equal to 1.
: GT (INDEX)	Set Element	$ ("Input: GT (1)") Select the <input> element whose index is greater than 1.
: Lt (INDEX)	Set Element	$ ("Input: Lt (1)") Select the <input> element whose index is less than 1. (Excluding 1)
: Header	Set Element	$ (": Header") select all
: Animated	Set Element	$ ("Div: animated") selects the <div> element of the animation being executed.

4. Form selector?

Using the form selector, we can easily obtain one or more elements of a form.

Selector	Return	Example
: Input	Set Element	$ (": Input") select all <input>, <textarea>, <SELECT>, and <button> elements.
: Text	Set Element	$ (": Text") select all single-line text boxes.
: Password	Set Element	$ (": Password") select all password boxes.
: Radio	Set Element	$ (": Radio") selects all single partitions.
: Checkbox	Set Element	$ (": Checkbox") select all check boxes.
: Submit	Set Element	$ (": Submit") select all the submit buttons.
: Image	Set Element	$ (": Image") select all image buttons.
: Reset	Set Element	$ (": Reset") select all reset buttons.
: Button	Set Element	$ (": Button") select all buttons.
: File	Set Element	$ (": File") Select All upload domains.
: Hidden	Set Element	$ (": Hidden") selects all invisible elements.

The above is the summary of the jquery selector. I hope everyone can understand and use them skillfully. Thank you!