以下內(nèi)容會(huì)有復(fù)制粘貼的，因?yàn)槲矣X(jué)的FCC講解的很詳細(xì)，并不需要我畫(huà)蛇添足。

1.首先在頁(yè)面頂端增加一行script元素，然后寫上結(jié)束符。

瀏覽器會(huì)運(yùn)行script里所有的Javascript，包括jQuery。

在你的script里，添加這個(gè)方法:$(document).ready(function() {到你的script，接下來(lái)用});結(jié)束這個(gè)方法

2.現(xiàn)在讓我們開(kāi)始寫第一個(gè)jQuery語(yǔ)句，所有jQuery方法都是由$開(kāi)始的，通常稱作為美元符號(hào)，或者簡(jiǎn)稱為bling。

jQuery通過(guò)選擇器來(lái)選擇一個(gè)元素的，然后操作元素做些改變。

舉個(gè)例子，要讓所有的按鈕做彈回效果，只要把這段代碼寫在document ready function里面就可以了。

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

3.我們用$("button")來(lái)選中按鈕，然后用.addClass("animated bounce")給按鈕加CSS class。

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

首先，我們來(lái)使用$(".well")來(lái)獲取所有class為well的div元素。

仔細(xì)想想為什么需要在well前面添加.

然后使用jQuery的.addClass()方法添加2個(gè)class：animated、shake。

例如，你可以將下面的代碼寫在document ready function里：

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

4.你還可以根據(jù)id屬性來(lái)獲取元素

首先用$("#target3")來(lái)選擇id為target3的button元素。

注意，就像CSS一樣，在id的名字前加上#。

然后使用jQuery的.addClass()方法來(lái)添加animated和fadeOutclass.

例如：下面的代碼就是給id為target6的button元素添加fade out效果的：

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

5.delete javascript function,just delele it.

6.現(xiàn)在你已經(jīng)了解了3種選擇器：元素選擇器：$("button")、class選擇器：$(".btn")、id選擇器：$("#target1")。

盡管用.addClass()這種方式就可以加不同的class，不過(guò)還是讓我們嘗試用不同的方式給元素添加class吧。

7.你可以通過(guò)jQuery的addClass()方法給元素添加class,也可以通過(guò)jQueryremoveClass()方法去掉元素上的class。

像下面這樣：

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

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

8.現(xiàn)在讓我們嘗試把元素從一個(gè)div里移到另外一個(gè)div里。

jQuery有一個(gè)appendTo()方法可以把選中的元素加到其他元素中。

比如，你想讓target4從我們的從right-well移到left-well，我們可以這樣使用:

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

來(lái)試著把target2元素從left-well移到right-well中。

9.除了移動(dòng)元素，你還可以拷貝元素。簡(jiǎn)單理解：移動(dòng)元素就是剪切，拷貝元素就是復(fù)制。

jQuery的clone()方法可以拷貝元素。

比如，如果我想把target2從left-well拷貝到right-well，我們可以這樣寫:

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

你有沒(méi)有發(fā)現(xiàn)兩個(gè)jQuery方法合在一起使用了？這就叫方法鏈function chaining，使用起來(lái)很方便。

10.每個(gè)HTML元素根據(jù)繼承屬性都有父parent元素。

舉個(gè)例子，h3元素的父元素是

，

的父元素是body。

jQuery有一個(gè)方法叫parent()，它允許你訪問(wèn)指定元素的父元素。

舉個(gè)例子：讓left-well元素的父元素parent()的背景色變成藍(lán)色。

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

11.每個(gè)人都繼承了自己的父母的一些屬性，譬如：DNA、相貌、血型、體型等等，HTML也不例外。

許多HTML元素都有children(子元素)，每個(gè)子元素都從父元素那里繼承了一些屬性。

舉個(gè)例子，每個(gè)HTML元素都是body的子元素， 你的 "jQuery Playground"h3元素是

的子元素。

jQuery有一個(gè)方法叫children()，它允許你訪問(wèn)指定元素的子元素。

舉個(gè)例子：讓left-well元素的子元素children()的文本顏色變成藍(lán)色。

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

12.你已經(jīng)看到了當(dāng)用jQuery選擇器通過(guò)id屬性來(lái)選取元素的時(shí)候是多么方便，但是你不能總是寫這么整齊的id。

幸運(yùn)的是，jQuery有一些另外的技巧可以達(dá)到同樣的效果。

jQuery 用CSS選擇器來(lái)選取元素，target:nth-child(n)CSS選擇器允許你按照索引順序(從1開(kāi)始)選擇目標(biāo)元素的所有子元素。

示例：你可以給目標(biāo)元素的第三個(gè)子元素添加bounce class。

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

13.示例：獲取class為target且索引為奇數(shù)的所有元素，并給他們添加class。

$(".target:odd").addClass("animated shake");//even則是奇數(shù)

記住，jQuery里的索引是從0開(kāi)始的，也就是說(shuō)：:odd選擇第2、4、6個(gè)元素，因?yàn)閠arget#2(索引為1)，target#4(索引為3)，target6(索引為5。

14.我們讓整個(gè)body都有淡出效果(fadeOut)：$("body").addClass("animated fadeOut");

讓我們做一些更為激動(dòng)人心的事情，給body添加classanimated和hinge//側(cè)邊掉落的效果。