录像模板-Web应用开发技术.PPTVIP

3.6 过滤选择器 3.6.1 简单过滤器 3.6.2 内容过滤器 3.6.3 可见性过滤器 3.6.4 表单对象的属性过滤器 3.6.5 子元素过滤器 3.6.1 简单过滤器 简单过滤器是指以冒号开头，通常用于实现简单过滤效果的过滤器。例如，匹配找到的第一个元素等。jQuery提供的过滤器如表3-1所示。 $(div:animated ) //匹配正在执行的动画的div元素 匹配所有正在执行动画效果的元素 :animated $(input:not(:checked)) //匹配没有被选中的input元素 去除所有与给定选择器匹配的元素 :not(selector) $(:header) //匹配全部的标题元素 匹配如 h1, h2, h3……之类的标题元素 :header $(div:lt(2)) //匹配索引小于2的div元素 （注：小于2，而不包括2） 匹配所有小于给定索引值的元素 :lt(index) $(span:gt(0)) //匹配索引大于1的span元素 （注：大于0，而不包括0） 匹配所有大于给定索引值的元素 :gt(index) $(div:eq(1)) //匹配第二个div元素 匹配一个给定索引值的元素 :eq(index) $(tr:odd) //匹配索引值为奇数的行 匹配所有索引值为奇数的元素，索引从0开始计数 :odd $(tr:even) //匹配索引值为偶数的行 匹配所有索引值为偶数的元素，索引值从0开始计数 :even $(tr:last) //匹配表格的最后一行 匹配找到的最后一个元素，它是与选择器结合使用的 :last $(tr:first) //匹配表格的第一行 匹配找到的第一个元素，它是与选择器结合使用的 :first 示例 说明 过滤器 【例3-10】 实现一个带表头的双色表格 （1）创建一个名称为index.html的文件，在该文件的head标记中应用下面的语句引入jQuery库。 script type=text/javascript src=../js/jquery-1.11.1.min.js/script （2）在页面的body标记中，添加一个5行5列的表格，关键代码如下： 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=271/td td琦琦/td td妈妈/td td愿你健康快乐的成长！/td td2014-08-15 13:06:06/td /tr …… !--此处省略了其他行的代码-- /table （3）编写CSS样式，通过元素选择符设置单元格的样式，并且编写th、even和odd 3个类选择符，用于控制表格中相应行的样式，具体代码如下： 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 （4）在引入jQuery库的代码下方编写jQuery代码，分别设置表格奇数行与偶数行的样式，并且单独为第一行添加名为“th”样式，具体代码如下： script type=text/javascript $(document).ready(function() { $(tr:even).addClass(even); //设置奇数行所用的CSS类 $(tr:odd).addClass(odd); //设