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>