### 什麼是jQuery：

jQuery是一個開源的函數庫，高度封裝了**DOM操作**、**事件**、**動畫**、**AJAX**、**工具函數**等功能，而且每一個`API`的底層實現都實現了不同瀏覽器之間的兼容性，讓你專心編寫邏輯代碼，而不要浪費時間在處理兼容性的問題上。總而言之，`jQuery`的目標就是讓開發者**寫得更少，做得更多**！

### jQuery核心功能——選擇器：

1. `*`：選取所有元素。

2. `p`：選取所有的p標籤。

3. `#test`：選取`id`為`test`的標籤。

4. `.test`：選取所有`class`為`test`的標籤。

5. `:button`：選取所有`type`為`button`的元素。

6. `div > p`：選取`div`下面的所有子p元素。注意，這個只包括直接子元素。

7. `div p`: 選取`div`下面的所有P元素.

7. `eq(index)`：對一個已經選取后的元素集選取索引值為index的元素。

8. `gt(index)`：對一個已經選取后的元素集選取索引值大於index的元素。

9. `lt(index)`：對一個已經選取后的元素集選取索引值小於index的元素。

10. 只要是CSS中能用的選擇器,Jq中都能用.

`runoob:http://www.runoob.com/jquery/jquery-tutorial.html`

`jquery:http://api.jquery.com/`

### jQuery核心功能——事件：

jquery封裝了js中的所有事件，並且針對不同的瀏覽器做了一些兼容性處理。使用方式是：

```javascript

$("p").click(function(){

// 動作觸發后執行的代碼!!

});

```

以下將對一些常用事件進行講解：

1. `click`事件：點擊事件。

2. `onload和document.ready`事件：前者是js的DOM中標準的方法，後者是jquery自己創建的一個方法，ready方法是所有文檔元素一旦準備好了，就執行回調，而onload方法是頁面中所有的元素都載入完畢了才會執行。

3. `mouseenter`事件：滑鼠移動到某個元素上面的事件。

4. `mouseleave`事件：滑鼠移出某個元素的事件。

5. `hover`事件：滑鼠移動到某個元素和滑鼠移出到某個元素的事件。相當於`mouseenter`和`mouseleave`兩個事件的集合。

### jQuery核心功能——效果：

jquery封裝了一套動畫效果方法，這些方法在js中是不存在的，jquery是通過修改一系列屬性和CSS樣式並添加過渡事件來達到這種目的的。以下將對一些常用的效果進行講解：

1. `hide(duration,callback)`方法：隱藏某個元素，只是把`display`屬性修改為`none`，可以提供了一個過渡事件。`duration`默認的時間是400毫秒.

2. `show(duration,callback)`方法：顯示某個元素，可以提供一個動畫。

3. `toggle(duration,callback)`方法：如果一個元素已經顯示了，那麼將他隱藏，如果一個元素已經隱藏了，將他顯示。

3. `fadeIn(speed,callback)`：有動畫效果的顯示一個元素，speed用於指示一個元素持續的時間，callback用於表示執行完這個動畫后執行的方法。

4. `fadeOut(speed,callback)`：把一個元素隱藏，隱藏后從DOM中刪除這個元素。

5. `fadeTo(speed,opacity,callback)`：把一個元素的透明度修改到opacity這個值指的數值。

6. `animate({params},speed,callback)`：所有動畫的最基礎的方法。params是一個字典，用於修改要動畫的CSS樣式，speed表示這個動畫持續的時間，callback表示這個動畫執行結束后的回調。

### jQuery核心功能——DOM操作

`DOM`的全稱是`Document Object Model`（文檔對象模型）。是`jquery`最核心的功能，包括對標籤元素的增刪改查等，以下將對這些方法進行講解。

1. 獲取和設置內容：`text()`用於獲取和設置元素中的文本內容，`html()`用戶獲取和設置元素中的所有子元素及其文本內容，`val()`用於獲取和設置元素的`value`值。`attr()`用戶獲取和設置標籤元素的屬性。

2. 添加元素：`append()`在某個元素後面添加子元素。`prepend()`在某個元素最前面添加子元素。`after`在某個元素後面添加一個兄弟元素。`before`在某個元素前面添加一個兄弟元素。

3. 刪除元素：`remove()`方法將選中的元素進行刪除，可以增加一個過濾條件進行過濾。`empty()`方法將選中的所有子元素都清空。

4. 操作CSS：`addClass()`方法可以向被選中的元素添加一個或多個類，`removeClass`方法可以向被選中的元素刪除一個或多個類，`css()`方法可以設置或返回`css`屬性。

5. 尺寸：

* width()/height()：返回盒子的真實寬度和高度。

* innerWidth()/innerHeight()：返回盒子的`真實寬度+padding的寬度`，高度同理。

* outerWidth()/outerHeight()：返回盒子的`真實寬度+padding的寬度+邊框的寬度`，高度同理。

* outerWidth(true)/outerHeight(true)：返回盒子的`真實寬度+padding的寬度+邊框的寬度+外邊距的寬度`，高度同理。

### jQuery核心功能——DOM元素遍歷

`DOM`元素遍歷可以在`DOM`樹中向上、向下、平行的遍歷所有的`DOM`元素，這在開發中查找相關元素的時候特別有用，以下將對這些方法進行講解：

1. `parent()`方法：獲得被選中元素的直接父元素。

2. `children()`方法：獲取被選中元素的所有直接子元素，也可以傳入參數，進行再次的過濾。

3. `find()`方法：獲取被選中元素的所有子孫元素，可以傳入參數進行過濾。

4. `siblings()`方法：返回所有和選中元素同級的元素，可以傳入參數進行過濾。

5. `next()`方法：返回被選中元素的下一個同胞元素，該方法只能返回一個元素。

6. `nextAll()`方法：返回被選中元素的之後的所有同胞元素。

7. `prev()`方法：返回被選中元素之前的上一個同胞元素。

8. `prevAll()`方法：返回被選中元素之前的所有同胞元素。

9. `first()`方法：返回被選中的元素中的第一個元素。

10. `last()`方法：返回被選中的元素中的最後一個元素。

11. `eq(index)`方法：返回被選中的元素位置為index的元素。

12. `filter(args)`方法：返回被選中的元素中再滿足args條件元素。

13. `not(args)`方法：通`filter`函數類似，只不過滿足了這個條件就會被過濾掉。

### jQuery核心功能——AJAX

`AJAX`的全稱是`Asynchronous JavaScript And XML`.中文名是非同步的Javascript和XML。簡短地說，在不重載整個網頁的情況下，AJAX 通過後台載入數據，並在網頁上進行顯示。原生js寫ajax特別麻煩，而且涉及到兼容性問題，但是用jqeury可以輕鬆實現，而不用關心底部具體的實現細節，以下將對`ajax`的幾種方法進行講解。

1. `$.get(url,[params])`方法：向`url`這個地址發送一個get請求，數據可以放在`params`這個參數中。

2. `$.post(url,[params])`方法：向`url`這個地址發送一個post請求，數據可以放在`params`這個參數中。

3. `$.ajax(url,[params])`方法：以上兩個方法的底層實現。

### 其他

1. `each`方法：遍歷`jquery`元素集。

2. `index()`：返回當前被選中元素在所有同級元素中的索引值。

3. `get()`：返回當前`jquery`元素的原生`DOM`元素。