jquery选择器--层级选择器

最新推荐文章于 2022-02-26 12:02:53 发布
最新推荐文章于 2022-02-26 12:02:53 发布
阅读量252 收藏
点赞数
分类专栏： Callback
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40332952/article/details/104399306
版权
jquery选择器–层级选择器
层级选择器

在这里插入图片描述

层级选择器总结

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(总结:儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(总结:儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(总结:紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(总结:兄弟)

代码演示
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script src="js/jquery-1.8.3.js"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("body div").css("background-color","#000000");
				});
				$("#btn2").click(function(){
					$("body>div").css("background-color","#0000FF");
				});
				$("#btn3").click(function(){
					$("#two+div").css("background-color","#008000");
				});
				$("#btn4").click(function(){
					$("#one~div").css("background-color","#FF0000");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="选择body中的所有的div元素"/>
		<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
		<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
		<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

页面展示

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)

选择body中的所有的div元素

$("#btn1").click(function(){
	$("body div").css("background-color","#000000");
});

页面展示效果
在这里插入图片描述

parent > child : 在给定的父元素下匹配所有的子元素(总结:儿子)

选择body中的第一级的孩子

$("#btn2").click(function(){
	$("body>div").css("background-color","#0000FF");
});

页面展示
在这里插入图片描述

prev + next: 匹配所有紧接在 prev 元素后的 next 元素(总结:紧挨着的，同桌)同桌只有一个

选择id为two的元素的下一个元素

$("#btn3").click(function(){
	$("#two+div").css("background-color","#008000");
});

页面展示
在这里插入图片描述

prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(总结:兄弟)兄弟可能有多个

选择id为one的所有的兄弟元素

$("#btn4").click(function(){
	$("#one~div").css("background-color","#FF0000");
});

页面展示
在这里插入图片描述

ginger_mr
关注
专栏目录
Jquery的总结一（Jquery的多种选择器）
qq_56248592的博客
12-19 1501
jquery的三大重点（选择器,事件，效果）
jQuery 之 层次选择器
z_x_Qiang的博客
12-31 320
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;06_层次选择器&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;
jQuery层级选择器（常用）
越努力越幸运的博客
06-27 465
jQuery层级选择器（常用） 层级有四种： 某元素A的所有后代元素B用空格表示（例：form input表示form中的所有input标签） 某元素A的子元素B用>表示（例：form>input仅表示form中的input子元素） 某元素A下边的元素B用+表示（例：label>input表示前面是label的input元素） 某元素A后边的兄弟元素B用~表示（例：form~input表示与form互为兄弟元素的input元素） <!DOCTYPE html> <ht
jQuery选择器之层级选择器
weixin_30342209的博客
09-17 62
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" h...
jquery 层级选择器
weixin_34343000的博客
10-15 85
关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :任何有效的选择器。 child: 用来筛选子元素的选择器 $(function(){ $("ul.myul > li").css("border","2px solid red"); //将ul带有.myul选择...
Jquery表单-层级-内容-属性-子元素选择器知识点整理
11-28
通过以上这些知识点的学习，可以更好地理解如何使用JQuery选择器来操作和处理DOM中的元素，从而提高Web开发效率。掌握这些选择器不仅有助于编写更高效的代码，还能帮助开发者更好地理解JQuery的工作原理。
jQuery层级选择器用法分析
10-24
我们通常使用jQuery选择器来快速应用样式或操作这些元素。本文将详细介绍jQuery中常见的四种层级选择器：子元素选择器、后代元素选择器、紧邻同辈元素选择器和相邻同辈元素选择器。 子元素选择器（>）是用于选择...
jQuery层级选择器实例代码
10-20
这对于学习和实践jQuery选择器具有较高的参考价值。 需要注意的是，由于示例代码中存在一些OCR技术造成的文字识别错误，我们在理解时需要将其错误的文字调整为正确的用法。例如，“”应该更正为“”，这样的调整...
jquery选择器之层级过滤选择器详解
10-26
本文将深入探讨jQuery选择器中的层级过滤选择器，这些选择器能够帮助开发者根据层级关系来选取页面中的特定元素。在开始之前，需要明确层级选择器是通过父子、兄弟等层级关系来定位页面元素的一种方式。 在jQuery中...
JQuery选择器——层级选择器
weixin_34261739的博客
11-09 102
JQuery层级选择器1 全选择器 $("*") 又名*选择器，在JQuery中选择文档页面中的元素，通配符*给所有元素设置默认边距2 在.getElementsByTagName()传递*可以获取所有元素3 getElementById的兼容性 getElementById的参数在IE8及较低的版本中不区分大小写 IE...
jQuery二级、三级城市选择器
05-19
jQuery二级、三级城市选择器
JQuery实现子级选择器
weixin_34279579的博客
06-08 546
效果图如下： HTML代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
jQuery层级选择器
HuashirenYty的博客
10-26 185
selector2.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>层级选择器</title> <link rel="stylesheet" type="text/css" href="../css/style.cs...
jQuery层次选择器
u013313232的博客
10-13 178
jQuery层次选择器 <script type="text/javascript"> $(document).ready(function(){ //1.选择 body 内的所有 div 元素 $("#btn1").click(function(){ $("body div").css("background", "#bbffaa"); }); //2.在 body 内, 选择div子元素 $("#btn2").click(functio.
jQuery中的层次选择器
weixin_43350001的博客
02-26 2563
jQuery中的层次选择器 常见的层次关系包括：父子、后代、兄弟、相邻。 $(“M N”) 等价于 $(M).find(N)；表示选择后代。 $(“M>N”) 等价于 $(M).children(N)；表示选择子代。 $(“M~N”) 等价于 $(M).nextAll(N)；表示在兄弟之中选择后面所有兄弟。 $(“M+N”) 等价于 $(M).next(N)；表示在兄弟之中只选择后面那个兄弟。 HTML文件代码： <!DOCTYPE html> <html lang="en"
jQuery(二)——jQuery选择器之层级选择器
HangHug_L的博客
01-30 431
层级选择器 ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素 parent > child 子元素选择器：在给定的父元素下匹配所有的子元素 prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 相邻的为 next 的元素 (兄弟关系的相邻) prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 兄弟 元素 <!DOCTYPE html> <html lang="en"> <h
jquery层级选择器
醉殇姒若梦遗年 ツ的博客
03-20 2391
层级选择器 层级共包括后代元素、子元素、相邻元素和同级元素四种。 后代选择器 后代选择器$(‘ancestor descendant’)选择给定的祖先元素的所有后代元素，并返回集合元素 &lt;div id="test"&gt; &lt;div&gt; &lt;div&gt;1&lt;/div&gt; &lt;div&gt;2&lt;/d..
jQuery选择器与层级操作详解
jQuery还提供了多种层级选择器，如后代选择器（` `）、子元素选择器（`>`）、相邻兄弟选择器（`+`）和后续兄弟选择器（`~`），它们允许你基于元素之间的关系进行更精确的选择。例如： ```html <p class="child">...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值