jQuery-freecodecamp

●下載 jQuery
共有兩個版本的 jQuery 可供下載:一份是精簡過的,另一份是未壓縮的(供調(diào)試或閱讀)。
這兩個版本都可從 jQuery.com 下載。
●庫的替代
Google 和 Microsoft 對 jQuery 的支持都很好。
如果您不愿意在自己的計算機上存放 jQuery 庫,那么可以從 Google 或 Microsoft 加載 CDN jQuery 核心文件。
使用 Google 的 CDN
<head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script></head>
使用 Microsoft 的 CDN
<head><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script></head>

1.所有jQuery方法都是由$開始的,通常稱作為 美元符號,或者簡稱為bling。
jQuery通過選擇器來選擇一個元素的,然后操作元素做些改變。
舉個例子,要讓所有的按鈕做彈回效果,只要把這段代碼寫在document ready function里面就可以了。
$("button").addClass("animated bounce");

2.怎么給所有的按鈕做彈回效果?
我們用 $("button")來選中按鈕,然后用.addClass("animated bounce")給按鈕加CSS class。
你只需要用jQuery的.addClass()方法,就可以給元素加class了.

3.你可以通過jQuery的addClass()方法給元素添加class,也可以通過jQueryremoveClass()方法去掉元素上的class。
像下面這樣:
$("#target2").removeClass("btn-default");

4.jQuery有一個叫做.css()的方法能讓你改變元素的CSS樣式。
我們是這樣來把顏色改變成藍色的:
$("#target1").css("color", "blue");
這跟通常的CSS語法有點不同,這里CSS的屬性和值是在引號內(nèi)的,并且用逗號分開。

5.當(dāng)你把按鈕設(shè)置成不可選以后,這會讓按鈕變灰并且不能點擊。
jQuery有一個.prop()的方法讓你來調(diào)整元素的屬性.
我們是這樣來讓按鈕不可選的:
$("button").prop("disabled", true);

6.jQuery不僅可以改變元素開始標(biāo)記和結(jié)束標(biāo)記間的文本,甚至可以改變元素標(biāo)記本身。
jQuery的.html()方法可以添加HTML標(biāo)簽和文字到元素,而元素之前的內(nèi)容都會被方法的內(nèi)容所替換掉。
我們是通過em[emphasize]標(biāo)簽來重寫和強調(diào)標(biāo)題文本的:
$("h3").html("<em>jQuery Playground</em>");
jQuery 還有一個類似的方法叫.text(),它只能改變文本但不能修改標(biāo)記。換句話說,這個方法只會把傳進來的任何東西(包括標(biāo)記)當(dāng)成文本來顯示。

7.jQuery 有一個.remove() 的方法可以移除HTML元素.

8.現(xiàn)在讓我們嘗試把元素從一個div里移到另外一個div里。
jQuery有一個appendTo()方法可以把選中的元素加到其他元素中。
比如,你想讓target4從我們的從right-well移到left-well,我們可以這樣使用:
$("#target4").appendTo("#left-well");

9.除了移動元素,你還可以拷貝元素。簡單理解:移動元素就是剪切,拷貝元素就是復(fù)制。
jQuery的clone()方法可以拷貝元素。
比如,如果我想把target2從left-well拷貝到right-well,我們可以這樣寫:
$("#target2").clone().appendTo("#right-well");
你有沒有發(fā)現(xiàn)兩個jQuery方法合在一起使用了?這就叫方法鏈function chaining,使用起來很方便。

10.每個HTML元素根據(jù)繼承屬性都有父parent元素。
舉個例子,h3 元素的父元素是 <div class="container-fluid">,<div class="container-fluid">的父元素是 body。
jQuery有一個方法叫parent(),它允許你訪問指定元素的父元素。
舉個例子:讓left-well 元素的父元素parent()的背景色變成藍色。
$("#left-well").parent().css("background-color", "blue")

11.jQuery 用CSS選擇器來選取元素,target:nth-child(n) CSS選擇器允許你按照索引順序(從1開始)選擇目標(biāo)元素的所有子元素。
示例:你可以給目標(biāo)元素的第三個子元素添加bounce class。
$(".target:nth-child(3)").addClass("animated bounce");

12.示例:獲取class為target且索引為奇數(shù)的所有元素,并給他們添加class。
$(".target:odd").addClass("animated shake");
記住,jQuery里的索引是從0開始的,也就是說::odd 選擇第2、4、6個元素,因為target#2(索引為1),target#4(索引為3),target6(索引為5

13.讓整個body都有淡出效果(fadeOut): $("body").addClass("animated fadeOut");

14、Get JSON with the jQuery getJSON Method

$.getJSON("/json/cats.json", function(json) {
  $(".message").html(JSON.stringify(json));
});```

15、

16、

15、

14、

15、
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Learn how Script Tags and Document Ready Work 現(xiàn)在讓我們開始學(xué)習(xí)最流...
    李嫑嫑_fe48閱讀 689評論 0 1
  • Create a Bootstrap Headline 現(xiàn)在,讓我們從頭開始練習(xí)我們的HTML, CSS 和 Bo...
    越IT閱讀 3,031評論 1 2
  • FreeCodeCamp - jQuery Learn how Script Tags and Document ...
    付林恒閱讀 1,583評論 0 3
  • Learn how Script Tags and Document Ready Work 最流行的JavaScr...
    歸云丶閱讀 532評論 0 1
  • 夢游:有寶有財、祿馬飛來、望更清朝吉、往來亦無災(zāi)~宏紅
    宏紅閱讀 294評論 0 0

友情鏈接更多精彩內(nèi)容