前端学习，jQuery实战总结

开始学习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>

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>

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>

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=