初識(shí)jQuery

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市涩金,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌暇仲,老刑警劉巖步做,帶你破解...
    沈念sama閱讀 222,865評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異奈附,居然都是意外死亡全度,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門斥滤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)将鸵,“玉大人勉盅,你說我怎么就攤上這事《サ簦” “怎么了草娜?”我有些...
    開封第一講書人閱讀 169,631評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)痒筒。 經(jīng)常有香客問我宰闰,道長(zhǎng),這世上最難降的妖魔是什么簿透? 我笑而不...
    開封第一講書人閱讀 60,199評(píng)論 1 300
  • 正文 為了忘掉前任移袍,我火速辦了婚禮,結(jié)果婚禮上老充,老公的妹妹穿的比我還像新娘葡盗。我一直安慰自己,他們只是感情好啡浊,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評(píng)論 6 398
  • 文/花漫 我一把揭開白布觅够。 她就那樣靜靜地躺著,像睡著了一般虫啥。 火紅的嫁衣襯著肌膚如雪蔚约。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,793評(píng)論 1 314
  • 那天涂籽,我揣著相機(jī)與錄音苹祟,去河邊找鬼。 笑死评雌,一個(gè)胖子當(dāng)著我的面吹牛树枫,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播景东,決...
    沈念sama閱讀 41,221評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼砂轻,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了斤吐?” 一聲冷哼從身側(cè)響起搔涝,我...
    開封第一講書人閱讀 40,174評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎和措,沒想到半個(gè)月后庄呈,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,699評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡派阱,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評(píng)論 3 343
  • 正文 我和宋清朗相戀三年诬留,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,918評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡文兑,死狀恐怖盒刚,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情绿贞,我是刑警寧澤因块,帶...
    沈念sama閱讀 36,573評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站樟蠕,受9級(jí)特大地震影響贮聂,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜寨辩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評(píng)論 3 336
  • 文/蒙蒙 一吓懈、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧靡狞,春花似錦耻警、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至梢杭,卻和暖如春温兼,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背武契。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工募判, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人咒唆。 一個(gè)月前我還...
    沈念sama閱讀 49,364評(píng)論 3 379
  • 正文 我出身青樓届垫,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親全释。 傳聞我的和親對(duì)象是個(gè)殘疾皇子装处,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Learn how Script Tags and Document Ready Work 現(xiàn)在讓我們開始學(xué)習(xí)最流...
    李嫑嫑_fe48閱讀 596評(píng)論 0 1
  • FreeCodeCamp - jQuery Learn how Script Tags and Document ...
    付林恒閱讀 1,469評(píng)論 0 3
  • Create a Bootstrap Headline 現(xiàn)在,讓我們從頭開始練習(xí)我們的HTML, CSS 和 Bo...
    越IT閱讀 2,958評(píng)論 1 2
  • 初識(shí)jQuery [圖片上傳失敗...(image-832757-1554710646556)] 本章學(xué)習(xí)目標(biāo) (...
    拾起_518閱讀 1,503評(píng)論 0 0
  • 每天三件事 1浸船、去公司把紙箱帶過去妄迁,加班 2、去換褲子 3李命、晚上健身 小確幸 新的鍋到了登淘,可以做菜收 感悟 今天下...
    Katrina程閱讀 210評(píng)論 0 0