奇偶选择器：

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

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

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

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

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

示例代码：

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

                                                                                                        

插入代码：

 <!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>

jQuery----奇偶选择器和索引选择器的更多相关文章

  1. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  2. JQuery -- 介绍，选择器及其示例， 基本选择器，层次选择器，过滤选择器，表单选择器

    1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...

  3. JQuery知识快览之一—选择器

    阅读指导:本文参考最新的1.10.2版写成,针对用得比较多的1.4版,所有1.5版之后的函数都会注明哪一版新增.对于熟悉1.4版想学1.10版的请直接搜索"新增". JQuery是 ...

  4. jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...

  5. jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...

  6. jQuery事件篇---过滤选择器 & 表单选择器

    内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...

  7. jQuery基本API小结(上)--选择器-DOM操作-动画-Ajax

    一.JQuery基础选择器 1.基本选择器(CSS选择器) 2.$()中的()不一定是指定元素,也可能是函数. 3.“*”号选择器,它的功能是获取页面中的全部元素:$(“*”). 由于使用*选择器获取 ...

  8. 什么是 jQuery 和jQuery的基本选择器，层级选择器，基本筛选器

    jQuery是什么? ［1］   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］   jQuery是继prototype ...

  9. jQuery的基本使用及选择器和筛选器

    回顾 事件 鼠标clickdblclickcontextmenumouseentermouseleavemousemovemousedownmouseup​键盘keydownkeyupkeypress ...

随机推荐

  1. VMware桥接模式下主机和和虚机间互相ping不通的处理方法

    在 "编辑"->"虚拟网络编辑器" 里面的vmnet0 桥接模式 里面是自动连接,把他改为真实的物理网卡即可,如下图:

  2. A Complete Tutorial to Learn Data Science with Python from Scratch

    A Complete Tutorial to Learn Data Science with Python from Scratch Introduction It happened few year ...

  3. eventbus3-intellij-plugin插件搜不到

    一.eventbus3-intellij-plugin插件搜不到

  4. android 自定义控件之ViewGroup生命周期执行步骤

    前言 了解ViewGroup的生命周期的执行步骤对于自己自定义ViewGroup的时候十分重要,清楚了整个流程才能对ViewGroup有更深的理解.本文从个人的总结,来阐述一下执行的顺序.执行说明 首 ...

  5. windows设置VMware开机启动并开启虚拟机

    1.建立开机脚本 新建start-vm.bat内容如下: "C:\Program Files (x86)\VMware\VMware Workstation\vmrun.exe" ...

  6. [Asp.net mvc]Asp.net mvc 使用Json传递数据

    在之前的练习中一直是直接传递的Model到后台或是单个数据到后台,今天在使用中遇到了点问题,不能使用Model传递到后台,但又要实现多个数据到后台,实验了多次有了以下的解决方案,给自己留个笔记. 功能 ...

  7. [SQL SERVER] 映射网络驱动器，让SQL服务器可见

    在服务器上运行: EXEC sp_configure 'show advanced options', 1; GO RECONFIGURE; GO EXEC sp_configure 'xp_cmds ...

  8. [翻译] IDMPhotoBrowser

    IDMPhotoBrowser IDMPhotoBrowser is a new implementation based on MWPhotoBrowser. IDMPhotoBrowser实现了图 ...

  9. [翻译] NMBottomTabBarController

    NMBottomTabBarController A customisable tab bar controller for iOS written in Objective C. It uses a ...

  10. 浅谈jodaTime 的使用

    第一步:引入依赖: 1 <dependency> 2 <groupId>joda-time</groupId> 3 <artifactId>joda-t ...