2-5 jQuery选择器之层级选择器
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery选择器之层级选择器

文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。

选择器中的层级选择器就是用来处理这种关系

子元素 后代元素 兄弟元素 相邻元素

通过一个列表，对比层级选择器的区别

 仔细观察层级选择器之间还是有很多相似与不同点

  1. 层级选择器都有一个参考节点
  2. 后代选择器包含子选择器的选择的内容
  3. 一般兄弟选择器包含相邻兄弟选择的内容
  4. 相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下

任务

在代码编辑器中第37行填写相应代码

 $('div > p')

在代码编辑器中第43行填写相应代码

$('div p')

在代码编辑器中第62行填写相应代码

$(".prev + div")

在代码编辑器中第68行填写相应代码

$(".prev ~ div")

 

index.htmlimooc.css 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <link rel="stylesheet" href="imooc.css" type="text/css">
  8.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  9. </head>
  10.  
  11. <body>
  12.     <h2>子选择器与后代选择器</h2>
  13.     <div class="left">
  14.         <div class="aaron">
  15.             <p>div下的第一个p元素</p>
  16.         </div>
  17.         <div class="aaron">
  18.             <p>div下的第一个p元素</p>
  19.         </div>
  20.     </div>
  21.     <div class="right">
  22.         <div class="imooc">
  23.             <article>
  24.                 <p>div下的article下的p元素</p>
  25.             </article>
  26.         </div>
  27.         <div class="imooc">
  28.             <article>
  29.                 <p>div下的article下的p元素</p>
  30.             </article>
  31.         </div>
  32.     </div>
  33.  
  34.     <script type="text/javascript">
  35.         //子选择器
  36.         //$('div > p') 选择所有div元素里面的子元素P
  37.         ?.css("border", "1px groove red");
  38.     </script>
  39.  
  40.     <script type="text/javascript">
  41.         //后代选择器
  42.         //$('div  p') 选择所有div元素里面的p元素
  43.         ?.css("border", "1px groove red");
  44.     </script>
  45.  
  46.  
  47.     <h2>相邻兄弟选择器与一般兄弟选择器</h2>
  48.     <div class="bottom">
  49.         <div>兄弟节点div, +~选择器不能向前选择</div>
  50.         <span class="prev">选择器span元素</span>
  51.         <div>span后第一个兄弟节点div</div>
  52.         <div>兄弟节点div
  53.             <div class="small">子元素div</div>
  54.         </div>
  55.         <span>兄弟节点span,不可选</span>
  56.         <div>兄弟节点div</div>
  57.     </div>
  58.  
  59.     <script type="text/javascript">
  60.         //相邻兄弟选择器
  61.         //选取prev后面的第一个的div兄弟节点
  62.         ?.css("border", "3px groove blue");
  63.     </script>
  64.  
  65.     <script type="text/javascript">
  66.         //一般相邻选择器
  67.         //选取prev后面的所有的div兄弟节点
  68.         ?.css("border", "3px groove blue");
  69.     </script>
  70.  
  71. </body>
  72.  
  73. </html>
  1. .left,
  2.     .right {
  3.         width: 300px;
  4.         height: 120px;
  5.     }
  6.  
  7.     .left div,
  8.     .right div {
  9.         width: 100px;
  10.         height: 90px;
  11.         padding: 5px;
  12.         margin: 5px;
  13.         float: left;
  14.         background: #bbffaa;
  15.         border: 1px solid #ccc;
  16.     }
  17.  
  18.     .bottom {
  19.         width: 800px;
  20.     }
  21.  
  22.     .bottom div,
  23.     .bottom span {
  24.         display: block;
  25.         width: 80px;
  26.         height: 80px;
  27.         margin: 5px;
  28.         background: #bbffaa;
  29.         float: left;
  30.         font-size: 14px;
  31.     }
  32.     .bottom .small {
  33.         width      : 60px;
  34.         height     : 25px;
  35.         font-size  : 12px;
  36.         background : #fab;
  37.     }
下一节