2019年-08月-02日
0
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>关系选择器 效果图：
