jQuery基本过滤器有哪些？（附带实例）

基本过滤器是指以冒号开头并通常用于实现简单过滤效果的过滤器，例如匹配找到的第一个元素等。

jQuery 的基本过滤器如下表所示：

表：jQuery 的基本过滤器
过滤器	说明	示例
:first	匹配找到的第一个元素，它是与选择器结合使用的，jQuery 3.4 中已弃用，请使用.first()	$("tr:first") //匹配表格的第一个元素
:last	匹配找到的最后一个元素，它是与选择器结合使用的，jQuery 3.4 中已弃用，请使用.last()	$("tr:last") //匹配表格的最后一个元素
:even	匹配所有索引值为偶数的元素，索引值从 0 开始计数，jQuery 3.4 中已弃用，请使用.even()	$("tr:even") //匹配索引值为偶数的元素
:odd	匹配所有索引值为奇数的元素，索引值从 0 开始计数，jQuery 3.4 中已弃用，请使用.odd()	$("tr:odd") //匹配索引值为奇数的元素
:eq(index)	匹配一个给定索引值的元素，jQuery 3.4 中已弃用，请使用.eq(index)	$("div:eq(1)") //匹配索引值为 1 的 <div> 元素
:gt(index)	匹配所有索引值大于给定索引值的元素，jQuery 3.4 中已弃用，请使用.gt(index)	$("span:gt(0)") //匹配索引值大于 0 的 <span> 元素（注：大于 0，而不包括 0）
:lt(index)	匹配所有索引值小于给定索引值的元素，jQuery 3.4 中已弃用，请使用.lt(index)	$("div:lt(2)") //匹配索引值小于 2 的 <div> 元素（注：小于 2，而不包括 2）
:header	匹配如 <h1>、<h2>、<h3>…之类的标题元素	$("header") //匹配全部的标题元素
:not(selector)	去除所有与给定选择器匹配的元素	$("input:not(:checked)") //匹配没有被选中的 <input> 元素
:animated	匹配所有正在执行动画效果的元素	$("div:animated ") //匹配所有正在执行动画效果的 <div> 元素
:lang	匹配给定语言的所有元素，jQuery 1.9 以后可以使用	$("p:lang(it)") //匹配所有 <p> 的语言的元素
:focus	匹配当前获取焦点的元素	elem.is(":focus") //匹配当前获得焦点的元素
:root	匹配文档的根元素，jQuery 1.9 以后可以使用	$(":root").css("background-color","yellow") //设置 <html> 背景颜色为黄色
:target	匹配由文档 URI（Uniform Resource Identifier，统一资源标识符）的格式化识别码表示的目标元素，jQuery 1.9 以后可以使用	给定 URI 为 http://example.com/#foo，$(":target")将选择lt &;p id="foo"> 元素

【实例 1】实现一个带表头的双色表格。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。

<script type="text/javascript" src="../js/jquery-3.6.4.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>2023-05-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 代码，分别设置表格奇数行与偶数行应用的 CSS 类，并且单独为第 1 行添加名为“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>

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

运行本实例，将显示下图所示的效果：

图 1 带表头的双色表格

其中，第 1 行为表头，编号为 1 和 3 的行应用的是偶数行的样式，编号为 2 和 4 的行应用的是奇数行的样式。

jQuery基本过滤器有哪些？（附带实例）

相关文章