Create a Bootstrap Headline
現(xiàn)在，讓我們從頭開始練習(xí)我們的HTML, CSS 和 Bootstrap 技術(shù)。
我們將會(huì)搭建一個(gè) jQuery playground，它也即將在我們接下來的 jQuery 課程中被投入使用。
首先，創(chuàng)建一個(gè) h3 元素，并且包含文本內(nèi)容 jQuery Playground 。
在 h3 元素中設(shè)置 Bootstrap 的 class 屬性 text-primary 為其上色，同時(shí)增加 Bootstrap 的 class 屬性 text-center 使文本居中顯示。
<h3 class="text-primary text-center">jQuery playground</h3>
House our page within a Bootstrap Container Fluid Div
現(xiàn)在讓我們確保頁面里所有的內(nèi)容都是響應(yīng)式的。
讓我們將 h3 元素放置于一個(gè)class屬性為 container-fluid 的 div 元素中。
Create a Bootstrap Row
現(xiàn)在將要為我們的內(nèi)聯(lián)元素創(chuàng)建一個(gè) Bootstrap 行。
在 h3 標(biāo)簽下創(chuàng)建一個(gè) div 元素，并且?guī)в?class 屬性 row 。
Split your Bootstrap Row
既然我們已經(jīng)有了一個(gè) Bootstrap 行，讓我們來把它分成兩欄來放置我們的元素吧。
在你的行內(nèi)添加兩個(gè) div 元素，每個(gè)都具有 col-xs-6 class 屬性。
Create Bootstrap Wells
Bootstrap 有一個(gè) class 屬性叫做 well，它的作用是為設(shè)定的列創(chuàng)造出一種視覺上的深度感（一種視覺上的效果，動(dòng)手寫代碼體會(huì)一下）。
Well 是一種會(huì)引起內(nèi)容凹陷顯示或插圖效果的容器 <div>。為了創(chuàng)建 Well，只需要簡(jiǎn)單地把內(nèi)容放在帶有 class .well 的 <div> 中即可。
【案例】
在你的每一個(gè)class為col-xs-6的div 元素中都嵌入一個(gè)帶有 well class 屬性的 div 元素。
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well"></div>
</div>
<div class="col-xs-6">
<div class="well"></div>
</div>
</div>
</div>
【圖樣】
Add Elements within your Bootstrap Wells
現(xiàn)在我們已經(jīng)在行內(nèi)的每一列都嵌套了好幾層 div 元素了。這已經(jīng)足夠了。現(xiàn)在讓我們添加 button 元素吧。
在每一個(gè) well div 元素下放置三個(gè) button 元素。
Apply the Default Bootstrap Button Style
Bootstrap 還有一種屬于按鈕的 class 屬性叫做 btn-default 。
為你的每一個(gè) button 元素增加兩個(gè) class 屬性: btn 和 btn-default 。
Create a Class to Target with jQuery Selectors
并不是每一個(gè) class 屬性都是用于 CSS 的。 有些時(shí)候我們創(chuàng)建一些 class 只是為了更方便地在jQuery中選中這些元素。
例如，為你的每一個(gè) button 都添加 target class。
Add ID Attributes to Bootstrap Elements
回憶一下，我們除了可以給元素增加 class 屬性，還可以給你的每個(gè)元素增添一個(gè) id 屬性。
每一個(gè)指定元素的 id 都是唯一的，并且在每個(gè)頁面中只能使用一次。
現(xiàn)在給我們每個(gè)包含 class well 的 div 元素一個(gè)唯一的 id。
記住，你可以像這樣賦予一個(gè)元素 id：
<div class="well" id="center-well">
例如本案例給左邊的 well 賦予 id left-well。給右邊的 well 賦予 id right-well。
Label Bootstrap Wells
讓我們?yōu)槲覀兊?wells 都標(biāo)上它們的 id 吧。
在 left-well 之上，class為 col-xs-6 的 div 元素里面，添加一個(gè)文本為 #left-well 的 h4元素。
在 right-well 之上，class為 col-xs-6 的 div 元素里面，添加一個(gè)文本為 #right-well 的 h4元素。
Give Each Element a Unique ID
我們也可以使用jQuery并通過每個(gè)按鈕各自唯一的 id 來標(biāo)識(shí)出它們。
給你的每一個(gè)按鈕一個(gè)唯一的 id ，以 target1 為開始，target6 為結(jié)束。
確保 target1 到 target3 在 #left-well 之中，target4 到 target6 則在 #right-well 之中。
Label Bootstrap Buttons
正如我們標(biāo)注了每個(gè) wells， 我們同樣想要標(biāo)注每一個(gè)按鈕。
為你的每個(gè) button 元素選擇與其 id 選擇器相同的文本。
Use Comments to Clarify Code
當(dāng)我們開始使用jQuery，我們將修改HTML元素，但是實(shí)際上我們并不是直接在 HTML 文本中修改。
我們必須確保讓每個(gè)人都知道，他們不應(yīng)該直接修改此頁面上這些代碼。
記住，你可以在 為結(jié)束的地方進(jìn)行評(píng)論注釋。(像這樣， )
請(qǐng)?jiān)谀愕?HTML 頂部加如下一段注釋：Only change code above this line. 。
jQuery
Learn how Script Tags and Document Ready Work
現(xiàn)在讓我們開始學(xué)習(xí)最流行的JavaScript庫jQuery吧，不用擔(dān)心JavaScript本身，我們稍后會(huì)提到它。
在開始學(xué)習(xí)使用jQuery之前，我們需要加一些代碼到HTML文件中。
首先在頁面頂端增加一行script元素，然后寫上結(jié)束符。
瀏覽器會(huì)運(yùn)行script 里所有的Javascript，包括jQuery。
在你的script里，添加這個(gè)方法:$(document).ready(function() {到你的script，接下來用});結(jié)束這個(gè)方法
接下來我們來學(xué)習(xí)如何寫方法，方法里面的代碼會(huì)被瀏覽器加載。
在沒有document ready function以前，你的代碼會(huì)在HTML沒有渲染完成就執(zhí)行，這樣會(huì)產(chǎn)生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>
Target HTML Elements with Selectors Using jQuery
，通常稱作為 美元符號(hào)，或者簡(jiǎn)稱為bling。
jQuery通過選擇器來選擇一個(gè)元素的，然后操作元素做些改變。
舉個(gè)例子，要讓所有的按鈕做彈回效果，只要把這段代碼寫在document ready function里面就可以了。
$("button").addClass("animated bounce");
我們已經(jīng)在后臺(tái)為你引入了jQuery庫和Animate.css庫，這樣你就可以在編輯器里直接可以使用這兩個(gè)庫，進(jìn)而通過jQuery給button元素添加bounce回彈動(dòng)畫效果。
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
});
</script>
Target Elements by Class Using jQuery
你看到我們是怎么給所有的按鈕做彈回效果了嗎？我們用 $("button")來選中按鈕，然后用.addClass("animated bounce")給按鈕加CSS class。
你只需要用jQuery的.addClass()方法，就可以給元素加class了。
首先，我們來使用$(".well")來獲取所有class為well的div元素。
仔細(xì)想想為什么需要在well前面添加.
然后使用jQuery的.addClass()方法添加2個(gè)class：animated、shake。
例如，你可以將下面的代碼寫在document ready function里：
$(".text-primary").addClass("animated shake");
[案例練習(xí)]給所有class為text-primary 的元素添加shake class。
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
});
</script>
Target Elements by ID Using jQuery
你還可以根據(jù)id屬性來獲取元素
首先用$("#target3")來選擇id為target3的button元素。
注意，就像CSS一樣，在id的名字前加上 #。
然后使用jQuery的.addClass()方法來添加 animated和fadeOutclass.
例如：下面的代碼就是給id為target6的button元素添加fade out效果的：
$("#target6").addClass("animated fadeOut")
Delete your jQuery Functions
這些動(dòng)畫效果一開始很cool，但是動(dòng)畫太多就有點(diǎn)喧賓奪主了。
在你的document ready function里刪掉那三條語句，只留document ready function。
Target the same element with multiple jQuery Selectors
現(xiàn)在你已經(jīng)了解了3種選擇器：元素選擇器：$("button")、class選擇器：$(".btn")、id選擇器：$("#target1")。
盡管用.addClass()這種方式就可以加不同的class，不過還是讓我們嘗試用不同的方式給元素添加class吧。
[案例]
用上面介紹的jQuery選擇器和addClass()方法：
給所有type為button的元素添加animated class。
給所有class為.btn的按鈕添加shake class。
給所有id為#target1的按鈕添加btn-primary class。
$(document).ready(function() {
$("button").addClass("animated");
$(".btn").addClass("shake");
$("#target1").addClass("btn-primary");
});
[注意]：是animated不是animate
Remove classes from an element with jQuery
你可以通過jQuery的addClass()方法給元素添加class,也可以通過jQueryremoveClass()方法去掉元素上的class。
像下面這樣：
$("#target2").removeClass("btn-default");
Change the CSS of an Element Using jQuery
我們可以通過jQuery來改變HTML元素的CSS樣式。
jQuery有一個(gè)叫做.css()的方法能讓你改變?cè)氐腃SS樣式。
我們是這樣來把顏色改變成藍(lán)色的:
$("#target1").css("color", "blue");
這跟通常的CSS語法有點(diǎn)不同，這里CSS的屬性和值是在引號(hào)內(nèi)的，并且用逗號(hào)分開。
Disable an Element Using jQuery
你還可以用jQuery改變除了CSS以外的屬性。比如，你可以讓按鈕變不可選。
當(dāng)你把按鈕設(shè)置成不可選以后，這會(huì)讓按鈕變灰并且不能點(diǎn)擊。
jQuery有一個(gè).prop()的方法讓你來調(diào)整元素的屬性.
我們是這樣來讓按鈕不可選的:
$("button").prop("disabled", true);
Change Text Inside an Element Using jQuery
jQuery不僅可以改變?cè)亻_始標(biāo)記和結(jié)束標(biāo)記間的文本，甚至可以改變?cè)貥?biāo)記本身。
jQuery的.html()方法可以添加HTML標(biāo)簽和文字到元素，而元素之前的內(nèi)容都會(huì)被方法的內(nèi)容所替換掉。
我們是通過em[emphasize]標(biāo)簽來重寫和強(qiáng)調(diào)標(biāo)題文本的：
$("h3").html("<em>jQuery Playground</em>");
jQuery 還有一個(gè)類似的方法叫.text()，它只能改變文本但不能修改標(biāo)記。換句話說，這個(gè)方法只會(huì)把傳進(jìn)來的任何東西(包括標(biāo)記)當(dāng)成文本來顯示。
Remove an Element Using jQuery
現(xiàn)在讓我們用jQuery來移除頁面上的HTML元素吧.
jQuery 有一個(gè).remove() 的方法可以移除HTML元素
【案例】
試著使用.remove()方法來移除頁面上的target4元素吧.
$("#target4").remove();
Use appendTo to Move Elements with jQuery
現(xiàn)在讓我們嘗試把元素從一個(gè)div里移到另外一個(gè)div里。
jQuery有一個(gè)appendTo()方法可以把選中的元素加到其他元素中。
比如，你想讓target4從我們本來的right-well移到left-well，我們可以這樣使用:
$("#target4").appendTo("#left-well");
Clone an Element Using jQuery
除了移動(dòng)元素，你還可以拷貝元素。簡(jiǎn)單理解：移動(dòng)元素就是剪切，拷貝元素就是復(fù)制。
jQuery的clone()方法可以拷貝元素。
比如，如果我想把target2從left-well拷貝到right-well，我們可以這樣寫:
$("#target2").clone().appendTo("#right-well");
你有沒有發(fā)現(xiàn)兩個(gè)jQuery方法合在一起使用了？這就叫方法鏈function chaining，使用起來很方便。
Target the Parent of an Element Using jQuery
每個(gè)HTML元素根據(jù)繼承屬性都有父parent元素。
<body>
<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>
</body>
舉個(gè)例子，h3 元素的父元素是 <div class="container-fluid">，<div class="container-fluid">的父元素是 body。
jQuery有一個(gè)方法叫parent()，它允許你訪問指定元素的父元素。
【舉個(gè)例子】：讓left-well 元素的父元素parent()的背景色變成藍(lán)色。
$("#left-well").parent().css("background-color", "blue")
Target the Children of an Element Using jQuery
每個(gè)人都繼承了自己的父母的一些屬性，譬如：DNA、相貌、血型、體型等等，HTML也不例外。
許多HTML元素都有children(子元素)，每個(gè)子元素都從父元素那里繼承了一些屬性。
【舉個(gè)例子】每個(gè)HTML元素都是 body 的子元素， 你的 "jQuery Playground" h3 元素是 <div class="container-fluid"> 的子元素。
jQuery有一個(gè)方法叫children()，它允許你訪問指定元素的子元素。
舉個(gè)例子：讓left-well 元素的子元素children()的文本顏色變成藍(lán)色。
$("#left-well").children().css("color", "blue")
Target a Specific Child of an Element Using jQuery
你已經(jīng)看到了當(dāng)用jQuery選擇器通過id屬性來選取元素的時(shí)候是多么方便，但是你不能總是寫這么整齊的id。
幸運(yùn)的是，jQuery有一些另外的技巧可以達(dá)到同樣的效果。
jQuery 用CSS選擇器來選取元素，target:nth-child(n) CSS選擇器允許你按照索引順序（【注意】：從1開始)選擇目標(biāo)元素的所有子元素。
示例：你可以給目標(biāo)元素的第三個(gè)子元素添加bounce class。
$(".target:nth-child(3)").addClass("animated bounce");
Target Even Numbered Elements Using jQuery
示例：獲取class為target且索引為**奇數(shù)((的所有元素，并給他們添加class。
$(".target:odd").addClass("animated shake");
記住，jQuery里的索引是從0開始的，也就是說：:odd 選擇第2、4、6個(gè)元素，因?yàn)閠arget#2(索引為1)，target#4(索引為3)，target6(索引為5)。
【備注】：奇數(shù)為odd，偶數(shù)為even
Use jQuery to Modify the Entire Page
我們已經(jīng)玩了這么久的jQuery游樂場(chǎng)，是時(shí)候結(jié)束這一節(jié)了。
我們讓整個(gè)body都有淡出效果(fadeOut)：
$("body").addClass("animated fadeOut");
讓我們做一些更為激動(dòng)人心的事情，給body添加class animated 和hinge 。
【源碼】：
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");
$("#left-well").children().css("color", "green");
$(".target:nth-child(2)").addClass("animated bounce");
$(".target:even").addClass("animated shake");
$("body").addClass("animated fadeOut");
$("body").addClass("animated hinge");
});
</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>
