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)哗戈。