jQuery -- parity selector and index selector

Parity selector:

$( " #uu>li:odd").css( " backgroundColor "," red " );

Get all the odd li tags under the ul tag with id uu, and set its background color to red

$( " #uu>li:even").css( " backgroundColor "," yellow " );

Get all even li tags under ul tag with id uu and set its background color to yellow

Rendering: interlaced color change (click button to realize interlaced color change)

Example code:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Interlacing discoloration</title>
 6         
 7         <style type="text/css">
 8             ul{
 9                 list-style: none;
10                 width: 200px;
11                 position: absolute;
12                 left: 500px;
13             }
14             
15             ul li{
16                 margin-top: 10px;
17                 cursor: pointer;
18                 text-align: center;
19                 font-size: 20px;
20             }
21         </style>
22         
23         <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
24         <script type="text/javascript">
25             $(function(){
26                 $("#btn").click(function(){
27                     
28                     //Odd row,Background set to red
29                     $("#uu>li:odd").css("backgroundColor","red");
30                     //Even number line,Yellow background
31                     $("#uu>li:even").css("backgroundColor","yellow");
32                 });
33             });
34         </script>
35     </head>
36     <body>
37         <input type="button" id="btn" value="Interlacing discoloration" />
38         <ul id="uu">
39             <li>Qiao Feng:Eighteen dragon subduing palms</li>
40             <li>Zhang Wuji:heaven and hell's moving</li>
41             <li>Duan Yu:Scale step</li>
42             <li>Ding Peng:Meteor</li>
43             <li>Zhang Sanfeng:Tai Chi palm</li>
44             <li>Yun Fei Yang:Heaven's gluttonous work</li>
45             <li>Yang Guo:Gloomy and enchanting palm</li>
46             <li>Then who?:Buddha's palm</li>
47             <li>Meng Xing soul:Meteor butterfly sword</li>
48             <li>Nan Ge:Girl's cute fist</li>
49         </ul>
50     </body>
51 </html>

Index selector:

eq(3) get index elements

gt(3) index all elements greater than 3

lt(3) index all

For example:

//Get the fourth li tag under the ul tag with id uu and set its style
$("#uu>li:eq(4)").css("backgroundColor","red");


//Get all the li tags after the fourth under the ul tag with id uu and set its style
$("#uu>li:gt(4)").css("backgroundColor","red");


//Get the fourth previous li tag under the ul tag with id uu and set its style
$("#uu>li:lt(4)").css("backgroundColor","red");

Results:

  $("#uu>li:eq(4)").css("backgroundColor","red");                                               $("#uu>li:gt(4)").css("backgroundColor","red");                   $("#uu>li:lt(4)").css("backgroundColor","red");

                                                                                                        

Insert code:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Interlacing discoloration</title>
 6         
 7         <style type="text/css">
 8             #btn{
 9                 position: absolute;
10                 left: 500px;
11             }
12             ul{
13                 list-style: none;
14                 width: 200px;
15                 position: absolute;
16                 left: 500px;
17             }
18             
19             ul li{
20                 margin-top: 10px;
21                 cursor: pointer;
22                 text-align: center;
23                 font-size: 20px;
24             }
25         </style>
26         
27         <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
28         <script type="text/javascript">
29             $(function(){
30                 $("#btn").click(function(){
31                     
32                     //Obtain id by uu Of ul The fourth under the label li Label,And style it
33                     //$("#uu>li:eq(4)").css("backgroundColor","red");
34                     //Obtain id by uu Of ul All after the fourth under the label li Label,And style it
35                     //$("#uu>li:gt(4)").css("backgroundColor","red");
36                     //Obtain id by uu Of ul The fourth under the label all the previous li Label,And style it
37                     $("#uu>li:lt(4)").css("backgroundColor","red");
38                     
39                 });
40             });
41         </script>
42     </head>
43     <body>
44         <input type="button" id="btn" value="Interlacing discoloration" />
45         <ul id="uu">
46             <li>Qiao Feng:Eighteen dragon subduing palms</li>
47             <li>Zhang Wuji:heaven and hell's moving</li>
48             <li>Duan Yu:Scale step</li>
49             <li>Ding Peng:Meteor</li>
50             <li>Zhang Sanfeng:Tai Chi palm</li>
51             <li>Yun Fei Yang:Heaven's gluttonous work</li>
52             <li>Yang Guo:Gloomy and enchanting palm</li>
53             <li>Then who?:Buddha's palm</li>
54             <li>Meng Xing soul:Meteor butterfly sword</li>
55             <li>Nan Ge:Girl's cute fist</li>
56         </ul>
57     </body>
58 </html>

Tags: Javascript JQuery

Posted on Sun, 01 Dec 2019 01:21:56 -0800 by aissa