jQuery选择器

最新推荐文章于 2023-04-23 17:34:04 发布

夏灿y

最新推荐文章于 2023-04-23 17:34:04 发布

阅读量93

点赞数

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

本文链接：https://blog.csdn.net/xia_zai_ya/article/details/103910690

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery初学

选择器（二）

层次选择器

本元素下“所有”的次级元素选择器
$(" box span")
/* 注意，表示box下的所有的span元素，包括孙子辈及更后辈*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="box">
			<span >1</span>
			<span>2</span>
		</div>
	
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#box span").css("color","red") //二个span元素都会获取到
			})
		</script>
	</body>
</html>

本元素下儿子辈元素选择器
$("#box>li")
/* 注意，只会寻找到儿子辈*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="box">
			<li>1</li>
			
			<ul>
				<li>132</li>
				<li>
					<ul>
						<li>132</li>
					</ul>
				</li>
			</ul>
		</div>
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#box>li").css("color","red")  //这里只选择到了儿子辈中的li，孙子辈li未被选择到.
			})
		</script>
	</body>
</html>

本元素的同级下一个元素选择器
$("#box+span")
/注意，是同级兄弟辈的下一个元素/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="box">
			<p>11</p>
		</div>
		<span>222</span>
		<span>333</span>
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#box+span").css("color","red")  //选择到了222的span元素
			})
		</script>
	</body>
</html>

本元素的同级下所有的元素选择器
$("#box~span")
/注意，是同级兄弟辈的下所有元素/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="box">
			<p>11</p>
		</div>
		<span>222</span>
		<span>333</span>
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#box~span").css("color","red")  //选择到了box后的所有span元素也就是222，333
			})
		</script>
	</body>
</html>