jQuery 安裝
把 jQuery 添加到您的網(wǎng)頁
如需使用 jQuery彤委，您需要下載 jQuery 庫（會在下面為您講解），然后把它包含在希望使用的網(wǎng)頁中媳握。
jQuery 庫是一個 JavaScript 文件嚷往，您可以使用 HTML 的 標(biāo)簽引用它：
請注意杭棵， 標(biāo)簽應(yīng)該位于頁面的 部分博杖。
下載 jQuery
有兩個版本的 jQuery 可供下載：
Production version - 用于實(shí)際的網(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)勢：
許多用戶在訪問其他站點(diǎn)時宵呛，已經(jīng)從谷歌或微軟加載過 jQuery。所有結(jié)果是夕凝，當(dāng)他們訪問您的站點(diǎn)時宝穗，會從緩存中加載 jQuery，這樣可以減少加載時間码秉。同時逮矛，大多數(shù) CDN 都可以確保當(dāng)用戶向其請求文件時，會從離用戶最近的服務(wù)器上返回響應(yīng)转砖，這樣也可以提高加載速度须鼎。
jQuery 語法
jQuery 語法實(shí)例
演示 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ù)
在實(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é)點(diǎn)進(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 元素的背景顏色更改為紅色：
實(shí)例
$("p").css("background-color","red");
更多的選擇器實(shí)例
Paste_Image.png
jQuery 事件
jQuery 是為事件處理特別設(shè)計(jì)的。
jQuery 事件函數(shù)
jQuery 事件處理方法是 jQuery 中的核心函數(shù)纵朋。
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時所調(diào)用的方法柿顶。術(shù)語由事件“觸發(fā)”（或“激發(fā)”）經(jīng)常會被使用。
通常會把 jQuery 代碼放到 部分的事件處理方法中：
實(shí)例
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
This is a heading
This is a paragraph.
This is another paragraph.
Click me
在上面的例子中操软，當(dāng)按鈕的點(diǎn)擊事件被觸發(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 屬性來引用文件）：
實(shí)例
jQuery 名稱沖突
jQuery 使用 $ 符號作為 jQuery 的簡介方式肘交。
某些其他 JavaScript 庫中的函數(shù)（比如 Prototype）同樣使用 $ 符號笆载。
jQuery 使用名為 noConflict() 的方法來解決該問題。
var jq=jQuery.noConflict()涯呻，幫助您使用自己的名稱（比如 jq）來代替 $ 符號凉驻。
結(jié)論
由于 jQuery 是為處理 HTML 事件而特別設(shè)計(jì)的，那么當(dāng)您遵循以下原則時复罐，您的代碼會更恰當(dāng)且更易維護(hù)：
把所有 jQuery 代碼置于事件處理函數(shù)中
把所有事件處理函數(shù)置于文檔就緒事件處理器中
把 jQuery 代碼置于單獨(dú)的 .js 文件中
如果存在名稱沖突涝登，則重命名 jQuery 庫
jQuery 事件
下面是 jQuery 中事件方法的一些例子：
Paste_Image.png
jQuery 隱藏/顯示
隱藏效诅、顯示胀滚、切換趟济，滑動，淡入淡出咽笼，以及動畫顷编，哇哦！
實(shí)例
演示一個簡單的 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() 方法：
實(shí)例
$("button").click(function(){
$("p").hide(1000);
});
jQuery toggle()
通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法抖苦。
顯示被隱藏的元素毁菱，并隱藏已顯示的元素：
實(shí)例
$("button").click(function(){
$("p").toggle();
});
語法：
$(selector).toggle(speed,callback);
可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取以下值："slow"锌历、"fast" 或毫秒贮庞。
可選的 callback 參數(shù)是 toggle() 方法完成后所執(zhí)行的函數(shù)名稱。
jQuery 淡入淡出
實(shí)例
演示 jQuery fadeIn() 方法窗慎。
演示 jQuery fadeOut() 方法。
演示 jQuery fadeToggle() 方法卤材。
演示 jQuery fadeTo() 方法遮斥。
jQuery Fading 方法
通過 jQuery，您可以實(shí)現(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() 方法：
實(shí)例
$("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() 方法：
實(shí)例
$("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() 方法：
實(shí)例
$("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() 方法：
實(shí)例
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
jQuery 滑動
jQuery 滑動方法可使元素上下滑動。
實(shí)例
演示 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() 方法：
實(shí)例
$("#flip").click(function(){
$("#panel").slideDown();
});
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑動元素喇肋。
語法：
$(selector).slideUp(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時長坟乾。它可以取以下值："slow"迹辐、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱甚侣。
下面的例子演示了 slideUp() 方法：
實(shí)例
$("#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() 方法：
實(shí)例
$("#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 像素為止：
實(shí)例
$("button").click(function(){
$("div").animate({left:'250px'});
});
提示：默認(rèn)地膜钓，所有 HTML 元素都有一個靜態(tài)位置，且無法移動伯铣。
如需對位置進(jìn)行操作呻此，要記得首先把元素的
CSS position 屬性設(shè)置為relative、fixed 或 absolute腔寡！
jQuery animate() - 操作多個屬性
請注意焚鲜，生成動畫的過程中可同時使用多個屬性：
實(shí)例
$("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)前值）偶器。需要在值的前面加上 += 或 -=：
實(shí)例
$("button").click(function(){
$("div").animate({ left:'250px', height:'+=150px', width:'+=150px' });
});
jQuery animate() - 使用預(yù)定義的值
您甚至可以把屬性的動畫值設(shè)置為 "show"、"hide" 或 "toggle"：
實(shí)例
$("button").click(function(){
$("div").animate({ height:'toggle' });
});
jQuery animate() - 使用隊(duì)列功能
默認(rèn)地，jQuery 提供針對動畫的隊(duì)列功能屏轰。
這意味著如果您在彼此之后編寫多個 animate() 調(diào)用颊郎，jQuery 會創(chuàng)建包含這些方法調(diào)用的“內(nèi)部”隊(duì)列。然后逐一運(yùn)行這些 animate 調(diào)用霎苗。
實(shí)例 1
隱藏姆吭，如果您希望在彼此之后執(zhí)行不同的動畫，那么我們要利用隊(duì)列功能：
$("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");
});
實(shí)例 2
下面的例子把
元素移動到右邊唁盏，然后增加文本的字號：
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
jQuery 停止動畫
jQuery stop() 方法用于在動畫或效果完成前對它們進(jìn)行停止猾编。
實(shí)例
演示 jQuery stop() 方法。
演示 jQuery stop() 方法升敲。
jQuery stop() 方法
jQuery stop() 方法用于停止動畫或效果答倡，在它們完成之前。
stop() 方法適用于所有 jQuery 效果函數(shù)驴党，包括滑動瘪撇、淡入淡出和自定義動畫。
語法
$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動畫隊(duì)列港庄。默認(rèn)是 false倔既，即僅停止活動的動畫，允許任何排入隊(duì)列的動畫向后執(zhí)行鹏氧。
可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動畫渤涌。默認(rèn)是 false。
因此把还，默認(rèn)地实蓬，stop() 會清除在被選元素上指定的當(dāng)前動畫。
下面的例子演示 stop() 方法吊履，不帶參數(shù)：
實(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" 或毫秒缀踪。
實(shí)例
$("button").click(function(){
$("p").hide(1000);
});
由于 JavaScript 語句（指令）是逐一執(zhí)行的 - 按照次序居砖，動畫之后的語句可能會產(chǎn)生錯誤或頁面沖突，因?yà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.reibang.com/p/e18c430973b2
來源：簡書
著作權(quán)歸作者所有或粮。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處捞高。
