W3CSchool闯关笔记(JQuery)

 1 <script>
 2 $(document).ready(function(){
 3 });
 4 </script>
 5 
 6 <!-- Only change code above this line. -->
 7 
 8 <div class="container-fluid">
 9 <h3 class="text-primary text-center">jQuery Playground</h3>
10 <div class="row">
11 <div class="col-xs-6">
12 <h4>#left-well</h4>
13 <div class="well" id="left-well">
14 <button class="btn btn-default target" id="target1">#target1</button>
15 <button class="btn btn-default target" id="target2">#target2</button>
16 <button class="btn btn-default target" id="target3">#target3</button>
17 </div>
18 </div>
19 <div class="col-xs-6">
20 <h4>#right-well</h4>
21 <div class="well" id="right-well">
22 <button class="btn btn-default target" id="target4">#target4</button>
23 <button class="btn btn-default target" id="target5">#target5</button>
24 <button class="btn btn-default target" id="target6">#target6</button>
25 </div>
26 </div>
27 </div>
28 </div>

第一关

 1 <script>
 2 $(document).ready(function() {
 3     $("button").addClass("animated bounce");
 4 });
 5 </script>
 6 
 7 <!-- Only change code above this line. -->
 8 
 9 <div class="container-fluid">
10 <h3 class="text-primary text-center">jQuery Playground</h3>
11 <div class="row">
12 <div class="col-xs-6">
13 <h4>#left-well</h4>
14 <div class="well" id="left-well">
15 <button class="btn btn-default target" id="target1">#target1</button>
16 <button class="btn btn-default target" id="target2">#target2</button>
17 <button class="btn btn-default target" id="target3">#target3</button>
18 </div>
19 </div>
20 <div class="col-xs-6">
21 <h4>#right-well</h4>
22 <div class="well" id="right-well">
23 <button class="btn btn-default target" id="target4">#target4</button>
24 <button class="btn btn-default target" id="target5">#target5</button>
25 <button class="btn btn-default target" id="target6">#target6</button>
26 </div>
27 </div>
28 </div>
29 </div>

第二关

 1 <script>
 2 $(document).ready(function() {
 3 $("button").addClass("animated bounce");
 4 $(".well").addClass("animated shake");
 5 });
 6 </script>
 7 
 8 <!-- Only change code above this line. -->
 9 
10 <div class="container-fluid">
11 <h3 class="text-primary text-center">jQuery Playground</h3>
12 <div class="row">
13 <div class="col-xs-6">
14 <h4>#left-well</h4>
15 <div class="well" id="left-well">
16 <button class="btn btn-default target" id="target1">#target1</button>
17 <button class="btn btn-default target" id="target2">#target2</button>
18 <button class="btn btn-default target" id="target3">#target3</button>
19 </div>
20 </div>
21 <div class="col-xs-6">
22 <h4>#right-well</h4>
23 <div class="well" id="right-well">
24 <button class="btn btn-default target" id="target4">#target4</button>
25 <button class="btn btn-default target" id="target5">#target5</button>
26 <button class="btn btn-default target" id="target6">#target6</button>
27 </div>
28 </div>
29 </div>
30 </div>

第三关

 1 <script>
 2 $(document).ready(function() {
 3 $("button").addClass("animated bounce");
 4 $(".well").addClass("animated shake");
 5 $("#target3").addClass("fadeOut");
 6 });
 7 </script>
 8 
 9 <!-- Only change code above this line. -->
10 
11 <div class="container-fluid">
12 <h3 class="text-primary text-center">jQuery Playground</h3>
13 <div class="row">
14 <div class="col-xs-6">
15 <h4>#left-well</h4>
16 <div class="well" id="left-well">
17 <button class="btn btn-default target" id="target1">#target1</button>
18 <button class="btn btn-default target" id="target2">#target2</button>
19 <button class="btn btn-default target" id="target3">#target3</button>
20 </div>
21 </div>
22 <div class="col-xs-6">
23 <h4>#right-well</h4>
24 <div class="well" id="right-well">
25 <button class="btn btn-default target" id="target4">#target4</button>
26 <button class="btn btn-default target" id="target5">#target5</button>
27 <button class="btn btn-default target" id="target6">#target6</button>
28 </div>
29 </div>
30 </div>
31 </div>

第四关

 1 <script>
 2 $(document).ready(function() {
 3 $("button").addClass("animated bounce");
 4 $(".well").addClass("animated shake");
 5 $("#target3").addClass("fadeOut");
 6 });
 7 </script>
 8 
 9 <!-- Only change code above this line. -->
10 
11 <div class="container-fluid">
12 <h3 class="text-primary text-center">jQuery Playground</h3>
13 <div class="row">
14 <div class="col-xs-6">
15 <h4>#left-well</h4>
16 <div class="well" id="left-well">
17 <button class="btn btn-default target" id="target1">#target1</button>
18 <button class="btn btn-default target" id="target2">#target2</button>
19 <button class="btn btn-default target" id="target3">#target3</button>
20 </div>
21 </div>
22 <div class="col-xs-6">
23 <h4>#right-well</h4>
24 <div class="well" id="right-well">
25 <button class="btn btn-default target" id="target4">#target4</button>
26 <button class="btn btn-default target" id="target5">#target5</button>
27 <button class="btn btn-default target" id="target6">#target6</button>
28 </div>
29 </div>
30 </div>
31 </div>

第五关

 1 <script>
 2 $(document).ready(function() {
 3     $("button").addClass("animated");
 4     $(".btn").addClass("shake");
 5     $("#target1").addClass("btn-primary");
 6 
 7 });
 8 </script>
 9 
10 <!-- Only change code above this line. -->
11 
12 <div class="container-fluid">
13 <h3 class="text-primary text-center">jQuery Playground</h3>
14 <div class="row">
15 <div class="col-xs-6">
16 <h4>#left-well</h4>
17 <div class="well" id="left-well">
18 <button class="btn btn-default target" id="target1">#target1</button>
19 <button class="btn btn-default target" id="target2">#target2</button>
20 <button class="btn btn-default target" id="target3">#target3</button>
21 </div>
22 </div>
23 <div class="col-xs-6">
24 <h4>#right-well</h4>
25 <div class="well" id="right-well">
26 <button class="btn btn-default target" id="target4">#target4</button>
27 <button class="btn btn-default target" id="target5">#target5</button>
28 <button class="btn btn-default target" id="target6">#target6</button>
29 </div>
30 </div>
31 </div>
32 </div>

第六关

 1 <script>
 2 $(document).ready(function() {
 3 $("button").removeClass("btn-default");
 4 $(".well").addClass("animated shake");
 5 $("#target3").addClass("animated fadeOut");
 6 
 7 });
 8 </script>
 9 
10 <!-- Only change code above this line. -->
11 
12 <div class="container-fluid">
13 <h3 class="text-primary text-center">jQuery Playground</h3>
14 <div class="row">
15 <div class="col-xs-6">
16 <h4>#left-well</h4>
17 <div class="well" id="left-well">
18 <button class="btn btn-default target" id="target1">#target1</button>
19 <button class="btn btn-default target" id="target2">#target2</button>
20 <button class="btn btn-default target" id="target3">#target3</button>
21 </div>
22 </div>
23 <div class="col-xs-6">
24 <h4>#right-well</h4>
25 <div class="well" id="right-well">
26 <button class="btn btn-default target" id="target4">#target4</button>
27 <button class="btn btn-default target" id="target5">#target5</button>
28 <button class="btn btn-default target" id="target6">#target6</button>
29 </div>
30 </div>
31 </div>
32 </div>

第七关

 1 <script>
 2 $(document).ready(function() {
 3 $("#target1").css("color","red");
 4 });
 5 </script>
 6 
 7 <!-- Only change code above this line. -->
 8 
 9 <div class="container-fluid">
10 <h3 class="text-primary text-center">jQuery Playground</h3>
11 <div class="row">
12 <div class="col-xs-6">
13 <h4>#left-well</h4>
14 <div class="well" id="left-well">
15 <button class="btn btn-default target" id="target1">#target1</button>
16 <button class="btn btn-default target" id="target2">#target2</button>
17 <button class="btn btn-default target" id="target3">#target3</button>
18 </div>
19 </div>
20 <div class="col-xs-6">
21 <h4>#right-well</h4>
22 <div class="well" id="right-well">
23 <button class="btn btn-default target" id="target4">#target4</button>
24 <button class="btn btn-default target" id="target5">#target5</button>
25 <button class="btn btn-default target" id="target6">#target6</button>
26 </div>
27 </div>
28 </div>
29 </div>

第八关

 1 <script>
 2 $(document).ready(function() {
 3 $("#target1").css("color", "red");
 4 $("#target1").prop("disabled",true);
 5 
 6 });
 7 </script>
 8 
 9 <!-- Only change code above this line. -->
10 
11 <div class="container-fluid">
12 <h3 class="text-primary text-center">jQuery Playground</h3>
13 <div class="row">
14 <div class="col-xs-6">
15 <h4>#left-well</h4>
16 <div class="well" id="left-well">
17 <button class="btn btn-default target" id="target1">#target1</button>
18 <button class="btn btn-default target" id="target2">#target2</button>
19 <button class="btn btn-default target" id="target3">#target3</button>
20 </div>
21 </div>
22 <div class="col-xs-6">
23 <h4>#right-well</h4>
24 <div class="well" id="right-well">
25 <button class="btn btn-default target" id="target4">#target4</button>
26 <button class="btn btn-default target" id="target5">#target5</button>
27 <button class="btn btn-default target" id="target6">#target6</button>
28 </div>
29 </div>
30 </div>
31 </div>

第九关

 1 <script>
 2 $(document).ready(function() {
 3 $("#target1").css("color", "red");
 4 $("#target4").html("<em>#target4</em>");
 5 });
 6 </script>
 7 
 8 <!-- Only change code above this line. -->
 9 
10 <div class="container-fluid">
11 <h3 class="text-primary text-center">jQuery Playground</h3>
12 <div class="row">
13 <div class="col-xs-6">
14 <h4>#left-well</h4>
15 <div class="well" id="left-well">
16 <button class="btn btn-default target" id="target1">#target1</button>
17 <button class="btn btn-default target" id="target2">#target2</button>
18 <button class="btn btn-default target" id="target3">#target3</button>
19 </div>
20 </div>
21 <div class="col-xs-6">
22 <h4>#right-well</h4>
23 <div class="well" id="right-well">
24 <button class="btn btn-default target" id="target4">#target4</button>
25 <button class="btn btn-default target" id="target5">#target5</button>
26 <button class="btn btn-default target" id="target6">#target6</button>
27 </div>
28 </div>
29 </div>
30 </div>

第十关

 1 <script>
 2 $(document).ready(function() {
 3 $("#target1").css("color", "red");
 4 $("#target1").prop("disabled", true);
 5 $("#target4").remove();
 6 
 7 });
 8 </script>
 9 
10 <!-- Only change code above this line. -->
11 
12 <div class="container-fluid">
13 <h3 class="text-primary text-center">jQuery Playground</h3>
14 <div class="row">
15 <div class="col-xs-6">
16 <h4>#left-well</h4>
17 <div class="well" id="left-well">
18 <button class="btn btn-default target" id="target1">#target1</button>
19 <button class="btn btn-default target" id="target2">#target2</button>
20 <button class="btn btn-default target" id="target3">#target3</button>
21 </div>
22 </div>
23 <div class="col-xs-6">
24 <h4>#right-well</h4>
25 <div class="well" id="right-well">
26 <button class="btn btn-default target" id="target4">#target4</button>
27 <button class="btn btn-default target" id="target5">#target5</button>
28 <button class="btn btn-default target" id="target6">#target6</button>
29 </div>
30 </div>
31 </div>
32 </div>

第十一关

 1 <script>
 2 $(document).ready(function() {
 3 $("#target1").css("color", "red");
 4 $("#target1").prop("disabled", true);
 5 $("#target4").remove();
 6 $("#target2").appendTo("#right-well");
 7 });
 8 </script>
 9 
10 <!-- Only change code above this line. -->
11 
12 <div class="container-fluid">
13 <h3 class="text-primary text-center">jQuery Playground</h3>
14 <div class="row">
15 <div class="col-xs-6">
16 <h4>#left-well</h4>
17 <div class="well" id="left-well">
18 <button class="btn btn-default target" id="target1">#target1</button>
19 <button class="btn btn-default target" id="target2">#target2</button>
20 <button class="btn btn-default target" id="target3">#target3</button>
21 </div>
22 </div>
23 <div class="col-xs-6">
24 <h4>#right-well</h4>
25 <div class="well" id="right-well">
26 <button class="btn btn-default target" id="target4">#target4</button>
27 <button class="btn btn-default target" id="target5">#target5</button>
28 <button class="btn btn-default target" id="target6">#target6</button>
29 </div>
30 </div>
31 </div>
32 </div>

第十二关

 1 <script>
 2 $(document).ready(function() {
 3 $("#target1").css("color", "red");
 4 $("#target1").prop("disabled", true);
 5 $("#target4").remove();
 6 $("#target2").appendTo("#right-well");
 7 $("#target5").clone().appendTo("#left-well");
 8 });
 9 </script>
10 
11 <!-- Only change code above this line. -->
12 
13 <div class="container-fluid">
14 <h3 class="text-primary text-center">jQuery Playground</h3>
15 <div class="row">
16 <div class="col-xs-6">
17 <h4>#left-well</h4>
18 <div class="well" id="left-well">
19 <button class="btn btn-default target" id="target1">#target1</button>
20 <button class="btn btn-default target" id="target2">#target2</button>
21 <button class="btn btn-default target" id="target3">#target3</button>
22 </div>
23 </div>
24 <div class="col-xs-6">
25 <h4>#right-well</h4>
26 <div class="well" id="right-well">
27 <button class="btn btn-default target" id="target4">#target4</button>
28 <button class="btn btn-default target" id="target5">#target5</button>
29 <button class="btn btn-default target" id="target6">#target6</button>
30 </div>
31 </div>
32 </div>
33 </div>

第十三关

 1 <script>
 2 $(document).ready(function() {
 3 $("#target1").css("color", "red");
 4 $("#target1").prop("disabled", true);
 5 $("#target4").remove();
 6 $("#target2").appendTo("#right-well");
 7 $("#target5").clone().appendTo("#left-well");
 8 $("#target1").parent().css("background-color","red");
 9 });
10 </script>
11 
12 <!-- Only change code above this line. -->
13 
14 <body>
15 <div class="container-fluid">
16 <h3 class="text-primary text-center">jQuery Playground</h3>
17 <div class="row">
18 <div class="col-xs-6">
19 <h4>#left-well</h4>
20 <div class="well" id="left-well">
21 <button class="btn btn-default target" id="target1">#target1</button>
22 <button class="btn btn-default target" id="target2">#target2</button>
23 <button class="btn btn-default target" id="target3">#target3</button>
24 </div>
25 </div>
26 <div class="col-xs-6">
27 <h4>#right-well</h4>
28 <div class="well" id="right-well">
29 <button class="btn btn-default target" id="target4">#target4</button>
30 <button class="btn btn-default target" id="target5">#target5</button>
31 <button class="btn btn-default target" id="target6">#target6</button>
32 </div>
33 </div>
34 </div>
35 </div>
36 </body>

第十四关

 1 <script>
 2 $(document).ready(function() {
 3 $("#target1").css("color", "red");
 4 $("#target1").prop("disabled", true);
 5 $("#target4").remove();
 6 $("#target2").appendTo("#right-well");
 7 $("#target5").clone().appendTo("#left-well");
 8 $("#target1").parent().css("background-color", "red");
 9 $("#right-well").children().css("color","orange");
10 });
11 </script>
12 
13 <!-- Only change code above this line. -->
14 
15 <div class="container-fluid">
16 <h3 class="text-primary text-center">jQuery Playground</h3>
17 <div class="row">
18 <div class="col-xs-6">
19 <h4>#left-well</h4>
20 <div class="well" id="left-well">
21 <button class="btn btn-default target" id="target1">#target1</button>
22 <button class="btn btn-default target" id="target2">#target2</button>
23 <button class="btn btn-default target" id="target3">#target3</button>
24 </div>
25 </div>
26 <div class="col-xs-6">
27 <h4>#right-well</h4>
28 <div class="well" id="right-well">
29 <button class="btn btn-default target" id="target4">#target4</button>
30 <button class="btn btn-default target" id="target5">#target5</button>
31 <button class="btn btn-default target" id="target6">#target6</button>
32 </div>
33 </div>
34 </div>
35 </div>

第十五关

 1 <script>
 2 $(document).ready(function() {
 3 $("#target1").css("color", "red");
 4 $("#target1").prop("disabled", true);
 5 $("#target4").remove();
 6 $("#target2").appendTo("#right-well");
 7 $("#target5").clone().appendTo("#left-well");
 8 $("#target1").parent().css("background-color", "red");
 9 $("#right-well").children().css("color", "orange");
10 $(".target:nth-child(2)").addClass("animated bounce");
11 });
12 </script>
13 
14 <!-- Only change code above this line. -->
15 
16 <div class="container-fluid">
17 <h3 class="text-primary text-center">jQuery Playground</h3>
18 <div class="row">
19 <div class="col-xs-6">
20 <h4>#left-well</h4>
21 <div class="well" id="left-well">
22 <button class="btn btn-default target" id="target1">#target1</button>
23 <button class="btn btn-default target" id="target2">#target2</button>
24 <button class="btn btn-default target" id="target3">#target3</button>
25 </div>
26 </div>
27 <div class="col-xs-6">
28 <h4>#right-well</h4>
29 <div class="well" id="right-well">
30 <button class="btn btn-default target" id="target4">#target4</button>
31 <button class="btn btn-default target" id="target5">#target5</button>
32 <button class="btn btn-default target" id="target6">#target6</button>
33 </div>
34 </div>
35 </div>
36 </div>

第十六关

 1 <script>
 2 $(document).ready(function() {
 3 $("#target1").css("color", "red");
 4 $("#target1").prop("disabled", true);
 5 $("#target4").remove();
 6 $("#target2").appendTo("#right-well");
 7 $("#target5").clone().appendTo("#left-well");
 8 $("#target1").parent().css("background-color", "red");
 9 $("#right-well").children().css("color", "orange");
10 $("#left-well").children().css("color", "green");
11 $(".target:nth-child(2)").addClass("animated bounce");
12 $(".target:even").addClass("animated shake");
13 });
14 </script>
15 
16 <!-- Only change code above this line. -->
17 
18 <div class="container-fluid">
19 <h3 class="text-primary text-center">jQuery Playground</h3>
20 <div class="row">
21 <div class="col-xs-6">
22 <h4>#left-well</h4>
23 <div class="well" id="left-well">
24 <button class="btn btn-default target" id="target1">#target1</button>
25 <button class="btn btn-default target" id="target2">#target2</button>
26 <button class="btn btn-default target" id="target3">#target3</button>
27 </div>
28 </div>
29 <div class="col-xs-6">
30 <h4>#right-well</h4>
31 <div class="well" id="right-well">
32 <button class="btn btn-default target" id="target4">#target4</button>
33 <button class="btn btn-default target" id="target5">#target5</button>
34 <button class="btn btn-default target" id="target6">#target6</button>
35 </div>
36 </div>
37 </div>
38 </div>

第十七关

 1 <script>
 2 $(document).ready(function() {
 3 $("#target1").css("color", "red");
 4 $("#target1").prop("disabled", true);
 5 $("#target4").remove();
 6 $("#target2").appendTo("#right-well");
 7 $("#target5").clone().appendTo("#left-well");
 8 $("#target1").parent().css("background-color", "red");
 9 $("#right-well").children().css("color", "orange");
10 $("#left-well").children().css("color", "green");
11 $(".target:nth-child(2)").addClass("animated bounce");
12 $(".target:even").addClass("animated shake");
13 $("body").addClass("animated hinge");
14 });
15 </script>
16 
17 <!-- Only change code above this line. -->
18 
19 <div class="container-fluid">
20 <h3 class="text-primary text-center">jQuery Playground</h3>
21 <div class="row">
22 <div class="col-xs-6">
23 <h4>#left-well</h4>
24 <div class="well" id="left-well">
25 <button class="btn btn-default target" id="target1">#target1</button>
26 <button class="btn btn-default target" id="target2">#target2</button>
27 <button class="btn btn-default target" id="target3">#target3</button>
28 </div>
29 </div>
30 <div class="col-xs-6">
31 <h4>#right-well</h4>
32 <div class="well" id="right-well">
33 <button class="btn btn-default target" id="target4">#target4</button>
34 <button class="btn btn-default target" id="target5">#target5</button>
35 <button class="btn btn-default target" id="target6">#target6</button>
36 </div>
37 </div>
38 </div>
39 </div>

第十八关