jQuery----奇偶選擇器和索引選擇器

時間 2020-05-23

標籤 jquery 奇偶選擇器索引欄目 JQuery 简体版

原文原文鏈接

奇偶選擇器：javascript

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

獲取id爲uu的ul標籤下的全部的奇數的li標籤，並設置其背景顏色爲紅色html

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

獲取id爲uu的ul標籤下的全部的偶數的li標籤，並設置其背景顏色爲黃色jquery

效果圖：隔行變色（點擊按鈕，實現隔行變色）spa

示例代碼：3d

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>隔行變色</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                     //奇數行,背景設置爲紅色
29                     $("#uu>li:odd").css("backgroundColor","red"); 30                     //偶數行,背景爲黃色
31                     $("#uu>li:even").css("backgroundColor","yellow"); 32  }); 33  }); 34         </script>
35     </head>
36     <body>
37         <input type="button" id="btn" value="隔行變色" />
38         <ul id="uu">
39             <li>喬峯:降龍十八掌</li>
40             <li>張無忌:乾坤大挪移</li>
41             <li>段譽:鱗波微步</li>
42             <li>丁棚:天外流星</li>
43             <li>張三丰:太極掌</li>
44             <li>雲飛揚:天饞功</li>
45             <li>楊過:黯然銷魂掌</li>
46             <li>那誰誰:如來神掌</li>
47             <li>孟星魂:流星蝴蝶劍</li>
48             <li>楠哥:少女萌萌拳</li>
49         </ul>
50     </body>
51 </html>

索引選擇器：code

eq(3)獲取索引的元素htm

gt(3)索引大於3的全部元素blog

lt(3)索引小於3的全部的

例如：

//獲取id爲uu的ul標籤下的第四個li標籤,並設置其樣式
$("#uu>li:eq(4)").css("backgroundColor","red");

//獲取id爲uu的ul標籤下的第四個之後的全部的li標籤,並設置其樣式
$("#uu>li:gt(4)").css("backgroundColor","red");

//獲取id爲uu的ul標籤下的第四個之前的全部的li標籤,並設置其樣式
$("#uu>li:lt(4)").css("backgroundColor","red");

結果圖：

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

插入代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>隔行變色</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                     //獲取id爲uu的ul標籤下的第四個li標籤,並設置其樣式
33                     //$("#uu>li:eq(4)").css("backgroundColor","red");
34                     //獲取id爲uu的ul標籤下的第四個之後的全部的li標籤,並設置其樣式
35                     //$("#uu>li:gt(4)").css("backgroundColor","red");
36                     //獲取id爲uu的ul標籤下的第四個之前的全部的li標籤,並設置其樣式
37                     $("#uu>li:lt(4)").css("backgroundColor","red"); 38                     
39  }); 40  }); 41         </script>
42     </head>
43     <body>
44         <input type="button" id="btn" value="隔行變色" />
45         <ul id="uu">
46             <li>喬峯:降龍十八掌</li>
47             <li>張無忌:乾坤大挪移</li>
48             <li>段譽:鱗波微步</li>
49             <li>丁棚:天外流星</li>
50             <li>張三丰:太極掌</li>
51             <li>雲飛揚:天饞功</li>
52             <li>楊過:黯然銷魂掌</li>
53             <li>那誰誰:如來神掌</li>
54             <li>孟星魂:流星蝴蝶劍</li>
55             <li>楠哥:少女萌萌拳</li>
56         </ul>
57     </body>
58 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。