二（JQuery）

1.现在让我们开始学习最流行的JavaScript库jQuery吧，不用担心JavaScript本身，我们稍后会提到它。
在开始学习使用jQuery之前，我们需要加一些代码到HTML文件中。
首先在页面顶端增加一行script元素，然后写上结束符。
浏览器会运行script 里所有的Javascript，包括jQuery。

在你的script里，添加这个方法:$(document).ready(function() {到你的script，接下来用});结束这个方法
接下来我们来学习如何写方法，方法里面的代码会被浏览器加载。
在没有document ready function以前，你的代码会在HTML没有渲染完成就执行，这样会产生bug。
<script>
$(document).ready(
function()
{
}
);
</script>

2.现在我们已经知道 document ready function的用法了.
现在让我们开始写第一个jQuery语句，所有jQuery方法都是由$开始的，通常称作为 美元符号，或者简称为bling。
jQuery通过选择器来选择一个元素的，然后操作元素做些改变

举个例子，要让所有的按钮做弹回效果，只要把这段代码写在document ready function里面就可以了。
$("button").addClass("animated bounce");

我们已经在后台为你引入了jQuery库和Animate.css库，这样你就可以在编辑器里直接可以使用这两个库，进而通过jQuery给button元素添加bounce回弹动画效果。
<script>
$(document).ready(function() {
});
$("button").addClass("animated bounce");
</script>

3.你看到我们是怎么给所有的按钮做弹回效果了吗？我们用 $("button")来选中按钮，然后用.addClass("animated bounce")给按钮加CSS class。
你只需要用jQuery的.addClass()方法，就可以给元素加class了

首先，我们来使用$(".well")来获取所有class为well的div元素。
仔细想想为什么需要在well前面添加.
然后使用jQuery的.addClass()方法添加2个class：animated、shake。

例如，你可以将下面的代码写在document ready function里：
$(".text-primary").addClass("animated shake");
上面的代码给所有class为text-primary 的元素添加shake class
<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>

4.还可以根据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("animated fadeout");
});
</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>

5.现在你已经了解了3种选择器：元素选择器：$("button")、class选择器：$(".btn")、id选择器：$("#target1")

尽管用.addClass()这种方式就可以加不同的class，不过还是让我们尝试用不同的方式给元素添加class吧。

用上面介绍的jQuery选择器和addClass()方法：
给所有type为button的元素添加animated class。
给所有class为.btn的按钮添加shake class。
给所有id为#target1的按钮添加btn-primary class。

<script>
$(document).ready(function() {
$("button").addClass("animated");
$(".btn").addClass("shake");
$("#target1").addClass("btn-primary");
});
</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>

6.你可以通过jQuery的addClass()方法给元素添加class,也可以通过jQueryremoveClass()方法去掉元素上的class。
像下面这样：
$("#target2").removeClass("btn-default");
$("#target2").removeClass("btn-default");

来尝试把所有button元素上的btn-default class移除掉。
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("animated fadeOut");
$("button").removeClass("btn-default");
});
</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>

7.我们可以通过jQuery来改变HTML元素的CSS样式。
jQuery有一个叫做.css()的方法能让你改变元素的CSS样式。

我们是这样来把颜色改变成蓝色的:
$("#target1").css("color", "blue");

变红色：
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("animated fadeOut");
$("button").removeClass("btn-default");
$("#target1").css("color","red");
});
</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>