jQuery群组选择器与关系选择器

一、群组选择器

//群组选择器可以一次选择任意多个不同类型的html元素
$("选择器,选择器,……")
//上面的"选择器"是id名、class名、元素名等

二、关系选择器

//关系选择器是根据元素之间的关系来选择对应元素的
1、$("x y") 	这是后代选择器,指选择x元素所包含的所有y元素
2、$("x>y") 	这是子代选择器,指选择x元素所包含的所有儿子辈y元素(即所有第1级y元素)
3、$("x~y") 	这是兄弟选择器,指选择x元素后面所有同级或同辈的y元素(不包括x元素)
4、$("x+y") 	这是相邻选择器,指选择x元素后面相邻的同级或同辈的第一个y元素(不包括x元素)

群组选择器 实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
<!-- 先引入jquery库 -->
<script src="js/3.2.1jquery.min.js"></script>
</head>

<body>
	<h3>h3标题</h3>
	
	<p class="p1">p段落1</p>
	
	<span>span行内元素</span>

	
	<script>
		//用群组选择器将h3元素与、class名为“p1”的元素与span元素的字体都改为红色
		$("h3,.p1,span").css({"color":"#f00"});
	</script>

</body>
</html>

群组选择器 效果图:

关系选择器 实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
<!-- 先引入jquery库 -->
<script src="js/3.2.1jquery.min.js"></script>
</head>

<body>
		
	<div id="div1">
		<p class="pp">p段落</p>
		<span>span行内元素</span>
		<p>p段落</p>
		<span>span行内元素</span>
		<ul>
			<li><span>span行内元素</span></li>
			<li>无序列表</li>
		</ul>
	</div>
	<hr>
	<div id="div2">
		<p class="pp">p段落</p>
		<span>span行内元素</span>
		<p>p段落</p>
		<span>span行内元素</span>
		<ul>
			<li><span>span行内元素</span></li>
			<li>无序列表</li>
		</ul>
	</div>
	
	<script>
		//后代选择器与子代选择器的区别
		$("#div1 span").css({"color":"#f00"});//后代选择器
		$("#div2>span").css({"color":"#f00"});//子代选择器
		
		//兄弟选择器与相邻选择器的区别
		$("#div1 .pp~span").css({"fontSize":"30px"});//兄弟选择器
		$("#div2 .pp+span").css({"fontSize":"30px"});//相邻选择器
	</script>

</body>
</html>

关系选择器 效果图:

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:
顶部