JQuery learning path: Learning jQuery Selector

The core of jQuery lies in its selector. By watching videos and reading, it is found that the jQuery selector can be divided into several categories in general (different people have different ways. Here we choose one that we think is better ):

1. Basic selector (corresponding to the basic selector and hierarchy selector in the api Documentation)

2. Filter selector (corresponding to the filter selector and form selector in the api document)

3. Filter selector (corresponding to the "filter" category in the api, not in the "selector" category)

1. Basic selector (corresponding to the basic selector and hierarchy selector in the api Documentation)

1.1 Basic Selector

The basic selector is the most frequently used in jQuery and is often used by most people.

 

Basic selector syntax

Selector	Function Description	Return Value
# ID	Matches an element based on the given ID.	Single Set
Element	Match All elements based on the given element name	Element Set
. Class	Matching Element Based on the given class	Element Set
*	Match All elements	Element Set
Selector1,..., selectorN	Returns the elements matched by each selector together.	Element Set

Because the basic selector is often used, it is difficult to do so. Note that "selector1 ,..., selectorN "and selector1... there is a big difference between selectorN and comma. The former returns the set of all selector elements in the column, and the former returns the result of searching for the selector that satisfies the ancestor relationship without a comma, returns the set of the last selector element.

1.2 hierarchy selector of basic Selector

The hierarchy selector obtains elements through the hierarchical relationship between DOM elements. The main hierarchies include descendant, parent and child, adjacent, and sibling.

 

Hierarchical selector syntax

Selector	Function Description	Return Value
Ancestor descendant	Match all descendant elements based on the ancestor Element	Element Set
Parent> child	Match All child elements based on the parent Element	Element Set
Prev + next	Match All adjacent elements following the prev Element	Element Set
Prev ~ Siblings	All sibling elements matching the prev Element	Element Set

Ancestor descendant is different from the element set stone selected by parent> child. The hierarchy of the former is the ancestor and descendant (down level), and the latter is the parent-child relationship (down level). In addition, prev + next can be used. next () instead, and prev ~ Siblings can be replaced by nextAll. In addition, the siblings () method and the selector prev ~ The difference between siblings and siblings is that the former obtains all adjacent sibling elements regardless of the front and back, while the latter only obtains all adjacent elements after the mark, and cannot obtain all the preceding elements. Here, ancestor, descendant, parent, child, prev, next, and siblings are replaced by elements in the basic selector, such as # ID,. class, and element.

 

2. Filter selector (corresponding to the filter selector and form selector in the api document)

All the filter selectors in jquery have a feature that all start with a colon (except the attribute filter selector) and are written in parentheses;

2.1 filter Selector

According to the jQuery authoritative guide, filter selectors are classified into the following categories: simple filter selector, content filter selector, visibility filter selector, attribute filter selector, child element filter selector, and form object attribute filter selector, they are displayed in tables.

Simple filter selector syntax

Selector	Function Description	Return Value
First () or: first	Obtain the first element	Single element
Last () or: last	Get the last element	Single element
: Not (selector)	Obtains all elements except the given selector.	Element Set
: Even	Obtain all the elements whose index values are even. The index number starts from 0.	Element Set
: Odd	Obtain all elements with an odd index value. The index number starts from 0.	Element Set
: Eq (index)	Gets the element of the specified index value. The index number starts from 0.	Single element
: Gt (index)	Obtains all elements greater than the given index value. The index number starts from 0.	Element Set
: Lt (index)	Obtains all elements smaller than the given index value. The index number starts from 0.	Element Set
: Header	Obtain all the headers, such as h1, h2 .......	Element Set
: Animated	Gets the element that is executing the animation effect (you can add an effect to the element that is executing the animation)	Element Set

: Header and: animated are usually not used, and an example is given:

 

 

 

Content Filter Selector

Selector	Function Description	Return Value
: Contains (text)	Obtains the elements that contain the given text.	Element Set
: Empty	Obtain all null elements that do not contain child or text elements	Element Set
: Has (selector)	Obtains the elements that match the selector.	Element Set
: Parent	Obtain elements containing child elements or text (corresponding to empty)	Element Set

In the: contains (text) content filtering selector, if you are looking for letters, there is a case difference.

 

 

Visibility filter selector syntax

Selector	Function Description	Return Value
: Hidden	Obtain all invisible elements or elements with the type of "hidden ".	Element Set
: Visible	Obtain all visible elements	Element Set

The ": hidden" selector selects not only all elements whose style is display: none, but also all elements whose property type = "hidden" and style is visibility: hidden.

 

 

Attribute filter Selector

Selector	Function Description	Return Value
[Attribute]	Obtain the elements that contain the given attributes. the following constraints	Element Set
[Attribute = value]	Gets an element that equals a given property value and is a specific value.	Element Set
[Attribute! = Value]	Gets an element that is not equal to a given attribute and is a specific value.	Element Set
[Attribute ^ = value]	Obtains the elements whose given attributes start with some values.	Element Set
[Attribute $ = value]	Obtains the elements whose given attributes end with some values.	Element Set
[Attribute * = value]	Obtains some worthwhile elements in a given attribute.	Element Set
[Selector1]... [selectorN]	Obtains the attribute-compliant elements that meet multiple conditions at the same time.	Element Set

The writing format is generally $ ('# div [attribute ^ = value]'); commonly used attributes include id, name, value, style, title, class, etc; note the difference between attribute and property.

 

Sub-element filter selector syntax

Selector	Function Description	Return Value
: Nth-child (eq | even | odd | index)	Obtains the specific position element of each parent element. The index number starts from 1.	Element Set
: First-child	Obtain the first child element under each parent Element	Element Set
: Last-child	Obtains the last child element under each parent element.	Element Set
: Only-child	Obtains only one child element under each parent element.	Element Set

 

 

Form object attribute filter selector syntax

Selector	Function Description	Return Value
: Enabled	Obtain all available elements in the form.	Element Set
: Disabled	Obtain all elements in the form whose attributes are unavailable.	Element Set
: Checked	Obtain all selected elements in the form.	Element Set
: Selected	Obtain all elements of the selected option in the form.	Element Set

Common formats: $ (# form1 input: enabled), $ ('# form1 input: checked'), and $ ('select option: selected ').

 

2.2 form Selector

Form selector syntax

Selector	Function Description	Return Value
: Input	Obtain all input, textarea, and select	Element Set
: Text	Retrieve all single row text boxes	Element Set
: Password	Retrieve all password boxes	Element Set
: Radio	Retrieve all radio buttons	Element Set
: Checkbox	Get all check boxes	Element Set
: Submit	Get all submit button	Element Set
: Image	Retrieve all image Domains	Element Set
: Reset	Get all reset buttons	Element Set
: Button	Get all buttons	Element Set
: File	Retrieve all file Domains	Element Set