JQuery：复杂选择器（层级选择器、属性选择器、基本过滤器、表单属性选择器）

最新推荐文章于 2022-11-16 17:04:56 发布

平安1113

最新推荐文章于 2022-11-16 17:04:56 发布

阅读量872

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/qq_41221628/article/details/104758874

版权

本文详细介绍了JQuery的复杂选择器，包括层级选择器（如A B, A>B, A+B, A~B）、属性选择器（如[属性名], [属性名=值], [属性名*=值]）以及基本过滤器和表单属性选择器的用法，通过代码示例展示了如何有效地选取和操作DOM元素。" 102389776,8666065,Android多媒体播放：音频与视频指南,"['Android开发', '移动开发', 'Android多媒体', '音频处理', '视频处理']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery的复杂选择器

1.1 层级选择器

A B 获得A元素内部的所有B元素。子子孙孙
A>B 获得A元素下面的所有B子元素。儿子
A+B 获得A元素同级下一个B元素。二弟
A~B 获得A元素同级之后的所有B元素。所有弟弟

代码示例：

<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
<script>
			$(function(){
   
				//1、获取id为main的span标签 内 所有的div标签
				var span1 = $("#main div");
				alert(span1.text());
				//2、获取id为main的span标签 内 子元素div标签
				var span2 = $("#main>div");
				alert(span2.text());
				//3、获取id为main的span标签 后 第一个div兄弟标签
				var span3 = $("#main+div");
				alert(span3.text());
				//4、获取id为main的span标签 后 所有的div兄弟标签
				var span4 = $("#main~div");
				alert(span4.text());
			});
		</script>
	</head>
	<body>
		<span id="main">
			<div>id=main孩子1，</div>
			<div>id=main孩子2，</div>
			<div>id=main孩子3，</div>
			<span>
				<div>id=main孙子，</div>
			</span>
		</span>
		<div>id=main二弟，</div>
		<span>
			<div>啥也不是</div>
		</span>
		<div>id=main三弟，</div> 
	</body>