2.3.2 层次选择器:
如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素和兄弟元素等,
那么层次选择器是一个非常好的选择。
层次选择器
选择器 描述 返回 示例
$("ancdestor descendant") 选取ancestor元素里的所有
descendant(后代)元素 集合元素 $("div span")选取<div>里的所有的<span>元素
node2:/var/www/html#cat a24.html
<div>但愿<span>人长久</span>，千里<span>共婵娟</span></div>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="a24.js"></script>
node2:/var/www/html#cat a24.js
var $aa=$("div span");//选取<div>里的所有的<span>元素
console.log($aa);
导航至 http://192.168.137.3/a24.html
{…}
0: <span>
1: <span>
context: HTMLDocument http://192.168.137.3/a24.html
length: 2
prevObject: Object { 0: HTMLDocument http://192.168.137.3/a24.html, context: HTMLDocument http://192.168.137.3/a24.html, length: 1 }
selector: "div span"
__proto__: Object { jquery: "2.2.2", constructor: n(), length: 0, … }
a24.js:2:1
$("parent > child") 选取parent元素下的child(子)元素, 与$("ancestor descendant")
有区别,$("ancestor descendant") 选择的是后代元素
集合元素 $("div > span")选取<div>元素下元素名是<span>的子元素
$('prev+next') 选取紧接在prev 元素后的next元素 集合元素
$('.one +div')选取class为one的下一个<div>元素
node2:/var/www/html#cat a26.html
<p class="one"><div>aaa</div></p>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="a26.js"></script>
node2:/var/www/html#cat a26.js
var $aa=$('.one + div');
console.log($aa);
继续沿用刚才例子中的HTML和CSS代码,然后用层次选择器来对网页中的<div>,<span>等元素进行操作,示例如表2-5所示:
改变<body>内所有<div>的背景色
node2:/var/www/html#cat a27.html
<body>
<div>aaa</div>
<div>bbb</div>
</body>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="a27.js"></script>
node2:/var/www/html#cat a27.html
<body>
<div>aaa</div>
<div>bbb</div>
</body>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="a27.js"></script>
node2:/var/www/html#cat a27.js
$('body div')
.css("background","#bbffaa");
改变<body>内子<div>元素的背景色
node2:/var/www/html#cat a27.js
$('body > div')
.css("background","#4384ba");
改为class为one的下一个<div>元素背景色
node2:/var/www/html#cat a28.html
<p class="one"><div>测试111</div><p>
<p class="two"><div>测试222</div><p>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="a27.js"></script>
node2:/var/www/html#cat a28.js
$('one+div')
.css("background","#eeeeee")
node2:/var/www/html#
node2:/var/www/html#cat a28.js
$('.one+div')
.css("background","#4384ba")
node2:/var/www/html#
node2:/var/www/html#cat a28.html
<p class="one"><div>测试111</div><div>aaaa</div><p>
<p class="two"><div>测试222</div><div>bbbb</div><p>
<p class="one"><div>测试333</div><div>cccc</div><p>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="a28.js"></script>
改为class为one的下一个<div>元素背景色
改变id为two的元素后面的所有div兄弟元素的背景色