没加过滤器之前：

加过滤器之后：

总的代码：

 <!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. python requests http请求

    导入模块 import requests import json header = {'Content-Type': 'application/json'} data = {"} data ...

  2. jquery tooltip插件

    qtip2:http://qtip2.com/ bower install qtip2 // lowercase! 引入一个css和插件即可. <script type="text/j ...

  3. 根据异常自定义处理逻辑（【附】java异常处理规范）

    ▄︻┻┳═一『异常捕获系列』Agenda: ▄︻┻┳═一有关于异常捕获点滴,plus我也揭揭java的短 ▄︻┻┳═一根据异常自定义处理逻辑([附]java异常处理规范) ▄︻┻┳═一利用自定义异常来 ...

  4. Winform下如何上传图片并显示出来。同时保存到数据库

    通常,我们在开发软件或者网站是否,通常有时候需要添加图片,我们怎么做呢,直接贴例子. 前提是添加openFileDialog控件哈 #region 定义公共的类对象及变量        SqlConn ...

  5. Hbase java api

    export JAVA_HOME=/home/hadoop/app/jdk1.8.0_144export HADOOP_HOME=/home/hadoop/app/hadoop-2.4.1export ...

  6. 学习笔记<3>View接触

    一.View基本概念 1.界面上显示所有的控件都是用对象表示的,即有类,这些类都是View的子类. 2.View的种类 二.在Activity当中获取代表View的对象 1.根据ID可以用方法获取到对 ...

  7. CSS选择器的优先级及权重问题【CSS核心问题】及其它属性

    1.CSS选择器优先级:    !important >行间样式> id >class和属性选择器>标签选择器>通配符选择器        注意:[初级工程师水平] 2. ...

  8. Python2.6 升级2.7

    一. Centos6 默认为python2.6且不可卸载(因为Centos6深度依赖Python),要想升级为2.7 只能通过全新升级 操作如下: 1.下载 Python2.7 网址 https:// ...

  9. 准备mysql-connector-java

    下载mysql-connector-java:https://mvnrepository.com/artifact/mysql/mysql-connector-java 导入mysql-connect ...

  10. jQuery工具--$.each()和$.merge()

       jQuery.each(object, [callback])或者jQuery(object).each([callback]) 概述 通用遍历方法,可用于遍历对象和数组. 不同于遍历 jQue ...