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");