前言
之前的項目也一直都是在用jQuery，遇到問題就翻翻API，也從來沒有進行過比較系統的總結和整理。最近由於要做個培訓，因為比較系統的歸納了一下javascript的相關知識，順手做個筆記。說到jQuery，難免避開javascript，所以打算本次分兩篇文章簡要的介紹一下，第一篇主要是jQuery方面的，第二章就是對javascript做一個比較深入的探討。
jQuery的優點
jQuery是一個輕量級的js框架，它在出現后的段時間內就贏得相當大的一部分人的青睞，它有着相當多的優點：代碼簡練，容易上手，瀏覽器兼容，插件豐富....等等。就我個人而言，我選擇jQuery是鍾情於它簡潔而強大的選擇器和快速靈活的事件處理等。
好了，閑話扯了這么多，咱們轉入正題，在介紹jQuery之前，我們先來看一段代碼：
View Code
<form id="loginForm" action="/" method="post"> <p>用戶名：<input type="text" name="UserID" /></p> <p>密 碼：<input type="password" name="UserPassword" /></p> <p>驗證碼：<input type="text" name="ValidateCode" /></p> <p> <input type="submit" value="登錄" /> </p> </form>
在這段代碼中我們定義了一個登錄表單，這種表單在我們的網站各個地方都可能存在，我們在表單提交之前一般都需要做一些事情，比如表單驗證。然而，我不希望在每個有這樣表單的頁面都寫上一段JS來進行表單的驗證，jQuery可以很簡潔的幫我們解決這個問題。請看下面的代碼：
View Code
<script type="text/javascript"> $(function () { $("form#loginForm input[type=submit]").click(function () { var validate = true; $("form#loginForm").find("input[type=text],input[type=password]").each(function () { if ($(this).val() == "") { validate = false; alert("登錄表單填寫的不完整"); return false; } }); return validate; }); }); </script>
這段代碼是在每個id="loginForm"的form提交前都會驗證text和password是否為空。當然了，您不可能每個form的id都為"loginForm"(雖然沒有這個id的form瀏覽器也不會報js錯誤)，也不會每個form都用submit提交，那要驗證提交的form該怎么做呢？這個難不倒jQuery，我們把上面的代碼稍作修改即可，代碼如下：
View Code
<form action="/" method="post"> <p>用戶名：<input type="text" empty="false" name="UserID" /></p> <p>密 碼：<input type="password" empty="false" name="UserPassword" /></p> <p>驗證碼：<input type="text" empty="false" name="ValidateCode" /></p> <p> <input type="submit" value="登錄" /> </p> </form>
View Code
<script type="text/javascript"> $(function () { $("form").submit(function () { var validate = true; $(this).find("input[empty=false]").each(function () { if ($(this).val() == "") { validate = false; alert("登錄表單填寫的不完整"); return false; } }); return validate; }); }); </script>
可以看到，我們在表單需要驗證的元素中加入了一個empty="false"的屬性(部分的瀏覽器支持required屬性，為了說明jQuery支持自定義的屬性，用了empty)，然后我們在表單提交前去做輸入驗證。當然了，您也可以用別的自定義屬性名稱或者值來區分您要驗證的對象，比如 inputType="email"，inputType="phone"之類的來驗證郵箱或者電話號碼，只需要把表單提交中的邏輯稍作修改即可。jQuery已經提前讓我們享受到了HTML5的特性了。
OK，說了這么多，您是否對jQuery已經產生了一點興趣呢？那么下面，我簡要的把jQuery一些常用的知識做一下整理和歸納。
一、構造函數
1.jQuery( selector, [ context ] )
selector一個包含CSS選擇器的字符串
context一個待查找的 DOM 元素集、文檔或 jQuery 對象。
例如：
$(".navo") //查找當前document下所有class="navo"的元素
$(".navo","form") //查找當前document下所有form中class="navo"的元素
2.jQuery( element )
element一個用於封裝成jQuery對象的DOM元素。
例如：
$(document.getElementById("signin")); //將一個id="signin"的對象轉換成jQuery對象
提到這兒，就順帶的說一句：在使用jQuery的時候，我們分為window和jQuery兩種對象，使用window對象只能使用window對象的一些屬性和方法，同樣，jQuery對象也只能使用jQuery的方法和屬性。當然了，window對象和jQuery對象是可以互相轉化的。
3.jQuery( elementArray )
elementArray一個用於封裝成jQuery對象的DOM元素數組。
這個與第二個構造函數十分相似，只不過一個是單個對象，一個是對象數組而已。
例如：
$(document.getElementByName("signin")) //將所有name="signIn"的對象轉換成jQuery數組
4.jQuery( jQuery object )
jQuery object一個用於克隆的jQuery對象。
這個最為普遍的用法就是:$(this).
例如：
$("input").each(function(){
if($(this).val()==""){
//you can do something
}
});
5.jQuery( html, [ ownerDocument ] )
html用於動態創建DOM元素的HTML標記字符串，不是XML
ownerDocument一個文檔的新元素將被創建。
例如：
$(“<div></div>”);
6.jQuery( html, props )
html一個單標記的HTML 元素字符串 (例如： <div/> or <div>)。
props訪問新創建元素的屬性，事件和方法。
例如：
$(“<div/>”,{class: "test",
text: "Click me!",
click: function(){
$(this).toggleClass("test");
}
});
7.jQuery( callback )
callback當DOM完成加載的時候綁定的函數
這個也是經常用的一個構造函數，最普遍的寫法就是：$(function(){});這個寫法等同於：$(document).ready(function(){});
例如：
$(function(){ //you can do something…… });
好了，構造函數就介紹到這兒，下面介紹選擇器。
二、選擇器
jQuery的選擇器支持 id、tagName、css1-3 expressions、偽類，以及可以使用通配符。從jQuery1.3的版本以后，已經不再支持XPath了。而且個人覺得XPath的語法格式有點坑爹，不喜歡。
先看一下jQuery選擇器的一些例子：
$(“#name”) //選擇id="name"的元素 $(“div”) //選擇所有的div $(“.className”) //選擇所有class="className"的元素 $(“ul>li”) //選擇所有ul的下一級li元素 $(“form input”) //選擇的form下的所有input元素 $(“input[type=checkbox]”) //選擇所有的checkbox $(“form input:text”) //選擇所有的text元素
jQuery支持多個屬性篩選
$(“input[name$=shop][type=text]”);
jQuery支持選擇多個元素
$(“div,span,p,.classname”)
jQuery有提供一些查找對象的工具類。
.find("")、.has("")、.eq(0)、:gt(0)、:lt(5)、.first()、.last()、.first-child、.last-child()、.not()、.next()、.nextAll()……
使用jQuery對象返回的屬性值時，絕大部分的jQuery對象的屬性值與dom對象的屬性值相同，也有一部分的除外，例如checkbox
checkbox呈現選中狀態的時:<input type="checkbox" checked="checked" value=""/>
那么我們在使用jQuery獲取被選中的checkbox用 $("input:checked") 就可以獲取到，判斷一個checkbox是否被選中，if($("#checkboxObject").attr("checked")==true)即可，jQuery獲取到的選中的checkbox的checked屬性值為true，而非"checked".
另外，我們在獲取一個元素組的value，應該遍歷每個對象，取出value，jQuery默認只會返回第一個對象的value。而不似我們asp.net中的Request.Form["name"]會用","分隔開來所有對象的值。還是拿checkbox為例：
function getCheckBoxValue(){ var value=""; $("input:checked").each(function(){ value += $(this).val(); }); return value; }
使用jQuery選擇器，我們需要注意的地方有：
1.通過jQuery選擇器獲取返回的對象為jquery對象（集合對象），不能直接調用dom定義的方法。
2.jQuery對象與dom對象可以互相轉換。普通的dom對象一般可以通過$()轉換成jquery對象，jquery對象要轉換為dom對象則必須取出其中的某一項，一般可通過索引取出。
以下的一些事例都是正確的：
$(document.getElementById("msg")).html();
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
三、事件
jQuery已經為我們提供了各種事件處理方法，我們無需在html元素上直接寫事件，而可以直接為通過jQuery獲取的對象添加事件。所以我們不必再在頁面元素上添加各種on*的屬性和定義各種全局函數了。這對於開發人員來說，是一件非常happy的事情。
在jQuery中，我們通常的做法是選擇器和事件相配合來完成某一系列的動作的。最為普遍的做法是：select.do().do().....
所以jQuery中的事件大都是在選擇了某一對象之后緊接着添加事件。jQuery添加事件的語義是：$("element").EventName(function(){});
當然了，function不是必須的，如果不寫function的話，就代表着執行這個事件。比如：$("input[type=submit]").click();表示執行submit的click事件。
jQuery常用的事件有：click、dblclick、hover、load、blur、focus、change、select、 serialize、 serializeArray、submit.....
除了上面直接在對象后面跟上事件名稱這種形式之外，jQuery還提供事件的綁定方法，我們可以為對象綁定事件：$(“input[type=button]”).bind(“click”,function(){}); 當然，function(){}可以使用一個已定義的全局函數名稱代替。$(“input[type=button]”).bind(“click”,FunctionName);
與bind對應的就是撤銷事件(unbind)，用法與bind一樣，當然了，unbind不一定必須填寫FunctionName.
下面對比較特殊一點的jQuery事件做個簡單的說明：
bind/unbind 綁定和撤銷對象的一個事件
delegate/undelegate 未對象附加一個或者多個事件，與bind不同的是，這個對象可以不存在的，只要后面添加的有這個對象，那么它也會自動綁定事件。
live/die 給對象附加和撤銷一個事件，與delegate/undelegate 相似
下面的這一組事件與上面的事件是不盡相同的：
Load：可以綁定在window對象上也可以綁定在Jquery對象上
unload只能綁定在window對象上，而且不是對load事件的撤銷，當發生以下情況時，會發出 unload 事件：
1.點擊某個離開頁面的鏈接
2.在地址欄中鍵入了新的 URL
3.使用前進或后退按鈕
4.關閉瀏覽器
5.重新加載頁面
說到事件的綁定，我們經常會遇到一個問題就是：在綁定事件的事件需要傳遞參數。那么我們在jQuery中該如何去做呢？通常，我的解決方法有兩種：
1.
$("input[type=button]").bind("click",{name:"Button",value="Params"},function(event){
alert(event.data.name);
});
2.使用閉包。有關閉包的相關內容，將會在下一章中介紹，本章不做討論。
3.還有一個方法，利用jQuery的.data()方法可以傳遞參數，但是這種類似添加自定義屬性的做法傳遞的參數值不能太大，傳的參數太多也不好。下面介紹一下這種方式。如果某個對象的事件需要參數，那么可以在給這個對象綁定事件以前利用.data()方法在對象本身上添加值。如代碼：
$("#id").data(name,"value");
$(#id).click(function(){
alert($(this).data("name"));
});
第三種方法感覺和在頁面添加hidden傳值比較類似,個人用的非常少，不深究。
前面有說過，我們習慣用法是select.do().do()......
那么在jQuery中，我們也可以這么來操作，對某一個對象，我們可以連續的綁定事件、獲取屬性、更改樣式....，我們稱之為鏈式語法。
例如：
$(“#demo”) .attr(“class”,”test”) .css("style","display:block") .text(“hello word”) .click(function(){//you can do something}) .bind(“select”,function(){//you can do something}) ……
四、其他
除了選擇器和事件，jQuery還給我們提供了很多的方法來操作dom元素，比如：獲取元素的屬性、文本，操作樣式，修改屬性，操作節點等。
下面列舉一些常用的jQuery方法：
.addClass()、 .append()、appendTo()、.after()、.attr()、.insertAfter()、.insertAfter()、.insertBefore()、.css()、.html()、.text()、.val()、 .replaceAll()、 .replaceWith()、.remove()、.prepend()、.prependTo().....
在對dom元素操作的時候，我們經常會對一個集合元素操作，不可避免的，我們會去遍歷。在jQuery中推薦用它提供的方法.each()來操作。
jQuery中的each函數有兩個，jQuery.each()和.each().這兩個函數是不一樣的， .each()是專門用來遍歷一個jQuery對象。$.each()函數可用於迭代任何集合，無論是“名/值”對象（JavaScript對象）或陣列。
舉兩個例子來說明。
$("input",form).each(function(){
if($(this).attr("type")=="text"){
alert("針對文本框可以做一些操作。");
}
});
var data=[{name:"sherry",value:"20"},{name:"alex",value:"26"}]; $.each(data,function(){ alert($(this).name); });
下面我們說說jQuery的另外一個函數：.extend()。通常，我們可以看到很多的jQuery插件調用的方法都是$.XXXX()這種形式，但是XXXX這個名稱在jQuery中是沒有被定義過的。為什么還能使用jQuery的$來調用呢？在這里，extend這個方法發揮了不小的作用。
下面看一段代碼：
$.extend({ min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; } });
在這段代碼中我們定義了兩個函數：min和max，然后我們就可以直接使用$.min(10,20)和$.max(10,20)這種形式調用了。
jQuery.extend()這個函數的描述是這樣的：合並兩個或更多的對象的內容匯集成到第一個對象。它的構造函數是：
jQuery.extend( [ deep ], target, object1, [ objectN ] )
從這兒我們可以看出，extend的作用就是講多個對象合並起來，如果target被省略，那么就會默認的被合並到jQuery的命名空間下。
有人會對deep這個參數產生疑問。我們再看下面的代碼：
var object1 = { apple: 0, banana: {weight: 52, price: 100}, cherry: 97 }; var object2 = { banana: {price: 200}, durian: 100 }; $.extend(object1, object2); //object1 === {apple: 0, banana: {price: 200}, cherry: 97, durian: 100}
var object1 = { apple: 0, banana: {weight: 52, price: 100}, cherry: 97 }; var object2 = { banana: {price: 200}, lime: 100 }; $.extend(true, object1, object2); //object1 === {apple: 0, banana: {weight: 52, price: 200}, cherry: 97, lime: 100}
從上面的例子可以看出，如果第一個對象的屬性本身是一個對象或數組，這將是完全用第二個對象相同的key重寫一個屬性，如果true為第一個函數參數，對象將被遞歸合並。
當然了，.extend()是可以返回對象的。看下面的代碼：
var empty = {} var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; var settings = $.extend(empty, defaults, options); //settings == { validate: true, limit: 5, name: "bar" } //empty == { validate: true, limit: 5, name: "bar" }
說到合並，順便說一下jQuery.merge()函數，還是看代碼更具體：
var first = [0,1,2,3]; var second = [1,2,3,4,5]; $.merge( first, second); //first=[0,1,2,3,1,2,3,4,5];
merge會合並兩個數組內容到第一個數組。是完全合並，不會排重的。
五、數據交互
最后，我們來說說jQuery的數據交互。jQuery給我們提供了相當多的方法來供我們與服務器進行異步交互，即我們常說的ajax。
jQuery.ajax( url, [ settings ] )
url:一個用來包含發送請求的URL字符串。
settings :一個以“{鍵:值}”組成的AJAX 請求設置。
下面我們看一下常用的setting列表：
async // boolean,是否同步。跨域請求和dataType: "jsonp"請求不支持同步操作。 complete(jqXHR, textStatus) // function 函數完成時執行，不論成功或者失敗 data //object,string {} 需要的參數 dataType// string (“xml“, ”html“, ”script“, ”json“, ”jsonp“, ”text”),返回類型有多個時用空格分割 error(jqXHR, textStatus, errorThrown)// function 發生錯誤時執行(null,"timeout", "error", "abort" 和 "parsererror”) success(data, textStatus, jqXHR)// function請求成功后執行 type// string get/post， PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持 url// string 請求需要的地址 timeout// Number 設置為超時的執行時間 statusCode// Map 根據函數返回的狀態碼來執行相應操作，調用方式為：statusCode: {404: function() { alert('page not found');} jsonp// string 在一個jsonp請求中重寫回調函數的名字。這個值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分 cache// Boolean是否啟用瀏覽器緩存 beforeSend(jqXHR, settings)// function請求發送前調用
下面寫兩個事例：
$.ajax({ url: 'ajax/test.html',
success: function(data) { $('.result').html(data); }
});
var jqxhr = $.ajax({ url: "ajax/test.html" }) .success(function() { alert("success"); }) .error(function() { alert("error"); }) .complete(function() { alert("complete"); }); jqxhr.beforeSend(function(){ alert("beforeSend"); });
這兩種寫法都是支持的。
還有兩個.ajax()的簡化版本：
jQuery.get()
jQuery.post()
相當於：
$.ajax({ url: url,
data: data,
success: success,
dataType: dataType });
由於瀏覽器的安全限制，大多數的請求不能成功地檢索來自不同的域，子域或協議的數據。但是有兩種數據形式(dataType)不受這個限制：script和jsonp，以及他們有兩個簡寫的快速調用方法：
jQuery.getScript()
jQuery.getJSON()
這兩種方式已經跨出的瀏覽器的安全限制，所以要慎用。如果供調用方不是您信任的網站，請不要使用這種方式，因為它可能會為您的網站帶來相當大的風險，它們都是會執行請求的內容的，具體的內容可以參閱園子里其他大牛的分享。
最后說一個方法：.load()。
這個和jQuery.get()比較相似，不同的是.load()不是全局函數，而且這個方法都不是用來請求數據的。.load() 方法將返回的HTML 內容數據設置到相匹配的節點中，所以我們經常用它來加載HTML片段。
有關jQuery的東西就到這里，在這兒我只是作為一種學習筆記做個記錄，很多的內容都沒有深究。之前都是看別人的經驗，很少自己寫東西。如果其中有謬誤，歡迎指正。由於最近經常在做前端的一些開發，所以對javascript的接觸相當的頻繁，所以我的下一篇文章打算寫一點關於javascript相關的東西。