奇偶选择器：

$( " #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. 直接拿去用！每个App都会用到的LoadingLayout

    前言 项目里都会遇到几种页面,分别为加载中.无网络.无数据.出错四种情况,经常要使用,所以封成库引用了,方便使用,顺便分享出来.先看一下效果: 原理比较简单,继承FrameLayout,在xml渲染完 ...

  2. Vue 框架-10-搭建脚手架 CLI

    Vue 框架-10-搭建脚手架 CLI + 批处理快捷启动 脚手架是通过 webpack 搭建的开发环境 使用 ES6 语法 打包和压缩 JS 为一个文件 项目文件在环境中,而不是浏览器 实现页面自动 ...

  3. Android app启动是出现白屏或者黑屏如何解决？

    1.为什么 APP 启动时会出现白屏或者黑屏? 当打开一个 Activity 时,如果这个 Activity 所属的应用还没有在运行,系统会为这个 Activity 所属的应用创建一个进程,但进程的创 ...

  4. maven 插件jetty/tomcat启动 web 应用

    tomcat <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomca ...

  5. 一个Interface 继承多个Interface 的总结

    我们知道在Java中的继承都是单继承的,就是说一个父类可以被多个子类继承但是一个子类只能有一个父类.但是一个接口可以被不同实现类去实现,这就是我们说的Java中的多态的概念.下面我们再来说一下接口的多 ...

  6. ORACLE数据库AWR工具学习

    AWR(Automatic Workload Repository)即工作负载信息库,主要用于收集数据库运行状态的资料库,通过AWR报告可以分析ORACLE数据库的性能,从而给出优化策略. 图一:此图 ...

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

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

  8. html5 audio vedio and video.js

    查看audio play事件http://jplayer.org/HTML5.Media.Event.Inspector/ media.seekable, buffered,played这些数据 we ...

  9. mysql-5.7 持久化统计信息详解

    一.持久化统计信息的意义: 统计信息用于指导mysql生成执行计划,执行计划的准确与否直接影响到SQL的执行效率:如果mysql一重启 之前的统计信息就没有了,那么当SQL语句来临时,那么mysql就 ...

  10. [翻译] AAPullToRefresh

    AAPullToRefresh 效果: Requirement - 需要的环境 ARC. iOS 6 or higher(tested on iOS 6, 7 and 8). Install - 安装 ...