Foundation selector jQ learning test

One: the basis of selection parameters mainly include: id, tag name, class, *, there is a plurality of selectors together as a test screening criteria

The main test content for the value of each button

html code:

. 1  < INPUT type = "Button" ID = "btn1" value = "selected as an element one of the"  /> 
2          < INPUT type = "Button" ID = "btn2" value = "select a style of mini element"  /> 
3          < INPUT type = "Button" ID = "btn3" value = "select all div element"  /> 
. 4          < INPUT type = "Button" ID = "btn4" value = "select all elements"  /> 
5          <input type="button" id="btn5"value = "select id is two and the pattern is a mini element"  /> 
. 6          < HR /> 
. 7          < div id = "One" > 
. 8              < div class = "mini" > 
. 9                  111
 10              </ div > 
. 11          </ div > 
12 is  
13 is          < div ID = "TWO" > 
14              < div class = "Mini" > 
15                  222
 16              </ div >
17             <div class="mini">
18                 333
19             </div>
20         </div>
21 
22         <div id="three">
23             <div class="mini">
24                 444
25             </div>
26             <div class="mini">
27                 555
28             </div>
29             <div class="mini">
30                 666
31             </div>
32         </div>
33 
34         <span id="four">
35 
36         </span>

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   }

JS code:

1  // define a page load event 
2                  $ ( function () {
 3                      // a button click event 1 Set 
4                      $ ( "# btn1"). The Click ( function () {
 5                          // Note Method 
6                          $ ( "# One ") .css (" the backgroundColor "," Pink " );
 . 7                      })
 . 8                      $ (" # btn2. ") the Click ( function () {
 . 9                          // Note method 
10                          . $ (" Mini. ") CSS (" the backgroundColor "," Pink " );
 . 11                      })
 12 is                     $ ( "# btn3") the Click (. function () {
 13 is                          // Note Method 
14                          $ ( "div") CSS ( "the backgroundColor", "Pink." );
 15                      })
 16                      $ ( "# btn4"). the Click ( function () {
 . 17                          // Note that the method, parameters noted, all refer to all the elements comprising the internal body 
18 is                          $ ( "*") CSS ( "the backgroundColor", "Pink." );
 . 19                      })
 20 is                      $ ( "# btn5"). the Click ( function () {
 21 is                          // Note parameters, when a plurality of filter conditions with time ','Dividing the selection criteria 
22                         $("#two,.mini").css("backgroundColor","pink");
23                     })
24                 })

Foundation selector jQ learning test

Guess you like