jQuery 安裝
把 jQuery 添加到您的網(wǎng)頁
如需使用 jQuery，您需要下載 jQuery 庫（會在下面為您講解），然后把它包含在希望使用的網(wǎng)頁中。
jQuery 庫是一個 JavaScript 文件，您可以使用 HTML 的 標(biāo)簽引用它：
請注意， 標(biāo)簽應(yīng)該位于頁面的 部分。
下載 jQuery
有兩個版本的 jQuery 可供下載：
Production version - 用于實際的網(wǎng)站中，已被精簡和壓縮。
Development version - 用于測試和開發(fā)（未壓縮，是可讀的代碼）
這兩個版本都可以從jQuery.com下載。
提示：您可以把下載文件放到與頁面相同的目錄中，這樣更方便使用。
替代方案
如果您不希望下載并存放 jQuery，那么也可以通過 CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)） 引用它。
谷歌和微軟的服務(wù)器都存有 jQuery 。
如需從谷歌或微軟引用 jQuery，請使用以下代碼之一：
Google CDN:
提示：通過 Google CDN 來獲得最新可用的版本：
如果您觀察上什么的 Google URL - 在 URL 中規(guī)定了 jQuery 版本 (1.8.0)。如果您希望使用最新版本的 jQuery，也可以從版本字符串的末尾（比如本例 1.8）刪除一個數(shù)字，谷歌會返回 1.8 系列中最新的可用版本（1.8.0、1.8.1 等等），或者也可以只剩第一個數(shù)字，那么谷歌會返回 1 系列中最新的可用版本（從 1.1.0 到 1.9.9）。
Microsoft CDN:
提示：使用谷歌或微軟的 jQuery，有一個很大的優(yōu)勢：
許多用戶在訪問其他站點時，已經(jīng)從谷歌或微軟加載過 jQuery。所有結(jié)果是，當(dāng)他們訪問您的站點時，會從緩存中加載 jQuery，這樣可以減少加載時間。同時，大多數(shù) CDN 都可以確保當(dāng)用戶向其請求文件時，會從離用戶最近的服務(wù)器上返回響應(yīng)，這樣也可以提高加載速度。
jQuery 語法
jQuery 語法實例
演示 jQuery hide() 函數(shù)，隱藏當(dāng)前的 HTML 元素。
演示 jQuery hide() 函數(shù)，隱藏 id="test" 的元素。
演示 jQuery hide() 函數(shù)，隱藏所有 < p> 元素。
演示 jQuery hide() 函數(shù)，隱藏所有 class="test" 的元素。
jQuery 語法
jQuery 語法是為 HTML 元素的選取編制的，可以對元素執(zhí)行某些操作。
基礎(chǔ)語法是：$(selector).action()
美元符號定義 jQuery
選擇符（selector）“查詢”和“查找” HTML 元素
jQuery 的 action() 執(zhí)行對元素的操作
示例
$(this).hide() - 隱藏當(dāng)前元素
$("p").hide() - 隱藏所有段落
$(".test").hide() - 隱藏所有 class="test" 的所有元素
$("#test").hide() - 隱藏所有 id="test" 的元素
提示：jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。
文檔就緒函數(shù)
在實例中的所有 jQuery 函數(shù)位于一個 document ready 函數(shù)中：
$(document).ready(function(){--- jQuery functions go here ----});
這是為了防止文檔在完全加載（就緒）之前運(yùn)行 jQuery 代碼。
如果在文檔沒有完全加載之前就運(yùn)行函數(shù)，操作可能失敗。下面是兩個具體的例子：
試圖隱藏一個不存在的元素
獲得未完全加載的圖像的大小
jQuery 選擇器
在 HTML DOM 術(shù)語中：
選擇器允許您對 DOM 元素組或單個 DOM 節(jié)點進(jìn)行操作。
jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取 < p> 元素。
$("p.intro") 選取所有 class="intro" 的 < p> 元素。
$("p#demo") 選取所有 id="demo" 的 < p> 元素。
jQuery 屬性選擇器
jQuery 使用 XPath 表達(dá)式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素。
jQuery CSS 選擇器
jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性。
下面的例子把所有 p 元素的背景顏色更改為紅色：
實例
$("p").css("background-color","red");
更多的選擇器實例
Paste_Image.png
jQuery 事件
jQuery 是為事件處理特別設(shè)計的。
jQuery 事件函數(shù)
jQuery 事件處理方法是 jQuery 中的核心函數(shù)。
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時所調(diào)用的方法。術(shù)語由事件“觸發(fā)”（或“激發(fā)”）經(jīng)常會被使用。
通常會把 jQuery 代碼放到 部分的事件處理方法中：
實例
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
This is a heading
This is a paragraph.
This is another paragraph.
Click me
在上面的例子中，當(dāng)按鈕的點擊事件被觸發(fā)時會調(diào)用一個函數(shù)：
$("button").click(function() {..some code... } )
該方法隱藏所有 <? p> 元素：
$("p").hide();
單獨(dú)文件中的函數(shù)
如果您的網(wǎng)站包含許多頁面，并且您希望您的 jQuery 函數(shù)易于維護(hù)，那么請把您的 jQuery 函數(shù)放到獨(dú)立的 .js 文件中。
當(dāng)我們在教程中演示 jQuery 時，會將函數(shù)直接添加到 部分中。不過，把它們放到一個單獨(dú)的文件中會更好，就像這樣（通過 src 屬性來引用文件）：
實例
jQuery 名稱沖突
jQuery 使用 $ 符號作為 jQuery 的簡介方式。
某些其他 JavaScript 庫中的函數(shù)（比如 Prototype）同樣使用 $ 符號。
jQuery 使用名為 noConflict() 的方法來解決該問題。
var jq=jQuery.noConflict()，幫助您使用自己的名稱（比如 jq）來代替 $ 符號。
結(jié)論
由于 jQuery 是為處理 HTML 事件而特別設(shè)計的，那么當(dāng)您遵循以下原則時，您的代碼會更恰當(dāng)且更易維護(hù)：
把所有 jQuery 代碼置于事件處理函數(shù)中
把所有事件處理函數(shù)置于文檔就緒事件處理器中
把 jQuery 代碼置于單獨(dú)的 .js 文件中
如果存在名稱沖突，則重命名 jQuery 庫
jQuery 事件
下面是 jQuery 中事件方法的一些例子：
Paste_Image.png
jQuery 隱藏/顯示
隱藏、顯示、切換，滑動，淡入淡出，以及動畫，哇哦！
實例
演示一個簡單的 jQuery hide() 方法。
另一個 hide() 演示。如何隱藏部分文本。
jQuery hide() 和 show()
通過 jQuery，您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素：
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
語法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有 speed 參數(shù)的 hide() 方法：
實例
$("button").click(function(){
$("p").hide(1000);
});
jQuery toggle()
通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
顯示被隱藏的元素，并隱藏已顯示的元素：
實例
$("button").click(function(){
$("p").toggle();
});
語法：
$(selector).toggle(speed,callback);
可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是 toggle() 方法完成后所執(zhí)行的函數(shù)名稱。
jQuery 淡入淡出
實例
演示 jQuery fadeIn() 方法。
演示 jQuery fadeOut() 方法。
演示 jQuery fadeToggle() 方法。
演示 jQuery fadeTo() 方法。
jQuery Fading 方法
通過 jQuery，您可以實現(xiàn)元素的淡入淡出效果。
jQuery 擁有下面四種 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隱藏的元素。
語法：
$(selector).fadeIn(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeIn() 方法：
實例
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow")
$("#div3").fadeIn(3000);
});
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可見元素。
語法：
$(selector).fadeOut(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeOut() 方法：
實例
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換。
如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。
語法：
$(selector).fadeToggle(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeToggle() 方法：
實例
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() 方法
jQuery fadeTo() 方法允許漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間）。
語法：
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）。
可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeTo() 方法：
實例
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
jQuery 滑動
jQuery 滑動方法可使元素上下滑動。
實例
演示 jQuery slideDown() 方法。
演示 jQuery slideUp() 方法。
演示 jQuery slideToggle() 方法。
jQuery 滑動方法
通過 jQuery，您可以在元素上創(chuàng)建滑動效果。
jQuery 擁有以下滑動方法：
slideDown()
slideUp()
slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑動元素。
語法：
$(selector).slideDown(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了 slideDown() 方法：
實例
$("#flip").click(function(){
$("#panel").slideDown();
});
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑動元素。
語法：
$(selector).slideUp(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了 slideUp() 方法：
實例
$("#flip").click(function(){
$("#panel").slideUp();
});
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進(jìn)行切換。
如果元素向下滑動，則 slideToggle() 可向上滑動它們。
如果元素向上滑動，則 slideToggle() 可向下滑動它們。
$(selector).slideToggle(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了 slideToggle() 方法：
實例
$("#flip").click(function(){
$("#panel").slideToggle();
});
jQuery 動畫
jQuery animate() 方法允許您創(chuàng)建自定義的動畫。
jQuery 動畫 - animate() 方法
jQuery animate() 方法用于創(chuàng)建自定義動畫。
語法：
$(selector).animate({params},speed,callback);
必需的 params 參數(shù)定義形成動畫的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示 animate() 方法的簡單應(yīng)用；它把
元素移動到左邊，直到 left 屬性等于 250 像素為止：
實例
$("button").click(function(){
$("div").animate({left:'250px'});
});
提示：默認(rèn)地，所有 HTML 元素都有一個靜態(tài)位置，且無法移動。
如需對位置進(jìn)行操作，要記得首先把元素的
CSS position 屬性設(shè)置為relative、fixed 或 absolute！
jQuery animate() - 操作多個屬性
請注意，生成動畫的過程中可同時使用多個屬性：
實例
$("button").click(function(){
$("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' });
});
提示：可以用 animate() 方法來操作所有 CSS 屬性嗎？
是的，幾乎可以！不過，需要記住一件重要的事情：當(dāng)使用 animate() 時，必須使用 Camel 標(biāo)記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同時，色彩動畫并不包含在核心 jQuery 庫中。
如果需要生成顏色動畫，您需要從 jQuery.com 下載 Color Animations 插件。
jQuery animate() - 使用相對值
也可以定義相對值（該值相對于元素的當(dāng)前值）。需要在值的前面加上 += 或 -=：
實例
$("button").click(function(){
$("div").animate({ left:'250px', height:'+=150px', width:'+=150px' });
});
jQuery animate() - 使用預(yù)定義的值
您甚至可以把屬性的動畫值設(shè)置為 "show"、"hide" 或 "toggle"：
實例
$("button").click(function(){
$("div").animate({ height:'toggle' });
});
jQuery animate() - 使用隊列功能
默認(rèn)地，jQuery 提供針對動畫的隊列功能。
這意味著如果您在彼此之后編寫多個 animate() 調(diào)用，jQuery 會創(chuàng)建包含這些方法調(diào)用的“內(nèi)部”隊列。然后逐一運(yùn)行這些 animate 調(diào)用。
實例 1
隱藏，如果您希望在彼此之后執(zhí)行不同的動畫，那么我們要利用隊列功能：
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
實例 2
下面的例子把
元素移動到右邊，然后增加文本的字號：
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
jQuery 停止動畫
jQuery stop() 方法用于在動畫或效果完成前對它們進(jìn)行停止。
實例
演示 jQuery stop() 方法。
演示 jQuery stop() 方法。
jQuery stop() 方法
jQuery stop() 方法用于停止動畫或效果，在它們完成之前。
stop() 方法適用于所有 jQuery 效果函數(shù)，包括滑動、淡入淡出和自定義動畫。
語法
$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動畫隊列。默認(rèn)是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執(zhí)行。
可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動畫。默認(rèn)是 false。
因此，默認(rèn)地，stop() 會清除在被選元素上指定的當(dāng)前動畫。
下面的例子演示 stop() 方法，不帶參數(shù)：
實例
$("#stop").click(function(){
$("#panel").stop();
});
jQuery 函數(shù)
Callback 函數(shù)在當(dāng)前動畫 100% 完成之后執(zhí)行。
jQuery 動畫的問題
許多 jQuery 函數(shù)涉及動畫。這些函數(shù)也許會將speed或duration作為可選參數(shù)。
例子：$("p").hide("slow")
speed或duration參數(shù)可以設(shè)置許多不同的值，比如 "slow", "fast", "normal" 或毫秒。
實例
$("button").click(function(){
$("p").hide(1000);
});
由于 JavaScript 語句（指令）是逐一執(zhí)行的 - 按照次序，動畫之后的語句可能會產(chǎn)生錯誤或頁面沖突，因為動畫還沒有完成。
為了避免這個情況，您可以以參數(shù)的形式添加 Callback 函數(shù)。
jQuery Callback 函數(shù)
當(dāng)動畫 100% 完成后，即調(diào)用 Callback 函數(shù)。
典型的語法：
$(selector).hide(speed,callback)
callback參數(shù)是一個在 hide 操作完成后被執(zhí)行的函數(shù)。
錯誤（沒有 callback）
$("p").hide(1000);
alert("The paragraph is now hidden");
正確（有 callback）
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
結(jié)論：如果您希望在一個涉及動畫的函數(shù)之后來執(zhí)行語句，請使用 callback 函數(shù)。
jQuery Chaining
通過 jQuery，您可以把動作/方法鏈接起來。
Chaining 允許我們在一條語句中允許多個 jQuery 方法（在相同的元素上）。
jQuery 方法鏈接
直到現(xiàn)在，我們都是一次寫一條 jQuery 語句（一條接著另一條）。
不過，有一種名為鏈接（chaining）的技術(shù)，允許我們在相同的元素上運(yùn)行多條 jQuery 命令，一條接著另一條。
提示：這樣的話，瀏覽器就不必多次查找相同的元素。
如需鏈接一個動作，您只需簡單地把該動作追加到之前的動作上。
例子 1
下面的例子把 css(), slideUp(), and slideDown() 鏈接在一起。"p1" 元素首先會變?yōu)榧t色，然后向上滑動，然后向下滑動：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
如果需要，我們也可以添加多個方法調(diào)用。
提示：當(dāng)進(jìn)行鏈接時，代碼行會變得很差。不過，jQuery 在語法上不是很嚴(yán)格；您可以按照希望的格式來寫，包含折行和縮進(jìn)。
例子 2
這樣寫也可以運(yùn)行：
$("#p1").css("color","red") .slideUp(2000) .slideDown(2000);
jQuery 會拋掉多余的空格，并按照一行長代碼來執(zhí)行上面的代碼行。
作者：hx永恒之戀
鏈接：http://www.lxweimin.com/p/e18c430973b2
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
