jQ学习之层级选择器的测试

Posted 2022-04-12 zhang188660586

一：层级选择器 主要有以下几种：

a b: 即选择a中所有的b元素

a>b：既选择 a中 所有处在第一级且属性为b的孩子

a+b：选择 与a相邻的（在a后面）的b元素

a~b：选择 a的且属性为b的兄弟（不包括a）

 

HTML代码：

 1     <input type="button" id="btn1" value="选择body中所有的div元素" />
 2         <input type="button" id="btn2" value="选择body中第一级的孩子" />
 3         <input type="button" id="btn3" value="选择id为two的元素的下一个元素" />
 4         <input type="button" id="btn4" value="选择id为one的所有兄弟元素" />
 5         <hr />
 6         <div id="one">
 7             <div class="mini">
 8                 111
 9             </div>
10         </div>
11 
12         <div id="two">
13             <div class="mini">
14                 222
15             </div>
16             <div class="mini">
17                 333
18             </div>
19         </div>
20 
21         <div id="three">
22             <div class="mini">
23                 444
24             </div>
25             <div class="mini">
26                 555
27             </div>
28             <div class="mini">
29                 666
30             </div>
31         </div>
32 
33         <span id="four">
34 
35         </span>

 

jQ代码：

 1 //定义一个页面加载函数
 2                 $(function()
 3                     //为按钮1设置点击事件
 4                     $("#btn1").click(function()
 5                         //注意方法
 6                     $("body div").css("backgroundColor","pink");
 7                     )
 8                     $("#btn2").click(function()
 9                         //注意方法
10                         $("body>div").css("backgroundColor","pink");
11                     )
12                     $("#btn3").click(function()
13                         //注意方法
14                         $("#two+div").css("backgroundColor","pink");
15                     )
16                     $("#btn4").click(function()
17                         //注意方法,注意参数,所有指的是包含body内部所有的元素
18                         $("#one~*").css("backgroundColor","pink");
19                     )
20                     
21                 )

 

CSS代码：

 1  div,span,p 
 2     width:140px;
 3     height:140px;
 4     margin:5px;
 5     background:#aaa;
 6     border:#000 1px solid;
 7     float:left;
 8     font-size:17px;
 9     font-family:Verdana;
10   
11    div.mini  
12     width:55px;
13     height:55px;
14     background-color: #aaa;
15     font-size:12px;
16    
17   div.hide  
18     display:none;
19