Learn how Script Tags and Document Ready Work
- 最流行的JavaScript庫(kù)jQuery
<script>
$(document).ready(function(){
});
</script>
瀏覽器會(huì)運(yùn)行 script 里所有的Javascript，包括jQuery。
The important thing to know is that code you put inside this function will run as soon as your browser has loaded your page.
在沒(méi)有document ready function以前，你的代碼會(huì)在HTML沒(méi)有渲染完成就執(zhí)行，這樣會(huì)產(chǎn)生bug。
Target HTML Elements with Selectors Using jQuery
- 所有jQuery方法都是由$開(kāi)始的，通常稱(chēng)作為 美元符號(hào)，或者簡(jiǎn)稱(chēng)為bling。
- jQuery通過(guò)選擇器來(lái)選擇一個(gè)元素，然后操作元素做些改變。
- 舉個(gè)例子，要讓所有的按鈕做彈回效果，只要把這段代碼寫(xiě)在document ready function里面就可以了。
$("button").addClass("animated bounce");（確保已引入jQuery庫(kù)和Animate.css庫(kù)）
注：另外，single-quote selectors（單引號(hào)選擇器）不會(huì)通過(guò)測(cè)試，一定要使用double-quote selectors（選擇器）
Target Elements by Class Using jQuery
我們是怎么給所有的按鈕做彈回效果的？
- $("button")來(lái)選中按鈕
-
.addClass("animated bounce")給按鈕加CSS class。
同理，我們來(lái)使用$(".well")來(lái)獲取所有class為well的div元素，在well前加** . **就像之前CSS聲明一樣。
然后使用jQuery的.addClass()方法添加2個(gè)class：animated、shake。
Target Elements by ID Using jQuery
- 可以根據(jù)id屬性來(lái)獲取元素
$("#target6").addClass("animated fadeOut")
Target the same element with multiple jQuery Selectors
現(xiàn)在你已經(jīng)了解了3種選擇器：元素選擇器：$("button")、class選擇器：$(".btn")、id選擇器：$("#target1")。
Remove classes from an element with jQuery
- 可以通過(guò)jQuery的addClass()方法給元素添加class,也可以通過(guò)jQueryremoveClass()方法去掉元素上的class。
$("#target2").removeClass("btn-default");
Change the CSS of an Element Using jQuery
- 可以通過(guò)jQuery來(lái)改變HTML元素的CSS樣式。
- jQuery有一個(gè)叫做.css()的方法能讓你改變?cè)氐腃SS樣式。
$("#target1").css("color", "blue");
這跟通常的CSS語(yǔ)法有點(diǎn)不同，這里CSS的屬性和值是在引號(hào)內(nèi)的，并且用逗號(hào)分開(kāi)。
Disable an Element Using jQuery
- 可以用jQuery改變除了CSS以外的屬性。比如，你可以讓按鈕變不可選。
- 當(dāng)你把按鈕設(shè)置成不可選以后，這會(huì)讓按鈕變灰并且不能點(diǎn)擊。
- jQuery有一個(gè).prop()的方法讓你來(lái)調(diào)整元素的屬性.
$("button").prop("disabled", true)
Change Text Inside an Element Using jQuery
- jQuery不僅可以改變?cè)亻_(kāi)始標(biāo)記和結(jié)束標(biāo)記間的文本，甚至可以改變?cè)貥?biāo)記本身。
- jQuery的.html()方法可以添加HTML標(biāo)簽和文字到元素，而元素之前的內(nèi)容都會(huì)被方法的內(nèi)容所替換掉。
- 通過(guò)em[emphasize]標(biāo)簽來(lái)重寫(xiě)和強(qiáng)調(diào)標(biāo)題文本：
$("h3").html("<em>jQuery Playground</em>"); - jQuery 還有一個(gè)類(lèi)似的方法叫.text()，它只能改變文本但不能修改標(biāo)記。換句話(huà)說(shuō)，這個(gè)方法只會(huì)把傳進(jìn)來(lái)的任何東西(包括標(biāo)記)當(dāng)成文本來(lái)顯示。
Remove an Element Using jQuery
- jQuery 有一個(gè).remove() 的方法可以移除HTML元素:
$("#target4").remove();（）不需要設(shè)置參數(shù)
Use appendTo to Move Elements with jQuery
- 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，可以這樣寫(xiě):
$("#target2").clone().appendTo("#right-well"); - 這里，兩個(gè)jQuery方法合在一起使用了，這就叫方法鏈function chaining。
Target the Parent of an Element Using jQuery
- 每個(gè)HTML元素根據(jù)繼承屬性都有父parent元素。
- jQuery有一個(gè)方法叫parent()，它允許你訪問(wèn)指定元素的父元素:
$("#left-well").parent().css("background-color", "blue")
Target the Children of an Element Using jQuery
每個(gè)人都繼承了自己的父母的一些屬性，譬如：DNA、相貌、血型、體型等等，HTML也不例外。許多HTML元素都有children(子元素)，每個(gè)子元素都從父元素那里繼承了一些屬性。
- jQuery有一個(gè)方法叫children()，它允許你訪問(wèn)指定元素的子元素:
$("#left-well").children().css("color", "blue")
Target a Specific Child of an Element Using jQuery
你已經(jīng)看到了當(dāng)用jQuery選擇器通過(guò)id屬性來(lái)選取元素的時(shí)候是多么方便，但是你不能總是寫(xiě)這么整齊的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");
- 你可以給目標(biāo)元素的第三個(gè)子元素添加bounce class。
Target Even Numbered Elements Using jQuery
even-numbered 偶數(shù)的
odd-numbered 奇數(shù)的
- 獲取class為target且索引為奇數(shù)的所有元素，并給他們添加class:
$(".target:odd").addClass("animated shake");
記住，jQuery里的索引是從0開(kāi)始的，也就是說(shuō)：:odd 選擇第2、4、6個(gè)元素，因?yàn)閠arget#2(索引為1)，target#4(索引為3)，target6(索引為5。
Use jQuery to Modify the Entire Page
- 讓整個(gè)body都有淡出效果(fadeOut)：
$("body").addClass("animated fadeOut"); - 讓我們做一些更為激動(dòng)人心的事情，給body添加class animated 和hinge :
$("body").addClass("animated hige");
