没加过滤器之前：

加过滤器之后：

总的代码：

 <!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. JFrame绝对布局

    通过代码:setLayout(null);设置容器布局为绝对布局. 添加控件要注意:一定要设置控件具体的位置.可通过代码setLocation(20, 20)或者setBounds(0, 0, 30, ...

  2. Python的Numpy库简述

    numpy 是 python 的科学计算库import numpy as np 1.使用numpy读取txt文件 # dtype = "str":指定数据格式 # delimite ...

  3. java多线程小题一瞥

    有如下线程类定义: public class MyThread extends Thread { private static int num = 0; public MyThread() { num ...

  4. Spring+SpringMVC+MyBatis整合应用

    1)搭建Spring,SpringMVC和MyBatis环境 创建一个web工程 添加MyBatis相关环境 引入数据库驱动包和DBCP连接池开发包 引入MyBatis开发包 添加Spring,Spr ...

  5. Linux 服务器配置网站以及绑定域名

    Linux 服务器如何配置网站以及绑定域名 转载来源:http://www.xinnet.com/service/cjwt/idc/guanli/1424.html 以下列举一些 主机上常见的 Web ...

  6. Django配置xadmin后台模板之坑（一）

    环境: Python3.6 + Django2.0 + xadmin2.0 一.安装 1.首先安装就会有一个坑,很多教程的安装是直接在虚拟环境下使用 pip install xadmin 或者 pip ...

  7. LeetCode67.二进制求和

    给定两个二进制字符串,返回他们的和(用二进制表示). 输入为非空字符串且只包含数字 1 和 0. 示例 1: 输入: a = "11", b = "1" 输出: ...

  8. 在caffe中执行脚本文件时 报错：-bash: ./train.sh: Permission denied

    报错原因:没有权限 解决方法:chmod 777 train.sh获得权限

  9. 十二 总结JS原型

    基本概念: 对象:属性和方法的集合(变量和函数的封装). 构造器函数:用于创建对象的函数,通过new关键字生成对象.函数名一般首字母大写的. 原型对象:每个函数都有一个prototype属性,它是一个 ...

  10. Keras 处理 不平衡的数据的分类问题 imbalance data 或者 highly skewed data

    处理不平衡的数据集的时候,可以使用对数据加权来提高数量较小类的被选中的概率,具体方式如下 fit(self, x, y, batch_size=32, nb_epoch=10, verbose=1, ...