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");
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/509451.html
標籤：jQuery