Complete jQuery selector Introduction

The previous section mainly summarized the mutual conversion between jQuery objects and dom objects. Let's take a look at the jQuery selector. The jQuery selector makes it easier and more flexible to obtain page elements, greatly reducing the pressure on developers. Like a building, a building cannot be built without bricks or tiles. What about other operations without elements? Visible, select jQuery

The previous section mainly summarized the mutual conversion between jQuery objects and dom objects. Let's take a look at the jQuery selector.

The jQuery selector makes it easier and more flexible to obtain page elements, greatly reducing the pressure on developers. Like a building, a building cannot be built without bricks or tiles. What about other operations without elements? We can see the importance of the jQuery selector. Of course, it is very difficult to grasp all the selectors at once. It depends on practice and accumulation.

Now we are officially learning about the jQuery selector. We use the jQuery selector for classification learning. The jQuery selector is divided into the following types:

1. Basic Selector

Id selected based on element ID

Select elementname Based on element name

Classname is selected based on the element css Class Name

Example:

 

Select by element name

JQuery ("# ID"). val ();

JQuery ("a"). text ();

JQuery (". classname"). val ();

You can obtain the element values respectively. The above three are the most common selectors, where the ID selector is the most efficient and should be used whenever possible.

2. Hierarchical Selector

Ancestor descendant ancestor and descendant Selector

Parent> child parent-child node Selector

Prev + next same level Selector

Prev ~ Siblings filter Selector

Example:

 

 

 

 

 

1

2

// The result of the label in the div is 12.

JQuery ("# divTest a"). text ();

// Output div direct subnode result as investment

JQuery ("# divTest> input"). val ();

// The result of the last element with the output id "next" at the same level is assumed.

JQuery ("# next + input"). val ();

// Same as above, and the result of an element with a title is learning

JQuery ("# next ~ [Title] "). val ();

Basic filter Selector

: First find the first element

: Last locate the last element

: Not (selector) Removes elements that match the given selector

: Even: the number of elements with an even index value starts from 0.

: Odd matches an element with an odd index value and starts counting from 0.

: Eq (index) matches a given index value element starting from 0

: Gt (index) matching is greater than the given index value element.

: Lt (index) matches elements smaller than the given index value

: Select h1, h2, h3 tags for the header (not used currently)

: Animated matches the elements of the animation being executed (not used currently)

Example:

 

• Investment
 
• Financial Management
 
• Mature
 
• Responsibilities
 

 

 

 

// The result of the first li content is an investment

JQuery ("li: first"). text ();

// The result of the last li content is assumed

JQuery ("li: last"). text ();

// The unselected input value is not learned.

JQuery ("li input: not (: checked)"). val ();

// If the index is an even number, the result of li is a mature investment.

JQuery ("li: even"). text ();

// Li results in an odd number of indexes as financial responsibilities

JQuery ("li: odd"). text ();

// The result of the li content with an index greater than 2 is assumed

JQuery ("li: gt (2)"). text ();

// The result of the li content with the index less than 1 is an investment

JQuery ("li: lt (1)"). text ();

4. Content Filter

: Contains (text) Match elements that contain the given text

: Empty matches all null elements that do not contain child elements or text.

: Has (selector) matches the element that contains the selector matching

Example:

 

• Hyip Investment
 
• Hyip
 
 
• Financial Management
 
• Investment
 

 

// The result of li containing hyip is hyip investment.

JQuery ("li: contains ('hyip')"). text ();

// If the content is empty, the last li content of li will result in financial management.

JQuery ("li: empty + li"). text ();

// The result of li containing the tag is investment

JQuery ("li: has (a)"). text ();

5. Visibility Filter

: Hidden matches invisible elements

: Visvisible match visible element

Example:

• Visible
 

Invisible 

// The result of the invisible li content is invisible.

JQuery ("li: hidden"). text ();

// The visible li content is visible

JQuery ("li: visible"). text ();

6. Attribute Filter

[Attribute = value] a matching attribute is an element of a given value.

[Attribute ^ = value] the matching attribute is an element starting with a given value.

[Attribute $ = value] the matching attribute ends with a given value.

[Attribute * = value] the matching attribute contains the element of the given value.

Example:

 

 

// If the value of name is hyipinvest, hyip investment is returned.

Alert (jQuery ("input [name = 'hyipinvest ']"). val ());

// The result of a value starting with hyip name is hyip investment.

Alert (jQuery ("input [name ^ = 'hyip']"). val ());

// The result of name ending with hyip is to invest in hyip

Alert (jQuery ("input [name $ = 'hyip']"). val ());

// The result of a name containing oo is HYIP.

Alert (jQuery ("input [name * = 'oo ']"). val ());

The jQuery selector is summarized here. These are basically encountered in the learning process, and few of them are not summarized. After some time of practice, I believe everyone will be able to use the jQuery selector skillfully.