4.6 过滤选择器

过滤选择器包括简单过滤器、内容过滤器、可见性过滤器、表单对象属性过滤器和子元素选择器等。下面进行详细介绍。

4.6.1 简单过滤器

简单过滤器是指以冒号开头，通常用于实现简单过滤效果的过滤器。例如，匹配找到的第一个元素等。jQuery提供的过滤器如表4.1所示。

表4.1 jQuery的简单过滤器

【例4.9】实现一个带表头的双色表格。（实例位置：光盘\TM\sl\4\9）

（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="27">1</td>
                <td>琦琦</td>
                <td>妈妈</td>
                <td>愿你健康快乐的成长！</td>
                <td>2014-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");           //设置偶数行所用的CSS类
                $("tr:first").removeClass("even");     //移除even类
                $("tr:first").addClass("th");          //添加th类
            });
        </script>

在上面的代码中，为表格的第一行添加th类时，需要先将该行应用的even类移除，然后再进行添加，否则，新添加的CSS类将不起作用。

运行本实例，将显示如图4.16所示的效果。其中，第一行为表头，编号为1和3的行采用的是偶数行样式，编号为2和4的行采用的是奇数行的样式。

图4.16 带表头的双色表格

4.6.2 内容过滤器

内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。内容过滤器共包括：contains(text)、:empty、:has(selector)和：parent这4种，如表4.2所示。

表4.2 jQuery的内容过滤器

【例4.10】应用内容过滤器匹配为空的单元格、不为空的单元格和包含指定文本的单元格。（实例位置：光盘\TM\sl\4\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 height="27">4</td>
              <td>明日科技</td>
              <td>wgh</td>
              <td></td>
                <td>2014-08-15 13:46:06</td>
              </tr>
          </table>

（3）在引入jQuery库的代码下方编写jQuery代码，为非空单元格设置背景颜色，为空单元格添加默认内容以及为含有指定文本内容的单元格设置文字颜色，具体代码如下：

        <script type="text/javascript">
            $(document).ready(function() {
            $("td:parent").css("background-color", "#E8F3D1");  //为非空的单元格设置背景颜色
            $("td:empty").html("暂无内容");                      //为空的单元格添加默认内容
        $("td:contains(’轻鸿’)").css("color", "red");           //将含有文本“轻鸿”的单元格的文字颜色设置为红色
            });
        </script>

运行本实例将显示如图4.17所示的效果。其中，内容为“轻鸿”的单元格元素被标记为红色，编号为4的行中“字条内容”在设计时为空，这里应用jQuery为其添加文本“暂无内容”，除该单元格外的其他单元格的背景颜色均被设置为#E8F3D1色。

图4.17 运行结果图

4.6.3 可见性过滤器

元素的可见状态有两种，分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的。因此，可见性过滤器也有两种，一种是匹配所有可见元素的:visible过滤器，另一种是匹配所有不可见元素的:hidden过滤器。

说明

在应用:hidden过滤器时，display属性是none以及input元素的type属性为hidden的元素都会被匹配到。

【例4.11】获取页面上隐藏和显示的input元素的值。（实例位置：光盘\TM\sl\4\11）

（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。

        <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>

（2）在页面的<body>标记中，添加3个input元素，其中第一个为显示的文本框，第二个为不显示的文本框，第3个为隐藏域，关键代码如下：

        <input type="text" value="显示的input元素">
         <input type="text" value="我是不显示的input元素" style="display:none">
        <input type="hidden" value="我是隐藏域">

（3）在引入jQuery库的代码下方编写jQuery代码，获取页面上隐藏和显示的input元素的值，具体代码如下：

        <script type="text/javascript">
            $(document).ready(function() {
                var visibleVal=$("input:visible").val();                 //取得显示的input的值
                var hiddenVal1=$("input:hidden:eq(0)").val();            //取得隐藏的文本框的值
                var hiddenVal2=$("input:hidden:eq(1)").val();            //取得隐藏域的值
                alert(visibleVal+"\n\r"+hiddenVal1+"\n\r"+hiddenVal2);   //弹出取得的信息
            });
        </script>

运行本实例将显示如图4.18所示的效果。

图4.18 弹出隐藏和显示的input元素的值

4.6.4 表单对象的属性过滤器

表单对象的属性过滤器通过表单元素的状态属性（例如选中、不可用等状态）匹配元素，包括：checked过滤器、:disabled过滤器、:enabled过滤器和:selected过滤器这4种，如表4.3所示。

表4.3 jQuery的表单对象的属性过滤器

【例4.12】利用表单过滤器匹配表单中相应的元素。（实例位置：光盘\TM\sl\4\12）

（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。

        <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>

（2）在页面的<body>标记中，添加一个表单，并在该表单中添加3个复选框、一个不可用按钮和一个下拉列表框，其中，前两个复选框为选中状态，关键代码如下：

        <form>
          复选框1: <input type="checkbox"checked="checked"value="复选框1"/>
          复选框2: <input type="checkbox"checked="checked"value="复选框2"/>
          复选框3:  <input type="checkbox"value="复选框3"/><br/>
          不可用按钮：  <input type="button"value="不可用按钮"disabled><br/>
          下拉列表框：
          <select onchange="selectVal()">
            <option value="列表项1">列表项1</option>
            <option value="列表项2">列表项2</option>
            <option value="列表项3">列表项3</option>
          </select>
        </form>

（3）在引入jQuery库的代码下方编写jQuery代码，实现匹配表单中的被选中的checkbox元素、不可用元素和被选中的option元素的值，具体代码如下：

        <script type="text/javascript">
            $(document).ready(function() {
                $("input:checked").css("background-color", "red"); //设置选中的复选框的背景颜色
                $("input:disabled").val("我是不可用的");               //为灰色不可用按钮赋值
            })
            function selectVal(){                                    //下拉列表框变化时执行的方法
                alert($("select option:selected").val());            //显示选中的值
            }
        </script>

运行本实例，选中下拉列表框中的列表项3，将弹出提示对话框显示选中列表项的值，如图4.19所示。在该图中，选中的两个复选框的背景为红色，另外的一个复选框没有设置背景颜色，不可用按钮的value值被修改为“我是不可用的”。

图4.19 利用表单过滤器匹配表单中相应的元素

4.6.5 子元素过滤器

子元素选择器就是筛选给定某个元素的子元素，具体的过滤条件由选择器的种类而定。jQuery提供的子元素选择器如表4.4所示。

表4.4 jQuery的子元素选择器

上一章目录下一章