1. jQuery 介紹

1. 什么是 jQuery

jQuery 是一個(gè)快速触机、小巧偏友、功能豐富的 JavaScript 庫位他。它通過易于使用的API在大量瀏覽器中運(yùn)行窿冯，使得HTML文檔遍歷和操作，事件處理，動(dòng)畫和Ajax更加簡(jiǎn)單漱竖。通過多功能性和可擴(kuò)展性的結(jié)合，jQuery 改變了數(shù)百萬人編寫 JavaScript 的方式馅精。

2. 為什么要用 jQuery

DOM API：

• 難用
• 存在兼容性問題
• 功能太少严嗜，不能與時(shí)俱進(jìn)

jQuery：

• 兼容性好
• API 友好
• 功能強(qiáng)大，與時(shí)俱進(jìn)

3. 什么時(shí)候適合用 jQuery

• DOM 操作較多（事件監(jiān)聽）
• 簡(jiǎn)單的 AJAX
• 需要兼容多款瀏覽器

4. 什么時(shí)候不用 jQuery

• 頁面交互極為簡(jiǎn)單
• 頁面對(duì)流量有苛刻的要求
• 上級(jí)強(qiáng)制洲敢、團(tuán)隊(duì)已經(jīng)有了 jQuery 的代替品

5. jQuery 做什么

• 選擇網(wǎng)頁元素
• 改變結(jié)果集
• 元素的操作：取值和賦值
• 元素的操作：移動(dòng)
• 元素的操作：復(fù)制漫玄、刪除和創(chuàng)建
• 工具方法
• 事件操作
• 特殊效果
• AJAX
• http://devdocs.io/jquery/（這個(gè)網(wǎng)站查閱 jQuery 的方法也比較方便）

6. jQuery版本問題

• 1.x 與 2.x 的不同：1.x 的代碼會(huì)更老一些，它會(huì)兼容到 IE6压彭、7睦优；而 2.x 的版本更精簡(jiǎn)一些，把一些老的代碼給忽略掉了哮塞，體積更小一些。

7. jQuery 的兩種 API

jQuery 只有這兩種寫法凳谦。

// 一種是 $ + 點(diǎn) + 一個(gè)方法
$.noConflict()
$.each()

// 一種是 $ + 括號(hào) + 選擇器
$('ul').addClass()
$('p').text('hi')

8. ready

$(callback)
window.onload 事件
document 的 DOMContentLoaded 事件
$( document ).ready( handler )
$().ready( handler ) (this is not recommended)
$( handler )

2. 使用 jQuery 獲取元素

我們可以通過 document.getElementById 等方法獲取 DOM 對(duì)象忆畅，但是方法名稱長，使用不方便，而且功能有限家凯，不能像CSS選擇器那樣靈活缓醋。

jQuery 定義了一套選擇器規(guī)則，和 CSS 選擇器目的一樣绊诲，都是為了選擇出符合特定規(guī)則的元素送粱。講 jQuery 不得不提到其選擇器，這是 jQuery 能夠快速流行的非常重要的原因掂之，為了方便使用者 jQuery 刻意和 CSS 選擇器使用相同的語法抗俄，幾乎支持所有類型的CSS3選擇器，當(dāng)然也有一些其特定的選擇器世舰。

1. 選擇器

就像復(fù)習(xí) CSS 選擇器

除了使用選擇器禾唁，jQuery 還提供了一些方法幫助我們查找當(dāng)前元素相關(guān)的元素：

• .eq(index), .get([index])
  對(duì)于一個(gè)特定結(jié)果集，我們想獲取到指定 index 的 jQuery 對(duì)象无切，可以使用 eq方法：

$('div').eq(3); // 獲取結(jié)果集中的第四個(gè)jQuery對(duì)象

我們可以通過類數(shù)組下標(biāo)的獲取方式或者 get 方法獲取指定 index 的 DOM 對(duì)象荡短，也就是我們說的 jQuery 對(duì)象轉(zhuǎn)DOM對(duì)象：

$('div')[2];
$('div').eq(2);

get() 不寫參數(shù)把所有對(duì)象轉(zhuǎn)為DOM對(duì)象返回。

2. 兄弟元素獲取

• .next([selector]), .prev([selector])
  next 取得匹配的元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合哆键。如果提供一個(gè)選擇器掘托，那么只有緊跟著的兄弟元素滿足選擇器時(shí)，才會(huì)返回此元素籍嘹。prev 正好相反闪盔，獲取元素之前的同輩元素：

$('.test').next();
$('.test').prev('li');

• .nextAll([selector]), .prevAll([selector])
  nextAll 獲得每個(gè)匹配元素集合中每個(gè)元素所有后面的同輩元素，選擇性篩選的選擇器辱士，prevAll 與之相反泪掀，獲取元素前面的同輩元素：

• .siblings([selectors])
  獲得匹配元素集合中每個(gè)元素的兄弟元素,可以提供一個(gè)可選的選擇器：

$('li.third-item').siblings()

3. 兄弟元素獲取

• .parent([selector])
  取得匹配元素集合中，每個(gè)元素的父元素颂碘，可以提供一個(gè)可選的選擇器：

$('li.item-a').parent()

• .parents([selector])
  獲得集合中每個(gè)匹配元素的祖先元素异赫，可以提供一個(gè)可選的選擇器作為參數(shù)：

$('li.item-a').parents('div')

• .children([selector])
  獲得匹配元素集合中每個(gè)元素的子元素，選擇器選擇性篩選：

$('ul.level-2').children()

• .find([selector])
  查找符合選擇器的后代元素：

$('ul').find('li.current')

4. 篩選當(dāng)前結(jié)果集

• .first()
  獲取當(dāng)前結(jié)果集中的第一個(gè)對(duì)象。

• . last()
  獲取當(dāng)前結(jié)果集的最后一個(gè)對(duì)象塔拳。

• .filter(selector), .filter(function(index))
  篩選當(dāng)前結(jié)果集中符合條件的對(duì)象鼠证，參數(shù)可以是一個(gè)選擇器或者一個(gè)函數(shù)：

$('li').filter(':even')

$('li').filter(function(index) {
  return index % 3 == 2;
})

• .not(selector), .not(function(index))
  從匹配的元素集合中移除指定的元素，和 filter 相反靠抑。

• .is(selector), is(function(index)), is(dom/jqObj)
  判斷當(dāng)前匹配的元素集合中的元素量九，是否為一個(gè)選擇器，DOM 元素颂碧，或者 jQuery 對(duì)象荠列，如果這些元素至少一個(gè)匹配給定的參數(shù)，那么返回 true：

    if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }

• .has(selector), .has(dom)
  篩選匹配元素集合中的那些有相匹配的選擇器或DOM元素的后代元素：

$('li').has('span')