没加过滤器之前：

加过滤器之后：

总的代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>奇数与偶数过滤器的基本应用</title>

         <script src="js/jquery-3.3.1.js"></script>

         <script>

             $(function(){

                 $("div:even").css("background-color","aquamarine");//修改索引为偶数的背景    颜色

                 $("div:odd").css("background-color","aqua");//修改索引为奇数的背景颜色

             })

         </script>

     </head>

     <body>

         <div>

             索引0：欢迎来到perfect*的博客世界

         </div>

         <div>

             索引1：欢迎来到perfect*的博客世界

         </div>

         <div>

             索引2：欢迎来到perfect*的博客世界

         </div>

         <div>

             索引3：欢迎来到perfect*的博客世界

         </div>

         <div>

             索引4：欢迎来到perfect*的博客世界

         </div>

         <div>

             索引5：欢迎来到perfect*的博客世界

         </div>

         <div>

             索引6：欢迎来到perfect*的博客世界

         </div>

         <div>

             索引7：欢迎来到perfect*的博客世界

         </div>

     </body>

 </html>

jQuery偶数奇数过滤器.html

实现该效果的核心代码：

<script>

            $(function(){

                $("div:even").css("background-color","aquamarine");//修改索引为偶数的背景 颜色

                $("div:odd").css("background-color","aqua");//修改索引为奇数的背景颜色

            })

        </script>

注意：索引是从0开始，即使是父子关系也不影响其所索引

实现隔行换色

未换色之前：

换色之后：

注意：如果不想让表头受到隔行换色的影响，需使用标签<thead></thead>来进行表头的包裹

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>jQuery实现隔行换色</title>

         <script src="js/jquery-3.3.1.js"></script>

         <script>

             $(function(){

                 $("tbody tr:even").css("background-color","aliceblue");

                 $("tbody tr:odd").css("background-color","bisque");

             })

         </script>

     </head>

     <body>

         <table border="1">

             <thead><tr><th>收费单位 </th><th>付款方式 </th><th>结算方式 </th><th> 状态</th></tr></thead><!--表头-->

             <tbody>

                 <tr><td>****有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>

                 <tr><td>****有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>

                 <tr><td>****有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>

                 <tr><td>****有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>

                 <tr><td>****有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>

                 <tr><td>****有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>

                 <tr><td>****有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>

                 <tr><td>****有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>

                 <tr><td>****有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>

                 <tr><td>****有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>

             </tbody><!--内容-->

             <tfoot>

                     <tr><td>统计</td><td>统计</td><td>统计</td><td>统计</td></tr>

             </tfoot><!--表尾-->

              </table>

     </body>

 </html>

隔色换行实例.html

实现隔色换行的核心代码：

 <script>

             $(function(){

                 $("tbody tr:even").css("background-color","aliceblue");

                 $("tbody tr:odd").css("background-color","bisque");

             })

         </script>

jQuery的基本过滤器与jQuery实现隔行换色实例的更多相关文章

  1. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  2. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

  3. JQuery案例一：实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. jQuery应用实例2：表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  5. jQuery的隔行换色

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:  

  7. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  8. JQuery 表格 隔行换色 和鼠标滑过的样式

    $(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...

  9. jQuery实现table隔行换色和鼠标经过变色

    一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even& ...

随机推荐

  1. JS快速入门

    字符串 模板字符串 需要特别注意的是,字符串是不可变的,如果对字符串的某个索引赋值,不会有任何错误,但是,也没有任何效果: var s = 'Test'; s[0] = 'X'; alert(s); ...

  2. APP网络优化篇

    Android Addresses are cached for 600 seconds (10 minutes) by default. Failed lookups are cached for ...

  3. Linux学习笔记：常用100条命令（二）

    linux常用命令 1.vi中复制快捷键 yy --复制 p --粘贴 2.vi中保存退出 ZZ 3.linux解压zip unzip 4.查看软件组包 yum grouplist 5.安装组包 yu ...

  4. PHP的数组合并

    1. array_merge 字符索引:后面的覆盖前面的. 如果输入的数组中有相同的字符串键名,则该键名后面的值将覆盖前一个值. 混合索引:如果数组包含数字键名,后面的值将不会覆盖原来的值,而是附加到 ...

  5. max_execution_time with sleep

    Under Linux, sleeping time is ignored, but under Windows, it counts as execution time. Note The set_ ...

  6. iOS 上传自己的库到cocoapod

    最近自己写了个库,传到github上,想让自己的库支持cocoapod,这里我看了很多相关文章.下面我就写下详细步骤以及会遇到的问题. 我们会使用trunk的方式提交到cocoa pod 这是2014 ...

  7. android apk打包编译好的so

    加入so到apk有多种方法 1.build.gradle(Module)中android子项中加入以下代码,并将so放到到armeai/armeabi-v7a 子目录下 sourceSets { ma ...

  8. Linux基础(三)Shell test 命令

    Shell test 命令 Shell中的 test 命令用于检查某个条件是否成立,它可以进行数值.字符和文件三个方面的测试. 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt ...

  9. react native中使用ScrollableTabView

    第一步,下载依赖 npm install react-native-scrollable-tab-view --save 第二步,引入 import ScrollableTabView, { Scro ...

  10. node+react 打包成功，控制台报错

    控制台报错: 'ReactCurrentOwner' of undefined 解决办法:RN版本的问题. As I mentioned, make sure you've installed the ...