jQuery是最流行的Javascript庫(kù)之一字柠。

1.準(zhǔn)備

? ?在開始學(xué)習(xí)使用jQuery之前弧哎，我們需要加一些代碼到HTML文件中朵逝。首先在頁(yè)面頂端增加一行script元素，然后寫上結(jié)束符坷襟。瀏覽器會(huì)運(yùn)行script里所有的Javascript奸柬，包括jQuery。

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

2.方法

? ?接下來(lái)我們來(lái)學(xué)習(xí)如何寫方法排抬，方法里面的代碼會(huì)被瀏覽器加載。

? ?在沒有document ready function以前授段，你的代碼會(huì)在HTML沒有渲染完成就執(zhí)行蹲蒲，這樣會(huì)產(chǎn)生bug。

? ?現(xiàn)在我們已經(jīng)知道document ready function的用法了侵贵。讓我們開始寫第一個(gè)jQuery語(yǔ)句届搁，所有jQuery方法都是由$開始的，通常稱作為美元符 號(hào)窍育，或者簡(jiǎn)稱為bling卡睦。

? ? jQuery通過選擇器來(lái)選擇一個(gè)元素的，然后操作元素做些改變漱抓。舉個(gè)例子表锻，要讓所有的按鈕做彈回效果，只要把這段代碼寫在document ready function里面就可以了——$("button").addClass("animated bounce");

? ? 我們可以使用$(".well")來(lái)獲取所有class為well的div元素乞娄。仔細(xì)想想為什么需要在well前面添加.? ? 然后使用jQuery的.addClass()方法添加2個(gè)class：animated瞬逊、shake显歧。

? ? 我們還可以根據(jù)id屬性來(lái)獲取元素。首先用$("#target3")來(lái)選擇id為target3的button元素确镊。注意士骤，就像CSS一樣，在id的名字前加上#蕾域。然后使用jQuery的.addClass()方法來(lái)添加animated和fadeOut? class.

? ? 你可以通過jQuery的addClass()方法給元素添加class,也可以通過jQueryremoveClass()方法去掉元素上的class拷肌。像下面這樣：

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

3.我們可以通過jQuery來(lái)改變HTML元素的CSS樣式。

? ?jQuery有一個(gè)叫做.css()的方法能讓你改變?cè)氐腃SS樣式旨巷。我們是這樣來(lái)把顏色改變成藍(lán)色的:

? $("#target1").css("color", "blue");

? 這跟通常的CSS語(yǔ)法有點(diǎn)不同巨缘，這里CSS的屬性和值是在引號(hào)內(nèi)的，并且用逗號(hào)分開契沫。

4.你還可以用jQuery改變除了CSS以外的屬性带猴。

? ?比如，你可以讓按鈕變不可選懈万。當(dāng)你把按鈕設(shè)置成不可選以后拴清，這會(huì)讓按鈕變灰并且不能點(diǎn)擊。

? ?jQuery有一個(gè).prop()的方法讓你來(lái)調(diào)整元素的屬性.我們是這樣來(lái)讓按鈕不可選的:

? ?$("button").prop("disabled", true);

?5.jQuery不僅可以改變?cè)亻_始標(biāo)記和結(jié)束標(biāo)記間的文本会通，甚至可以改變?cè)貥?biāo)記本身口予。

? ? ?jQuery的.html()方法可以添加HTML標(biāo)簽和文字到元素，而元素之前的內(nèi)容都會(huì)被方法的內(nèi)容所替換掉涕侈。

? ? 我們是通過em[emphasize]標(biāo)簽來(lái)重寫和強(qiáng)調(diào)標(biāo)題文本的：

? ? $("h3").html("<em>jQuery Playground</em>");

? ? jQuery 還有一個(gè)類似的方法叫.text()沪停，它只能改變文本但不能修改標(biāo)記。換句話說裳涛，這個(gè)方法只會(huì)把傳進(jìn)來(lái)的任何東西(包括標(biāo)記)當(dāng)成文本來(lái)顯示木张。

?6.我們可以用jQuery來(lái)移除頁(yè)面上的HTML元素。

? ?jQuery 有一個(gè).remove()的方法可以移除HTML元素端三。

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

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

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

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

?8.除了移動(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锹引，使用起來(lái)很方便矗钟。

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

? 舉個(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")

?10.許多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")

?11.jQuery可以用CSS選擇器來(lái)選取元素

? target:nth-child(n)CSS選擇器允許你按照索引順序(從1開始)選擇目標(biāo)元素的所有子元素。 示例：你可以給目標(biāo)元素的第三個(gè)子元素添加bounce class菇夸。

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

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

? $(".target:odd").addClass("animated shake");

? 記住庄新，jQuery里的索引是從0開始的鞠眉，也就是說：:odd選擇第2、4择诈、6個(gè)元素械蹋，因?yàn)閠arget#2(索引為1)，target#4(索引為3)羞芍，target6(索引為5)哗戈。