請記得在進(jìn)行JQuery類庫的運(yùn)用時(shí)，加入JQuery類庫炕置，并且要保證先寫文檔就緒函數(shù)

• $(document).ready(handler)
• $().ready(handler) (this is not recommended)
• $(handler)

$(document).ready(function() {
// Handler for .ready() called.
});

$(function() {
// Handler for .ready() called.
});

JQuery庫

基礎(chǔ)

jQuery 庫包含以下特性：

• HTML 元素選取
• HTML 元素操作
• CSS 操作
• HTML 事件函數(shù)
• JavaScript 特效和動(dòng)畫
• HTML DOM 遍歷和修改
• AJAX
• Utilities

使用谷歌或微軟的 jQuery剖煌，有一個(gè)很大的優(yōu)勢：

許多用戶在訪問其他站點(diǎn)時(shí)沥匈，已經(jīng)從谷歌或微軟加載過jQuery神帅。所有結(jié)果是，當(dāng)他們訪問您的站點(diǎn)時(shí)胳岂，會(huì)從緩存中加載jQuery這樣可以減少加載時(shí)間编整。同時(shí)，大多數(shù)CDN都可以確保當(dāng)用戶向其請求文件時(shí)乳丰，會(huì)從離用戶最近的服務(wù)器上返回響應(yīng)掌测，這樣也可以提高加載速度。

jQuery 語法

基礎(chǔ)語法是：$(selector).action()

• 美元符號定義 jQuery
• 選擇符（selector）“查詢”和“查找” HTML 元素
• jQuery 的 action() 執(zhí)行對元素的操作
  </br>

文檔就緒函數(shù)

$(document).ready(function(){
          --- jQuery functions go here ----
  });

這是為了防止文檔在完全加載（就緒）之前運(yùn)行 jQuery 代碼产园。
如果在文檔沒有完全加載之前就運(yùn)行函數(shù)汞斧，操作可能失敗。下面是兩個(gè)具體的例子：

• 試圖隱藏一個(gè)不存在的元素
• 獲得未完全加載的圖像的大小

jQuery是為事件處理特別設(shè)計(jì)的
由于 jQuery 是為處理 HTML 事件而特別設(shè)計(jì)的什燕，那么當(dāng)您遵循以下原則時(shí)粘勒，您的代碼會(huì)更恰當(dāng)且更易維護(hù)：

• 把所有 jQuery 代碼置于事件處理函數(shù)中
• 把所有事件處理函數(shù)置于文檔就緒事件處理器中
• 把 jQuery 代碼置于單獨(dú)的 .js 文件中
• 如果存在名稱沖突，則重命名 jQuery 庫
  eg:用jq代替$符號

var jq=jQuery.noConflict()

</br>
</br>

效果

隱藏/顯示

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度屎即，可以取以下值："slow"庙睡、"fast" 或毫秒。
可選的 callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱技俐。
jQuery toggle()
通過 jQuery乘陪，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

$(selector).toggle(speed,callback);

通過 jQuery雕擂，您可以實(shí)現(xiàn)元素的淡入淡出效果啡邑。
jQuery擁有以下四種fade方法

• fadeIn()
• fadeOut()
• fadeTaggle()
• fadeTo()
  jQuery fadeIn() 方法
  ?? jQuery fadeIn() 用于淡入已隱藏的元素。

$(selector).fadeIn(speed,callback);

可選的 speed 參數(shù)規(guī)定效果的時(shí)長井赌。它可以取以下值："slow"谤逼、"fast" 或毫秒。
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱族展。
jQuery fadeOut() 方法
?? jQuery fadeOut() 方法用于淡出可見元素森缠。

$(selector).fadeOut(speed,callback);

同上。
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換仪缸。
?如果元素已淡出贵涵，則 fadeToggle() 會(huì)向元素添加淡入效果。
?如果元素已淡入恰画，則 fadeToggle() 會(huì)向元素添加淡出效果宾茂。

$(selector).fadeToggle(speed,callback);

同上。
jQuery fadeTo() 方法
?jQuery fadeTo() 方法允許漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間）拴还。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 參數(shù)規(guī)定效果的時(shí)長跨晴。它可以取以下值："slow"、"fast" 或毫秒片林。
fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）端盆。
可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱怀骤。

通過 jQuery，您可以在元素上創(chuàng)建滑動(dòng)效果焕妙。
jQuery 擁有以下滑動(dòng)方法：

• slideDown()
• slideUp()
• slideToggle()
  jQuery slideDown() 方法
  ?jQuery slideDown() 方法用于向下滑動(dòng)元素蒋伦。

$(selector).slideDown(speed,callback);

可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"焚鹊、"fast" 或毫秒痕届。
可選的 callback 參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱。
jQuery slideUp() 方法
?jQuery slideUp() 方法用于向上滑動(dòng)元素末患。

$(selector).slideUp(speed,callback);

同上
jQuery slideToggle() 方法
?jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進(jìn)行切換研叫。
如果元素向下滑動(dòng)，則 slideToggle() 可向上滑動(dòng)它們璧针。
如果元素向上滑動(dòng)嚷炉，則 slideToggle() 可向下滑動(dòng)它們。

$(selector).slideToggle(speed,callback);

同上

jQuery 動(dòng)畫 - animate() 方法
jQuery animate() 方法用于創(chuàng)建自定義動(dòng)畫探橱。

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

必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性渤昌。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"走搁、"fast" 或毫秒。
可選的 callback 參數(shù)是動(dòng)畫完成后所執(zhí)行的函數(shù)名稱迈窟。
提示：默認(rèn)地私植，所有 HTML 元素都有一個(gè)靜態(tài)位置，且無法移動(dòng)车酣。
如需對位置進(jìn)行操作曲稼，要記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute湖员！
提示：可以用 animate() 方法來操作所有 CSS 屬性嗎？
是的，幾乎可以冯键！不過拴驮，需要記住一件重要的事情：當(dāng)使用 animate() 時(shí)，必須使用 Camel 標(biāo)記法書寫所有的屬性名凳寺，比如鸭津，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right肠缨，等等逆趋。
同時(shí)，色彩動(dòng)畫并不包含在核心 jQuery 庫中晒奕。
如果需要生成顏色動(dòng)畫闻书，您需要從 jQuery.com 下載 Color Animations 插件名斟。
jQuery animate() - 使用相對值
也可以定義相對值（該值相對于元素的當(dāng)前值）。需要在值的前面加上 += 或 -=：
jQuery animate() - 使用預(yù)定義的值
您甚至可以把屬性的動(dòng)畫值設(shè)置為 "show"魄眉、"hide" 或 "toggle"：
jQuery animate() - 使用隊(duì)列功能
默認(rèn)地砰盐，jQuery 提供針對動(dòng)畫的隊(duì)列功能。
這意味著如果您在彼此之后編寫多個(gè) animate() 調(diào)用杆融，jQuery 會(huì)創(chuàng)建包含這些方法調(diào)用的“內(nèi)部”隊(duì)列楞卡。然后逐一運(yùn)行這些 animate 調(diào)用。

jQuery 停止動(dòng)畫
jQuery stop() 方法用于停止動(dòng)畫或效果脾歇，在它們完成之前蒋腮。
stop() 方法適用于所有 jQuery 效果函數(shù)，包括滑動(dòng)藕各、淡入淡出和自定義動(dòng)畫池摧。

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

可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動(dòng)畫隊(duì)列。默認(rèn)是 false激况，即僅停止活動(dòng)的動(dòng)畫作彤，允許任何排入隊(duì)列的動(dòng)畫向后執(zhí)行。
可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫乌逐。默認(rèn)是 false竭讳。
因此，默認(rèn)地浙踢，stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫绢慢。

jQuery Callback 函數(shù)
Callback 函數(shù)在當(dāng)前動(dòng)畫 100% 完成之后執(zhí)行

$(selector).hide(speed,callback);

callback參數(shù)是一個(gè)在 hide 操作完成后被執(zhí)行的函數(shù)。

jQuery - Chaining
有一種名為鏈接（chaining）的技術(shù)洛波，允許我們在相同的元素上運(yùn)行多條 jQuery 命令胰舆，一條接著另一條。

當(dāng)進(jìn)行鏈接時(shí)蹬挤，代碼行會(huì)變得很差缚窿。不過，jQuery 在語法上不是很嚴(yán)格焰扳；您可以按照希望的格式來寫倦零，包含折行和縮進(jìn)。

</br>
</br>

HTML

獲得內(nèi)容和屬性
jQuery 中非常重要的部分吨悍，就是操作 DOM 的能力光绕。
jQuery 提供一系列與 DOM 相關(guān)的方法，這使訪問和操作元素和屬性變得很容易畜份。
提示：DOM = Document Object Model（文檔對象模型）
DOM 定義訪問 HTML 和 XML 文檔的標(biāo)準(zhǔn)：
“W3C 文檔對象模型獨(dú)立于平臺和語言的界面诞帐，允許程序和腳本動(dòng)態(tài)訪問和更新文檔的內(nèi)容、結(jié)構(gòu)以及樣式爆雹⊥＝叮”

三個(gè)簡單實(shí)用的用于 DOM 操作的 jQuery 方法：

• text() - 設(shè)置或返回所選元素的文本內(nèi)容
• html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
• val() - 設(shè)置或返回表單字段的值
  獲取屬性 - attr()
  jQuery attr() 方法用于獲取屬性值愕鼓。

jQuery - 設(shè)置內(nèi)容和屬性
同上
上面的三個(gè) jQuery 方法：text()、html() 以及 val()慧起，同樣擁有回調(diào)函數(shù)菇晃。回調(diào)函數(shù)由兩個(gè)參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)蚓挤，以及原始（舊的）值磺送。然后以函數(shù)新值返回您希望使用的字符串。
jQuery attr() 方法也用于設(shè)置/改變屬性值灿意。

jQuery - 添加元素
我們將學(xué)習(xí)用于添加新內(nèi)容的四個(gè) jQuery 方法：

• append() - 在被選元素的結(jié)尾插入內(nèi)容
• prepend() - 在被選元素的開頭插入內(nèi)容
• after() - 在被選元素之后插入內(nèi)容
• before() - 在被選元素之前插入內(nèi)容
  jQuery append() 方法
  ?jQuery append() 方法在被選元素的結(jié)尾插入內(nèi)容估灿。

$("p").append("Some appended text.");

*jQuery prepend() 方法
?jQuery prepend() 方法在被選元素的開頭插入內(nèi)容。

$("p").prepend("Some prepended text.");

通過 append() 和 prepend() 方法添加若干新元素
在上面的例子中缤剧，我們只在被選元素的開頭/結(jié)尾插入文本/HTML馅袁。
不過，append() 和 prepend() 方法能夠通過參數(shù)接收無限數(shù)量的新元素荒辕『瓜可以通過 jQuery 來生成文本/HTML（就像上面的例子那樣），或者通過 JavaScript 代碼和 DOM 元素抵窒。
jQuery after() 和 before() 方法
?jQuery after() 方法在被選元素之后插入內(nèi)容弛针。
?jQuery before() 方法在被選元素之前插入內(nèi)容。

$(img).afer("Some text after");
$(img).befor("Some text before");

通過 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能夠通過參數(shù)接收無限數(shù)量的新元素李皇∏辗埽可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建新元素疙赠。

jQuery - 刪除元素
如需刪除元素和內(nèi)容，一般可使用以下兩個(gè) jQuery 方法：

• remove() - 刪除被選元素（及其子元素）
• empty() - 從被選元素中刪除子元素

$(selector).remove();
$(selector).empty();

過濾被刪除的元素
jQuery remove() 方法也可接受一個(gè)參數(shù)朦拖，允許您對被刪元素進(jìn)行過濾圃阳。
該參數(shù)可以是任何 jQuery 選擇器的語法。

jQuery - 獲取并設(shè)置 CSS 類
jQuery 擁有若干進(jìn)行 CSS 操作的方法璧帝。我們將學(xué)習(xí)下面這些：

• addClass() - 向被選元素添加一個(gè)或多個(gè)類
• removeClass() - 從被選元素刪除一個(gè)或多個(gè)類
• toggleClass() - 對被選元素進(jìn)行添加/刪除類的切換操作
• css() - 設(shè)置或返回樣式屬性

jQuery - css() 方法
css() 方法設(shè)置或返回被選元素的一個(gè)或多個(gè)樣式屬性捍岳。
返回CSS屬性

css("propertyname");

設(shè)置CSS屬性

css("propertyname","value");

設(shè)置多個(gè)CSS屬性

css("propertyname":"value","propertyname":"value");

jQuery - 尺寸
jQuery 提供多個(gè)處理尺寸的重要方法：

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()
  jQuery width() 和 height() 方法
  width() 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）睬隶。
  height() 方法設(shè)置或返回元素的高度（不包括內(nèi)邊距锣夹、邊框或外邊距）。
  jQuery innerWidth() 和 innerHeight() 方法
  innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）苏潜。
  innerHeight() 方法返回元素的高度（包括內(nèi)邊距）银萍。
  jQuery outerWidth() 和 outerHeight() 方法
  outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）。
  outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框）恤左。
  outerWidth(true) 方法返回元素的寬度（包括內(nèi)邊距padding贴唇、邊框border和外邊距margin）搀绣。
  outerHeight(true) 方法返回元素的高度（包括內(nèi)邊距、邊框和外邊距margin）戳气。
  下面的例子設(shè)置指定的 <div> 元素的寬度和高度：

  $(button).click(function(){
        $(#div1).weigth(500).height(500);
  });

</br>
</br>

jQuery 遍歷

jQuery 遍歷链患，意為“移動(dòng)”，用于根據(jù)其相對于其他元素的關(guān)系來“查找”（或選绕磕）HTML 元素麻捻。以某項(xiàng)選擇開始，并沿著這個(gè)選擇移動(dòng)呀袱，直到抵達(dá)您期望的元素為止贸毕。
遍歷方法中最大的種類是樹遍歷（tree-traversal）。

jQuery 遍歷 - 祖先
用于向上遍歷 DOM 樹：

• parent()
• parents()
• parentsUntil()
  jQuery parent() 方法

parent() 方法返回被選元素的直接父元素压鉴。
?該方法只會(huì)向上一級對 DOM 樹進(jìn)行遍歷崖咨。
jQuery parents() 方法
?parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)油吭。
jQuery parentsUntil() 方法
?parentsUntil() 方法返回介于兩個(gè)給定元素之間的所有祖先元素击蹲。

jQuery 遍歷 - 后代
下面是兩個(gè)用于向下遍歷 DOM 樹的 jQuery 方法：

• children()
• find()

jQuery children() 方法
children() 方法返回被選元素的所有直接子元素。
該方法只會(huì)向下一級對 DOM 樹進(jìn)行遍歷婉宰。
jQuery find() 方法
find() 方法返回被選元素的后代元素歌豺，一路向下直到最后一個(gè)后代。

jQuery 遍歷 - 同胞
有許多有用的方法讓我們在 DOM 樹進(jìn)行水平遍歷：

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

jQuery siblings() 方法
siblings() 方法返回被選元素的所有同胞元素心包。
jQuery next() 方法
next() 方法返回被選元素的下一個(gè)同胞元素类咧。
jQuery nextAll() 方法
nextAll() 方法返回被選元素的所有跟隨的同胞元素。
jQuery nextUntil() 方法
nextUntil() 方法返回介于兩個(gè)給定參數(shù)之間的所有跟隨的同胞元素蟹腾。
jQuery prev(), prevAll() & prevUntil() 方法
prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似痕惋，只*不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿著同胞元素向后遍歷，而不是向前）娃殖。

jQuery 遍歷 - 過濾
三個(gè)最基本的過濾方法是：first(), last() 和 eq()值戳，它們允許您基于其在一組元素中的位置來選擇一個(gè)特定的元素。
其他過濾方法炉爆，比如 filter() 和 not() 允許您選取匹配或不匹配某項(xiàng)指定標(biāo)準(zhǔn)的元素堕虹。
jQuery first() 方法
first() 方法返回被選元素的首個(gè)元素。
jQuery last() 方法
last() 方法返回被選元素的最后一個(gè)元素芬首。
jQuery eq() 方法
eq() 方法返回被選元素中帶有指定索引號的元素赴捞。
索引號從 0 開始，因此首個(gè)元素的索引號是 0 而不是 1郁稍。
jQuery filter() 方法
filter() 方法允許您規(guī)定一個(gè)標(biāo)準(zhǔn)赦政。不匹配這個(gè)標(biāo)準(zhǔn)的元素會(huì)被從集合中刪除，匹配的元素會(huì)被返回耀怜。
jQuery not() 方法
not() 方法返回不匹配標(biāo)準(zhǔn)的所有元素昼钻。
提示：not() 方法與 filter() 相反掸屡。

</br>
</br>

jQuery - AJAX 簡介

AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

簡短地說然评，在不重載整個(gè)網(wǎng)頁的情況下仅财，AJAX 通過后臺加載數(shù)據(jù)，并在網(wǎng)頁上進(jìn)行顯示碗淌。
使用 AJAX 的應(yīng)用程序案例：谷歌地圖盏求、騰訊微博、優(yōu)酷視頻亿眠、人人網(wǎng)等等碎罚。
jQuery 提供多個(gè)與 AJAX 有關(guān)的方法。
通過 jQuery AJAX 方法纳像，您能夠使用 HTTP Get 和 HTTP Post 從遠(yuǎn)程服務(wù)器上請求文本荆烈、HTML、XML 或 JSON - 同時(shí)您能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中竟趾。
提示：如果沒有 jQuery憔购，AJAX 編程還是有些難度的。
編寫常規(guī)的 AJAX 代碼并不容易岔帽，因?yàn)椴煌臑g覽器對 AJAX 的實(shí)現(xiàn)并不相同玫鸟。這意味著您必須編寫額外的代碼對瀏覽器進(jìn)行測試。不過犀勒，jQuery 團(tuán)隊(duì)為我們解決了這個(gè)難題屎飘，我們只需要一行簡單的代碼，就可以實(shí)現(xiàn) AJAX 功能贾费。

jQuery - AJAX load() 方法
jQuery load() 方法
jQuery load() 方法是簡單但強(qiáng)大的 AJAX 方法钦购。
load() 方法從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中褂萧。

$(selector).load(url,data,callback);

必需的 URL 參數(shù)規(guī)定您希望加載的 URL押桃。
可選的 data 參數(shù)規(guī)定與請求一同發(fā)送的查詢字符串鍵/值對集合。
可選的 callback 參數(shù)是 load() 方法完成后所執(zhí)行的函數(shù)名稱箱玷。
可選的 callback 參數(shù)規(guī)定當(dāng) load() 方法完成后所要允許的回調(diào)函數(shù)∧八蓿回調(diào)函數(shù)可以設(shè)置不同的參數(shù)：

• responseTxt - 包含調(diào)用成功時(shí)的結(jié)果內(nèi)容
• statusTXT - 包含調(diào)用的狀態(tài)
• xhr - 包含 XMLHttpRequest 對象

jQuery - AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通過 HTTP GET 或 POST 請求從服務(wù)器請求數(shù)據(jù)锡足。
兩種在客戶端和服務(wù)器端進(jìn)行請求-響應(yīng)的常用方法是：GET 和 POST。

• GET - 從指定的資源請求數(shù)據(jù)
• POST - 向指定的資源提交要處理的數(shù)據(jù)

GET 基本上用于從服務(wù)器獲得（取回）數(shù)據(jù)壳坪。注釋：GET 方法可能返回緩存數(shù)據(jù)舶得。
POST 也可用于從服務(wù)器獲取數(shù)據(jù)。不過爽蝴，POST 方法不會(huì)緩存數(shù)據(jù)沐批，并且常用于連同請求一起發(fā)送數(shù)據(jù)纫骑。
jQuery $.get() 方法
$.get() 方法通過 HTTP GET 請求從服務(wù)器上請求數(shù)據(jù)。

$.get(URL,callback);

必需的 URL 參數(shù)規(guī)定您希望請求的 URL九孩。
可選的 callback 參數(shù)是請求成功后所執(zhí)行的函數(shù)名先馆。
jQuery $.post() 方法
$.post() 方法通過 HTTP POST 請求從服務(wù)器上請求數(shù)據(jù)。

$.post(URL,data,callback);

必需的 URL 參數(shù)規(guī)定您希望請求的 URL躺彬。
可選的 data 參數(shù)規(guī)定連同請求發(fā)送的數(shù)據(jù)煤墙。
可選的 callback 參數(shù)是請求成功后所執(zhí)行的函數(shù)名。

</br>
</br>

JQuery 雜項(xiàng)

jQuery noConflict() 方法
noConflict() 方法會(huì)釋放會(huì) $ 標(biāo)識符的控制宪拥，這樣其他腳本就可以使用它了仿野。
您仍然可以通過全名替代簡寫的方式來使用 jQuery
您也可以創(chuàng)建自己的簡寫。noConflict() 可返回對 jQuery 的引用她君，您可以把它存入變量脚作，以供稍后使用。

var jq = $.noConflict();

如果你的 jQuery 代碼塊使用 $ 簡寫缔刹，并且您不愿意改變這個(gè)快捷方式球涛，那么您可以把 $ 符號作為變量傳遞給 ready 方法。這樣就可以在函數(shù)內(nèi)使用 $ 符號了 - 而在函數(shù)外桨螺，依舊不得不使用 "jQuery"：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在運(yùn)行宾符！");
  });
});