jQuery 筆記

jQuery

script 和 document.ready

首先，在頁面頂部添加 script 標簽， 記得添加結束標簽。

瀏覽器會運行 script 標簽所有的 JavaScript 腳本包括 jQuery。

在 script 標簽中添加代碼 $(document).ready(function() {。 然後在後面（仍在該 script 標簽內）用 }); 閉合它。只要瀏覽器載入頁面，function 中放入的代碼就會運行。

有一點很重要，如果沒有 document ready function，代碼將在 HTML 頁面呈現之前運行，這可能會導致錯誤。

$(document).ready(function() {
});

選擇器 Selector

所有的 jQuery 函數都以 $ 開頭，這個符號通常被稱為美元符號（dollar sign operator）或 bling。

jQuery 通常選取並操作帶有選擇器（selector）的 HTML 標簽。

標簽

比如，想要給 button 元素添加跳躍效果。 只需要在 document ready 函數內添加如下代碼:

$("button").addClass("animated bounce");

class

使用 $(".well") 選取類為 well 的 div 標簽。

jQuery 的 .addClass() 方法用來給標簽添加類。

值得註意的是，和 CSS 聲明一樣，在類名前需要添加 .。

$(".well").addClass("animated shake");

id

首先，用 $("#target3") 選擇器選取 id 為 target3 的 button 標簽。

註意，和 CSS 聲明一樣，在 id 名前需要添加 #。

$("#target3").addClass("animated fadeOut");

移除 class

利用 jQuery 的 removeClass() 方法移除。

 $("button").removeClass("btn-default");

css

用 jQuery 直接改變 HTML 標簽的 CSS。

jQuery 有一個 .css() 方法，能改變標簽的 CSS。

下麵的代碼效果是把顏色變藍：

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

這與通常的 CSS 聲明略有不同，因為這個 CSS 屬性和值在英文引號里，並且它們用逗號而不是冒號間隔開。

$("#target1").css("color", "red");

禁用元素

用 jQuery 改變 HTML 標簽的非 CSS 屬性， 例如：禁用按鈕。

當禁用按鈕時，它將變成灰色並無法點擊。

jQuery 有一個 .prop() 方法，可以用其調整標簽的屬性。

下麵是禁用所有的按鈕的代碼：

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

更改文本

通過 jQuery 改變元素開始和結束標簽之間的文本。 甚至改變 HTML 標簽。

jQuery 有一個 .html() 函數，能用其在標簽里添加 HTML 標簽和文本， 函數提供的內容將完全替換之前標簽的內容。

下麵是重寫並強調標題文本的代碼：

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

jQuery 還有一個類似的函數 .text()，可以在不添加標簽的前提下改變標簽內的文本。

註意，<i> 標簽雖然傳統上用來強調文本，但此後常用作圖標(Font Awesome)的標簽。 <em> 標簽作為強調標簽現在已被廣泛接受。

$("#target4").html("<em>#target4</em>");

刪除元素

用 jQuery 從頁面移除 HTML 標簽。

jQuery 有一個 .remove() 方法，能完全移除 HTML 標簽。

$("#target4").remove();

移動元素

現在來把標簽從一個 div 移動到另一個裡。

jQuery 有一個 appendTo() 方法，可以選取 HTML 標簽並將其添加到另一個標簽裡面。

例如，如果要把 target4 從 right well 移到 left well，可以設置如下

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

克隆元素

也可以把元素從一個地方複製到另一地方。

jQuery 有一個 clone() 方法，可以複製標簽。

例如，如果想把 target2 從 left-well 複製到 right-well，可以設置如下：

$("#target2").clone().appendTo("#right-well");

是否註意到這兩個 jQuery 函數連在一起了？ 這被稱為鏈式調用（function chaining），是一種用 jQuery 實現效果的簡便方法。

選擇父元素

每個 HTML 標簽都預設 inherits（繼承）其 parent（父標簽）的 CSS 屬性。

jQuery 有一個 parent() 方法，可以訪問被選取標簽的父標簽。

下麵的代碼展示了使用 parent() 方法把 left-well 標簽的父標簽背景色設置成藍色（blue）：

$("#left-well").parent().css("background-color", "blue");

選擇子元素

把 HTML 標簽放到另一個級別的標簽里，這些 HTML 標簽被稱為該標簽的子標簽（children element）。

jQuery 有一個 children() 方法，可以訪問被選取標簽的子標簽。

下麵的代碼展示了用 children() 方法把 left-well 標簽的子標簽的顏色設置成 blue（藍色）：

$("#left-well").children("color", "blue");

選擇特定子元素

jQuery 可以用 CSS 選擇器（CSS Selectors）選取標簽。 target:nth-child(n) CSS 選擇器可以選取指定 class 或者元素類型的的第 n 個標簽。

下麵的代碼展示了給每個區域（well）的第 3 個標簽設置彈跳（bounce）動畫效果：

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

選擇偶數元素

也可以用基於位置的奇 :odd 和偶 :even 選擇器選取標簽。

註意，jQuery 是零索引（zero-indexed）的，這意味著第 1 個標簽的位置編號是 0。 這有點混亂和反常——:odd 表示選擇第 2 個標簽（位置編號 1），第 4 個標簽（位置編號 3）……等等，以此類推。

下麵的代碼展示了選取所有 target class 元素的奇數元素並設置 sheke 效果：

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

。請記住， 偶數指的是基於零系統的元素的位置。

修改整個頁面

jQuery 也能選取 body 標簽。

$("body").addClass("animated hinge");