jQuery(四)---[jQuery筛选之::祖先,后代,同胞,过滤,判断]

最新推荐文章于 2022-11-27 22:14:22 发布
最新推荐文章于 2022-11-27 22:14:22 发布
阅读量241 收藏 2
点赞数 1
分类专栏： jQuery从零开始 文章标签： jquery
版权声明：本文为CSDN博主小智RE0-李智青-原创文章,转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MrTumnus/article/details/118853701
版权

目录

筛选是对获取的对象进行筛选，最终留下符合某些特征的对象。
筛选是对于选择器的补充.
一般来说先通过选择器获取标签,然后用筛选进行过滤.

筛选—祖先

parent( )返回被选标签的直接父标签

parents( )返回被选标签的所有祖先标签，它一路向上直到文档的根标签 (<html> )
(注意:在parents( )括号中可以传入参数(只要是选择器即可);来获得指定的上级标签)

  • 案例:获取段落标签的直接父标签;
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function test(){
				//获取段落标签的直接父级标签;
				console.log($("p").parent());
			}
		</script>
	</head>
	<body id="bodyId">
		<div id="divID01"><p>这是一个段落</p></div>
		<input type="button" value="点击操作" onclick="test()" />
	</body>
</html>

点击操作按钮;该段落标签的直接父级标签为div标签.

在这里插入图片描述

  • 案例:获取段落标签的所有祖先标签,也就是包含了这个段落标签的所有标签.
    在test函数中写入.
function test(){
	//获取段落标签的所有祖先标签;
	console.log($("p").parents());
}

点击操作按钮,获得了三个结果;div标签,body标签,html标签

在这里插入图片描述

  • 案例,(当然,在获取所有祖先标签时,可以传入参数来指定获取到哪一层级的标签)
    例如,指定获取到该段落标签的body祖先标签;
    在test函数写入:
function test(){
	//获取段落标签的指定祖先标签;
	console.log($("p").parents("#bodyId"));
}

点击操作按钮,得到1个结果:即body标签

在这里插入图片描述

筛选—后代

children( )返回被选标签的所有直接子标签
(注意:这里对children( )可以传入指定选择器的参数,来获取指定的子级标签)

find( )返回被选标签的后代标签，一路向下直到最后一个后代
(注意:find()必须传入参数,否则什么也获取不到,即undefined)

  • 案例:获取div标签的所有子标签
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function test(){
				//获取div标签的所有直接子标签;
				console.log($("#divID01").children());
			}
		</script>
	</head>
	<body>
			<div id="divID">
				div内容
				<p id="pID">
				<b id="bID_p">div标签子级的子级</b>
				</p>
				<b id="bID_div">div标签的子级</b>
				</div>
			<input type="button" value="点击操作" onclick="test()" />
	</body>
</html>

点击操作按钮,获取到了两个标签;

在这里插入图片描述

  • 案例:获取div标签的指定子级标签
    在test函数写入;
function test(){
	//获取div标签的指定子级标签;
	console.log($("#divID").children("b"));
}

点击操作按钮,获取到了一个指定的子级b标签

在这里插入图片描述

  • 获取div标签的一切后代b标签;(注意:也包含div子级的子级…;直到最后一个后代)
    在test函数写入
function test(){
	//获取div标签的一切后代b标签;(注意:也包含div子级的子级....;直到最后一个后代)
	console.log($("#divID").find("b"));
}

点击操作按钮,获取到了两个b标签;其中一个是在p标签中;

在这里插入图片描述

筛选—同胞

siblings( )返回被选标签的所有同胞标签
(注意:siblings()可以传参,得到指定的同胞标签)

next( )返回被选标签的后一个相邻标签

nextAll( )返回被选标签的所有后面的同胞标签
(注意:在nextAll()中可以传参,得到后面指定的同胞标签

prev( )返回被选标签的前一个相邻标签

prevAll( )返回被选标签的所有前面的同胞标签
(注意:prevAll()可以传参,得到前面指定的同胞标签)

(在之前的学习中,选择器是不能得到指定标签之前的标签)

  • 案例:获取div标签的所有同胞标签;
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//注意,这里使用css属性操作使得指定的标签背景颜色改变;
			function test(){
				//获得div标签的所有同胞标签;使得背景颜色改变;
				$("div").siblings().css("backgroundColor","#97C384");
			}
		</script>
	</head>
	<body>
		<span>div之前的兄弟</span>
		<span>div之前的兄弟</span>
		<span>div之前的兄弟</span>
		<span>div之前的相邻兄弟</span>
		<div>div标签</div>
		<span>div之后的相邻兄弟</span>
		<span>div之后的兄弟</span>
		<span>div之后的兄弟</span>
		<span>div之后的兄弟</span>
		<input type="button" value="点击操作" onclick="test()" />
	</body>
</html>

点击操作按钮:div标签的所有同胞标签被获取

在这里插入图片描述

  • 案例:获取div标签的后一个相邻标签;
    在test函数写入:
function test(){
	//获得div标签的后一个相邻标签;
	$("div").next().css("backgroundColor","#97C384");
}

点击操作按钮:仅获取到div标签的后一个相邻标签

在这里插入图片描述

  • 案例:获取div标签之后的所有同胞标签
    在test函数写入:
function test(){
	//获得div标签之后的所有同胞标签;
	$("div").nextAll().css("backgroundColor","#97C384");
}

点击操作按钮,获取到了div标签之后的所有同胞标签;

在这里插入图片描述

  • 案例:获取div标签的前一个相邻标签;
    在test函数写入:
function test(){
	//获取div标签的前一个相邻标签;
	$("div").prev().css("backgroundColor","#97C384");
}

点击操作按钮,仅获取到div标签的前一个相邻标签;

在这里插入图片描述

  • 案例: 获取div标签之前的所有同胞标签
    在test函数写入:
function test(){
	//获取div标签之前的所有同胞标签;
	$("div").prevAll().css("backgroundColor","#97C384");
}

点击操作按钮,获取到div标签之前的所有同胞标签;

在这里插入图片描述

筛选—过滤

first( ) 返回被选标签的首个标签

last( )返回被选标签的最后一个标签

eq( index|-index)返回被选标签中带有指定索引号的标签
(index:一个整数，指示元素基于0的位置,这个元素的位置是从0算起。)
(-index:一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(从-1算起))

filter( expr|obj|ele|fn)返回匹配的标签

参数注释类型
expr字符串值，包含供匹配当前元素集合的选择器表达式。String
jQuery object现有的jQuery对象，以匹配当前的元素。object
element一个用于匹配元素的DOM元素。Expression
function(index)一个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。Function

not( expr|ele|fn)返回不匹配标准的所有标签

参数注释类型
expr一个选择器字符串。String
element一个DOM元素DOMElement
function(index)一个用来检查集合中每个元素的函数。this是当前的元素。Function
  • 案例:获取第一个div标签:
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function test(){
				//获取第一个div标签;
				$("div").first().css("backgroundColor","#97C384");
			}
		</script>
	</head>
	<body>
		<div>第 1 个div</div>
		<div>第 2 个div</div>
		<div>第 3 个div</div>
		<div>第 4 个div</div>
		<div>第 5 个div</div>
		<div>第 6 个div</div>
		<input type="button" value="点击操作" onclick="test()"/>
	</body>
</html>

点击操作按钮,第一个div标签被获取;

在这里插入图片描述

  • 案例:获取最后一个div标签
    在test函数写入:
function test(){
	//获取最后一个div标签;
	$("div").last().css("backgroundColor","#97C384");
}

点击操作按钮,最后一个div标签被获取

在这里插入图片描述

  • 案例:获取第三个div标签
  • 方式1
    在test函数写入
function test(){
	//获取第 3 个div标签;
	$("div").eq(2).css("backgroundColor","#97C384");
}
  • 方式2
    在test函数写入:
function test(){
	//获取第 3 个div标签;
	$("div").eq(-4).css("backgroundColor","#97C384");
}

点击操作按钮;均可获取到第三个div标签;

在这里插入图片描述

  • 案例:获取指定类名的div标签
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function test(){
				//获取指定类名的div标签;
				$("div").filter(".P01").css("backgroundColor","#97C384");
			}
		</script>
	</head>
	<body>
		<div>第 1 个div</div>
		<div>第 2 个div</div>
		<div>第 3 个div</div>
		<div>第 4 个div</div>
		<div class="P01">第 5 个div</div>
		<div class="P01">第 6 个div</div>
		<div class="P01">第 7 个div</div>
		<input type="button" value="点击操作" onclick="test()"/>
	</body>
</html>

点击操作按钮;获取到3个div标签;

在这里插入图片描述

  • 获取第一个div标签;以及指定类名的div标签;
    在test函数写入
function test(){
    //获取第一个div标签;以及指定类名的div标签;
	$("div").filter(".P01,:first").css("backgroundColor","#97C384");
}

点击操作按钮;

在这里插入图片描述

  • 案例:获取没有指定类名的div标签;
    在test函数写入:
function test(){
   //获取不是类名为P01的div标签;
   $("div").not(".P01").css("backgroundColor","#97C384");
}

点击操作按钮;

在这里插入图片描述

筛选—判断

is() 根据选择器、标签或 jQuery 对象来检测匹配标签集合，如果这些标签中至少有一个标签匹配给定的参数，则返回 true;
(如果没有元素符合，或者表达式无效，都返回false。 注意:在jQuery 1.3中才对所有表达式提供了支持。在先前版本中，如果提供了复杂的表达式，比如层级选择器（比如 + , ~ 和 > ），始终会返回true)

hasClass( )检查当前的标签是否含有某个特定的类，如果有，则返回true。
(这其实就是 is("." + class)。)

  • 案例:判断该段落p标签的父级为div标签
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function test(){
			    //判断该段落p标签的父级为div标签
				console.log($("p").parent().is("div"));
			}
		</script>
	</head>
	<body>
		<div><p>段落</p></div>
		<input type="button" value="操作按钮" onclick="test()"/>
	</body>
</html>

点击操作按钮;控制台返回值为true

在这里插入图片描述

  • 案例:判断div是否含有类名为"p" 的类;(注意:这里的参数是类名)
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function test(){
			     //判断div是否含有类名为"p" 的类
				console.log($("div").hasClass("p"));
			}
		</script>
	</head>
	<body>
        <div><p>段落</p></div>
		<input type="button" value="操作按钮" onclick="test()" />
	</body>
</html>

点击操作按钮:返回值为false;即div不包含类名为p的类

在这里插入图片描述

小智RE0
关注
专栏目录
024Day-jQuery方法-删除、克隆、祖先元素、后代元素、兄弟元素、结构过滤等方法
Yanxiaona111的博客
08-27 514
一、常用方法-scrollLeft()-scrollTop() <style> div{ width: 100px; height: 100px; border: solid 1px; overflow: scroll; } body{ height: 3000px; } </style>
Jquery中获取内容和属性、删除元素、添加元素、jQuery遍历----------(遍历、祖先、后代、同胞、过滤)、jQuery - AJAX 简介
qq_44791674的博客
10-05 533
Jquery中获取内容和属性 Jquery拥有可操作HTML元素和属性的强大方法。 常用的方法有： text()/设置或返沪所选元素的文本内容 html()/设置或返回所选元素的内容（相比text（）方法，支持返回btml标记） val()/返回表单字段的值（理解为value的简写） attr()/设置或返回所选属性的值 text()/设置或返沪所选元素的文本内容&html()/设置或返回所选元素的内容（相比text（）方法，支持返回btml标记） <!DOMTYPE> <ht
Jquery判断$(#id)获取的对象是否存在的方法
12-07
一、判断对象对象是否存在 如果是下面的 jQuery 代码判断一个对象是否存在，是不能用的 代码如下: if($(“#id”)){ }else{} 因为 $(“#id”) 不管对象是否存在都会返回 object 。 正确使用判断对象是否存在应该用： 代码如下: if($(“#id”).length>0){}else{} 使用 jQuery 对象的属性 length 来判断，如果 > 0 就存在。 或者 代码如下: if($(“#id”)[0]){} else {} 或者直接使用原生的 Javascript 代码来判断： 代码如下: if(document.getElementBy
2020-10-04
qq_45803663的博客
10-04 183
1.list :列表，是一种有序的集合，可以随时添加和删除其中的元素。 2.set :集合，集合中可以存储任意类型的数据，集合中不会出现重复的数据 3.dict :字典，字典是另一种可变容器模型，且可存储任意类型对象。 4.tuple : 元组，tuple和list非常类似，但是tuple一旦初始化就不能修改 1.list列表 列表是一种有序的集合，可以随时添加和删除其中的元素。 首先列表中有很多的方法，利用help（list）可以进行查看 如何访问列表的值： 访问列表的值需要通过下角标 列表的定义： 弱数
jQuery判断一个元素是否为另一个元素的子元素(或者其本身)
weixin_30462049的博客
07-23 246
写了比较简单的jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的两个扩展： //判断:当前元素是否是被筛选元素的子元素jQuery.fn.isChildOf = function(b){return (this.parents(b).length > 0);};//判断:当前元素是否是被筛选元素的子元素或者本身jQuery.fn.isChildAndSelfOf = fu...
jquery祖先、同胞、后代抓取方法
tony19890820的专栏
06-15 607
1.抓取祖先 $("#id").parent()抓取直接上层祖先 $("#id").parents()抓取所有祖先 $("#id").parentsUntil("#id2")抓取id到id2之前的标签跟控件 2.抓取同胞 $("#id").siblings() 抓取所有同胞元素。 $("#id").next() 抓取下一个直接同胞
JQuery 遍历 祖先/同胞/后代/过滤
IT诗人
09-03 378
祖先 .parent()直接父级元素 .parents()所有祖先元素 可过滤   示例：$('#id').parents('li') .parentuntil()两个给定元素之间的所有祖先元素   示例：$('#id').parentuntil('div') 同胞 .siblings() 所有同胞元素 .next()下一同胞元素 .nextall() 所有跟随的同胞元素 .nex...
Jquery表单-层级-内容-属性-子元素选择器知识点整理
11-28
- **`$("ancestor descendant")`**：选择所有作为指定祖先元素后代的元素，无论多深。 - **`$("prev + next")`**：选择紧接在另一个元素之后的元素，仅匹配一个元素。 - **`$("prev ~ siblings")`**：选择位于另一...
跟着JQuery API学Jquery 之三 筛选
10-29
在深入学习JQuery的过程中，我们经常需要根据特定的条件来选择或筛选DOM元素。JQuery作为一个强大的JavaScript库，提供了丰富的方法来简化这些操作。在本篇文章中，我们将通过JQuery API来学习如何进行DOM元素的筛选...
JQuery学习之路Part8：家族树操作(查找祖先、后代、兄弟同胞、绝对查找)【完结】
"✧treasure mountain✧"
03-09 8112
一、向上寻找 获取被选元素的直接父元素 语法：parent() 例： $(document).ready(function(){ $("span").parent(); }); 获取被选元素的所有祖先元素 语法：parents() 一路向上直到文档的根元素 (<html>) 例一： 返回所有 <span> 元素的所有祖先 $(document).ready(functi...
js后代选择器_jQuery后代选择器用法实例
weixin_35904873的博客
02-17 502
本文实例讲述了jQuery后代选择器用法。分享给大家供大家参考。具体分析如下：后代选择器匹配给定的祖先元素下用以匹配的所有后代元素。点击选择器可以查阅参考手册中所有jQuery选择器。代码实例如下:$(".mydiv span")以上代码匹配类名mydiv元素包含的span元素。两个选择器之间要用空格分隔。实例代码:脚本之家div{height:150px;width:150px;backgrou...
jquery判读是否含有子标签
u013761206的专栏
04-06 1592
// 方案一if ( ! $(this).is(':has(ul)') ) { // Code}// 方案二if ($(this).find('ul').length == 0) { // Code}
Jquery如何获取子元素
热门推荐
手掌日月摘星辰
06-20 13万+
前端面试秘籍：https://github.com/yisainan/web-interview 欢迎star Jquery获取子元素的方法有2种，分别是children()方法和find()方法。下面我们分别来使用这两种方法，看看它们有何差异。 1.children()方法：获取该元素下的直接子集元素 2.find()方法：获取该元素下的所有子集元素 分别以以下HTML代码为例：...
人工智能——归结演绎推理
weixin_33921089的博客
08-19 1471
1. 子句 1) 文字：原子谓词及其否定 定义1:任何文字的析取式称为子句 定义2：不包含任何文字的子句称为空子句，子句是永假的 2) 由子句构成的集合称为子句集，谓词公式成子句集的步骤 a) 利用等价关系消去谓词公式中的、b) 利用下列等价关系把“”移到紧靠谓词的位置上c) 重新命名变元名，使不同量词约束的变元有不同的名字 d) 消去存在量词 e) 把全称量词移到公式左边 f) 利用等价...
jQuery选择器
最新发布
等归,的博客
11-27 1252
jQuery选择器
二、jQuery选择器（一）
m0_61684063的博客
04-12 1481
二、jQuery选择器(一）
jquery 中的 parent 、parents、children、find
gztrljh
11-29 1027
parent 语法 $(selector).parent(filter) 说明 只找当前的父级，参数可选。 parents 语法 $(selector).parents(filter) 说明 只找当前的所有父级，参数可选。 children 语法 $(selector).children(filter) 说明 只找当前的子级元素，参数可选 find 语法 $(selector).find(filter) 说明 参数必填，查找所有的后代元素。 ...
html中 祖先元素 元素关系
你好牛蛙！
09-24 2114
父元素：直接包含子元素的 子元素：直接被父元素包含的 祖先元素：直接或间接包含后代的，父元素也是 后代元素：直接或间接被祖先元素包含的，子元素也是 兄弟元素：拥有相同父元素的互相叫兄弟元素 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>父子元素</title> <style type="text/css"> #d1 sp
html&css的简单了解
m0_50496669的博客
09-07 1295
html&css html： 常用的标签： div、p、ul li、ol li、h1-h6、a、span、b、u、i、input（属性text、number、password、radio、checkbox、submit、reset）、form、select>option、textarea h5(新标签）：header、nav、footer、main、section、video、audio、input（color、range、week、date） 标签的分类： 单双标签：单标签没有与之对
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小智RE0

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值