摘要：方法返回介于兩個給定元素之間的所有祖先元素。方法返回被選元素的后代元素，一路向下直到最后一個后代。方法允許您規(guī)定一個標(biāo)準(zhǔn)。方法返回不匹配標(biāo)準(zhǔn)的所有元素。

jQuery 是一個輕量級操作 DOM 的 JS 庫，主要包含以下功能：

HTML 元素選取和操作

HTML 事件函數(shù)

HTML DOM 遍歷和修改

CSS 操作

JavaScript 特效和動畫

AJAX

基于 jQuery 的插件

jQuery 的優(yōu)勢在于兼容于所有主流瀏覽器, 包括 Internet Explorer 6!

$(selector).action()

文檔加載就緒事件

$(document).ready(function() {
  // 代碼...
});

// 簡寫方式
$(function() {
  // 代碼...
});

$(document).ready 與 window.onload 的區(qū)別

$(document).ready 和 window.onload 都是在都是在頁面加載完執(zhí)行的函數(shù)，大多數(shù)情況下差別不大。
$(document).ready:是 DOM 結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。 意思就是 DOM 樹加載完畢，就執(zhí)行，不必等到頁面中圖片或其他外部文件都加載完畢。并且可以寫多個.ready。
window.onload:是頁面所有元素都加載完畢，包括圖片等所有元素。只能執(zhí)行一次。

jQuery 選擇器基于已經(jīng)存在的 CSS 選擇器

$("*")
?$("p")
$("ul li")
?$("ul li:last-child")
...

常用的 jQuery 事件方法

click() 點(diǎn)擊事件

dbclick() 雙擊事件

mouseenter() 鼠標(biāo)穿過元素事件

mouseleave() 鼠標(biāo)離開元素事件

mousedown() 鼠標(biāo)移動到元素上方按下鼠標(biāo)事件

mouseup() 鼠標(biāo)按住移動到元素上方松開鼠標(biāo)事件

hover() 鼠標(biāo)懸停事件

focus() 表單元素聚焦事件

blur() 表單元素失去焦點(diǎn)事件

submit() 表單提交事件

change() 表單元素值改變事件

keypress() 鍵盤鍵按住事件

keydown() 鍵盤鍵按下事件

keyup() 鍵盤鍵松開事件

load() 指定元素加載完成式執(zhí)行事件 （1.8 版本后廢棄）

resize() 窗口大小改變事件

scroll() 滾動監(jiān)聽事件

$(selector).action(speed,callback)

hide() 隱藏元素

show() 顯示元素

toggle() 顯示被隱藏的元素，隱藏已顯示的元素

fadeIn() 淡入

fadeOut() 淡出

fadeToggle() 已淡出的元素淡入，已淡入的元素淡出

fadeTo() 漸變?yōu)榻o定不透明度

$(selector).fadeTo(speed,opacity,callback);
opacity 值為 0 與 1 之間

slideDown() 向下滑動展開元素

slideDown() 向上滑動收起元素

slideToggle() 已展開元素上滑收起，已收起元素下滑展示

$(selector).animate({params},speed,callback);

實(shí)例

$("button").click(function() {
  $("div").animate({
    left: "250px",
    opacity: "0.5",
    height: "150px",
    width: "150px"
  });
});

$(selector).stop(stopAll, goToEnd);

通過 jQuery，可以把動作/方法鏈接在一起。

Chaining 允許我們在一條語句中運(yùn)行多個 jQuery 方法（在相同的元素上，瀏覽器就不必多次查找相同的元素。

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

// "p1" 元素首先會變?yōu)榧t色，然后向上滑動，再然后向下滑動

jQuery 提供一系列與 DOM 相關(guān)的方法，這使訪問和操作元素和屬性變得很容易。

獲取內(nèi)容

text() 設(shè)置或返回所選元素的文本內(nèi)容

html() 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）

val() 設(shè)置或返回表單字段的值

獲取屬性

attr() 設(shè)置或者返回所選的屬性的值

// 獲取屬性
$("#test").attr("href"）

// 設(shè)置屬性
$("#test").attr("href","http://www.baidu.com")

$("#test").attr({
    href: "http://www.baidu.com",
    title: "百度"
})

// 回掉函數(shù)
$("#test").attr("href", function(i, origValue){
    // i 被選元素列表中當(dāng)前元素的下標(biāo)
    // origValue 原始值
    return origValue + "/jquery"
  })

append() 在被選元素的結(jié)尾插入內(nèi)容

prepend() 在被選元素的開頭插入內(nèi)容

after() 在被選元素之后插入內(nèi)容

before() 在被選元素之前插入內(nèi)容
?

remove() 刪除被選元素（及其子元素）

empty() 從被選元素中刪除子元素

jQuery remove() 方法也可接受一個參數(shù)，允許您對被刪元素進(jìn)行過濾。該參數(shù)可以是任何 jQuery 選擇器的語法。下面的代碼表示刪除所有 p 元素中類名是 italic 的元素

$("p").remove(".italic")

addClass() 向被選元素添加一個或多個類

removeClass() 從被選元素刪除一個或多個類

toggleClass() 對被選元素進(jìn)行添加/刪除類的切換操作

css() 設(shè)置或返回樣式屬性

// 返回樣式屬性
$("p").css("background-color");

// 設(shè)置樣式屬性
$("p").css("background-color", "yellow");
// 或者
$("p").css({ "background-color": "yellow", "font-size": "200%" });

width() 元素寬度

height() 元素高度

innerWidth() 包含 padding 寬度

innerHeight() 包含 padding 高度

outerWidth() 包含 padding、border 寬度

outerHeight() 包含 padding、border 高度

outerWidth(true) 包含 padding、border、margin 寬度

outerHeight(true) 包含 padding、border、margin 高度

祖先元素：

parent() 返回被選元素的直接父元素，該方法只會向上一級對 DOM 樹進(jìn)行遍歷。

parents() 返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 ()。

parentsUntil() parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素。

$(document).ready(function() {
  // div > ul > li > span
  $("span").parentsUntil("div");
  // 返回 ul 和 li
});

后代元素：

children() 返回被選元素的所有直接子元素。

find() 方法返回被選元素的后代元素，一路向下直到最后一個后代。

$(document).ready(function() {
  $("div").find("span");
});

同胞元素：

siblings() 返回被選元素的所有同胞元素。

next() 返回被選元素的下一個同胞元素。

nextAll() 返回被選元素的所有跟隨的同胞元素。

nextUntil() 返回介于兩個給定參數(shù)之間的所有跟隨的同胞元素。

prev() 返回被選元素的上一個同胞元素。

prevAll() 返回被選元素之前的所有的同胞元素。

prevUntil() 返回介于兩個給定參數(shù)之間的所有前方的同胞元素。

元素過濾：

first() 返回被選元素的首個元素。

last() 返回被選元素的最后一個元素。

eq() 返回被選元素中帶有指定索引號的元素。

filter() 方法允許您規(guī)定一個標(biāo)準(zhǔn)。不匹配這個標(biāo)準(zhǔn)的元素會被從集合中刪除，匹配的元素會被返回。

not() 方法返回不匹配標(biāo)準(zhǔn)的所有元素。