jquery简单过滤器 博客分类： JavaScript jquery简单过滤器

一 介绍

简单过滤器是指以冒号开头，通常用于实现简单过滤效果的过滤器。例如，匹配找到的第一个元素等。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 ")  //匹配所有正在执行的动画

 

二 应用

实现一个带表头的双色表格

三 运行效果

 

四 代码

<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>