奇偶选择器：

$( " #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. AR中的SLAM（一）

    写在前面 本系列打算讲讲个人对AR行业和AR中的SLAM算法的一点浅显的看法.才疏学浅,文中必然有很多疏漏和不足,还望能和大家多多讨论.今天先讲讲我对AR的一些认识. AR的一点理解 AR是什么 AR ...

  2. 612.1.002 ALGS4 | Analysis of Algorithms

    我们生活在大数的时代 培养数量级的敏感! Tip:见招拆招 作为工程师,你先要能实现出来. 充实基础,没有什么不好意思 哪怕不完美.但是有时候完成比完美更重要. 之后再去想优化 P.S.作者Rober ...

  3. 机器学习中正则惩罚项L0/L1/L2范数详解

    https://blog.csdn.net/zouxy09/article/details/24971995 原文转自csdn博客,写的非常好. L0: 非零的个数 L1: 参数绝对值的和 L2:参数 ...

  4. 需要警惕的linux命令

    Linux shell/terminal命令非常强大,即使一个简单的命令就可能导致文件夹.文件或者路径文件夹等被删除.为了避免这样的事情发生,我们应该时刻注意PHP代码&命令,今天为大家带来9 ...

  5. Ubuntu做Tomcat服务：insserv: warning: script 'tomcat' missing LSB tags and overrides

    https://blog.csdn.net/hanchao5272/article/details/79819460 转载自:https://blog.bbzhh.com/index.php/arch ...

  6. .NET Reflector注册机激活方法

    .NET Reflector注册机是一款专门针对.NET Reflector(.NET反编译工具软件)而推出的一款破解辅助工具软件.因为官方破解版软件需要118美元才能用,不然只有14天的试用期,为此 ...

  7. vmware查看HBA卡、网卡驱动、firmware版本信息

    在 ESXi 5.x 中,swfw.sh 命令随 vm-support 支持包收集工具一起提供.swfw.sh 命令可用来识别连接到主机的硬件的固件和驱动程序版本.要运行此命令,请使用该路径: # / ...

  8. HBase HA的分布式集群部署（适合3、5节点）

    本博文的主要内容有: .HBase的分布模式(3.5节点)安装    .HBase的分布模式(3.5节点)的启动 .HBase HA的分布式集群的安装 .HBase HA的分布式集群的启动    .H ...

  9. notepad快捷键大全

    Notepad++ 快捷键 大全Ctrl+C 复制Ctrl+X 剪切Ctrl+V 粘贴Ctrl+Z 撤消Ctrl+Y 恢复Ctrl+A 全选Ctrl+F 键查找对话框启动Ctrl+H 查找/替换对话框 ...

  10. [咸恩静][Good Bye]

    歌词来源:http://music.163.com/#/song?id=35437298 作曲 : 安英民 [作曲 : 安英民] 作词 : 安英民/로코 [作词 : 安英民/lo-Ko] 나를 떠나버 ...