2.3.2 层次选择器:

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兄弟元素的背景色