1.什麼是jQuery?

• jQuery是一個輕量級的“寫的少，做的多”的JavaScript函式庫
• jQuery是當前最流行的JavaScript框架
• 包含以下功能：
  • HTML元素選取
  • HTML元素操作
  • CSS操作
  • HTML事件函式
  • JavaScript特效和動畫
  • HTML DOM遍歷和修改
  • AJAX
  • Utilities
  • 大量外掛
• jQuery有兩個版本
  • Production version 用於實際的網站中，已被精簡和壓縮
  • Development version 用於測試和開發（未壓縮，是可讀的程式碼）
• 如果不希望下載jQuery,也可以通過CDN（內容分發網路）引用它。

2.jQuery語法

1.jQuery語法

jQuery語法是通過選取HTML元素，並對選取的元素執行某些操作

基礎語法：$(selector).action()
        - 美元符號定義jQuery
        - 選擇符(selector)”查詢“和”查詢“HTML元素
        - jQuery的action()執行對元素的操作
        
        
   例項：$(this).hide() 隱藏當前元素

2.文件就緒事件

$(document).ready(function(){
    //開始寫jQuery程式碼
});

為了防止文件在完全載入（就緒）之前執行jQuery程式碼
如果在文件沒有完全載入之前就執行函式，操作可能失敗

簡潔寫法：
$(function(){
    //開始寫jQuery程式碼
});

3.jQuery選擇器

• jQuery選擇器允許您對HTML元素組或單個元素進行操作。
• jQuery選擇器基於元素的id、類、型別、屬性、屬性值等”查詢“（或選擇）HTML元素（基於已經存在的CSS選擇器）
• 特殊選擇器

 - $("*")  選取所有元素
 - $(this) 選取當前HTML元素
 - $("p.info") 選取class為info的<p>元素
 - $("p:first") 選取第一個<p>元素
 - $("ul li:first") 選取第一個<ul>元素的第一個<li>元素
 - $("ul li:first-child") 選取每個<ul>元素的第一個<li>元素
 - $("[href]") 選取帶有href屬性的元素
 - $("a[target='_blank']") 選取所有target屬性值等於“_blank”的<a>元素
 - $(":button") 選取所有type=”button“的<input>元素和<button>元素
 - $("tr:even") 選取偶數位置的<tr>元素
 - $("tr:odd") 選取奇數位置的<tr>元素

3.jQuery事件

1.什麼是事件？

• 頁面對不同訪問者的響應叫做事件
• 事件處理程式指的是當HTML中發生某些事件時所呼叫的方法
• 常見DOM事件：
  | 滑鼠事件 | 鍵盤事件 | 表單事件 | 文件/視窗事件 |
  | ------------------- | -------- | ------------- | ------- |
  | click | keypress | submit | load |
  | dbclick（雙擊元素） | keydown | change | resize |
  | mouseenter（滑鼠指標穿過） | keyup | focus（元素獲得焦點） | scroll |
  | mouseleave | | blur（元素失去焦點） | unload |
  | mouseup（在元素上鬆開滑鼠） | | hover（游標懸停事件） | |
  | mousedown（在元素上按下滑鼠） | | | |
  在jQuery中，大多數DOM事件都有一個等效的jQuery方法

4.jQuery獲取內容和屬性

1.獲得內容 - text()、html()以及val()

• text() 設定或返回所選元素的文字內容
  • html()設定或返回所選元素的內容（包括HTML標記）
    • val()設定或返回表單欄位的值

2.獲取屬性 - attr()

• attr() 設定/改變屬性值，允許同時設定多個屬性

5.新增新的HTML內容

可以接收無限數量的新元素

• append() 在被選元素的結尾插入內容
• prepend() 在被選元素的開頭插入內容
• after() 在被選元素之後插入內容
• before() 在被選元素之前插入內容

6.刪除元素/內容

• remove() 刪除被選元素及其子元素（也可接受一個引數，允許您對被刪元素進行過濾,該引數可以是任何 jQuery 選擇器的語法）
• empty() 從被選元素中刪除子元素

7.jQuery操作CSS

• addClass() 向被選元素新增一個或多個類
• removeClass() 從被選元素刪除一個或多個類
• toggleClass() 對被選元素進行新增/刪除類的切換操作
• css() 設定或返回樣式屬性
  • 設定單個CSS屬性 css("propertyname","value");
  • 設定多個CSS屬性 css({"propertyname":"value","propertyname","value",...});

8.jQuery遍歷

1.向上遍歷DOM樹：

• parent() 返回被選元素的直接父元素
• parents() 被選元素的所有祖先元素，一路向上直到文件的根元素
• parentsUntil() 返回介於兩個給定元素之間的所有祖先元素

2.遍歷後代

• children() 返回被選元素的所有直接子元素
• find() 返回被選元素的後代元素，一路向下直到最後一個後代

3.水平遍歷

• siblings() 返回被選元素的所有同胞元素，也可以使用可選引數來過濾對同胞元素的搜尋
• next() 返回被選元素的下一個同胞元素
• nextAll() 方法返回被選元素的所有跟隨的同胞元素
• nextUntil() 方法返回介於兩個給定引數之間的所有跟隨的同胞元素
• prev()
• prevAll()
• preUntil()

4.過濾

• first() 返回被選元素的首個元素
• last() 返回被選元素的最後一個元素
• eq() 返回被選元素中帶有指定索引號的元素,索引號從 0 開始
• filter() 選取匹配某項指定標準的元素
• not() 選取不匹配某項指定標準的元素

9.jQuery特效

1.隱藏和顯示

• hide()
• show()
• toggle()

2.淡入淡出

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

3.滑動

• slideDown()
• slideUp()
• slideToggle()

4.jQuery方法連結

允許在相同的元素上執行多條jQuery命令

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

5.jQuery動畫

$(selector).animate({params},speed,callback);
//必需的 params 引數定義形成動畫的 CSS 屬性。 
//可選的 speed 引數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。 
//可選的 callback 引數是動畫完成後所執行的函式名稱。 

//預設情況下，所有 HTML 元素都有一個靜態位置，且無法移動。
//如要對位置進行操作，需把元素的 CSS position 屬性設定為 relative、fixed 或 absolute！

stop(); //用於在動畫或效果完成之前停止他們

10.jQuery雜項

• data() 向被選元素附加資料，或者從被選元素取回該資料
• removeData() 移除之前通過 data() 方法設定的資料
• each() 為每個匹配元素規定要執行的函式
• get() 獲取由選擇器指定的 DOM 元素
• index() 返回指定元素相對於其他指定元素的 index 位置
• $.each()
• $.trim()
• $.now()