Level selector jQ learning test

A: hierarchical selectors are the following:

ab: selecting all the elements a, b

a> b: selecting either a first stage at all and is a property of children b

a + b: selecting a neighboring element b (at a later)

a ~ b: selecting a property of b and brother (excluding a)

 

HTML code:

. 1      < INPUT type = "Button" ID = "btn1" value = "select all div element body"  /> 
2          < INPUT type = "Button" ID = "btn2" value = "choose body in a first stage of child "  /> 
. 3          < INPUT type =" Button " id =" btn3 " value =" select id to the next element two element "  /> 
. 4          < INPUT type =" Button " id =" btn4 " value =" select id is one of the elements of all the brothers "  />
 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 Code:

1  // define a page load function 
2                  $ ( function () {
 3                      // a button click event 1 Set 
4                      $ ( "# btn1"). The Click ( function () {
 5                          // Note Method 
6                      $ ( "body div ") .css (" the backgroundColor "," Pink " );
 . 7                      })
 . 8                      $ (" # btn2. ") the Click ( function () {
 . 9                          // Note method 
10                          $ (" body> div. ") CSS (" backgroundColor "," Pink " );
11                     })
12                     . $ ( "# btn3") the Click ( function () {
 13 is                          // Note Method 
14                          $ ( "# + TWO div") CSS ( "the backgroundColor", "Pink." );
 15                      })
 16                      $ ( "# btn4 ") .click ( function () {
 . 17                          // Note that the method, parameters noted, all refer to all the elements comprising the internal body 
18 is                          $ (" # ~ * One ") CSS. (" the backgroundColor "," Pink " );
 19                      })
 20 is                      
21 is                  })

 

CSS code:

 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   }