轻松学会jQuery选择器的用法

news/2024/7/10 22:38:00 标签: jquery, 前端, javascript

文章目录

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

⛳️ 选择器

在这里插入图片描述
  本篇重点讲解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>javascript">
		$(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>javascript">
		$(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>javascript">
		$(function(){
			$('a[title]').addClass('myClass');
		});
	</script>

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

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

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

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

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

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

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

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

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

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

✨ 包含选择器

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

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

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

	<script>javascript">
		$(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>javascript">
		$(function(){
			$('p:first-child').addClass('myClass');
		});
	</script>

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

	<script>javascript">
		$(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="javascript language-javascript">ShowChecked('sports')" class="btn">
		</form>
	</body>
	<script>javascript">
			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)’);

⛳️ 快速投票


http://www.niftyadmin.cn/n/9228.html

相关文章

YOLO系列概述（yolov1至yolov7）

YOLO系列概述（yolov1至yolov7）

YOLO系列概述&#xff08;yolov1至yolov7&#xff09; 参考&#xff1a; 睿智的目标检测53——Pytorch搭建YoloX目标检测平台YoloV7 yolo的发展历史 首先我们来看一下yolo系列的发展历史&#xff0c;yolo v1和yolox是anchor free的方法&#xff0c;yolov2&#xff0c;yolov3…
阅读更多...
MySQL主从复制最全教程（CentOS7 yum）

MySQL主从复制最全教程（CentOS7 yum）

一、MySQL主从复制介绍 &#xff08;1&#xff09;MySQL数据库默认是支持主从复制的&#xff0c;不需要借助于其他的技术&#xff0c;我们只需要在数据库中简单的配置即可。 &#xff08;2&#xff09;MySQL主从复制是一个异步的复制过程&#xff0c;底层是基于Mysql数据库自…
阅读更多...
【C++进阶】map和set——中篇（AVL树的学习）

【C++进阶】map和set——中篇（AVL树的学习）

&#x1f387;C笔试强训 博客主页&#xff1a;一起去看日落吗分享博主的C刷题日常&#xff0c;大家一起学习博主的能力有限&#xff0c;出现错误希望大家不吝赐教分享给大家一句我很喜欢的话&#xff1a;夜色难免微凉&#xff0c;前方必有曙光 &#x1f31e;。 &#x1f341; &…
阅读更多...
Java三大特性篇之——继承篇（超详解的好吧！）

Java三大特性篇之——继承篇（超详解的好吧！）

&#x1f60d;&#x1f60d;&#x1f60d;欢迎欢迎欢迎欢迎&#xff0c;我的朋友&#xff0c;答应我&#xff0c;看完好吗&#xff1f;&#x1f974; 文章目录前言&#xff1a;何为继承&#xff1f;不谈钱的继承实现&#xff01;嘘&#xff1a;偷偷访问父类的私密成员&#xff…
阅读更多...
人工智能--k近邻算法2-归一化、交叉验证、网格搜索、数据分割方法总结、两案例实现

人工智能--k近邻算法2-归一化、交叉验证、网格搜索、数据分割方法总结、两案例实现

人工智能-第三阶段-k近邻算法1-算法理论、kd树、鸢尾花数据 人工智能–k近邻算法2-归一化、交叉验证、网格搜索、数据分割方法总结、两案例实现 1.7 特征工程-特征值预处理 1.7.1 介绍 通过一些转换函数奖特征数据转换为更加适合算法模型的特征数据过程 为什么要进行归一化/…
阅读更多...
STC51单片机29——汇编语言 取表法 流水灯

STC51单片机29——汇编语言 取表法 流水灯

汇编语言编写流水灯 ORG 0 START: MOV DPTR,#TABLE LOOP: CLR A MOVC A,ADPTR CJNE A,#01H,LOOP1 //假如A等于01H &#xff0c;则执行下一句 JMP START LOOP1: MOV P1,A MOV R3,#20 LCALL DELAY INC DPTR //指针自加1 JMP LOOP DELAY: MOV R4,#20 D1: MOV R5,#24…
阅读更多...
Java 常用类库

Java 常用类库

目录 一、String 类、StringBuffer 和 StringBuilder 类 二、基本数据类型的包装类 三、System 类与 Runtime 类 3.1、System 类 3.2、Runtime 类 四、Data 与 Calendar、DateFormat 类 五、Math 与 Random 类 六、HashCode() 方法 七、对象克隆 Java 类库就是 Ja…
阅读更多...
最新最全面的Spring详解（二）——classpath扫描和组件管理

最新最全面的Spring详解（二）——classpath扫描和组件管理

前言 本文为 【Spring】classpath扫描和组件管理 相关知识&#xff0c;下边将对Component 和及其派生出的其他注解&#xff0c;自动检测类和注册beanDifination&#xff0c;组件命名&#xff0c;为自动检测组件提供scope&#xff0c;使用过滤器自定义扫描&#xff0c;在组件中定…
阅读更多...
最新文章

Copyright @ 2022~2023