jQuery Instructions on the use of pseudo-class selectors_jquery

The power of the jQuery selector is not only that the selector supports basic css selectors, but also supports many CSS pseudo-class selectors, and you can even customize the selectors. Let’s take a look at some pseudo-class selectors

:Usage of nth-child
nth-child is a css3 pseudo-class selector, which is implemented in jQuery. The definition of nth-child in the Jquery API is: "match the first element under its parent element N sub-or odd-even elements". It feels a bit convoluted when reading, so let us illustrate it with an example:

Copy the code The code is as follows:

                                                               
 

four

 

five

 

six

 

seven

                                                                🎜>

2

3

4

6

 

7

 

8

 

9

                                                                                                                                                                                             , "blue");



The operation effect is as follows:






Matching its parents in the API definition means that if the parent elements of the selected elements are different, they will be selected separately. In the above example, although a total of 18

are selected, these 18

belong to 2 different

, so two will be selected. If they are put into the same
, if Put the same
to execute the above code, then:

After understanding the above matching parent elements, let’s talk about the usage of this selector parameter. Give the selected position directly as above, but note here that this position starts with 1, not 0 n multiple selection methods, for example, you can make 3n 1, -3n 1, 4n, etc., match Multiples of n present on all pages

Example:

Copy code

The code is as follows:

                                                                                       li>                                                                                                                               ("li:nth-child(3n-1)").css("background-color", "blue");
Effect:



It can be seen that the corresponding elements are matched

3. Another usage is the well-known odd and even, which are odd and even numbers, as follows:


Copy code The code is as follows:






Effect:



:first-child&last-child

From the nth-child above, you can see the meaning of "matching the parent class". The same is true for first-child and last-child. They can be regarded as encapsulation of nth-child:

first-child and nth-child(1) are equivalent, so I won’t go into details here.

As for first-child, I can’t find the equivalent nth-child expression yet, which matches the last child element under the parent class:
Effect:



: input does not just match input

I think everyone is familiar with the selector, but please note that the input pseudo-class selector not only matches the tag, but also matches and :<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="39390" class="copybut" id="copybut39390" onclick="doCopy('code39390')"><u>Copy code</u></a></span> The code is as follows: </div> <div class="codebody" id="code39390"> <br>First one: <input type="input"><br> The second one:<select id="select"> <p></p></select><br>The third one:<textarea>


You can see that not only is selected, and are also selected

Pseudo-class selectors can be nested

Normally, we can achieve the effect we need by nesting pseudo-class selectors. The pseudo-class selectors are as follows:


Copy code The code is as follows:






• 1


• 2

< ;li>3
;li>4

• 5


• 6

;7


                                                                                                                                      



Effect:



It can be seen that except for the first and last li, all others are selected. Of course, there is a limit to the number of nesting levels. I am not sure about the specific number (experts please remember to tell me). Anyway, Enough for you to use it without perversion:-)

Custom pseudo-class selector

jquery also provides us with a way to extend the original selector, allowing us to customize the selector according to our own needs. Let’s see how to do it through a practical example:

When we use jquery’s serialize method to submit elements in the current form to the server, we always select asp.net’s ViewState (), which undoubtedly wastes a lot of resources. , we use an extended pseudo-class selector to see how not to select it:


Copy the code The code is as follows:











" id") === "_VIEWSTATE";

}
alert($(":input:noViewState").size());//alert 0 ViewState has not been chosenn
> ;

 

 


Expand the pseudo-class selector through $.expr. It can be seen that after the above selector uses: noViewState, the viewState does not Selected.



Summary:


jQuery’s pseudo-class selector is a very powerful feature. It has many built-in selectors that are convenient for us to choose. We can nest or even expand these pseudo-class selectors. This makes our js programming more enjoyable. Many.