没加过滤器之前：

加过滤器之后：

总的代码：

 <!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. pip安装时遇到的问题集锦，持续更新！

    1.Python安装时出现Could not fetch URL https://pypi.python.org/simple/pool/: There was a problem confirmin ...

  2. CentOS6.5安装zookeeper-3.4.5（单机）

    1.下载 下载链接:http://archive.apache.org/dist/zookeeper/ 本文下载版本:zookeeper-3.4.5.tar.gz 2.安装 安装目录:/usr/loc ...

  3. 数据分析与挖掘 - R语言：多元线性回归

    一个简单的例子!环境:CentOS6.5Hadoop集群.Hive.R.RHive,具体安装及调试方法见博客内文档. 线性回归主要用来做预测模型. 1.准备数据集: X Y 0.10 42.0 0.1 ...

  4. 查看CPU信息

    基础知识 示例: 开发机器是1个物理CPU,4核8线程,Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz 基础 i3:2核模拟4线程,无睿频 i5:4核模拟4线程,有睿频 ...

  5. python shutil.copytree 解决目标目录存在的情况

    直接修改copytree的实现即可,如下: #copytree中找到 os.makedirs(dst),加入判断,就这么简单 if not os.path.exists(dst): os.makedi ...

  6. Python实现selenium回放时间设置

    一般在做selenium时会有,回放快慢的需求. 实现思路: 1.一般写selenium会自定义findelement函数,来实现查找元素. 2.在查找函数上加个睡眠时间的装饰器,函数执行完等待若干秒 ...

  7. Linux基础(二)centOS7密码重置

    之前安装linux的时候,为了安全起见,起了一个非常特别的,长的密码.然后,就不记得了密码. 下面通过进入单用户模式,就行挽救. 1>重启系统,在系统菜单选择页按 [上下方向键],使界面停在该界 ...

  8. What is the reason for - java.security.spec.InvalidKeySpecException: Unknown KeySpec type: java.security.spec.ECPublicKeySpec

    支付中心Project重构完成,经过本地测试,并未发现问题.发布到测试环境后,测试发现请求光大扫码https接口时,出现了如下的异常: javax.net.ssl.SSLException: Serv ...

  9. sqli-labs(十三)（hpp）

    第二十九关 这关说的是有waf,其实只是模拟waf的场景,就是说waf处理的变量和后台程序接受的变量不一致. 考验的参数污染,具体可以参考其他文章关于HPP的解释. 先看源码吧: 输入?id=1&am ...

  10. leetcode insertionSortList 对链表进行插入排序

    描述: Sort a linked list using insertion sort. 使用插入排序对一个链表进行排序 普通的插入排序,时间复杂度O(n^2) class Solution { pu ...