jQuery基础——使用选择器—2过滤选择器

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>