W3CSchool闯关笔记(JQuery)

 <script>

 $(document).ready(function(){

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第一关

 <script>

 $(document).ready(function() {

     $("button").addClass("animated bounce");

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第二关

 <script>

 $(document).ready(function() {

 $("button").addClass("animated bounce");

 $(".well").addClass("animated shake");

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第三关

 <script>

 $(document).ready(function() {

 $("button").addClass("animated bounce");

 $(".well").addClass("animated shake");

 $("#target3").addClass("fadeOut");

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第四关

 <script>

 $(document).ready(function() {

 $("button").addClass("animated bounce");

 $(".well").addClass("animated shake");

 $("#target3").addClass("fadeOut");

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第五关

 <script>

 $(document).ready(function() {

     $("button").addClass("animated");

     $(".btn").addClass("shake");

     $("#target1").addClass("btn-primary");

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第六关

 <script>

 $(document).ready(function() {

 $("button").removeClass("btn-default");

 $(".well").addClass("animated shake");

 $("#target3").addClass("animated fadeOut");

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第七关

 <script>

 $(document).ready(function() {

 $("#target1").css("color","red");

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第八关

 <script>

 $(document).ready(function() {

 $("#target1").css("color", "red");

 $("#target1").prop("disabled",true);

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第九关

 <script>

 $(document).ready(function() {

 $("#target1").css("color", "red");

 $("#target4").html("<em>#target4</em>");

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第十关

 <script>

 $(document).ready(function() {

 $("#target1").css("color", "red");

 $("#target1").prop("disabled", true);

 $("#target4").remove();

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第十一关

 <script>

 $(document).ready(function() {

 $("#target1").css("color", "red");

 $("#target1").prop("disabled", true);

 $("#target4").remove();

 $("#target2").appendTo("#right-well");

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第十二关

 <script>

 $(document).ready(function() {

 $("#target1").css("color", "red");

 $("#target1").prop("disabled", true);

 $("#target4").remove();

 $("#target2").appendTo("#right-well");

 $("#target5").clone().appendTo("#left-well");

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第十三关

 <script>

 $(document).ready(function() {

 $("#target1").css("color", "red");

 $("#target1").prop("disabled", true);

 $("#target4").remove();

 $("#target2").appendTo("#right-well");

 $("#target5").clone().appendTo("#left-well");

 $("#target1").parent().css("background-color","red");

 });

 </script>

 <!-- Only change code above this line. -->

 <body>

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

 </body>

第十四关

 <script>

 $(document).ready(function() {

 $("#target1").css("color", "red");

 $("#target1").prop("disabled", true);

 $("#target4").remove();

 $("#target2").appendTo("#right-well");

 $("#target5").clone().appendTo("#left-well");

 $("#target1").parent().css("background-color", "red");

 $("#right-well").children().css("color","orange");

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第十五关

 <script>

 $(document).ready(function() {

 $("#target1").css("color", "red");

 $("#target1").prop("disabled", true);

 $("#target4").remove();

 $("#target2").appendTo("#right-well");

 $("#target5").clone().appendTo("#left-well");

 $("#target1").parent().css("background-color", "red");

 $("#right-well").children().css("color", "orange");

 $(".target:nth-child(2)").addClass("animated bounce");

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第十六关

 <script>

 $(document).ready(function() {

 $("#target1").css("color", "red");

 $("#target1").prop("disabled", true);

 $("#target4").remove();

 $("#target2").appendTo("#right-well");

 $("#target5").clone().appendTo("#left-well");

 $("#target1").parent().css("background-color", "red");

 $("#right-well").children().css("color", "orange");

 $("#left-well").children().css("color", "green");

 $(".target:nth-child(2)").addClass("animated bounce");

 $(".target:even").addClass("animated shake");

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第十七关

 <script>

 $(document).ready(function() {

 $("#target1").css("color", "red");

 $("#target1").prop("disabled", true);

 $("#target4").remove();

 $("#target2").appendTo("#right-well");

 $("#target5").clone().appendTo("#left-well");

 $("#target1").parent().css("background-color", "red");

 $("#right-well").children().css("color", "orange");

 $("#left-well").children().css("color", "green");

 $(".target:nth-child(2)").addClass("animated bounce");

 $(".target:even").addClass("animated shake");

 $("body").addClass("animated hinge");

 });

 </script>

 <!-- Only change code above this line. -->

 <div class="container-fluid">

 <h3 class="text-primary text-center">jQuery Playground</h3>

 <div class="row">

 <div class="col-xs-6">

 <h4>#left-well</h4>

 <div class="well" id="left-well">

 <button class="btn btn-default target" id="target1">#target1</button>

 <button class="btn btn-default target" id="target2">#target2</button>

 <button class="btn btn-default target" id="target3">#target3</button>

 </div>

 </div>

 <div class="col-xs-6">

 <h4>#right-well</h4>

 <div class="well" id="right-well">

 <button class="btn btn-default target" id="target4">#target4</button>

 <button class="btn btn-default target" id="target5">#target5</button>

 <button class="btn btn-default target" id="target6">#target6</button>

 </div>

 </div>

 </div>

 </div>

第十八关

W3CSchool闯关笔记(JQuery)的更多相关文章

W3CSchool闯关笔记(Bootstrap)
该闯关内容与JS闯关衔接. 每一题的答案均在注释处, 第一关:把所有的HTML内容放在一个包含有container-fluid的class名称的div下(注意,是所有的HTML内容,style标签属于 ...
W3CSchool闯关笔记(中级脚本算法)
坚持下去,编程是一门艺术,与君共勉!!! function sumAll(arr) { var result = 0; var sn = Math.min(arr[0] , arr[1]); var ...
W3CSchool闯关笔记(初级脚本算法)
W3C后台校验代码bug很多,有的时候跑不过不一定是自己代码写得有问题,也许是网页后台的bug,可以自己把代码放到本地的html文件中跑一下看看 function reverseString(str) ...
XSS Challenges闯关笔记
前言做xss做疯了再来一个. 地址:https://xss-quiz.int21h.jp/ ,这个貌似是日本的一个安全研究员yamagata21做的. 做到第九关就跪了,而总共有二十关.一半都还没有 ...
某xss挑战赛闯关笔记
0x0 前言在sec-news发现先知上师傅monika发了一个xss挑战赛的闯关wp([巨人肩膀上的矮子]XSS挑战之旅---游戏通关攻略(更新至18关)https://xianzhi.aliyu ...
W3CSchool实战闯关笔记（JavaScript）
//handsome /** *ugly **/ 第一关注释 // 举例 var myName; // Define myName below this line 第二关声明变量 // Setup v ...
The Python Challenge 闯关笔记
The Python Challenge : http://www.pythonchallenge.com/ Level 0: 看提示图片中为2**38,计算值为274877906944. Hint: ...
网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 本文讲描述, 如何在网页端实现一个仿微信 ...
《JavaScript 闯关记》
为何写作此课程 stone 主要负责基于 Web 的企业内部管理系统的开发,虽然能够熟练地使用 JavaScript,但随着对 JavaScript 的理解越来越深,才发现自己尚未掌握其精髓. 201 ...

随机推荐

Linux调整日期时间
Linux日期不准确,要更改 Linux 系统整个系统范围的时区可以使用如下命令: sudo rm -f /etc/localtime sudo ln -s /usr/share/zoneinfo/A ...
Linux(Ubunt)使用日记------常用软件汇总(不定时更新)
整理总结日常Ubuntu中使用的一些软件,事实证明使用Linux真的会让人的欲望变小有个能用的就不错啦,不要调三捡四解压类 Unzip | unzip -O CP936 files Unrar ra ...
定时任务调度工作（学习记录二）timer定时函数的用法
schedule的四种用法: 1.schedule(task,time) 参数: task----所安排的任务 time----执行任务的时间作用: 在时间等于或超过time的时候执行且仅执行一次t ...
DAY24、面向对象
一.复习继承1.父类:在类后()中写父类们2.属性查找顺序:自己->()左侧的父类->依次往右类推3.抽离:先定义子类,由子类的共性抽离出父类派生:父类已经创建,通过父类再去派生子类4. ...
bat脚本基本命令和格式
bat脚本 --莫非 BAT脚本与shell脚本区别 Shell脚本使用Linux/Unix下的命令,一般文件开头以#号来告诉系统这个脚本需要什么解释器来执行(如:#!/bin/bash采用bash而 ...
adb push 中文路径文件名丢失后缀
adb 的一个BUG. 今天刷机的时候,用以下命令多次 push 安装包到手机: adb push F:\刷机\Nexus5\lineage-14.1-20170314-nightly-hammerh ...
win10 nginx
下载后运行报错 nginx: [emerg] bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in ...
spring AOP的概念和使用
指路:http://www.cnblogs.com/liujiayun/p/5912628.html AOP的来源:OOP在一些重复代码的使用中,代码冗余比较多,利用AOP可以改善. 通过编写切面和切 ...
vue路由实现多视图的单页应用
多视图的单页应用:在一个页面中实现多个页面不同切换,url也发生相应变化. router-view结合this.$router.push("/pickUp")实现,效果如下: 当点 ...
axios 或 ajax 请求文件
axios 或 ajax 请求文件 axios({ url: path + '/monitor/exportPicture' + '?access_token=' + getToken(), meth ...

W3CSchool闯关笔记(JQuery)

W3CSchool闯关笔记(JQuery)的更多相关文章

随机推荐

热门专题