jQuery Let's learn CSS selector parity matching nth-child(even)_jquery

In this regard, I will briefly introduce the usage of nth-child() in the CSS3 standard:

CSS3 pseudo-class selector: nth-child()

A brief summary of nth-child() several uses.

First: nth-child(number) directly matches the number-th element. The parameter number must be an integer greater than 0.

(EG) li:nth-child(3){background:orange;}/*Set the background of the 3rd LI to orange*/

Second: nth-child( an) matches all elements that are multiples of a. The letter n in parameter an cannot be omitted. It is a symbol of multiple writing, such as 3n, 5n.
(EG) li:nth-child(3n){background:orange;}/*Set the background of the 3rd, 6th, 9th,..., all multiples of 3 LI to orange*/
Third: nth-child(an b) and :nth-child(an-b) First group the elements, each group has a, b is the serial number of the member in the group, the letter n and the plus sign cannot be defaulted, The position cannot be interchanged, which is a sign of this writing method, where a and b are both positive integers or 0. Such as 3n 1, 5n 1. But the plus sign can be changed to a minus sign, which matches the a-bth one in the group. (In fact, an can also be preceded by a negative sign, but leave it to the next part.)
(EG)li:nth-child(3n 1){background:orange;}/*matches the 1st, 4th, and 7th ,..., the 1st LI in each group of 3*/
li:nth-child(3n 5){background:orange;}/*matches the 5th, 8th, 11th,..., from the 5th, 8th, 11th,... The first LI*/
li:nth-child(5n-1){background:orange;}/*matches the 5th-1=4 and the 10th-1= 9. ..., multiples of the 5th minus 1 LI*/
li:nth-child(3n±0){background:orange;}/*equivalent to (3n)*/
li:nth-child (±0n 3){background:orange;}/*Equivalent to (3)*/
Fourth: nth-child(-an b) One negative and one positive here cannot be defaulted, otherwise it will be meaningless. This is similar to :nth-child(an 1), both match the first one, but the difference is that it counts backwards, starting from the b-th child and counting back, so it will match at most no more than b.
(EG) li:nth-child(-3n 8){background:orange;}/*matches the 8th, 5th and 2nd LI*/
li:nth-child(-1n 8) {background:orange;}/* or (-n 8), matches the first 8 (including the 8th) LI. This is more practical and is often used to limit the first N matches */

Fifth: nth-child(odd) and :nth-child(even) match elements with odd and even numbers respectively. The odd number (odd) has the same result as (2n 1); the even number (even) has the same result as (2n 0) and (2n).


Use this method in jQuery to achieve the striped effect:

$("table tr:nth-child(even)").addClass("striped");

even can be replaced by other parameters, and all of the five situations described above are acceptable. The addClass("striped") after

striped is a CSS class name.

While learning jquery, I also learned some selectors in CSS.
Hope you can stick with it.