4、过滤选择器
过滤选择器主要通过特定的过滤表达式来筛选特殊需求的DOM元素，过滤选择器的语法形式与CSS的伪类选择器的语法格式相同，以冒号作为前缀标识符。根据需求的不同，过滤选择器又可以分为定位过滤器、内容过滤器和可见过滤器。
4.1、定位过滤器
定位过滤器主要是根据编号和排位筛选特定位置上的元素，或者过滤掉特定元素。
定位过滤器
选择器 | 说明 |
:first | 匹配找到的第一个元素。 列如：$("tr:first")表示匹配表格的第一行 |
:last | 匹配找到最后一个元素。 例如，$("tr:last")表示匹配表格的最后一行 |
:not | 去除所有的与给定选择器匹配的元素。注意，在jQuery1.3中，已经支持复杂选择器了，如:not(div a)和:not(div,a)。 例如，$("input:not(:checked)")可以匹配所有未选中的input元素 |
:even | 匹配所有索引值为偶数的元素，从0开始计数。 例如，$("tr:even")可以匹配表格的1、3、5行(即索引值为0/2/4) |
:odd | 匹配所有索引值为奇数的元素，从0开始计数。 例如，$("tr:even")可以匹配表格的2、4、6行(即索引值为1/3/5) |
:eq | 匹配一个给定索引值的元素，从0开始计数。 例如，$("tr:eq(0)")可以匹配第1行表格行 |
:gt | 匹配所有大于给定索引值的元素，从0开始计数。 例如，$("tr:gt(0)")可以匹配第2行及其后面行 |
:lt | 匹配所有小于给定索引值的元素，从0开始计数。 例如，$("tr:gt()")可以匹配第1行 |
:header | 匹配如h1/h2/h3之类的标题元素 |
:animated | 匹配所有正在执行动画效果的元素 |
<script src="./js/jquery-3.6.0.min.js"></script>
<table>
<tr>
<th>选择器</th>
<th>说明</th>
</tr>
<tr>
<td>:first</td>
<td>匹配找到第一个元素。例如，$("tr:first")表示匹配表格的第一行</td>
</tr>
<tr>
<td>:last</td>
<td>匹配找到最后一个元素。例如，$("tr:last")表示匹配表格的最后一行</td>
</tr>
<tr>
<td>:not</td>
<td>去除所有的与给定选择器匹配的元素。注意，在jQuery1.3中，已经支持复杂选择器了，如:not(div a)和:not(div,a)。例如，$("input:not(:checked)")可以匹配所有未选中的input元素</td>
</tr>
<tr>
<td>:even</td>
<td>匹配所有索引值为偶数的元素，从0开始计数。例如，$("tr:even")可以匹配表格的1、3、5行(即索引值为0/2/4)</td>
</tr>
<tr>
<td>:odd</td>
<td>匹配所有索引值为奇数的元素，从0开始计数。例如，$("tr:even")可以匹配表格的2、4、6行(即索引值为1/3/5)</td>
</tr>
<tr>
<td>:eq</td>
<td>匹配一个给定索引值的元素，从0开始计数。例如，$("tr:eq(0)")可以匹配第1行表格行</td>
</tr>
<tr>
<td>:gt</td>
<td>匹配所有大于给定索引值的元素，从0开始计数。例如，$("tr:gt(0)")可以匹配第2行及其后面行</td>
</tr>
<tr>
<td>:lt</td>
<td>匹配所有小于给定索引值的元素，从0开始计数。例如，$("tr:gt()")可以匹配第1行</td>
</tr>
<tr>
<td>:header</td>
<td>匹配如h1/h2/h3之类的标题元素</td>
</tr>
<tr>
<td>:animated</td>
<td>匹配所有正在执行动画效果的元素</td>
</tr>
</table>
<script>
// 设置第1行字体为红字
$("tr:first").css("color", "red");
// 设置第1行字体大小为20像素
$("tr:eq(0)").css("font-size", "20px");
// 设置最后一行字体为蓝色
$("tr:last").css("color", "blue");
// 设置偶数行背景颜色
$("tr:even").css("background", "#ffd");
// 设置奇数行背景颜色
$("tr:odd").css("background", "#dff");
// 设置从第5行开始所有行的字体大小
$("tr:gt(3)").css("font-size", "12px");
// 设置从第1~4行字体大小
$("tr:lt(4)").css("font-size", "18px");
</script>
4.2、内容过滤器
内容过滤器主要根据匹配元素 所包含的子元素或者文本内容进行过滤。主要包括4种内容过滤器。
内容过滤器
选择器 | 说明 |
:contains | 匹配包含给定文本的元素。 例如，$("div:contains('图片')")匹配所有包含图片的div元素 |
:empty | 匹配所有不包含子元素或者文本的空元素 |
:has | 匹配含有选择器所匹配的元素的元素。 例如，$("div:has(p)")匹配所有包含p元素的div元素 |
:parent | 匹配含有子元素或文本的元素 |
<script src="./js/jquery-3.6.0.min.js"></script>
<div>
<h2>标题</h2>
<p>段落文本1</p>
<p><span>段落文本2</span></p>
<ul>
<li></li>
<li></li>
</ul>
</div>
<script>
$(function(){
// 匹配空li元素
$("li:empty").text("空内容");
// 匹配div包含ul元素中包含子元素或者文本元素
$("div ul:parent").css("color","#0f1");
// 标题元素中包含"标题"文本内容的
$("h2:contains('标题')").css("color","red");
// 包含span元素的p元素
$("p:has(span)").css("color","blue");
})
</script>
4.3、可见过滤器
可见过滤器就是根据元素的可见或者隐藏来进行匹配的。
可见过滤器
选择器 | 可见过滤器 |
:hidden | 匹配所有不可见元素，或者type为hidden |
:visible | 匹配所有的可见元素 |
<script src="./js/jquery-3.6.0.min.js"></script>
<p>独在异乡为异客</p>
<p>每逢佳节倍思亲</p>
<p>遥知兄弟登高处</p>
<p>遍插茱萸少一人</p>
<script>
$(function(){
// 隐藏奇数位p元素
$("p:odd").hide();
// 设置奇数位p元素的字体颜色为红色
$("p:odd").css("color","red");
// 设置偶数位p元素的字体颜色为蓝色
$("p:visible").css("color","blue");
// 显示奇数位p元素
$("p:hidden").show();
})
</script>
