Learn how Script Tags and Document Ready Work
現在讓我們開始學習最流行的JavaScript庫jQuery吧，不用擔心JavaScript本身，我們稍后會提到它。
在開始學習使用jQuery之前，我們需要加一些代碼到HTML文件中。
首先在頁面頂端增加一行script元素，然后寫上結束符。
瀏覽器會運行script里所有的Javascript，包括jQuery。
在你的script里，添加這個方法:$(document).ready(function() {到你的script，接下來用});結束這個方法
接下來我們來學習如何寫方法，方法里面的代碼會被瀏覽器加載。
在沒有document ready function以前，你的代碼會在HTML沒有渲染完成就執行，這樣會產生bug。
Target HTML Elements with Selectors Using jQuery
現在我們已經知道document ready function的用法了.
現在讓我們開始寫第一個jQuery語句，所有jQuery方法都是由$開始的，通常稱作為美元符號，或者簡稱為bling。
jQuery通過選擇器來選擇一個元素的，然后操作元素做些改變。
舉個例子，要讓所有的按鈕做彈回效果，只要把這段代碼寫在document ready function(){}里面就可以了。
$("button").addClass("animated bounce");
我們已經在后臺為你引入了jQuery庫和Animate.css庫，這樣你就可以在編輯器里直接可以使用這兩個庫，進而通過jQuery給button元素添加bounce回彈動畫效果。
Target Elements by Class Using jQuery
你看到我們是怎么給所有的按鈕做彈回效果了嗎？我們用$("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。
Target Elements by ID Using jQuery
你還可以根據id屬性來獲取元素
首先用$("#target3")來選擇id為target3的button元素。
注意，就像CSS一樣，在id的名字前加上#。
然后使用jQuery的.addClass()方法來添加animated和fadeOutclass.
例如：下面的代碼就是給id為target6的button元素添加fade out效果的：
$("#target6").addClass("animated fadeOut")
Delete your jQuery Functions
這些動畫效果一開始很cool，但是動畫太多就有點喧賓奪主了。
在你的document ready function里刪掉那三條語句，只留document ready function。
Target the same element with multiple jQuery Selectors
現在你已經了解了3種選擇器：元素選擇器：$("button")、class選擇器：$(".btn")、id選擇器：$("#target1")。
盡管用.addClass()這種方式就可以加不同的class，不過還是讓我們嘗試用不同的方式給元素添加class吧。
用上面介紹的jQuery選擇器和addClass()方法：
給所有type為button的元素添加animatedclass。
給所有class為.btn的按鈕添加shakeclass。
給所有id為#target1的按鈕添加btn-primaryclass。
Remove classes from an element with jQuery
你可以通過jQuery的addClass()方法給元素添加class,也可以通過jQueryremoveClass()方法去掉元素上的class。
像下面這樣：
$("#target2").removeClass("btn-default");
$("#target2").removeClass("btn-default");
來嘗試把所有button元素上的btn-defaultclass移除掉。
Change the CSS of an Element Using jQuery
我們可以通過jQuery來改變HTML元素的CSS樣式。
jQuery有一個叫做.css()的方法能讓你改變元素的CSS樣式。
我們是這樣來把顏色改變成藍色的:
$("#target1").css("color", "blue");
這跟通常的CSS語法有點不同，這里CSS的屬性和值是在引號內的，并且用逗號分開。
把你的document ready function清空，
來嘗試把target1改變成紅色。
Disable an Element Using jQuery
你還可以用jQuery改變除了CSS以外的屬性。比如，你可以讓按鈕變不可選。
當你把按鈕設置成不可選以后，這會讓按鈕變灰并且不能點擊。
jQuery有一個.prop()的方法讓你來調整元素的屬性.
我們是這樣來讓按鈕不可選的:
$("button").prop("disabled", true);
$("button").prop("disabled", true);
來嘗試讓target1按鈕不可選.
Change Text Inside an Element Using jQuery
jQuery不僅可以改變元素開始標記和結束標記間的文本，甚至可以改變元素標記本身。
jQuery的.html()方法可以添加HTML標簽和文字到元素，而元素之前的內容都會被方法的內容所替換掉。
我們是通過em[emphasize]標簽來重寫和強調標題文本的：
$("h3").html("jQuery Playground");
jQuery 還有一個類似的方法叫.text()，它只能改變文本但不能修改標記。換句話說，這個方法只會把傳進來的任何東西(包括標記)當成文本來顯示。
任務：強調id為target4按鈕里的文本。
Change Text Inside an Element Using jQuery
jQuery不僅可以改變元素開始標記和結束標記間的文本，甚至可以改變元素標記本身。
jQuery的.html()方法可以添加HTML標簽和文字到元素，而元素之前的內容都會被方法的內容所替換掉。
我們是通過em[emphasize]標簽來重寫和強調標題文本的：
$("h3").html("jQuery Playground");
jQuery 還有一個類似的方法叫.text()，它只能改變文本但不能修改標記。換句話說，這個方法只會把傳進來的任何東西(包括標記)當成文本來顯示。
任務：強調id為target4按鈕里的文本。
Remove an Element Using jQuery
現在讓我們用jQuery來移除頁面上的HTML元素吧.
jQuery 有一個.remove()的方法可以移除HTML元素
試著使用.remove()方法來移除頁面上的target4元素吧.
Use appendTo to Move Elements with jQuery
現在讓我們嘗試把元素從一個div里移到另外一個div里。
jQuery有一個appendTo()方法可以把選中的元素加到其他元素中。
比如，你想讓target4從我們的從right-well移到left-well，我們可以這樣使用:
$("#target4").appendTo("#left-well");
來試著把target2元素從left-well移到right-well中。
Clone an Element Using jQuery
除了移動元素，你還可以拷貝元素。簡單理解：移動元素就是剪切，拷貝元素就是復制。
jQuery的clone()方法可以拷貝元素。
比如，如果我想把target2從left-well拷貝到right-well，我們可以這樣寫:
$("#target2").clone().appendTo("#right-well");
你有沒有發現兩個jQuery方法合在一起使用了？這就叫方法鏈function chaining，使用起來很方便。
復制target5元素追加到left-well。
提示：當你點擊run tests后left-well會有兩個#target5，千萬別以為這是bug。實際上是因為編輯器中的代碼會自動執行一次，點擊run后會再執行一次，所以有兩個#target5。
Target the Parent of an Element Using jQuery
每個HTML元素根據繼承屬性都有父parent元素。
舉個例子，h3元素的父元素是
，
的父元素是body。
jQuery有一個方法叫parent()，它允許你訪問指定元素的父元素。
舉個例子：讓left-well元素的父元素parent()的背景色變成藍色。
$("#left-well").parent().css("background-color", "blue")
試試讓#target1元素的父元素的背景色變成紅色。
Target the Children of an Element Using jQuery
每個人都繼承了自己的父母的一些屬性，譬如：DNA、相貌、血型、體型等等，HTML也不例外。
許多HTML元素都有children(子元素)，每個子元素都從父元素那里繼承了一些屬性。
舉個例子，每個HTML元素都是body的子元素， 你的 "jQuery Playground"h3元素是
的子元素。
jQuery有一個方法叫children()，它允許你訪問指定元素的子元素。
舉個例子：讓left-well元素的子元素children()的文本顏色變成藍色。
$("#left-well").children().css("color", "blue")
任務：讓#right-well元素的所有子元素的文本顏色都變成橙色
Target a Specific Child of an Element Using jQuery
你已經看到了當用jQuery選擇器通過id屬性來選取元素的時候是多么方便，但是你不能總是寫這么整齊的id。
幸運的是，jQuery有一些另外的技巧可以達到同樣的效果。
jQuery 用CSS選擇器來選取元素，target:nth-child(n)CSS選擇器允許你按照索引順序(從1開始)選擇目標元素的所有子元素。
示例：你可以給目標元素的第三個子元素添加bounce class。
$(".target:nth-child(3)").addClass("animated bounce");
任務：確保給目標元素的第二個子元素添加animated和bounce class，你可以通過targetclass來選獲得目標元素。
Target Even Numbered Elements Using jQuery
示例：獲取class為target且索引為奇數的所有元素，并給他們添加class。
$(".target:odd").addClass("animated shake");
記住，jQuery里的索引是從0開始的，也就是說：:odd選擇第2、4、6個元素，因為target#2(索引為1)，target#4(索引為3)，target6(索引為5。
任務：獲取class為target且索引為偶數的所有元素，也就是target#1(索引為0)，target#3(索引為2)，target5(索引為4)，并給它們添加classanimated和shake。odd是選擇偶數，even選擇奇數
Use jQuery to Modify the Entire Page
我們已經玩了這么久的jQuery游樂場，是時候結束這一節了。
我們讓整個body都有淡出效果(fadeOut)：$("body").addClass("animated fadeOut");
讓我們做一些更為激動人心的事情，給body添加classanimated和hinge。
