W3CSchool闯关笔记(JQuery)

 

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

第一关

 1 <script>
 2 $(document).ready(function() {
 3     $("button").addClass("animated bounce");
 4 });
 5 script>
 6 
 7 
 8 
 9 <div class="container-fluid">
10 <h3 class="text-primary text-center">jQuery Playgroundh3>
11 <div class="row">
12 <div class="col-xs-6">
13 <h4>#left-wellh4>
14 <div class="well" id="left-well">
15 <button class="btn btn-default target" id="target1">#target1button>
16 <button class="btn btn-default target" id="target2">#target2button>
17 <button class="btn btn-default target" id="target3">#target3button>
18 div>
19 div>
20 <div class="col-xs-6">
21 <h4>#right-wellh4>
22 <div class="well" id="right-well">
23 <button class="btn btn-default target" id="target4">#target4button>
24 <button class="btn btn-default target" id="target5">#target5button>
25 <button class="btn btn-default target" id="target6">#target6button>
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 
 9 
10 <div class="container-fluid">
11 <h3 class="text-primary text-center">jQuery Playgroundh3>
12 <div class="row">
13 <div class="col-xs-6">
14 <h4>#left-wellh4>
15 <div class="well" id="left-well">
16 <button class="btn btn-default target" id="target1">#target1button>
17 <button class="btn btn-default target" id="target2">#target2button>
18 <button class="btn btn-default target" id="target3">#target3button>
19 div>
20 div>
21 <div class="col-xs-6">
22 <h4>#right-wellh4>
23 <div class="well" id="right-well">
24 <button class="btn btn-default target" id="target4">#target4button>
25 <button class="btn btn-default target" id="target5">#target5button>
26 <button class="btn btn-default target" id="target6">#target6button>
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 
10 
11 <div class="container-fluid">
12 <h3 class="text-primary text-center">jQuery Playgroundh3>
13 <div class="row">
14 <div class="col-xs-6">
15 <h4>#left-wellh4>
16 <div class="well" id="left-well">
17 <button class="btn btn-default target" id="target1">#target1button>
18 <button class="btn btn-default target" id="target2">#target2button>
19 <button class="btn btn-default target" id="target3">#target3button>
20 div>
21 div>
22 <div class="col-xs-6">
23 <h4>#right-wellh4>
24 <div class="well" id="right-well">
25 <button class="btn btn-default target" id="target4">#target4button>
26 <button class="btn btn-default target" id="target5">#target5button>
27 <button class="btn btn-default target" id="target6">#target6button>
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 
10 
11 <div class="container-fluid">
12 <h3 class="text-primary text-center">jQuery Playgroundh3>
13 <div class="row">
14 <div class="col-xs-6">
15 <h4>#left-wellh4>
16 <div class="well" id="left-well">
17 <button class="btn btn-default target" id="target1">#target1button>
18 <button class="btn btn-default target" id="target2">#target2button>
19 <button class="btn btn-default target" id="target3">#target3button>
20 div>
21 div>
22 <div class="col-xs-6">
23 <h4>#right-wellh4>
24 <div class="well" id="right-well">
25 <button class="btn btn-default target" id="target4">#target4button>
26 <button class="btn btn-default target" id="target5">#target5button>
27 <button class="btn btn-default target" id="target6">#target6button>
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 
11 
12 <div class="container-fluid">
13 <h3 class="text-primary text-center">jQuery Playgroundh3>
14 <div class="row">
15 <div class="col-xs-6">
16 <h4>#left-wellh4>
17 <div class="well" id="left-well">
18 <button class="btn btn-default target" id="target1">#target1button>
19 <button class="btn btn-default target" id="target2">#target2button>
20 <button class="btn btn-default target" id="target3">#target3button>
21 div>
22 div>
23 <div class="col-xs-6">
24 <h4>#right-wellh4>
25 <div class="well" id="right-well">
26 <button class="btn btn-default target" id="target4">#target4button>
27 <button class="btn btn-default target" id="target5">#target5button>
28 <button class="btn btn-default target" id="target6">#target6button>
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 
11 
12 <div class="container-fluid">
13 <h3 class="text-primary text-center">jQuery Playgroundh3>
14 <div class="row">
15 <div class="col-xs-6">
16 <h4>#left-wellh4>
17 <div class="well" id="left-well">
18 <button class="btn btn-default target" id="target1">#target1button>
19 <button class="btn btn-default target" id="target2">#target2button>
20 <button class="btn btn-default target" id="target3">#target3button>
21 div>
22 div>
23 <div class="col-xs-6">
24 <h4>#right-wellh4>
25 <div class="well" id="right-well">
26 <button class="btn btn-default target" id="target4">#target4button>
27 <button class="btn btn-default target" id="target5">#target5button>
28 <button class="btn btn-default target" id="target6">#target6button>
29 div>
30 div>
31 div>
32 div>

第七关

 1 <script>
 2 $(document).ready(function() {
 3 $("#target1").css("color","red");
 4 });
 5 script>
 6 
 7 
 8 
 9 <div class="container-fluid">
10 <h3 class="text-primary text-center">jQuery Playgroundh3>
11 <div class="row">
12 <div class="col-xs-6">
13 <h4>#left-wellh4>
14 <div class="well" id="left-well">
15 <button class="btn btn-default target" id="target1">#target1button>
16 <button class="btn btn-default target" id="target2">#target2button>
17 <button class="btn btn-default target" id="target3">#target3button>
18 div>
19 div>
20 <div class="col-xs-6">
21 <h4>#right-wellh4>
22 <div class="well" id="right-well">
23 <button class="btn btn-default target" id="target4">#target4button>
24 <button class="btn btn-default target" id="target5">#target5button>
25 <button class="btn btn-default target" id="target6">#target6button>
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 
10 
11 <div class="container-fluid">
12 <h3 class="text-primary text-center">jQuery Playgroundh3>
13 <div class="row">
14 <div class="col-xs-6">
15 <h4>#left-wellh4>
16 <div class="well" id="left-well">
17 <button class="btn btn-default target" id="target1">#target1button>
18 <button class="btn btn-default target" id="target2">#target2button>
19 <button class="btn btn-default target" id="target3">#target3button>
20 div>
21 div>
22 <div class="col-xs-6">
23 <h4>#right-wellh4>
24 <div class="well" id="right-well">
25 <button class="btn btn-default target" id="target4">#target4button>
26 <button class="btn btn-default target" id="target5">#target5button>
27 <button class="btn btn-default target" id="target6">#target6button>
28 div>
29 div>
30 div>
31 div>

第九关

 1 <script>
 2 $(document).ready(function() {
 3 $("#target1").css("color", "red");
 4 $("#target4").html("#target4");
 5 });
 6 script>
 7 
 8 
 9 
10 <div class="container-fluid">
11 <h3 class="text-primary text-center">jQuery Playgroundh3>
12 <div class="row">
13 <div class="col-xs-6">
14 <h4>#left-wellh4>
15 <div class="well" id="left-well">
16 <button class="btn btn-default target" id="target1">#target1button>
17 <button class="btn btn-default target" id="target2">#target2button>
18 <button class="btn btn-default target" id="target3">#target3button>
19 div>
20 div>
21 <div class="col-xs-6">
22 <h4>#right-wellh4>
23 <div class="well" id="right-well">
24 <button class="btn btn-default target" id="target4">#target4button>
25 <button class="btn btn-default target" id="target5">#target5button>
26 <button class="btn btn-default target" id="target6">#target6button>
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 
11 
12 <div class="container-fluid">
13 <h3 class="text-primary text-center">jQuery Playgroundh3>
14 <div class="row">
15 <div class="col-xs-6">
16 <h4>#left-wellh4>
17 <div class="well" id="left-well">
18 <button class="btn btn-default target" id="target1">#target1button>
19 <button class="btn btn-default target" id="target2">#target2button>
20 <button class="btn btn-default target" id="target3">#target3button>
21 div>
22 div>
23 <div class="col-xs-6">
24 <h4>#right-wellh4>
25 <div class="well" id="right-well">
26 <button class="btn btn-default target" id="target4">#target4button>
27 <button class="btn btn-default target" id="target5">#target5button>
28 <button class="btn btn-default target" id="target6">#target6button>
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 
11 
12 <div class="container-fluid">
13 <h3 class="text-primary text-center">jQuery Playgroundh3>
14 <div class="row">
15 <div class="col-xs-6">
16 <h4>#left-wellh4>
17 <div class="well" id="left-well">
18 <button class="btn btn-default target" id="target1">#target1button>
19 <button class="btn btn-default target" id="target2">#target2button>
20 <button class="btn btn-default target" id="target3">#target3button>
21 div>
22 div>
23 <div class="col-xs-6">
24 <h4>#right-wellh4>
25 <div class="well" id="right-well">
26 <button class="btn btn-default target" id="target4">#target4button>
27 <button class="btn btn-default target" id="target5">#target5button>
28 <button class="btn btn-default target" id="target6">#target6button>
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 
12 
13 <div class="container-fluid">
14 <h3 class="text-primary text-center">jQuery Playgroundh3>
15 <div class="row">
16 <div class="col-xs-6">
17 <h4>#left-wellh4>
18 <div class="well" id="left-well">
19 <button class="btn btn-default target" id="target1">#target1button>
20 <button class="btn btn-default target" id="target2">#target2button>
21 <button class="btn btn-default target" id="target3">#target3button>
22 div>
23 div>
24 <div class="col-xs-6">
25 <h4>#right-wellh4>
26 <div class="well" id="right-well">
27 <button class="btn btn-default target" id="target4">#target4button>
28 <button class="btn btn-default target" id="target5">#target5button>
29 <button class="btn btn-default target" id="target6">#target6button>
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 
13 
14 <body>
15 <div class="container-fluid">
16 <h3 class="text-primary text-center">jQuery Playgroundh3>
17 <div class="row">
18 <div class="col-xs-6">
19 <h4>#left-wellh4>
20 <div class="well" id="left-well">
21 <button class="btn btn-default target" id="target1">#target1button>
22 <button class="btn btn-default target" id="target2">#target2button>
23 <button class="btn btn-default target" id="target3">#target3button>
24 div>
25 div>
26 <div class="col-xs-6">
27 <h4>#right-wellh4>
28 <div class="well" id="right-well">
29 <button class="btn btn-default target" id="target4">#target4button>
30 <button class="btn btn-default target" id="target5">#target5button>
31 <button class="btn btn-default target" id="target6">#target6button>
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 
14 
15 <div class="container-fluid">
16 <h3 class="text-primary text-center">jQuery Playgroundh3>
17 <div class="row">
18 <div class="col-xs-6">
19 <h4>#left-wellh4>
20 <div class="well" id="left-well">
21 <button class="btn btn-default target" id="target1">#target1button>
22 <button class="btn btn-default target" id="target2">#target2button>
23 <button class="btn btn-default target" id="target3">#target3button>
24 div>
25 div>
26 <div class="col-xs-6">
27 <h4>#right-wellh4>
28 <div class="well" id="right-well">
29 <button class="btn btn-default target" id="target4">#target4button>
30 <button class="btn btn-default target" id="target5">#target5button>
31 <button class="btn btn-default target" id="target6">#target6button>
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 
15 
16 <div class="container-fluid">
17 <h3 class="text-primary text-center">jQuery Playgroundh3>
18 <div class="row">
19 <div class="col-xs-6">
20 <h4>#left-wellh4>
21 <div class="well" id="left-well">
22 <button class="btn btn-default target" id="target1">#target1button>
23 <button class="btn btn-default target" id="target2">#target2button>
24 <button class="btn btn-default target" id="target3">#target3button>
25 div>
26 div>
27 <div class="col-xs-6">
28 <h4>#right-wellh4>
29 <div class="well" id="right-well">
30 <button class="btn btn-default target" id="target4">#target4button>
31 <button class="btn btn-default target" id="target5">#target5button>
32 <button class="btn btn-default target" id="target6">#target6button>
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 
17 
18 <div class="container-fluid">
19 <h3 class="text-primary text-center">jQuery Playgroundh3>
20 <div class="row">
21 <div class="col-xs-6">
22 <h4>#left-wellh4>
23 <div class="well" id="left-well">
24 <button class="btn btn-default target" id="target1">#target1button>
25 <button class="btn btn-default target" id="target2">#target2button>
26 <button class="btn btn-default target" id="target3">#target3button>
27 div>
28 div>
29 <div class="col-xs-6">
30 <h4>#right-wellh4>
31 <div class="well" id="right-well">
32 <button class="btn btn-default target" id="target4">#target4button>
33 <button class="btn btn-default target" id="target5">#target5button>
34 <button class="btn btn-default target" id="target6">#target6button>
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 
18 
19 <div class="container-fluid">
20 <h3 class="text-primary text-center">jQuery Playgroundh3>
21 <div class="row">
22 <div class="col-xs-6">
23 <h4>#left-wellh4>
24 <div class="well" id="left-well">
25 <button class="btn btn-default target" id="target1">#target1button>
26 <button class="btn btn-default target" id="target2">#target2button>
27 <button class="btn btn-default target" id="target3">#target3button>
28 div>
29 div>
30 <div class="col-xs-6">
31 <h4>#right-wellh4>
32 <div class="well" id="right-well">
33 <button class="btn btn-default target" id="target4">#target4button>
34 <button class="btn btn-default target" id="target5">#target5button>
35 <button class="btn btn-default target" id="target6">#target6button>
36 div>
37 div>
38 div>
39 div>

第十八关

 

转载于:https://www.cnblogs.com/edward-life/p/10765211.html