jQuery 簡介：爲何使用 jQuery 用
jQuery 是一個跨瀏覽器的免費開源 JavaScript 庫。其核心設計思想是「寫更少的代碼，作更多的事情」(Write Less Do More)。jQuery 提供了一套易於使用的 API。這些 API 極大地簡化了客戶端(瀏覽器)編程過程當中的許多方面，包括：jquery
- HTML DOM 的遍歷與操做
- 瀏覽器事件處理
- AJAX（Asynchronous JavaScript And XML）編程
- 特效（如動畫效果）
在直接使用 JavaScropt+DHTML 的傳統客戶端編程方式下，開發人員不得不編寫冗長的代碼。而且，爲了使這些代碼可以兼容不一樣的瀏覽器，咱們還得編寫額外的代碼來處理這些跨瀏覽器問題。jQuery 的設計目標正是在於簡化客戶端編程。讓咱們可以編寫簡練的代碼，節約開發時間，而這些代碼卻同樣能夠功能強大，而且兼容多種瀏覽器。web
回頁首ajax
獲取 jQuery：開始使用 jQuery
jQuery 網站上提供了兩種方式的發佈文件。一種是內容通過壓縮的文件；另外一種是原始文件。前者文件中不包含代碼註釋以及代碼運行過程當中不須要的空白字符，它適合於生產環境(正式使用的環境)中使用，能夠減小文件加載所需時間。後者文件中包含詳細的代碼註釋，適合於開發和測試環境中使用。chrome
jQuery 的下載地址：http://jquery.com/download/編程
下載 jQuery 以後，在相應的網頁中經過 script 元素引用 jQuery 代碼便可使用它。如清單 1 所示：api
清單 1. 從本地站點引用 jQuery
<html> <head> <title>使用 jQuery</title> <script src="../js/lib/jQuery/1.9.1/jQuery.js"></script> </head> <body> </body> </html>
咱們還能夠經過 Google、Microsoft 等公司提供的 CDN 服務直接獲取 jQuery。其方法是在須要使用 jQuery 的網頁中直接引用 CDN 服務的 URL。好比，使用 Google 的 CDN 的一個網頁清單 2 所示：數組
清單 2. 從 CDN 引用 jQuery
<html> <head> <title>使用 jQuery</title> <script src='//ajax.googleapis.com/ajax/libs/jQuery/1.9.1/jQuery.min.js'> </script> </head> <body> </body> </html>
Microsoft 提供的 CDN 的 URL 爲： http://ajax.aspnetcdn.com/ajax/jQuery/jQuery-1.9.1.js
Hello World：jQuery 第一個實例
下面的例子中，咱們使用 jQuery 實如今頁面上顯示當前時間的功能。
清單 3. Hello World
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="../js/lib/jQuery/1.9.1/jQuery.js"></script>
<script>
function initPage(){
//jQuery 代碼：調用 jQuery 的核心函數－－－$函數
$("#message").html("Hello World, it is now:"+new Date().toLocaleString());
}
</script>
</head>
<body onload="initPage()">
<span id="message"></span>
</body>
</html>
從上面例子（在線例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=HelloWorld.htm）
的代碼中咱們能夠看到， initPage 這個函數會在頁面加載完畢後被調用。而該函數在執行後會在 ID 爲 message 的 HTML 結點內添加表示客戶端當前時間的字符串。您能夠沒必要急着去理解上面代碼的具體意思。下一節將介紹 jQuery 的語法。另外，這個例子中咱們使用 body 元素的 onload 屬性來綁定事件處理器（initPage）只是爲了方便討論。在本章的後面內容中會介紹 jQuery 中用於處理頁面 load 事件綁定的簡便 API。
jQuery 語法:溫故而知新
雖然 jQuery 自己並不是一門新的語言。可是，學習其語法有助於咱們熟練、靈活地使用它。回顧下咱們熟悉的 CSS 語法，不難發現 jQuery 的語法與 CSS 有類似之處。
jQuery 語法的設計思想是"選擇元素，對其操做"。這和 CSS 規則的語法很是相似。好比，要將頁面中一個 ID 爲 message 的元素的字體顏色設置爲藍色、字體大小設置爲 17px，則能夠定義如清單 4 所示 CSS 規則：
清單 4. CSS 規則例子
#message{
color:blue;
font-size:17px;
}
從上述 CSS 規則中可見，咱們指望的對元素外觀的操做（字體顏色設置爲藍色、字體大小設置爲 17px）是經過」 color:blue」和」font-size:17px」這 2 個屬性聲明指定的。而這些操做要做用於哪些元素，則是經過 CSS 的選擇器」#message」指定爲 ID 等於「message」的元素。
總結來講，CSS 規則中屬性聲明描述了外觀屬性操做，而選擇器則指定了將相應的屬性操做應用於哪些元素。如圖 1 所示：
圖 1. CSS 規則示意圖
jQuery 的語法其實正是模仿了 CSS 規則的語法。其語法以下：
$(selector).action(actionParameter);
這是個鏈式語法。所以，上述的語法等效於：
var objTargetElements;//要施加操做的目標元素 objTargetElements=$(selector);//指定目標元素 //調用 objTargetElements 的相關方法，對目標元素進行操做 objTargetElements.action(actionParameter);
上述語法中，
$ ：美圓符是 jQuery 核心函數 jQuery 的一個別名。固然，在 JavaScript 中「$」是一個合法的函數名。 Selector 參數指定了一個 jQuery 選擇器。jQuery 選擇器相似於 CSS 中的選擇器，它告訴 jQuery 咱們準備對哪些元素進行操做(action)。而且，CSS 中的各類選擇器 jQuery 中都有等同的選擇器。
action ：該方法指定了要對 selector 所指定的元素進行什麼具體操做。actionParameter 參數是個可選參數，是根據具體所指定的方法來定的，它會隨具體方法的變化而變化。
所以，清單 3 中的 jQuery 語句至關於：
清單 5.Query 非鏈式語法示例
/*
$("#message").html("Hello World, it is now:"
+new Date().toLocaleString());
至關於：
*/
var objTargetElements;//要施加操做的目標元素
//指定目標元素爲 ID 等於 message 的元素，使用基於 ID 的選擇器
objTargetElements=$("#message");
//調用 objTargetElements 的 html 方法，設置目標元素的 HTML 內容
objTargetElements.html ("Hello World, it is now:"
+new Date().toLocaleString());
$ 函數的返回值是一個 jQuery 自定義的相似數組的對象。該對象的各個數字下標表示的屬性對應的值爲選擇器所匹配的各個元素。
好比，清單 3 中的 $ 函數調用，它爲 $ 函數指定了一個基於元素 ID 的選擇器表達式：
$("#message")
其返回值將知足下列條件表達式。由於選擇器表達式」#message」匹配了惟一一個 ID 爲 message 的元素：
document.getElementById("message")==$("#message")[0]
$ 函數返回的對象還提供了一些方法，經過調用該對象的相關方法能夠對選擇器所匹配的元素進行相應的操做。好比，清單 3 所示代碼中，咱們經過調用$函數返回對象的 html 方法設置選擇器表達式」#message」所匹配的元素的 HTML 內容。
爲了更加直觀得了解 $ 函數的返回值，建議您經過 Chrome 瀏覽器中的開發者工具的表達式監視功能（ Watch Expressions），觀察一個具體的$函數調用的返回值。如圖 2 所示：
圖 2.$ 函數返回值示意圖
jQuery 的語法和清單 3 中的 jQuery 語句的對應關係如圖 3 所示：
圖 3. jQuery 語法實例
$ 函數返回的對象提供了一個名爲 each 的經常使用方法。 each 方法接受一個參數，該參數是一個回調函數。 each 方法會針對選擇器表達式所匹配的元素中的每一個元素逐次調用這個回調函數，並將單個元素及其對應的索引號做爲參數傳入該函數。下面看一個實例。
假設在頁面中有多個連接，如今要將這個頁面中全部連接的 URL 顯示在瀏覽器的控制檯中。
頁面代碼以下所示：
清單 6.$ 函數返回值實例
<a href="https://www.ibm.com/developerworks/cn/" target="_blank"> IBM developerWorks 中文站</a><br/> <a href="https://www.ibm.com/developerworks" target="_blank"> IBM developerWorks</a><br/> <a href="/" target="_blank">首頁</a><br/>
(在線例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=$FuncReturn.htm）
此時，能夠用基於元素名稱的選擇器來匹配多個元素（頁面中全部的連接元素），並調用$函數返回值的 each 方法。這裏，咱們定義一個回調函數（ 這個回調函數一般是一個匿名函數，方便代碼編寫），把它做爲 each 函數的參數。在這個回調函數中，咱們往瀏覽器控制檯中打印每一個連接的 URL，如清單 7 代碼所示：
清單 7.jQuery 的 each 方法－－－遍歷集合型對象的簡便方法
//用基於元素名稱的選擇器去匹配頁面中的全部連接元素
$("a").each(function(index,ele){//匿名函數做爲 each 方法的參數，供其調用
console.log("連接"+index+":"+ele.href);//往控制檯中打印連接 URL
});
如今，您不妨作一個練習，來改變 ID 爲 tip 的元素使其可以以粗體顯示。咱們知道，要讓一個元素粗體顯示，只要指定其 CSS 屬性 font-weight 爲 bold 便可。也就是說，實現這樣一個功能，咱們須要的選擇器是「#tip」，對應的操做是修改 CSS 屬性。所以，jQuery 的代碼是：
$("#tip").css("font-weight","bold");
您可使用本教程配套的在線代碼編輯器直接編寫代碼練習上面的代碼：
http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=HelloWorld.htm
在線代碼編輯器效果以下圖所示：
圖 4. 在線代碼編輯器
jQuery 選擇器:jQuery 利器
瞭解 jQuery 的語法後，咱們明白選擇器是 jQuery 中的核心概念。下面介紹 jQuery 幾種常見的選擇器。這些選擇器咱們大均可以從 CSS 中找到它們的影子。
前文講到 Chrome 瀏覽器中的開發者工具表達式監視功能可讓咱們直觀地看到$函數返回值的各個屬性和方法。所以，在咱們學習 jQuery 甚至實際工做過程當中均可以經過 Chrome 瀏覽器的表達式監控工具直接觀察指定的選擇器表達式所匹配的元素，以便實時地肯定所要使用的選擇器表達式是否正確。
基於元素 ID 的選擇器
這種選擇器能夠指定惟一的一個元素。清單 3 的代碼就是使用這種選擇器。其語法是：
"#元素 ID"
若是要對一個特定的元素進行操做，那麼就能夠設置該元素的 ID 屬性值，而後使用基於 ID 的選擇器指定要進行操做的元素。好比，以下 HTML 片斷中的 ID 爲 btnTest 的元素，就能夠用基於元素 ID 的選擇器」#btnTest」來指定。
<input type="button" id="btnTest" value="Test"></input>
如圖 5 所示：
圖 5. 基於元素 ID 的選擇器
（在線例子http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=IDSelector.htm）
基於元素標籤名的選擇器
若是要對標籤名相同的元素（如都是用標籤"A"表示的超連接元素）進行操做，則可使用基於標籤名的選擇器。其語法以下：
"元素名"
在 CSS 中，咱們能夠用元素標籤名作選擇器。好比，下面的 CSS 規則表示將全部連接的字體尺寸設置爲 25 像素。
a{
font-size:25px;
}
經過 jQuery 代碼實現上述 CSS 規則的功能，咱們可使用元素標籤名做爲選擇器。代碼如清單 8 所示：
清單 8.使用元素標籤名做爲選擇器
$("a").each(function(){//選擇器表達式是"a"
$(this).css("fontSize","25px");
});
在線例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=EleNameSelector.htm
基於 CSS 類名選擇器
jQuery 也支持 CSS 所支持的類名選擇器。其語法是：
".類名"
假設咱們要把頁面中全部表示金額的輸入框的值都在其前面加一個貨幣符號前綴。這樣的功能實現的時候就能夠用基於類名的選擇器了：在頁面中將全部表示金額的輸入框元素的 class 屬性值設爲"amount"。再經過以下代碼實現添加貨幣符號的功能。
清單 9.使用 CSS 類名做爲選擇器
/*
選擇全部類爲 amount 的元素
each 方法會針對選擇器所匹配的每一個元素
調用該方法的參數中所指定的函數。並將該
元素做爲函數調用的第二個實際參數。
*/
$(".amount").each(function(i,ele){
//設置元素的值爲其當前值加上貨幣符號前綴
$(ele).val('￥'+$(ele).val());
});
在線例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=ClsNameSelector.htm
基於元素屬性的選擇器
jQuery 也支持基於元素屬性的選擇器。其語法是：
「元素名[屬性名=屬性指]」
好比下面的 CSS 規則描述了將全部的文本框的背景色設爲黃色。
input[type="text"]{
background-color:yellow;
}
如上面的頁面效果用 jQuery 代碼實現，則可使用屬性選擇器來編寫相應的代碼：
清單 10.使用元素屬性做爲選擇器
$("input[type=text]").css('background-color','yellow');
在線例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=AttrSelctor.htm
基於 DOM 對象的選擇器
jQuery 也支持使用 DOM 對象做爲選擇器。這種選擇器在一些特定狀況下會顯得很是有用和方便。
好比清單 3 所示的例子中，監聽頁面加載（load）事件的監聽器 initPage 是經過 body 元素的 onload 屬性來指定的。jQuery 提供了一種簡便的方法來處理頁面的 load 事件綁定。其方法就是使用 document 對象做爲選擇器傳遞給$函數。而後調用給函數返回值的 ready 方法。調用時將事件監聽器函數做爲 ready 方法的參數傳入。所以，清單 3 所示例子中的頁面 load 事件綁定能夠用 jQuery 代碼的方式實現，以下代碼所示：
清單 11.使用 ready 方法處理頁面 load 事件
$(document).ready(initPage);//頁面加載完畢後，jQuery 會回調 initPage
頁面 load 事件的綁定也能夠直接將事件監聽器函數做爲 $ 函數的參數直接對該函數進行調用。此時，$ 函數會在頁面加載完畢（即 HTML 文檔及相關資源文件，如 CSS、圖片和 JavaScript 文件，加載完畢後觸發）後，回調這個事件監聽器。所以，上述代碼也能夠寫做：
清單 12.直接將函數傳遞給$函數處理頁面 load 事件
$(initPage);
一般，這樣的事件監聽器能夠寫成匿名函數。以下代碼所示：
清單 13.使用匿名函數
$(function(){//該函數在頁面加載完畢會被 jQuery 調用
//事件處理代碼
});
其它選擇器
jQuery 還支持其它類型的選擇器，如基於僞類的選擇器、基於元素層次關係的選擇器等。有關選擇器的進一步信息，您能夠參考 jQuery 的 API 文檔：http://api.juery.com/category/selectors。
jQuery 的架構：支持插件機制
jQuery 支持提供插件的方式擴展其功能。從這個角度來將，當咱們提到 jQuery 時，默認就是指 jQuery 內核(Core)，它是由 jQuery 官方組織所開發和維護的。而使用者則能夠根據須要開發一些插件。本教程後面會介紹一些經常使用 jQuery UI 插件，以及如何自定義一個插件。
jQuery 事件:輕鬆實現跨瀏覽器的事件處理
bind 方法能夠實現事件監聽器的綁定。下面看一個具體的例子。這個例子實現這樣一個功能：
按鈕被單擊後，其下方會顯示或者隱藏一段文本。
清單 14.使用 bind 方法綁定事件監聽器
//當 ID 爲 btnDetails 的按鈕被單擊時，下面的匿名函數會被 jQuery 調用
$("#btnDetails").bind("click",function(){
$("#divDetails").toggle();//顯示或者隱藏 ID 爲 divDetails 的元素
});
從上述的例子（在線例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=EvtBinding.htm）中能夠看出。當選擇器所匹配的元素被單擊時， bind 方法的第二個參數所指定的函數會被 jQuery 調用。而負責顯示/隱藏 divDetails 塊的代碼就會隨着其所在的函數被調用而被執行，從而實現了預期的頁面效果。
bind 方法的語法是：
event ：要處理的事件的名稱。該名稱不須要加前綴 on。
handler ：事件監聽器，即對瀏覽器事件進行處理的函數。這一般是一個匿名函數。在 event 參數所表示的事件被觸發後，jQuery 會調用這個函數（即回調），並向該函數傳入一個 jQuery 自定義的事件對象。該事件對象是 jQuery 根據原始的瀏覽器事件對象建立的。jQuery 這麼作是經過一個"中立"的事件對象來規避不一樣的瀏覽器所提供的同一個事件的事件對象的屬性不一樣的問題。這使得咱們能夠用一樣的代碼處理事件，而沒必要關心不一樣瀏覽器所提供的原始事件對象的差別。
data ：表示須要在事件觸發後傳遞給事件監聽器的額外數據。它是做爲 jQuery 事件對象的 data 屬性傳遞給事件監聽器的。
下面看具體的例子。
使用 jQuery 事件對象
對某些事件的處理，咱們可能須要從事件對象中獲取當前事件的進一步信息。
假設頁面上有個輸入框只容許輸入數字。當用戶輸入的字符爲非數字字符時，頁面可以自動將其"過濾"掉，即在輸入框中不顯示這些無效的字符。實現這樣的功能就須要從表示用戶輸入的 keypress 事件對象中獲取用戶當前所按的鍵的鍵盤編碼值，以便找出相應的字符。代碼如清單 15 所示：
清單 15.使用 jQuery 事件對象
$("#txtVerifyCode").bind("keypress",function(evt){
var keyCode=evt.which;//從事件對象中獲取當前按鍵的編碼值
var char=String.fromCharCode(keyCode) ;//將按鍵的編碼轉換爲相應的字符
if(!/\d/.test(char)){//當前輸入的字符不是數字字符
//調用事件對象的 preventDefault 方法，取消事件的默認行爲，此處即取消輸入。
evt.preventDefault();
}
});
從上面的例子（在線例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=JqEvtObj.htm）能夠看出，具體是什麼按鍵觸發了 keypress 事件的信息能夠從 jQuery 封裝的 jQuery 對象的相應屬性 keyCode 中獲取。而 jQuery 在調用咱們的事件監聽器時會將其封裝的事件對象做爲惟一參數傳遞給事件監聽器。
向事件監聽器傳遞額外參數
下面看一個向監聽器傳遞額外參數的例子。
假設如今有個可以在頁面中顯示提示信息的函數，其定義以下：
function showTip(msg){
$('#divTips').html(msg);//顯示具體的提示內容
}
頁面上有兩個按鈕，它們被單擊的時候頁面上分別會顯示不一樣的提示信息。那麼，咱們能夠編寫以下的事件監聽器：
清單 16.從事件對象中獲取額外數據
function showTipHandler(evt){
var data=evt.data;//獲取額外參數
/*額外參數是一個咱們根據須要的自定義對象。這裏，咱們假設這個對象有個 msg 屬性。
它表示但願要顯示的提示信息。
*/
var msg=data.msg;
showTip(msg);
}
那麼，咱們就能夠在事件綁定的時候，使用上面定義的事件監聽器。並定義其額外參數。代碼以下：
清單 17.向事件監聽器傳遞額外數據
$('#tip1').bind('click',{msg:'中文提示'},showTipHandler);
$('#tip2').bind('click',{msg:'English tip'},showTipHandler);
從上面的例子（在線例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=EvtObjExtraData.htm）能夠看出，在調用 bind 方法綁定事件監聽器時指定的額外數據（即 bind 方法的第 2 個參數）能夠被事件監聽器經過訪問事件對象的 data 屬性來獲取。這個特性在使用統一個事件監聽器出來多個元素的事件時顯得頗有用。
事件綁定的簡便方法
經過 bind 方法實現事件綁定，須要咱們在 bind 方法的第一個參數中指定具體的事件名。
jQuery 也提供一些簡便的事件綁定方法。這些方法就以所要處理的事件名命名。
好比，清單 15 中的代碼能夠寫成：
$("#txtVerifyCode").keypress(function(evt){
//這裏是事件處理代碼
});
取消事件綁定
若是要取消某個事件監聽器。則可使用 unbind 方法。
下面的例子演示了取消 ID 爲 btnTest 的按鈕上的事件監聽器 handleClick 。代碼以下:
清單 18.取消事件綁定
$("#btnEvtBind").click(handleClick);
//按鈕 btnTest 被單擊後，btnEvtBind 按鈕再也不可以響應 click 事件
$("#btnTest").click(function(){
//使得 handleClick 監聽器再也不起做用
$("#btnEvtBind").unbind("click",handleClick);
});
調用 unbind 方法時，若是不指定第二個參數，則 jQuery 會取消監聽第一個參數所指定的事件的全部監聽器。若沒有指定任何參數，則 jQuery 會取消選擇器表達式匹配的全部元素上全部監聽器。
總結
本文講解了 jQuery 的語法、選擇器及其事件處理 API。這些是 jQuery 的核心，也是使用 jQuery 及學習本系列教程後續內容的基礎。雖然這些內容不是很難掌握，但編程畢竟是一種技能，而非知識，技能是須要經過練習才能得到的。所以，建議您利用本教程提供的在線例子，本身動手試着去作一下練習，並在練習過程當中體會教程所講解的內容。
參考資料
學習
- jQuery 網站：http://jquery.com/
- Google Chrome 開發者工具官方文檔：https://developers.google.com/chrome-developer-tools/
- 鏈式語法：http://book.51cto.com/art/201211/367093.htm
- developerWorks Web development 專區：經過專門關於 Web 技術的文章和教程，擴展您在網站開發方面的技能。
- developerWorks Ajax 資源中心：這是有關 Ajax 編程模型信息的一站式中心，包括不少文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這裏找到。
- developerWorks Web 2.0 資源中心，這是有關 Web 2.0 相關信息的一站式中心，包括大量 Web 2.0 技術文章、教程、下載和相關技術資源。您還能夠經過 Web 2.0 新手入門 欄目，迅速瞭解 Web 2.0 的相關概念。
- 查看 HTML5 專題，瞭解更多和 HTML5 相關的知識和動向。