jQuery选择器之层级选择器

最新推荐文章于 2024-06-08 19:06:47 发布

原创最新推荐文章于 2024-06-08 19:06:47 发布 · 463 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery

Jquery 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了jQuery中的四种层级选择器：祖先后代选择器、父子选择器、前后选择器和前兄弟选择器，通过示例代码展示了它们的用法和用途。

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

前言：层级选择器主要分为四种，分别是祖先后代选择器、父子选择器、前后选择器、前兄弟选择器，下面，我将会分别从他们的表示、用途、例子来分别说明这四种选择器。
写在前面，我下面举例子时js代码和css代码都是另起一个页面的，所以大家要运行代码的时候注意一下。

1. 祖先后代选择器

（1）说明
表示：$(“ancestor descendant”)
用途：选取ancestor元素后所有的descendant元素，例如：$(“form input”))表示选取form元素所包含的所有的input子元素。
（2）运行代码
Html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>test_50</title>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/out_50.js" ></script>
		<style>
			form{border: 2px red solid;}
		</style>
	</head>
	<body>
		<form>
			用户名：<input name="username" type="text" value="" /><br />
			密码：<input name="psw" type="password" /><br />
		</form>
		表单的外框：<input name="none" />
	</body>
</html>

Js页面

$(document).ready(function  () {
	$("form input").css("border","2px dotted green");
});

（3）运行结果

2. 父子选择器

（1）说明
表示：$(“parent > child”)
用途：选取parent元素后所有的直属child元素，例如：$("#main >*")表示选取id为“main”的元素所包含的所有的子元素。
（2）运行代码
*Html页面 *

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>test_51</title>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/out_51.js" ></script>
		<link rel="stylesheet" href="css/test_51.css" />
	</head>
	<body>
		<span id="main">
			<div></div>
			<button>chlid</button>
			<div class="mini"></div>
			<div>
				<div class="mini"></div>
				<div class="mini"></div>
			</div>
			<div><button>grand</button></div>
			<div><span>a span <em>in</em> child</span></div>
			<span>a span in main</span>
		</span>
	</body>
</html>

Js页面

$(document).ready(function  () {
	$("#main >*").css("border","3px double red");
});

Css页面

body{
	font-size: 14px;
}
span#main{
	display: block;background: yellow;height: 110px;
}
button{
	display: block;float: left;margin: 2px;font-size: 14px;
}
div{
	width: 90px;height: 90px;margin: 5px;float: left;background: #bbf;font-weight: bold;
}
div.mini{
	width: 30px;height: 30px;background: green;
}

（3）运行结果

3. 前后选择器

（1）说明
表示：$(“prev + next”)
用途：prev和next是两个同级别的元素. 选中在prev元素后面的next元素，例如：$(“#label + input”)选在id为label元素后面的input元素.如果id为label元素后面没有同级的input元素，那么这个(“#label + input”).length=0.
（2）运行代码
Html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>test_52</title>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/out_52.js" ></script>
	</head>
	<body>
		<form>
			<label>姓名：</label><input name="username" type="text" /><br />
			<label>密码：</label><input name="psw" type="password" />
		</form>
	</body>
</html>

Js页面

$(document).ready(function  () {
	$("label + input").css("border","2px dotted green");
});

（3）运行结果

4. 前兄弟选择器

**
（1）说明
表示：$(“prev ~ siblings”)
用途：匹配“prev”元素之后的所有兄弟元素；具有相同的父元素，并匹配过滤出“siblings”选择器。例如：运行代码 $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲main ~ div")选择i\dots$ ("#main ~ div").length = 0
（2）运行代码
Html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>test_53</title>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/out_53.js" ></script>
		<link rel="stylesheet" href="css/test_53.css" />
	</head>
	<body>
		<div>第一个div元素</div>
		<span id="main">一个span元素<br>id=mian</span>
		<div>第二个div元素</div>
		<p>一个p标签</p>
		<div>第三个div元素</div>
	</body>
</html>

Js页面

$(document).ready(function  () {
	$("#main ~ div").css("border","2px double blue");
})

Css页面

div,span,p{
	display: block;
	width: 90xp;
	height: 90xp;
	margin: 3px;
	background:aquamarine;
	float: left;
	font-size: 14px;
}

（3）运行结果

jQuery选择器之层级选择器

1. 祖先 后代选择器

2. 父子选择器

3. 前后选择器

4. 前兄弟选择器

1. 祖先后代选择器