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

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

HTML 元素選取和操作

HTML 事件函數

HTML DOM 遍歷和修改

CSS 操作

JavaScript 特效和動畫

AJAX

基于 jQuery 的插件

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

$(selector).action()

文檔加載就緒事件

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

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

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

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

jQuery 選擇器基于已經存在的 CSS 選擇器

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

常用的 jQuery 事件方法

click() 點擊事件

dbclick() 雙擊事件

mouseenter() 鼠標穿過元素事件

mouseleave() 鼠標離開元素事件

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

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

hover() 鼠標懸停事件

focus() 表單元素聚焦事件

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

submit() 表單提交事件

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

keypress() 鍵盤鍵按住事件

keydown() 鍵盤鍵按下事件

keyup() 鍵盤鍵松開事件

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

resize() 窗口大小改變事件

scroll() 滾動監聽事件

$(selector).action(speed,callback)

hide() 隱藏元素

show() 顯示元素

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

fadeIn() 淡入

fadeOut() 淡出

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

fadeTo() 漸變為給定不透明度

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

slideDown() 向下滑動展開元素

slideDown() 向上滑動收起元素

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

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

實例

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

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

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

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

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

// "p1" 元素首先會變為紅色，然后向上滑動，再然后向下滑動

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

獲取內容

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

html() 設置或返回所選元素的內容（包括 HTML 標記）

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

獲取屬性

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

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

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

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

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

append() 在被選元素的結尾插入內容

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

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

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

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

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

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

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

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

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

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

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

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

// 設置樣式屬性
$("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 樹進行遍歷。

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() 返回介于兩個給定參數之間的所有跟隨的同胞元素。

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

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

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

元素過濾：

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

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

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

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

not() 方法返回不匹配標準的所有元素。