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