jQuery 过滤方法

news2025/7/9 9:08:26

文章目录

  • jQuery 过滤方法
    • hasClass() 类名过滤
    • eq() 下标过滤
    • is() 判断过滤
    • not() 反向过滤
    • filter() 表达式过滤
    • has() 表达式过滤后代元素

jQuery 过滤方法

过滤方法说明
hasClass()类名过滤
eq()下标过滤
is()判断过滤
not()反向过滤
filter()表达式过滤
has()表达式过滤后代元素

hasClass() 类名过滤

语法

$(元素).hasClass("了类名")

说明

判断元素是否包含指定类名。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("li").each(function(index) {
					var b = $(this).hasClass("select");
					if (b) {
						$(this).css("color", "red");
					}
				})
			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li class="select">jQuery</li>
		</ul>
	</body>
</html>

在这里插入图片描述

eq() 下标过滤

语法

$(元素).eq(n)

说明

n是一个整数。当n取值为0或正整数时,eq(0)获取的是第1个元素,eq(1)获取的是第2个元素,……,以此类推。当n取值为负整数时,eq(-1)获取的是倒数第1个元素,eq(-2)获取的是倒数第2个元素,……,以此类推。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("li").eq(3).css("color", "red");
			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
		</ul>
	</body>
</html>

在这里插入图片描述

is() 判断过滤

语法

$(元素).is(选择器)

说明

判断元素集合是否存在符合条件的元素。

is()方法非常好用,能不能用好也直接决定你的代码是否高效。使用jQuery进行开发,没有做不到的,只有想不到的。下面列出的是is()方法的常用功能代码。

举例

//元素是否可见
$().is(":visible")

//元素是否在动画中
$().is(":animated")

//单选框或复选框是否被选中
$().is(":checked")

//元素是否为第一个子元素
$(this).is(":first-child")

//文本是否包含指定内容
$().is(":contains('hello')")

//元素是否包含类名
$().is(".select")

复选框选中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#selectAll").change(function() {
					var b = $(this).is(":checked");
					if (b) {
						$(".fruit").prop("checked", true);
					} else {
						$(".fruit").prop("checked", false);
					}
				});
			})
		</script>
	</head>
	<body>
		<p>
			<label><input id="selectAll" type="checkbox">全选/反选</label>
		</p>
		<label><input class="fruit" type="checkbox" value="苹果">苹果</label>
		<label><input class="fruit" type="checkbox" value="香蕉">香蕉</label>
		<label><input class="fruit" type="checkbox" value="西瓜">西瓜</label>
	</body>
</html>

是否包含类名

判断元素是否存在某个类名,我们有两种方法:一种是hasClass()方法,另一种是is()方法。在实际开发中,建议优先使用hasClass()方法。主要是从查找速度来看,hasClass()方法远远优于is()方法。造成二者查找速度存在差异的原因很简单,is()方法封装的东西比hasClass()方法封装的多得多,运行速度肯定也慢得多。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("li").each(function(index, e) {
					var b = $(this).is(".select");
					if (b) {
						$(this).css("color", "red");
					}
				});
			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li class="select">jQuery</li>
		</ul>
	</body>
</html>

not() 反向过滤

语法

$(元素).not(选择器或函数)

说明

当not()方法参的数是一个选择器时,表示使用选择器来过滤不符合条件的元素,然后选取其余元素。

当not()方法的参数是一个函数时,表示使用函数来过滤不符合条件的元素,然后选取其余元素。

选择器使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("li").not(".select").css("color", "red");
			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li class="select">jQuery</li>
		</ul>
	</body>
</html>

在这里插入图片描述

函数使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("li").not(function() {
					return $(this).text() == "jQuery"
				}).css("color", "red");
			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
		</ul>
	</body>
</html>

在这里插入图片描述

filter() 表达式过滤

语法

$(元素).filter(选择器或函数)

选择器使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("li").filter(".select").css("color", "red");
			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li class="select">jQuery</li>
		</ul>
	</body>
</html>

在这里插入图片描述

函数使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("li").filter(function() {
					return $(this).text() == "jQuery";
				}).css("color", "red");
			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li class="select">jQuery</li>
		</ul>
	</body>
</html>

在这里插入图片描述

has() 表达式过滤后代元素

语法

$(元素).has(选择器)

说明

has()方法与filter()方法功能相似,不过has()方法只能使用选择器来过滤,不能使用函数来过滤。因此我们可以把has()方法看成是filter()方法的精简版。

has()方法虽然没有filter()方法那么强大,但是它的运行速度更快。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("li").has("span").css("color", "red");
			})
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li><span>jQuery</span></li>
		</ul>
	</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/108085.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微软发现macOS漏洞可让恶意软件绕过安全检查

©网络研究院 苹果修复了一个漏洞&#xff0c;攻击者可以利用该漏洞通过能够绕过 Gatekeeper 应用程序执行限制的不受信任的应用程序&#xff1b;在易受攻击的 macOS 设备上部署恶意软件。 由微软首席安全研究员发现并报告的安全漏洞&#xff08;称为Achilles&#xff09…

前端基础_矩阵变换

矩阵变换 在介绍矩阵变换之前&#xff0c;首先要介绍一下变换矩阵&#xff0c;这个矩阵是专门用来实现图形变形的&#xff0c;它与坐标一起配合使用&#xff0c;以达到变形的目的。当图形上下文被创建完毕时&#xff0c;事实上也创建了一个默认的变换矩阵&#xff0c;如果不对…

腾讯T4熬夜硬肝的全套微服务学习笔记,Github万星只是开始

写在前面 微服务架构被认为是 IT 软件架构的未来方向。热度虽高&#xff0c;但对于很多中小公司来说微服务却是遥不可及&#xff0c;因为团队规模和能力又反过来制约了他们采用新技术的步伐。很多人对于微服务技术也都有着一些疑虑&#xff0c;比如&#xff1a;微服务这技术虽然…

编译器原理简介(以Cortex-M3为例)

在"keil根目录\ARM\ARMCC\bin"下可以找到如下文件&#xff1a; 他们就是编译器内核&#xff0c;将工程代码转换成二进制文件&#xff0c;烧写进MCU中执行。 目录 C与汇编 典型的开发流程 编译工具报错举例 C与汇编 在CM3上编程&#xff0c;开发人员既可以使用C也…

CANoe-新型通信模式(SOA面向服务架构)

传统的以ECU为单元的整车通信架构,是面向信号的以CAN/LIN等总线为代表的经典通信模式。而以车载以太网为总线,SOME/IP或DDS等为中间件的SOA面向服务的新型通信模式,在以域控为单元的整车通信架构中被越来越多的使用 CANoe作为仿真和测试环境提供了统一的跨网络通信概念。这…

字符设备驱动_3:register_chrdev_region() 简单字符设备驱动的实现

概述&#xff1a;利用regist_chrdev_region() 函数接口注册同一类字符设备的多个子设备。 上一节一起整理了一遍注册一个简单字符设备的流程&#xff0c;接下来就来实现一个同一类字符设备的多个子设备驱动程序。 1. Demo 程序 #include <linux/module.h> #include <…

Linux篇 三、香橙派Zero2搭建Qt环境

香橙派Zero2系列文章目录 一、香橙派Zero2设置开机连接wifi 二、香橙派Zero2获取Linux SDK源码 三、香橙派Zero2搭建Qt环境 文章目录香橙派Zero2系列文章目录前言一、下载交叉编译工具二、编译QT库1.先去网站下载Qt的资源包2.解压3.开始移植&#xff1a;4.编译&#xff1a;5.安…

jQuery 查找方法

文章目录jQuery 查找方法查找祖先元素parent()parents()parentsUntil()查找后代元素children()find()contents()向前查找兄弟元素prev()prevAll()prevUnitl()向后查找兄弟元素next()nextAll()nextUntil()查找所有兄弟元素siblings()jQuery 查找方法 查找祖先元素查找后代元素向…

年度创新力十强,热点领域重要力量,典型案例报告入选!美创再获ISC安全百强多项殊荣

12月21日&#xff0c;数字安全界“奥斯卡”—ISC 2022数字安全创新能力百强&#xff08;简称“创新百强”&#xff09;重磅揭晓&#xff0c;本届评选由ISC平台发起&#xff0c;联合赛迪顾问、数世咨询、数说安全、看雪、安在等网络安全行业权威机构、媒体共同开启评选&#xff…

web开发前基础知识补充

什么是URL&#xff1f; URL是统一资源定位符&#xff0c;对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示&#xff0c;是互联网上标准资源的地址&#xff1b; 互联网上的每个文件都有一个唯一的URL&#xff1b; 基本URL包含模式&#xff08;或称协议&#xff0…

Kafka使用MirrorMaker同步数据的两种方式

1.前言 MirrorMaker 是 Kafka官方提供的跨数据中心的流数据同步方案。原理是通过从 原始kafka集群消费消息&#xff0c;然后把消息发送到 目标kafka集群。操作简单&#xff0c;只要通过简单的 consumer配置和 producer配置&#xff0c;然后启动 Mirror&#xff0c;就可以实现准…

不喜欢现在的工作,如何成功转行?

对现有行业职业公司不满、不喜欢&#xff0c;感觉此路不通&#xff0c;想换个跑道再战&#xff01; 我想说&#xff0c;请先冷静一下。 我有两个认识的人&#xff0c;一个成功转行&#xff0c;另一个失败。后面会有我的分析~~ 我的一位女性朋友A&#xff0c;小公司里工作近1…

00后的他为何能年薪30w,转行真的很难吗?

网上有很多人经常在讨论转行&#xff0c;有的人说转行很难&#xff0c;有的却说不难&#xff0c;到底是怎样呢&#xff1f;我来说一个我身边发生的这么一个事实吧&#xff01; 我之前接触过一个00后&#xff0c;他不同于别人&#xff0c;网上大多说00后是看老板不爽就直接不干…

unidbg入门级案例-某航空app_hnairSign分析

今天要分析的是某航空app&#xff0c;版本号是8.19.0&#xff0c;分析的样本在文章底部会提供&#xff0c;这次我们要借用unidbg 来辅助进行算法还原。 有关unidbg的介绍笔者就不做过多的描述&#xff0c;大家可自行百度查询。 该样本的so比较简单&#xff0c;但重点是记录分析…

多标签分类怎么做?(Python)

一、基本介绍 首先简单介绍下&#xff0c;多标签分类与多分类、多任务学习的关系&#xff1a; 多分类学习&#xff08;Multi-class&#xff09;&#xff1a;分类器去划分的类别是多个的&#xff0c;但对于每一个样本只能有一个类别&#xff0c;类别间是互斥的。例如&#xff1…

electron:获取MAC地址

一、背景 当我们需要用户“使用指定设备”访问程序的时候&#xff0c;我们需要获取用户设备的固定的id&#xff0c;设备id用户id实现业务需求&#xff0c;这个所谓的id就是MAC地址。 对于其他方法&#xff1a; uuid&#xff1a;uuid是一个唯一的字符串&#xff0c;可以存放到…

深度融合钉钉PaaS,授客学堂助力企业实现培训数字化

方案简介 授客学堂将企业培训领域的经验与钉钉开放能力深度融合&#xff0c;通过集成钉钉人事一体、酷应用、IM底座、待办等多种开放能力&#xff0c;实现学员培训数据实时互通&#xff0c;为客户提供更新更酷的能力&#xff0c;高效解决企业培训的数字化服务。 方案场景 在…

tensorflow feature_columns

总结来说&#xff1a; feature_column定义了一种数据预处理的方式&#xff0c;可以看作是一种格式&#xff0c;指定了key&#xff0c;用于后续读取输入流中对应列的数据feature_column不是tensor&#xff0c;所以如果在下一步应用到模型中是需要tensor&#xff0c;还需要通过f…

非互联网人士如何转行互联网?

结论是&#xff0c;具备互联网式的做事思维积累互联网项目经验。我靠着这个方法从一名传统销售顺利转行&#xff0c;&#xff08;之前没有任何互联网工作经验&#xff09;入职了一家互联网公司做用户运营&#xff0c;半年前跳槽成为一个4人运营小团队的leader。 在分享我自身的…

我国丁辛醇行业现状:上游丙烯供给充足 下游需求下滑 市场出现高差价现象

根据观研报告网发布的《中国丁辛醇行业发展深度分析与投资前景研究报告&#xff08;2022-2029年&#xff09;》显示&#xff0c;丁辛醇是一种丁醇和辛醇合成的有机物&#xff0c;无色透明、易燃的油状液体&#xff0c;具有特殊的气味&#xff0c;能与水及多种化合物形成共沸物&…