jQuery_2">开始学习jQuery和准备工作

现在让我们开始学习最流行的JavaScript框架jQuery吧。至于JavaScript，不用担心，我们很快就会涉及到它。

在我们开始学习使用jQuery之前，需要在HTML文件中添加一些代码。

任务：首先，在页面顶部添加一行script元素，然后在下一行写上结束符。

浏览器会运行script里所有的Javascript，包括jQuery。

在你的script元素里，添加这段代码：$(document).ready(function() {到你的script中，然后在下一行用});结束它。

接下来我们将学习如何写function，需要注意的是，function里面的代码会在浏览器加载页面后立即运行。

这很关键，因为在没有document ready function以前，你的代码可能会在HTML渲染完成之前就执行了，这样会产生bug。

<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>

jQueryHTML_51">jQuery使用选择器获取HTML元素

现在，我们已经了解了document ready function。

接下来，让我们开始写第一个jQuery语句，所有jQuery方法都是以$开头，通常称为 美元符号，或者简称为bling。

jQuery通过选择器来选择一个HTML元素，然后对元素做些改变。

任务：例如，要让所有的button元素有弹回效果，只要把这段代码写在document ready function里面就可以了：

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

注意，我们已经在后台为你引入了jQuery库和Animate.css库，你可以在编辑器里直接使用这两个库，从而通过jQuery给button元素添加Animate.css的bounce回弹动画效果。

另外，请务必使用$("button").addClass("animated bounce");，而不是$('button').addClass("animated bounce");，因为单引号选择器无法通过我们的测试。

<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>

jQueryaddClassclass_100">jQuery使用addClass()方法给元素加class

你已经了解我们是怎么给所有的button做弹回效果了吗？

我们用$("button")来选择按钮，然后用.addClass("animated bounce")给按钮加CSS class。

你只需要用jQuery的.addClass()方法，就可以给元素加class了。

任务：首先，让我们使用$(".well")来获取所有带有wellclass的div元素。
注意，像使用CSS声明一样，你需要在class的名称前面添加一个.
然后使用jQuery的.addClass()方法添加2个class：animated和shake。

例如，你可以将下面的代码写在document ready function里，给所有具有text-primaryclass的元素添加animated和shake：

$(".text-primary").addClass("animated shake");

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
  });
</script>

<!-- 请只修改这条注释以上的代码 -->

<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>

jQueryid_149">jQuery根据id属性来获取元素

你还可以根据id属性来获取元素。

任务：首先，使用$("#target3")选择器来选择id为target3的button元素。
注意，就像CSS声明一样，在id的名称前加上一个#。
然后使用jQuery的.addClass()方法来添加animated和fadeOutclass。

以下是给id为target6的button元素添加fade out效果的代码：

$("#target6").addClass("animated fadeOut")

<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>

jQuery_196">删除没有必要的jQuery方法语句

这些动画最初是很cool的，但现在显得有点散乱。

任务：在你的document ready function里删掉那三条jQuery方法语句，只保留document ready function。

<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>

jQuery_236">使用jQuery选择器操作同一元素

现在你已经了解了三种获取元素的方式：type选择器$("button")、class选择器$(".btn")、id选择器$("#target1")。

尽管只用.addClass()就可以添加不同的class，但我们还是来尝试用三种不同的方式给同一元素添加class吧。

任务：使用.addClass()方法和上述三种jQuery选择器，分别给同一元素添加class：
给所有type为button的元素添加animatedclass。
给所有class为.btn的按钮添加shakeclass。
给所有id为#target1的按钮添加btn-primaryclass。

注意：

你应该每次只获取一个元素并只添加一个class。最终，三个选择器会分别将animated，shake和btn-primary三个class添加到#target1元素中。

<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>

jQueryHTMLclass_286">使用jQuery删除HTML元素的class

你可以通过jQuery的addClass()方法给元素添加class，同样的，也可以通过jQuery的removeClass()方法删除元素的class。

以下是对button元素执行的操作：

$("#target2").removeClass("btn-default");

任务：让我们来把所有button元素上的btn-defaultclass移除掉。

<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("animated fadeOut");
$("button").removeClass("btn-default");

});
</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>

jQueryHTMLCSS_333">使用jQuery改变HTML元素的CSS样式

我们可以直接通过jQuery来改变HTML元素的CSS样式。

jQuery有一个叫做.css()的方法，能让你改变元素的CSS样式。

以下代码显示如何将颜色改变成蓝色：

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

这跟一般的CSS语法有点不同，因为这里的CSS属性和值是在引号内的，并且用逗号分开，而不是冒号。

任务：删除你的jQuery选择器，把document ready function清空。
选择target1并将其颜色变成红色。

<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>

jQuery_381">使用jQuery设置元素不可用

你还可以用jQuery改变HTML元素的非CSS的属性。比如，你可以禁用按钮。

当你把按钮设置成禁用以后，按钮会变灰并且不能点击。

jQuery有一个.prop()的方法，可以让你来调整元素的属性。

以下代码显示如何禁用所有按钮：

$("button").prop("disabled", true);

任务：来尝试只让target1按钮禁用。

<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>

jQuery_430">使用jQuery改变元素中的文本

jQuery不仅可以改变HTML元素开始和结束标签之间的文本，还可以改变HTML元素标记本身。

jQuery有一个.html()方法，可以让你在元素中添加HTML标签和文字，而元素中之前的内容都会被方法中的内容所替换掉。

以下代码显示如何重写和强调标题文本（使用em标签）：

$("h3").html("<em>jQuery Playground</em>");

jQuery 还有一个类似的方法叫.text()，它只能改变文本但不能添加标签。换句话说，这个方法只会把任何传进来的HTML标签当成你想替换现有内容的文本。

任务：强调id为target4按钮里的文本。

<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>

jQueryHTML_479">使用jQuery删除一个HTML元素

现在让我们用jQuery从页面中删除一个HTML元素。

jQuery 有一个.remove()的方法，可以彻底删除一个HTML元素。

任务：使用.remove()方法来删除页面中的target4元素。

<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>

jQueryappendToHTML_522">jQuery使用appendTo()移动HTML元素

现在让我们尝试把元素从一个div里移动到另外一个div里。

jQuery有一个appendTo()方法，可以让你把选中的HTML元素附加到其他元素中。

比如，我们想让target4从right-well移动到left-well，我们用以下代码：

$("#target4").appendTo("#left-well");

任务：尝试把target2元素从left-well移动到right-well。

<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>

jQueryclone_570">jQuery使用clone()方法复制元素

除了移动元素，你还可以将元素从一个地方复制到另一个地方。

jQuery有一个clone()方法，可以复制元素。

例如，如果我们想把target2从left-well复制到right-well，我们用以下代码：

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

你有没有注意到上面是将两个jQuery方法合在一起使用了？这种叫方法链function chaining，它是jQuery的一种便捷方式。

任务:复制target5元素并将其附加到left-well。

<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>

.clong()只是负责克隆，与.append()结合使用链，才是将克隆的插入到某个地方

jQueryparent_624">jQuery使用parent()操作父级元素

每个HTML元素都有一个parent元素，并从中继承属性。

例如，你的jQuery Playground中的h3元素的父元素是<div class="container-fluid">，<div class="container-fluid">的父元素是body。

jQuery有一个parent()方法，可以允许你访问选定元素的父元素。

以下例子显示如何使用parent()设定left-well元素的父元素的背景色为蓝色：

$("#left-well").parent().css("background-color", "blue")

任务：尝试设定#target1元素的父元素的背景色为红色。

<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","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>

jQuerychildren_678">jQuery使用children()操作子级元素

许多HTML元素都有children(子元素)，子元素从父元素那里继承属性。

例如，每个HTML元素都是body的子元素，你的jQuery Playground中的h3元素是<div class="container-fluid">的子元素。

jQuery有一个children()方法，可以让你访问选定元素的子元素。

以下例子显示如何使用children()方法设置left-well元素的子元素的文本颜色为蓝色：

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

任务：尝试设置#right-well元素的所有子元素的文本颜色为橙色。

<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>

jQuerytargetnthchildn_CSS_731">jQuery使用target:nth-child(n) CSS选择器获取子元素

你已经看到了用jQuery选择器通过id属性来获取元素的是非常方便的，但你不可能总是写这么整齐的id。

幸运的是，jQuery有一些另外的技巧来获取正确的元素。

jQuery用CSS选择器来获取元素，target:nth-child(n)CSS选择器允许你通过目标类或元素类型选择目标元素的所有子元素。

以下代码显示如何给jQuery Playground中的每个井中（left well和right well）的第三个子元素添加bounce类：

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

任务：尝试给每个井中的第二个子元素添加bounce类，使用target类来获取目标元素的子元素。

<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>
=

:nth-child(n)属于其父元素的第n个子元素

jQuery_787">jQuery使用选择器操作偶数索引元素

你还可以获取所有偶数元素。

以下代码显示如何通过targetclass获取所有奇数元素，并给它们添加class：

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

注意，jQuery里的索引是从0开始的，也就意味着会与直觉相反：:odd选择的是第2、4、6……个元素，因为索引是1、3、5……。

任务：尝试选择所有的偶数元素（索引为0、2、4……），并给它们添加animated和shakeclass。

<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>

jQuery_841">使用jQuery修改整个页面

我们已经进行了这么久的jQuery Playground，是时候结束它了。

jQuery也可以获取body元素。

以下代码显示如何让整个body有淡出效果：

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

任务：让我们做一些更为激动人心的事情，给body元素添加animated 和hingeclass。

<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>