轻松学会jQuery选择器的用法

文章目录

- ⛳️ 选择器
- - ✨ 属性选择器
  - ✨ 包含选择器
  - ✨ 位置选择器
  - ✨ 过滤选择器
  - ✨ 反向选择器
- ⛳️ 快速投票

⛳️ 选择器

在这里插入图片描述
本篇重点讲解jQuery中丰富的选择器，以及他们的基本用法。CSS的选择器均可以用jQuery的$进行选择，部分浏览器对CSS3的选择器支持不全，可以用jQuery作为补充，所以本篇重点介绍jQuery扩展的选择器。

✨ 属性选择器

属性选择器的语法是在标记的后面用方括号[和]添加相关的属性，然后赋予其不同的逻辑关系。jQuery中的属性选择器的用法如下：

属性选择器	说明
E.C	选中所有名称为E的标记，并且属性类别为C；如果去掉E，就是属性选择器.C
E#I	选中所有名称为E的标记，并且id为I；如果去掉E，就是id选择器#I
E[A]	选中所有名称为E的标记，并且设置了属性A
E[A=V]	选中所有名称为E的标记，并且设置了属性A的值为V
E[A^=V]	选中所有名称为E的标记，并且设置了属性A的值以V开头
E[A$=V]	选中所有名称为E的标记，并且设置了属性A的值以V结尾
E[A*=V]	选中所有名称为E的标记，并且设置了属性A的值中包含V

【1】追加、移除和切换样式

追加用法：$(‘p’).addClass(‘test’);

移除用法：$(‘p’).removeClass(‘demo’);

备注：p为标记，test和demo为标记的class属性值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>追加和移除样式</title>
		<style>
			.demo{
				color: #f00;
				font-size: 30px;
			}
			
			.test{
				background-color: #ccc;
				border: 1px solid #00f;
				border-radius: 10px;
			}
		</style>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<p class="demo">段落标签</p>
		<button>追加样式</button>
		<button>移除样式</button>
	</body>
</html>

效果展示：
请添加图片描述

以上代码定义了HTML框架，以及相关的CSS类别，供测试使用，此时的显示效果是点击后无任何反应。

如果希望在页面中选择设置了demo属性的标记，并给标记添加或者移除某个样式，可以使用如下方法实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>追加和移除样式</title>
		<style>
			.demo{
				color: #f00;
				font-size: 30px;
			}
			
			.test{
				background-color: #ccc;
				border: 1px solid #00f;
				border-radius: 10px;
			}
		</style>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>
	<body>
		<p class="demo">段落标签</p>
		<button>追加样式</button>
		<button>移除样式</button>
	</body>
	<script>
		$(function(){
			//获取添加样式的按钮，并添加点击事件
			$('button:first').click(function(){
				$('p').addClass('test');
			});
			
			//获取添加样式的按钮，并添加点击事件
			$('button:last').click(function(){
				$('p').removeClass('demo');
			});
		});
	</script>
</html>

效果展示：
在这里插入图片描述
不管是追加还是移除，在实际操作中，都不便于具体得使用逻辑，我们大多数使用逻辑都是喜欢点击一个按钮能喜欢两种样式的切换，所以有toggleClass()方法帮我们实现切换样式的需求。

切换用法：$(‘p’).toggleClass(‘demo’);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>切换样式</title>
		<script src="js/jQuery-3.6.1.js"></script>
		<style>
			.demo{
				color: #f00;
				font-size: 36px;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<p>段落标签</p>
		<button>切换样式</button>
	</body>
	<script>
		$(function(){
			$('button').click(function(){
				$('p').toggleClass('demo');
			});
		});
	</script>
</html>

运行效果：
在这里插入图片描述
【2】根据属性值添加样式

案例原始代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery-3.6.1.js"></script>
		<style type="text/css">
			a{
				text-decoration: none;
				color: #000;
			}
			.myClass{
				/* 设定某个CSS类别 */
				background-color: #d0baba;
				color: #5f0000;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="http://www.artech.com">信息列表</a>
				<ul>
					<li><a href="https://***.sina.com.cn/">新浪</a></li>
					<li><a href="https://***.baidu.com/" title="百度">百度</a></li>
					<li><a href="https://***.qq.com/">腾讯</a></li>
					<li><a href="https://***.google.cn/" title="谷歌">谷歌</a></li>
				</ul>
			</li>
		</ul>
	</body>
</html>

原始代码运行效果：
在这里插入图片描述

如果希望在页面中选择设置了title属性的标记，并给这些超链接添加myClass样式，则可以使用如下代码：

	<script>
		$(function(){
			$('a[title]').addClass('myClass');
		});
	</script>

运行效果：
在这里插入图片描述

如果希望根据属性值进行判断，例如href属性值为https://***.baidu.com/的超链接添加myClass样式，则可以用如下代码：

	<script>
		$(function() {
			$("a[href='https://***.baidu.com/']").addClass("myClass");
		});
	</script>

运行效果：
在这里插入图片描述
以上两种比较简单的属性选择器，jQuery还可以根据属性值的某一部分进行匹配，例如下面代码选中的href属性值以http://开头的所有超链接。

	<script>
		$(function() {
			$("a[href^='http://']").addClass("myClass");
		});
	</script>

运行效果：
在这里插入图片描述
既然可以根据属性值的开头来匹配选择，自然也可以根据属性值的结尾$=来匹配选择，如下代码可以选中href属性值以cn/结尾的超链接集合，这种方法通常用于选取网站中的某些资源，例如所有的.jpg图片、所有的.pdf文件等。

	<script>
		$(function() {
			$("a[href$='cn/']").addClass("myClass");
		});
	</script>

运行结果：
在这里插入图片描述
另外，还可以利用*=进行任意匹配，例如下面的代码选中href属性值中包含字符串com的所有超链接，并添加样式：

	<script>
		$(function() {
			$("a[href*='com']").addClass("myClass");
		});
	</script>

运行效果：
在这里插入图片描述

✨ 包含选择器

jQuery中还提供了包含选择器，用于选择包含某种特殊标记的元素。

包含选择器	说明
E：has(F)	选中所有名称为E的标记，并且该标记包含F标记

同样采用上述例子中的HTML框架，下面的代码表示选中包含超链接的所有li标记：

	<script>
		$(function() {
			$("ul li ul li:has(a)").addClass("myClass");
		});
	</script>

运行效果：
在这里插入图片描述

✨ 位置选择器

CSS3中还允许用过标记所处的位置来对其进行选择，这里的位置是指元素在DOM中所处的位置。页面中几乎所有的标记都可以运用位置选择器，下面的例子展示了jQuery中位置选择器的使用。

位置选择器	说明
:first	获取第一个元素
:last	获取最后一个元素
:odd	匹配所有索引值为奇数的元素，从0 开始计数
:even	匹配所有索引值为偶数的元素，从0 开始计数
:eq(n)	匹配一个给定索引值的元素
:gt(n)	匹配所有大于给定索引值的元素
:lt(n)	匹配所有小于给定索引值的元素
:first-child	匹配第一个子元素
:last-child	匹配最后一个子元素
:only-child	如果某个元素是父元素中唯一的子元素，将会被匹配
:nth-child(n)	第n个元素
:nth-child(odd/even)	所有奇数号或者偶数号的子元素
:nth-child(xn+y)	利用公式计算子元素的位置

注意：nth-child()选择器编号是从1开始，而其他选择器从0开始。

原始案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery-3.6.1.js"></script>
		<style>
			div{
				font-size: 12px;
				border:1px solid #003a75;
				margin: 5px;
			}
			p{
				margin: 0;
				padding: 4px 10px;
			}
			.myClass{
				/* 设定某个CSS类别 */
				color: beige;
				background-color: #003a75;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<div>
			<p>1.大礼堂</p>
			<p>2.清华学堂</p>
		</div>
		<div>
			<p>3.图书馆</p>
		</div>
		<div>
			<p>4.紫荆公寓</p>
			<p>5.C楼</p>
			<p>6.清清地下</p>
		</div>
	</body>
</html>

原始代码运行效果：
在这里插入图片描述
如果希望在页面中选择每个div块的第一个p标记，则可以通过：first-child来选择，代码如下：

	<script>
		$(function(){
			$('p:first-child').addClass('myClass');
		});
	</script>

运行效果：
在这里插入图片描述
如果希望在页面中选择第n个p标记，则可以通过：:eq(n-1)来选择，代码如下：

	<script>
		$(function(){
			$('p:eq(3)').addClass('myClass');
		});
	</script>

运行效果：
在这里插入图片描述

✨ 过滤选择器

除了CSS3中的一些选择器，jQuery也提供了很多自定义的过滤选择器，用来处理更复杂的选择问题。例如很多时候希望知道用户所勾选的多选项，如果通过属性的值来判断，那么只能获得初始状态下的勾选情况。

过滤选择器	说明
:animated	选择所有处于动画中的元素
:button	选择所有按钮
:checkbox	选择所有多选项
:contains(foo)	选择所有包含文本foo的元素
:disabled	选择页面中被禁用的元素
:enabled	选择页面中没有被禁用的元素
:file	选择上传文件的元素
:header	选择所有标题元素
:hidden	选择页面中被隐藏的元素
:image	选择图片提交按钮
:input	选择表单元素
:not(filter)	反向选择
:parent	选择所有拥有子元素（包括文本）的元素，空元素被排除
:password	选择密码框
:radio	选择单选框
:reset	选择重置按钮
:selected	选择下拉菜单中被选中的项
:submit	选择提交按钮
:text	选择文本输入框
:visible	选择页面中所有可见元素

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jQuery-3.6.1.js"></script>
		<style type="text/css">
			form{
				font-size:12px;
				margin:0;
				padding:0;
			}
			input .btn{
				border:1px solid #005079;
				color: #005079;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 12px;
			}
			.myClass+label{
				background-color: #F00;
				text-decoration: underline;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<form name="myForm">
			<input type="checkbox" name="sports" id="football"><label for="football">足球</label><br>
			<input type="checkbox" name="sports" id="basketball"><label for="basketball">篮球</label><br>
			<input type="checkbox" name="sports" id="volleyball"><label for="volleyball">排球</label><br>
			<br><input type="button" value="Show Checked" onclick="ShowChecked('sports')" class="btn">
		</form>
	</body>
	<script>
			function ShowChecked(oCheckBox){
				//使用：checked过滤出被用户选中的复选框
				$('input[name='+oCheckBox+']:checked').addClass('myClass');
			}
	</script>
</html>

运行效果：
请添加图片描述
以上代码中有3个复选框，通过jQuery的过滤器:checked便可以很容易地筛选出用户选中的复选项，并赋予其特殊的CSS样式。

✨ 反向选择器

上述过滤选择器中的:not(filter)选择器可以尽享反向选择，其中filter参数可以是任意的其它过滤选择器，例如下面的代码表示input标记中所有非radio元素：
input:not(:radio)

反向选择器也可以使用链式编写方式，例如：
$(‘:input:not:(:checkbox):not(:radio)’).addClass(‘myClass’);
表示所有表单元素中（input、select、textarea或button）非checkbox和非radio的元素，这里需要注意input与:input的区别。

此外，在:not(filter)中，filter参数必须是过滤选择器，而不能是其它选择器。下面的代码表示的是典型的错误写法：
$(‘div:not(p:hidden)’);

正确写法为：
$(‘div p:not(:hidden)’);