使用jQuery之前,我们需要加一些代码到HTML文件中。

首先在页面顶端增加一行​​script​​元素,然后写上结束符。

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

在你的​​script​​​里,添加这个方法:​​$(document).ready(function() {​​​到你的​​script​​​,接下来用​​});​​结束这个方法

接下来我们来学习如何写​​方法​​​,​​方法​​里面的代码会被浏览器加载。

在没有​​document ready function​​以前,你的代码会在HTML没有渲染完成就执行,这样会产生bug。

<script> $(document).ready(function() { });</script>

jQuery语句,所有jQuery方法都是由​​$​​​开始的,通常称作为 ​​美元符号​​​,或者简称为​​bling​​。


jQuery通过​​选择器​​来选择一个元素的,然后操作元素做些改变。

举个例子,要让所有的​​按钮​​​做弹回效果,只要把这段代码写在​​document ready function​​里面就可以了。

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

我们是怎么给所有的​​按钮​​​做弹回效果了吗?我们用 ​​$("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>

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



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

首先用​​$("#target3")​​​来选择id为​​target3​​​的​​button​​元素。

注意,就像CSS一样,在id的名字前加上 ​​#​​。

然后使用jQuery的​​.addClass()​​​方法来添加​animated​​​和​​fadeOut​​class.

例如:下面的代码就是给id为​​target6​​​的​​button​​元素添加fade out效果的:

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