jQuery----奇偶选择器和索引选择器

奇偶选择器：

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

获取id为uu的ul标签下的所有的奇数的li标签，并设置其背景颜色为红色

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

获取id为uu的ul标签下的所有的偶数的li标签，并设置其背景颜色为黄色

效果图：隔行变色（点击按钮，实现隔行变色）

jQuery----奇偶选择器和索引选择器-LMLPHP

示例代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>隔行变色</title>

         <style type="text/css">

             ul{

                 list-style: none;

                 width: 200px;

                 position: absolute;

                 left: 500px;

             }

             ul li{

                 margin-top: 10px;

                 cursor: pointer;

                 text-align: center;

                 font-size: 20px;

             }

         </style>

         <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             $(function(){

                 $("#btn").click(function(){

                     //奇数行,背景设置为红色

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

                     //偶数行,背景为黄色

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

                 });

             });

         </script>

     </head>

     <body>

         <input type="button" id="btn" value="隔行变色" />

         <ul id="uu">

             <li>乔峰:降龙十八掌</li>

             <li>张无忌:乾坤大挪移</li>

             <li>段誉:鳞波微步</li>

             <li>丁棚:天外流星</li>

             <li>张三丰:太极掌</li>

             <li>云飞扬:天馋功</li>

             <li>杨过:黯然销魂掌</li>

             <li>那谁谁:如来神掌</li>

             <li>孟星魂:流星蝴蝶剑</li>

             <li>楠哥:少女萌萌拳</li>

         </ul>

     </body>

 </html>

索引选择器：

eq(3)获取索引的元素

gt(3)索引大于3的所有元素

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");

jQuery----奇偶选择器和索引选择器-LMLPHP

插入代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>隔行变色</title>

         <style type="text/css">

             #btn{

                 position: absolute;

                 left: 500px;

             }

             ul{

                 list-style: none;

                 width: 200px;

                 position: absolute;

                 left: 500px;

             }

             ul li{

                 margin-top: 10px;

                 cursor: pointer;

                 text-align: center;

                 font-size: 20px;

             }

         </style>

         <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             $(function(){

                 $("#btn").click(function(){

                     //获取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");

                 });

             });

         </script>

     </head>

     <body>

         <input type="button" id="btn" value="隔行变色" />

         <ul id="uu">

             <li>乔峰:降龙十八掌</li>

             <li>张无忌:乾坤大挪移</li>

             <li>段誉:鳞波微步</li>

             <li>丁棚:天外流星</li>

             <li>张三丰:太极掌</li>

             <li>云飞扬:天馋功</li>

             <li>杨过:黯然销魂掌</li>

             <li>那谁谁:如来神掌</li>

             <li>孟星魂:流星蝴蝶剑</li>

             <li>楠哥:少女萌萌拳</li>

         </ul>

     </body>

 </html>