没加过滤器之前：

加过滤器之后：

总的代码：

 <!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. 2019.04.09 电商19 分析carmanage.py

    post(self,request)这个request是干嘛的 有是递归,他调用了那个getcarmanager函数返回的是另一个函数. 这另一个函数负责创建插入数据 def __init__(sel ...

  2. Count（广工14届竞赛）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6470 这道题目题解就扔了个矩阵快速幂啥都没写.....这题解是太看得懂我这个弱鸡了. 既然是矩阵快速幂 ...

  3. leetcode 198打家劫舍

    讲解视频见刘宇波leetcode动态规划第三个视频 记忆化搜索代码: #include <bits/stdc++.h> using namespace std; class Solutio ...

  4. vue中定时器的使用方式

    就这么搞定 no no no  离开页面的时候还必须清楚定时器

  5. cocos2d-x 错误异常抛出捕获和崩溃拦截

    Error对象 一旦代码解析或运行时发生错误,JavaScript引擎就会自动产生并抛出一个Error对象的实例,然后整个程序就中断在发生错误的地方. Error对象的实例有三个最基本的属性: nam ...

  6. shiro loginUrl拦截无效

    logUrl不拦截 或者 只跳转到/login.jsp 不跳到自己设置登录链接 在springmvc或事务那里 开启spring的显示代理(即cglib),并将shiro的安全管理器交给spring管 ...

  7. linux du查看文件所占大小

    Linux du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间的查看,还是和df命令有一些区别的. 1．命令格式: du [选项][文件] 2．命令功能 ...

  8. C++ 执行 cmd 命令 删除文件 删除注册表项

    #include <Windows.h> WinExec("cmd /C \"del C:\\Windows\\secretWin.ini\"",S ...

  9. c++将lambda作为callback函数

    想用c++发送http_post请求,用到了libcurl. 想将其包装一下,因为默认http的响应结果是打印到stdout的,如果想将响应结果另外处理,需要自己定义一个callback函数. 考虑到 ...

  10. Python全栈-day6-day7-字符编码和文件处理

    一.字符编码 1.编码基础 定义:人在使用计算机时,使用的是人类能够读懂的字符,使用者必须通过一张字符和数字间的相对应关系表实现人机交互,这一系列标准称为字符编码 Python应用中解决核心字符串乱码 ...