jQuery 过滤方法

已于 2022-12-22 13:59:04 修改
阅读量600 收藏 1
点赞数
分类专栏： # jQuery 文章标签： jquery javascript 前端
于 2022-12-22 10:54:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14876133/article/details/128405846
版权

文章目录

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>

在这里插入图片描述

xiangxiongfly915
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery数组过滤筛选方法grep()简介
10-25
jQuery中的grep()方法是一个非常实用的工具，尤其在处理数组数据时，它允许你根据特定条件筛选出符合或者不符合要求的元素。grep()方法的主要作用是遍历数组，并基于提供的回调函数判断每个元素是否应该保留在结果...
jQuery基础——使用过滤器—1过滤
weixin_57575133的博客
11-04 2806
jQuery选择器能够模仿CSS和XPath语法，提供高效、准确匹配元素的方法，jQuery过滤器是一系列简单、实用的jQuery对象方法，建立在选择器基础上对jQuery对象进行二次过滤。在jQuery框架中，过滤器通过Sizzle.filter子类实现，包含过滤、查找和串联三类操作行为。
过滤选择器（筛选）
小白学编程
08-18 1145
基本过滤选择器（：） :first 选择第一个元素。$(“div：first”)选择第一个<div> :last 选择最后一个元素。$(“div:last”)选择最后一个<div> :not（选择器）选取不满足（去掉）“选择器”条件的元素， $(“input:not(.myClass)”)选取样式名不是myClass的<input> 4、:even、：o...
CSS3选择器（CSS3与CSS的区别）
qq_41147507的博客
11-09 309
先介绍一些css1以及css2的选择器吧： .intro 选择所有class="intro"的元素 #firstname 选择所有id="firstname"的元素 * 选择所有元素 p 选择所有<p>元素 div,p 选择所有<div>元素和<p>元素 div p 选择<div>元素内的所有<p>元素 div>p 选择所有父级是 <div> 元素的 <p> 元素 div+p 选择所有紧接着<div>元
JQuery全部过滤选择器详细介绍上
最新发布
业精于勤，荒于嬉
07-22 823
1、:first 用法: $(“tr:first”) ; 返回值 单个元素的组成的集合2、:last 用法: $(“tr:last”) 返回值 集合元素3、:not(selector)用法: $(“input:not(:checked)”)返回值 集合元素4、:even 用法: $(“tr:even”) 返回值 集合元素5、: odd 用法: $(“tr:odd”) 返回值 集合元素6、:eq(index)用法: $(“tr:eq(0)”) 返回值 集合元素7、:gt(index)用法: $(“tr:gt(
jQuery 过滤
ivenqin的博客
08-15 233
jQuery 的过滤方法可以允许我们根据特定元素在一组元素中的位置来选择该元素。关于 jQuery 过滤方法有以下几种，前三种是最基本的方法，后两种是其他方法，它们可以让我们选择与特定条件匹配或者是不匹配的元素： 方法 描述 first() 返回被选元素的首个元素 last() 返回被选元素的最后一个元素 eq() 返回被选元素中带有指定索引号的元素 filter() 规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回 not() 返回不匹配标准的所有元素
jquery过滤特殊字符',防sql注入的实现方法
10-21
在本文中，我们将探讨如何使用jQuery来过滤特殊字符，从而防止SQL注入攻击。SQL注入是一种常见的安全漏洞，攻击者可以通过输入恶意的SQL语句来操纵数据库。为了保护应用程序免受此类攻击，我们需要确保用户输入的...
jQuery使用方法
10-20
本文将详细介绍jQuery的使用方法，帮助你更好地理解和应用这个强大的工具。 **一、选择元素** jQuery的核心功能之一是选取HTML元素。通过构造函数`jQuery()`（通常简写为`$`）和各种选择器，你可以轻松地选取需要...
jQuery过滤选择器详解
10-24
本文主要给大家详细介绍了jQuery过滤选择器，包含基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器等，十分全面,需要的朋友可以参考下
JQuery全部过滤选择器详细介绍下
业精于勤，荒于嬉
07-22 822
● 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素1、[attribute] 用法: $(“div[id]”) ; 返回值 集合元素2、[attribute=value] 用法: $(“input[name=‘newsletter’]”).attr(“checked”, true); 返回值 集合元素3、[attribute!=value] 用法: $(“input[name!=‘newsletter’]”).attr(“checked”, true); 返回值集合元素4、[attribute^=
jQuery03筛选&文档处理
qq_65345936的博客
03-18 844
jQuery03第三次课笔记
JQuery 选择器 过滤器 其他 总结
u011073057的博客
03-20 771
JQuery选择器 一、基本选择器 id选择器： $("#id") 类选择器：$(".class") 元素选择器：$("div") 合成选择器 ：$("div,#id,p") //意味着多选 返回所有文档节点的选择器：$("*") //少用 二、层级选择器 子筛选选择器： $("select1select2"
JQuery—— 过滤
NanChen的博客
09-15 241
过滤：可以允许在一组元素中的位置来选择一个特定的元素 最基本的三个过滤方法分别是first(), last() 和 eq() 一、first（）方法：返回首个元素 看下面例子：如果我想获取div中的第一个元素或者是p标签的第一个元素就可以使用此方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa
学习日记（11）—jQuery过滤方法
WDNMde_的博客
05-27 402
为了快速操作元素，除了选择器之外，jQuery提供了以“方法”形式存在的两种方式：过滤方法和查找方法。 过滤方法和查找方法跟选择器之间是互补关系，它们补充了很多使用选择器无法进行的操作，例如选取当前元素的父元素、获取当前元素的子元素、判断当前元素是否处于动画状态等。 类名过滤：hasClass() 类名过滤，指的是根据元素的class来过滤。 $().hasClass(“类名”) hasClass()方法一般用于判断元素是否包含指定的类名：如果包含，则返回true；如果不包含，则返回false。 $(“li
jquery实现多条件筛选
youif的博客
04-16 1936
我们在电商平台购买商品时，在商品列表页根据品牌、款式、价格范围等条件进行筛选查询，当点击某个条件时，在页面上会显示用户所选择的条件集合，并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
jQuery筛选_过滤
weixin_57762591的博客
04-28 358
eq()方法 获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个 first()方法与last()方法 first匹配第一个元素，last匹配最后一个元素 filter()方法 筛选出与指定表达式匹配的元素集合，这个方法用于缩小匹配的范围。用逗号分隔多个表达式，如下图 is()方法 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的
jquery通过多个属性选择器过滤
weixin_34049948的博客
04-21 668
2019独角兽企业重金招聘Python工程师标准>>> ...
(HTML选择性过滤) java正则,过滤掉HTML标签,但保留指定的标签如 p,img,apan
qq_34063070的博客
04-23 7013
方法一： /**过滤HTML里去除img、p、span外的所有标签 * @param str * @return * @throws PatternSyntaxException */ public static String stringFilter(String str)throws PatternSyntaxException { String regEx = "(?!<(img...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值