一 介绍
简单过滤器是指以冒号开头,通常用于实现简单过滤效果的过滤器。例如,匹配找到的第一个元素等。jQuery提供的过滤器下表所示。
过滤器 | 说明 | 示例 |
:first | 匹配找到的第一个元素,它是与选择器结合使用的 | $("tr:first") //匹配表格的第一行 |
:last | 匹配找到的最后一个元素,它是与选择器结合使用的 | $("tr:last") //匹配表格的最后一行 |
:even | 匹配所有索引值为偶数的元素,索引值从0开始计数 | $("tr:even") //匹配索引值为偶数的行 |
:odd | 匹配所有索引值为奇数的元素,索引从0开始计数 | $("tr:odd") //匹配索引值为奇数的行 |
:eq(index) | 匹配一个给定索引值的元素 | $("tr:eq(1)") //匹配第二个div元素 |
:gt(index) | 匹配所有大于给定索引值的元素 | $("tr:gt(0)") //匹配第二个及以上的div元素 |
:lt(index) | 匹配所有小于给定索引值的元素 | $("tr:lt(2)") //匹配第二个及以下的div元素 |
:header | 匹配如 h1, h2, h3……之类的标题元素 | $(":header") //匹配全部的标题元素 |
:not(selector) | 去除所有与给定选择器匹配的元素 | $("input:not(:checked)") //匹配没有被选中的input元素 |
:animated | 匹配所有正在执行动画效果的元素 | $(":animated ") //匹配所有正在执行的动画 |
实现一个带表头的双色表格
三 运行效果
![](https://i-blog.csdnimg.cn/blog_migrate/9cd132d70562c002493244ee9deded1a.png)
四 代码
<script language="javascript" src="JS/jquery-3.1.1.min.js"></script> <style type="text/css"> td{ font-size:12px; /*设置单元格的样式*/ padding:3px; /*设置内边距*/ } .th{ background-color:#B6DF48; /*设置背景颜色*/ font-weight:bold; /*设置文字加粗显示*/ text-align:center; /*文字居中对齐*/ } .even{ background-color:#E8F3D1; /*设置偶数行的背景颜色*/ } .odd{ background-color:#F9FCEF; /*设置奇数行的背景颜色*/ } </style> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B"> <tr> <td width="11%" height="27">编号</td> <td width="14%">祝福对象</td> <td width="12%">祝福者</td> <td width="33%">字条内容</td> <td width="30%">发送时间</td> </tr> <tr> <td height="27">1</td> <td>琦琦</td> <td>妈妈</td> <td>愿你健康快乐的成长!</td> <td>2011-07-05 13:06:06</td> </tr> <tr> <td height="27">1</td> <td>明明</td> <td>爸爸</td> <td>愿你健康快乐的成长!</td> <td>2011-07-05 13:06:06</td> </tr> <tr> <td height="27">1</td> <td>花花</td> <td>爷爷</td> <td>愿你健康快乐的成长!</td> <td>2011-07-05 13:06:06</td> </tr> <tr> <td height="27">1</td> <td>科科</td> <td>妈妈</td> <td>愿你健康快乐的成长!</td> <td>2011-07-05 13:06:06</td> </tr> </table> <script type="text/javascript"> $(document).ready(function() { $("tr:even").addClass("even"); //设置奇数行所用的CSS类 $("tr:odd").addClass("odd"); //设置偶数行所用的CSS类 $("tr:first").removeClass("even"); //移除even类 $("tr:first").addClass("th"); //添加th类 }); </script>