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>
相关文章
相关标签/搜索