1、關於頁面元素的引用
通過jquery的$()引用元素包括通過id、class、元素名以及元素的層級關係及dom或者xpath條件等方法，且返回的物件為jquery物件（集合物件），不能直接呼叫dom定義的方法。
2、jQuery物件與dom物件的轉換
只有jquery物件才能使用jquery定義的方法。注意dom物件和jquery物件是有區別的，呼叫方法時要注意操作的是dom物件還是jquery物件。
普通的dom物件一般可以通過$()轉換成jquery物件。
如：$(document.getElementById(”msg”))則為jquery物件，可以使用jquery的方法。
由於jquery物件本身是一個集合。所以如果jquery物件要轉換為dom物件則必須取出其中的某一項，一般可通過索引取出。
如：$(”#msg”)[0]，$(”div”).eq(1)[0]，$(”div”).get()[1]，$(”td”)[5]這些都是dom物件，可以使用dom中的方法，但不能再使用Jquery的方法。
以下幾種寫法都是正確的：
 
$(”#msg”).html();
$(”#msg”)[0].innerHTML;
$(”#msg”).eq(0)[0].innerHTML;
$(”#msg”).get(0).innerHTML;
3、如何獲取jQuery集合的某一項
 
對於獲取的元素集合，獲取其中的某一項（通過索引指定）可以使用eq或get(n)方法或者索引號獲取，要注意，eq返回的是jquery物件，而 get(n)和索引返回的是dom元素物件。對於jquery物件只能使用jquery的方法，而dom物件只能使用dom的方法，如要獲取第三 個<div>元素的內容。有如下兩種方法：
 
$(”div”).eq(2).html();//呼叫jquery物件的方法
$(”div”).get(2).innerHTML;//呼叫dom的方法屬性
4、同一函式實現set和get
 
jQuery中的很多方法都是如此，主要包括如下幾個：
 
$(”#msg”).html();//返回id為msg的元素節點的html內容。
$(”#msg”).html(”<b>new content</b>”);
//將“<b>new content</b>” 作為html串寫入id為msg的元素節點內容中,頁面顯示粗體的new content

$(”#msg”).text();//返回id為msg的元素節點的文字內容。
$(”#msg”).text(”<b>new content</b>”);
//將“<b>new content</b>” 作為普通文字串寫入id為msg的元素節點內容中,頁面顯示<b>new content</b>

$(”#msg”).height();//返回id為msg的元素的高度
$(”#msg”).height(”300″);//將id為msg的元素的高度設為300
$(”#msg”).width();//返回id為msg的元素的寬度
$(”#msg”).width(”300″);//將id為msg的元素的寬度設為300

$(”input”).val(”);//返回表單輸入框的value值
$(”input”).val(”test”);//將表單輸入框的value值設為test

$(”#msg”).click();//觸發id為msg的元素的單擊事件
$(”#msg”).click(fn);//為id為msg的元素單擊事件新增函式
同樣blur,focus,select,submit事件都可以有著兩種呼叫方法。
 
5、集合處理功能
對於jquery返回的集合內容無需我們自己迴圈遍歷並對每個物件分別做處理，jquery已經為我們提供的很方便的方法進行集合的處理。
包括兩種形式：
 
$(”p”).each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//為索引分別為0，1，2的p元素分別設定不同的字型顏色。

$(”tr”).each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//實現表格的隔行換色效果

$(”p”).click(function(){alert($(this).html())})
//為每個p元素增加了click事件，單擊某個p元素則彈出其內容
6、擴充套件我們需要的功能
 
 
$.extend({
min:function(a, b){return a< b?a:b; },
max:function(a, b){return a> b?a:b; }
});//為jquery擴充套件了min,max兩個方法
使用擴充套件的方法（通過“$.方法名”呼叫）：
 
 
alert(”a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));
7、支援方法的連寫
 
所謂連寫，即可以對一個jquery物件連續呼叫各種不同的方法。例如：
 
$(”p”).click(function(){alert($(this).html())})
.mouseover(function(){alert(’mouse over event’)})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});
8、操作元素的樣式
 
主要包括以下幾種方式：
 
$(”#msg”).css(”background”);//返回元素的背景顏色
$(”#msg”).css(”background”,”#ccc”)//設定元素背景為灰色
$(”#msg”).height(300); $(”#msg”).width(”200″);//設定寬高
$(”#msg”).css({ color: “red”, background: “blue” });//以名值對的形式設定樣式
$(”#msg”).addClass(”select”);//為元素增加名稱為select的class
$(”#msg”).removeClass(”select”);//刪除元素名稱為select的class
$(”#msg”).toggleClass(”select”);//如果存在（不存在）就刪除（新增）名稱為select的class
9、完善的事件處理功能
 
jQuery已經為我們提供了各種事件處理方法，我們無需在html元素上直接寫事件，而可以直接為通過jquery獲取的物件新增事件。
 
$(”#msg”).click(function(){alert(”good”)})//為元素添加了單擊事件
$(”p”).click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//為三個不同的p元素單擊事件分別設定不同的處理
jQuery中幾個自定義的事件：
 
(1)hover(fn1,fn2)：一個模仿懸停事件（滑鼠移動到一個物件上面及移出這個物件）的方法。當滑鼠移動到一個匹配的元素上面時，會觸發指定的第一個函式。當滑鼠移出這個元素時，會觸發指定的第二個函式。
//當滑鼠放在表格的某行上時將class置為over，離開時置為out。
$(”tr”).hover(function(){
$(this).addClass(”over”);
},
function(){
$(this).addClass(”out”);
});
（2）ready(fn):當DOM載入就緒可以查詢及操縱時繫結一個要執行的函式。
 
 
$(document).ready(function(){alert(”Load Success”)})
//頁面載入完畢提示“Load Success”,相當於onload事件。與$(fn)等價
（3）toggle(evenFn,oddFn): 每次點選時切換要呼叫的函式。如果點選了一個匹配的元素，則觸發指定的第一個函式，當再次點選同一元素時，則觸發指定的第二個函式。隨後的每次點選都重複對這兩個函式的輪番呼叫。
 
 
//每次點選時輪換新增和刪除名為selected的class。
$(”p”).toggle(function(){
$(this).addClass(”selected”);
},function(){
$(this).removeClass(”selected”);
});
（4）trigger(eventtype): 在每一個匹配的元素上觸發某類事件。
例如：
 
 
$(”p”).trigger(”click”);//觸發所有p元素的click事件
（5）bind(eventtype,fn)，unbind(eventtype): 事件的繫結與反繫結
從每一個匹配的元素中（新增）刪除繫結的事件。例如：
 
 
$(”p”).bind(”click”,function(){alert($(this).text());});//為每個p元素新增單擊事件
$(”p”).unbind();//刪除所有p元素上的所有事件
$(”p”).unbind(”click”)//刪除所有p元素上的單擊事件
10、幾個實用特效功能
 
其中toggle()和slidetoggle()方法提供了狀態切換功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
11、幾個有用的jQuery方法
$.browser.瀏覽器型別：檢測瀏覽器型別。有效引數：safari, opera, msie, mozilla。如檢測是否ie：$.browser.isie，是ie瀏覽器則返回true。
$.each(obj, fn)：通用的迭代函式。可用於近似地迭代物件和陣列（代替迴圈）。如
 
$.each( [0,1,2],function(i, n){ alert( “Item #”+ i+ “: ”+ n ); });
等價於：
 
 
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
alert(”Item #”+i+”: “+tempArr[ i ]);
}
也可以處理json資料，如
 
 
$.each( { name: “John”, lang: “JS” },function(i, n){ alert( “Name: ”+ i+ “, Value: ”
 + n ); });
結果為：
 
 
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一個或多個其他物件來擴充套件一個物件，返回這個被擴充套件的物件。這是jquery實現的繼承方式
如：
程式碼
$.extend(settings, options);
//合併settings和options，並將合併結果返回settings中，相當於options繼承setting並將繼承結果儲存在
setting中。
var settings= $.extend({}, defaults, options);
//合併defaults和options，並將合併結果返回到setting中而不覆蓋default內容。
可以有多個引數（合併多項並返回）
 
 
$.map(array, fn)：陣列對映。把一個數組中的專案(處理轉換後)儲存到到另一個新陣列中，並返回生成的新陣列。
如：
 
 
var tempArr=$.map( [0,1,2],function(i){return i+ 4; });
tempArr內容為：[4,5,6]
var tempArr=$.map( [0,1,2],function(i){return i> 0 ? i+ 1 :null; });
tempArr內容為：[2,3]
$.merge(arr1,arr2):合併兩個陣列並刪除其中重複的專案。
如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str)：刪除字串兩端的空白字元。
如：$.trim(”   hello, how are you? “); //返回”hello,how are you? ”
12、解決自定義方法或其他類庫與jQuery的衝突
 
很多時候我們自己定義了$(id)方法來獲取一個元素，或者其他的一些js類庫如prototype也都定義了$方法，如果同時把這些內容放在一起就會引起變數方法定義衝突，Jquery對此專門提供了方法用於解決此問題。
使用jquery中的jQuery.noConflict();方法即可把變數$的控制權讓渡給第一個實現它的那個庫或之前自定義的$方法。之後應用 Jquery的時候只要將所有的$換成jQuery即可，如原來引用物件方法$(”#msg”)改為jQuery(”#msg”)。
如：
 
jQuery.noConflict();
// 開始使用jQuery
jQuery(”div p”).hide();
// 使用其他庫的 $()
$(”content”).style.display= ‘none’;

jQuery技巧總結
一、簡介

1.1、概述
隨著WEB2.0及ajax思想在網際網路上的快速發展傳播，陸續出現了一些優秀的Js框架，其中比較著名的有Prototype、YUI、jQuery、 mootools、Bindows以及國內的JSVM框架等，通過將這些JS框架應用到我們的專案中能夠使程式設計師從設計和書寫繁雜的JS應用中解脫出來， 將關注點轉向功能需求而非實現細節上，從而提高專案的開發速度。
jQuery是繼prototype之後的又一個優秀的Javascript框架。它是由 John Resig 於 2006 年初建立的，它有助於簡化JavaScript? 以及Ajax程式設計。有人使用這樣的一比喻來比較prototype和jQuery：prototype就像Java，而jQuery就像ruby.它是一 個簡潔快速靈活的JavaScript框架，它能讓你在你的網頁上簡單的操作文件、處理事件、實現特效併為Web頁面新增Ajax互動。

它具有如下一些特點：
1、程式碼簡練、語義易懂、學習快速、文件豐富。
2、jQuery是一個輕量級的指令碼，其程式碼非常小巧，最新版的JavaScript包只有20K左右。
3、jQuery支援CSS1-CSS3,以及基本的xPath。
4、jQuery是跨瀏覽器的，它支援的瀏覽器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
5、可以很容易的為jQuery擴充套件其他功能。
6、能將JS程式碼和HTML程式碼完全分離，便於程式碼和維護和修改。
7、外掛豐富，除了jQuery本身帶有的一些特效外，可以通過外掛實現更多功能，如表單驗證、tab導航、拖放效果、表格排序、DataGrid，樹形選單、影象特效以及ajax上傳等。

jQuery的設計會改變你寫JavaScript程式碼的方式，降低你學習使用JS操作網頁的複雜度，提高網頁JS開發效率，無論對於js初學者還是資深專家，jQuery都將是您的首選。
jQuery適合於設計師、開發者以及那些還好者，同樣適合用於商業開發，可以說jQuery適合任何JavaScript應用的地方，可用於不同的Web應用程式中。
官方站點：http://jquery.com/  中文站點：http://jquery.org.cn/

1.2、目的
通過學習本文件，能夠對jQuery有一個簡單的認識瞭解，清楚JQuery與其他JS框架的不同，掌握jQuery的常用語法、使用技巧及注意事項。

二、使用方法
在需要使用JQuery的頁面中引入JQuery的js檔案即可。
例如：<script type="text/javascript" src="js/jquery.js"></script>
引入之後便可在頁面的任意地方使用jQuery提供的語法。

三、學習教程及參考資料
請參照《jQuery中文API手冊》和http://jquery.org.cn/visual/cn/index.xml
推薦兩篇不錯的jquery教程：《jQuery的起點教程》和《使用 jQuery 簡化 Ajax 開發》
(說明：以上文件都放在了【附件】中)

四、語法總結和注意事項

1、關於頁面元素的引用
通過jquery的$()引用元素包括通過id、class、元素名以及元素的層級關係及dom或者xpath條件等方法，且返回的物件為jquery物件（集合物件），不能直接呼叫dom定義的方法。

2、jQuery物件與dom物件的轉換
只有jquery物件才能使用jquery定義的方法。注意dom物件和jquery物件是有區別的，呼叫方法時要注意操作的是dom物件還是jquery物件。
普通的dom物件一般可以通過$()轉換成jquery物件。
如：$(document.getElementById("msg"))則為jquery物件，可以使用jquery的方法。
由於jquery物件本身是一個集合。所以如果jquery物件要轉換為dom物件則必須取出其中的某一項，一般可通過索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]這些都是dom物件，可以使用dom中的方法，但不能再使用Jquery的方法。
以下幾種寫法都是正確的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、如何獲取jQuery集合的某一項
對於獲取的元素集合，獲取其中的某一項（通過索引指定）可以使用eq或get(n)方法或者索引號獲取，要注意，eq返回的是jquery物件，而 get(n)和索引返回的是dom元素物件。對於jquery物件只能使用jquery的方法，而dom物件只能使用dom的方法，如要獲取第三 個<div>元素的內容。有如下兩種方法：
$("div").eq(2).html();//呼叫jquery物件的方法
$("div").get(2).innerHTML;//呼叫dom的方法屬性

4、同一函式實現set和get
Jquery中的很多方法都是如此，主要包括如下幾個：
程式碼
$("#msg").html();//返回id為msg的元素節點的html內容。
$("#msg").html("<b>new content</b>");
//將“<b>new content</b>” 作為html串寫入id為msg的元素節點內容中,
 頁面顯示粗體的new content

$("#msg").text();//返回id為msg的元素節點的文字內容。
$("#msg").text("<b>new content</b>");
//將“<b>new content</b>” 作為普通文字串寫入id為msg的元素節點內容中,
頁面顯示粗體的<b>new content</b>

$("#msg").height();//返回id為msg的元素的高度
$("#msg").height("300");//將id為msg的元素的高度設為300
$("#msg").width();//返回id為msg的元素的寬度
$("#msg").width("300");//將id為msg的元素的寬度設為300

$("input").val("); //返回表單輸入框的value值
$("input").val("test"); //將表單輸入框的value值設為test

$("#msg").click(); //觸發id為msg的元素的單擊事件
$("#msg").click(fn); //為id為msg的元素單擊事件新增函式
同樣blur,focus,select,submit事件都可以有著兩種呼叫方法

5、集合處理功能
對於jquery返回的集合內容無需我們自己迴圈遍歷並對每個物件分別做處理，jquery已經為我們提供的很方便的方法進行集合的處理。
包括兩種形式：
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f']})
//為索引分別為0，1，2的p元素分別設定不同的字型顏色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//實現表格的隔行換色效果

$("p").click(function(){.html())})
//為每個p元素增加了click事件，單擊某個p元素則彈出其內容

6、擴充套件我們需要的功能
$.extend({
 min:function(a, b){return a< b?a:b; },
 max:function(a, b){return a> b?a:b; }
});//為jquery擴充套件了min,max兩個方法
使用擴充套件的方法（通過“$.方法名”呼叫）：
+",min="+$.min(10,20));

7、支援方法的連寫
所謂連寫，即可以對一個jquery物件連續呼叫各種不同的方法。
例如：
$("p").click(function(){.html())})
.mouseover(function(){})
.each(function(i){this.style.color=['#f00','#0f0','#00f']});
8、操作元素的樣式
主要包括以下幾種方式：
$("#msg").css("background");//返回元素的背景顏色
$("#msg").css("background","#ccc")//設定元素背景為灰色
$("#msg").height(300); $("#msg").width("200");//設定寬高
$("#msg").css({ color:"red", background:"blue" });//以名值對的形式設定樣式
$("#msg").addClass("select");//為元素增加名稱為select的class
$("#msg").removeClass("select");//刪除元素名稱為select的class
$("#msg").toggleClass("select");
//如果存在（不存在）就刪除（新增）名稱為select的class
9、完善的事件處理功能
Jquery已經為我們提供了各種事件處理方法，我們無需在html元素上直接寫事件，而可以直接為通過jquery獲取的物件新增事件。
如：
$("#msg").click(function(){})//為元素添加了單擊事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f']})
//為三個不同的p元素單擊事件分別設定不同的處理
jQuery中幾個自定義的事件：
（1）hover(fn1,fn2)：一個模仿懸停事件（滑鼠移動到一個物件上面及移出這個物件）的方法。當滑鼠移動到一個匹配的元素上面時，會觸發指定的第一個函式。當滑鼠移出這個元素時，會觸發指定的第二個函式。
//當滑鼠放在表格的某行上時將class置為over，離開時置為out。
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
 $(this).addClass("out");
});
（2）ready(fn):當DOM載入就緒可以查詢及操縱時繫結一個要執行的函式。
$(document).ready(function(){})
//頁面載入完畢提示“Load Success”,相當於onload事件。與$(fn)等價
（3）toggle(evenFn,oddFn): 每次點選時切換要呼叫的函式。如果點選了一個匹配的元素，則觸發指定的第一個函式，當再次點選同一元素時，則觸發指定的第二個函式。隨後的每次點選都重複對這兩個函式的輪番呼叫。
       //每次點選時輪換新增和刪除名為selected的class。
 $("p").toggle(function(){
 $(this).addClass("selected");
 },function(){
 $(this).removeClass("selected");
 });
（4）trigger(eventtype): 在每一個匹配的元素上觸發某類事件。
例如：
 $("p").trigger("click");//觸發所有p元素的click事件
（5）bind(eventtype,fn)，unbind(eventtype): 事件的繫結與反繫結
從每一個匹配的元素中（新增）刪除繫結的事件。
例如：
$("p").bind("click",function(){.text());});
//為每個p元素新增單擊事件
$("p").unbind();//刪除所有p元素上的所有事件
$("p").unbind("click")//刪除所有p元素上的單擊事件
10、幾個實用特效功能
其中toggle()和slidetoggle()方法提供了狀態切換功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、幾個有用的jQuery方法
$.browser.瀏覽器型別：檢測瀏覽器型別。有效引數：safari, opera, msie, mozilla。如檢測是否ie：$.browser.isie，是ie瀏覽器則返回true。
$.each(obj, fn)：通用的迭代函式。可用於近似地迭代物件和陣列（代替迴圈）。
如
$.each( [0,1,2],function(i, n){ ; });
等價於：
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
 ;
}
也可以處理json資料，如
$.each( { name: "John", lang: "JS" }, function(i, n){ ; });
結果為：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一個或多個其他物件來擴充套件一個物件，返回這個被擴充套件的物件。這是jquery實現的繼承方式。
如：
$.extend(settings, options);
//合併settings和options，並將合併結果返回settings中，
 相當於options繼承setting並將繼承結果儲存在setting中。
var settings= $.extend({}, defaults, options);
//合併defaults和options，並將合併結果返回到setting中而不覆蓋default內容。
可以有多個引數（合併多項並返回）
$.map(array, fn)：陣列對映。把一個數組中的專案(處理轉換後)儲存到到另一個新陣列中，並返回生成的
新陣列。
如：
var tempArr=$.map( [0,1,2],function(i){return i+ 4; });
tempArr內容為：[4,5,6]
var tempArr=$.map( [0,1,2],function(i){return i> 0 ? i+ 1 :null; });
tempArr內容為：[2,3]
$.merge(arr1,arr2):合併兩個陣列並刪除其中重複的專案。
如：$.merge( [0,1,2], [2,3,4] )//返回[0,1,2,3,4]
$.trim(str)：刪除字串兩端的空白字元。
如：$.trim(" hello, how are you?");//返回"hello,how are you? "
12、解決自定義方法或其他類庫與jQuery的衝突
很多時候我們自己定義了$(id)方法來獲取一個元素，或者其他的一些js類庫如prototype也都定義了$方法，如果同時把這些內容放在一起就會引起變數方法定義衝突，Jquery對此專門提供了方法用於解決此問題。
使用jquery中的jQuery.noConflict();方法即可把變數$的控制權讓渡給第一個實現它的那個庫或之前自定義的$方法。之後應用 Jquery的時候只要將所有的$換成jQuery即可，如原來引用物件方法$("#msg")改為jQuery("#msg")。
如：
jQuery.noConflict();
// 開始使用jQuery
jQuery("div p").hide();
// 使用其他庫的 $()
$("content").style.display= 'none';

瞭解jQuery技巧來提高你的程式碼
　　jQuery之所以如此流行並被從大公司到個人部落格的幾乎每個人都廣泛使用，是因為它上手和使用相當簡單，而且為我們提供了一些人都不知道的相當棒的 特性。我認為jQuery的大多數使用者更趨向於使用jQuery外掛來解決面臨的難題，這通常是明智的選擇。但是當外掛相對於你的需求有一定缺陷的時候， 你也許更應該想辦法自己來解決，下面來看看這些實用的jQuery技巧，他們肯定會能夠派上用場的！
　　1.測試並提升你的jQuery選擇器水平
　　這個jQuery選擇器實驗室非常酷，它能線上免費使用，當然你也能下來到本地離線使用。這個測試頁面包含複雜的HTML組合欄位，然後你能嘗試預定義使用各種jQuery選擇器。如果這還不夠你也可以自定義選擇器。

　　2.測試jQuery包裝集是否包含某些元素
　　如果你想測試一下某個jQuery包裝集中是否包含某些元素，你首先可以嘗試使用驗證首個元素是否存在：
if($(selector)[0]){}
// 或者這樣
if($(selector).length){}
來看看這個例子：
 //例子.如果你的頁面有以下html程式碼
<ulid="shopping_cart_items">
<li><inputclass="in_stock" name="item" type="radio" value="Item-X" />Item X</li>
<li><inputclass="unknown" name="item" type="radio" value="Item-Y" />Item Y</li>
<li><inputclass="in_stock" name="item" type="radio" value="Item-Z" />Item Z</li>
</ul>
<preescaped="true" lang="javascript">
//這個if條件將返回true，因為我們有兩個
// input域匹配了選擇器，所以<statement>程式碼將會執行
if($('#shopping_cart_items input.in_stock')[0]){<statement>}
　　3.從jquery.org讀取jQuery最新版本
　　你可以使用這句程式碼讀取jQuery的最新版本的程式碼檔案。
<scriptsrc="http://code.jquery.com/jquery-latest.js"></script>
　　你可以使用這個方法來呼叫最近版本的jQuery框架，當然，你還可以使用下面這個程式碼從ajax.googleapis.com呼叫同樣的最新版本jQuery：
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
　　4.儲存資料
　　使用data方法可以避免在DOM中儲存資料，有些前端開發er喜歡使用HTML的屬性來儲存資料：
$('selector').attr('alt','data being stored');
//之後可以這樣讀取資料:
$('selector').attr('alt');
　　使用”alt”屬性來作為引數名儲存資料其實對於HTML來說是不符合語義的，我們可以使用jQuery的data方法來為頁面中的某個元素儲存資料
$('selector').data('引數名','要儲存的資料');
 //之後這樣取得資料:
$('selector').data('引數');
　　這個data方法能讓你自己明明資料的引數，更語義更靈活，你可以在頁面上的任何元素儲存資料資訊。如果想了解更多關於data()和removeData()方法的介紹，可以看看jQuery官方講解。
　　這個方法的經典應用是給input域一個預設值，然後在聚焦的時候清空它:
　　HTML部分:
<formid="testform">
<inputtype="text" class="clear" value="Always cleared" />
<inputtype="text" class="clear once" value="Cleared only once" />
<inputtype="text" value="Normal text" />
</form>
　　JavaSript部分：
$(function() {
//取出有clear類的input域
 //(注: "clear once" 是兩個class clear 和 once)
 $('#testform input.clear').each(function(){
//使用data方法儲存資料
 $(this).data("txt", $.trim($(this).val()) );
 }).focus(function(){
// 獲得焦點時判斷域內的值是否和預設值相同，如果相同則清空
 if ( $.trim($(this).val())=== $(this).data("txt") ) {
 $(this).val("");
 }
 }).blur(function(){
// 為有class clear的域新增blur時間來恢復預設值
 // 但如果class是once則忽略
 if ( $.trim($(this).val())=== "" && !$(this).hasClass("once") ) {
//Restore saved data
 $(this).val( $(this).data("txt") );
 }
 });
});
檢視Demo
　　5.jQuery手冊常備身邊

　　大多數人都很難記住所有的程式設計細節，即使再好的程式設計師也會有對某個程式語言的疏忽大意，所以把相關的手冊打印出來或隨時放在桌面上進行查閱絕對是可以提高程式設計效率的。
　　oscarotero jquery 1.3 (桌布版)

　　6.在FireBug控制檯記錄jQuery
　　FireBug是我最喜歡用的一個瀏覽器擴充套件工具之一，這個工具可以讓你快速的在視覺化介面中瞭解當前頁面的 HTML+CSS+JavaScript，並在該工具下完成即時開發。作為jQuery或JavaScript開發人員，FireFox對於 記錄你的JavaScript程式碼 也得到支援。
　　寫入FireBug控制檯的最簡單方式如下:

console.log("hello world")
　　你也可以按照你希望的方式寫一些引數：
console.log(2,4,6,8,"foo",bar)
　　你也可以編寫一個小擴充套件來記錄jQuery物件到控制檯：
jQuery.fn.log= function(msg) {
console.log("%s: %o", msg,this);
return this;
};
　　對於這個擴充套件，你可以直接使用.log()方法來記錄當前物件到控制檯。
$('#some_div').find('li.source > input:checkbox')
 .log("sources to uncheck")
 .removeAttr("checked");
　　7.儘可能使用ID選擇器
　　在使用jQuery之後，你會發現利用class屬性來選擇DOM元素變得相當簡單。儘管如此，還是推薦大家儘量少用class選擇器取而代之儘量多 使用執行更快的ID選擇器(IE瀏覽器下使用class選擇器會在遍歷整個DOM樹之後返回相符的class包裝集)。而ID選擇器更快是因為DOM本身 就有”天然的”getElementById這個方法，而class並沒有。所以如果使用class選擇器的話，瀏覽器會遍歷整個DOM，如果你的網頁 DOM結構足夠複雜，這些class選擇器足矣把頁面拖得越來越慢。讓我們看看這段簡單的HTML程式碼:
<divid="main">
<formmethod="post" action="/">
<h2>Selectors in jQuery</h2>
 ...
<inputclass="button" id="main_button" type="submit" value="Submit" />
</form>
</div>

 
 //使用class來呼叫submit按鈕要比使用絕對的ID選擇器慢很多
var main_button= $('#main .button');
var main_button= $('#main_button');
　　8.善於利用jQuery鏈
　　jQuery鏈不但允許以簡潔的方式寫出強大的操作，而且提高了開發效率，因為它能夠把多個命令應用到包裝集，而不必重新計算包裝集。從而你不用再這樣寫了：
<li>Description:<inputtype="text" name="description" value="" /></li>
 
$('#shopping_cart_items input.text').css('border','3px dashed yellow');
$('#shopping_cart_items input.text').css('background-color','red');
$('#shopping_cart_items input.text').val("text updated");
　　取而代之你可以使用jQuery鏈來完成簡便的操作：
var input_text= $('#shopping_cart_items input.text');
input_text.css('border','3px dashed yellow');
input_text.css('background-color','red');
input_text.val("text updated");

//same with chaining:
var input_text= $('#shopping_cart_items input.text');
input_text
 .css('border','3px dashed yellow')
 .css('background-color','red')
 .val("text updated");
　　9.繫結jQuery函式到$(window).load事件
　　大多數jQuery例項或教程都告訴我們繫結我們的jQuery程式碼到$(document).ready事件。雖 然$(document).ready事件在大多數情況下都OK，但是它的解析順序是在文件準備就緒，單文件中的圖片等物件正在下載的時候開始執行的。所 以在某些時候使用$(document).ready事件並不一定能達到我們預期的效果，比如一些視覺效果和動畫、拖拽、預讀取隱藏圖片等…通過使 用$(window).load事件便可以安全的在整個文件都準備就緒之後再開始執行你期望的程式碼。
$(window).load(function(){
// 將你希望在頁面完全就緒之後執行的程式碼放在這裡
});
　　10.使用jQuery鏈來限定選擇器，讓你的程式碼更簡潔更優雅
　　由於JavaScript支援鏈結構而且支援斷行，所以你的程式碼可以寫成下面這樣，這個例子先在元素上移除一個class然後在同一個元素上新增另一個class：
$('#shopping_cart_items input.in_stock')
 .removeClass('in_stock')
 .addClass('3-5_days');
　　如果想讓它更簡單實用，你可以建立一個支援鏈結構的jQuery函式：
$.fn.makeNotInStock= function() {
return $(this).removeClass('in_stock').addClass('3-5_days');
}

 $('#shopping_cart_items input.in_stock').makeNotInStock().log();
　　11.使用回撥函式同步效果
　　如果你想確保某個事件或動畫效果要在另一個事件執行之後再呼叫，那你就要使用回撥函數了。你可以在這些動畫效果後面繫結回撥函 數：slideDown( speed, [回撥] ) ie. $(’#sliding’).slideDown(’slow’, function(){… 點選這裡預覽這個例子。
<style>
 div.button{ background:#cfd; margin:3px; width:50px;
 text-align:center; float:left; cursor:pointer;
 border:2px outset black; font-weight:bolder; }
 #sliding{ display:none; }
</style>
 
$(document).ready(function(){
// 使用jQuery的click事件改變視覺效果，並開啟滑動效果
 $("div.button").click(function () {
//div.button 現在看上去是按下的效果
 $(this).css({ borderStyle:"inset", cursor:"wait" });
//#sliding 現在將漸隱並在完成動作之後開啟漸顯效果
 //slideup once it completes
 $('#sliding').slideDown('slow',function(){
 $('#sliding').slideUp('slow',function(){
//漸顯效果完成後將會改變按鈕的CSS屬性
 $('div.button').css({ borderStyle:"outset", cursor:"auto" });
 });
 });
 });
});
　　12.學會使用自定義選擇器
　　jQuery允許我們在css選擇器的基礎上定義自定義選擇器來讓我們的程式碼更簡潔:
$.expr[':'].mycustomselector= function(element, index, meta, stack){
// element- DOM元素
 // index - 堆疊中當前遍歷的索引值
 // meta - 關於你的選擇器的資料元
 // stack - 用於遍歷所有元素的堆疊
 
// 包含當前元素則返回true
 // 不包含當前元素則返回false
};

// 自定義選擇器的應用:
$('.someClasses:test').doSomething();
　　下面讓我們來看看一個小例子，我們通過使用自定義選擇器來鎖定含有”rel”屬性的元素集：
$.expr[':'].withRel= function(element){
var $this = $(element);
//僅返回rel屬性不為空的元素
 return ($this.attr('rel')!= '');
};

 $(document).ready(function(){
//自定義選擇器的使用很簡單，它和其他選擇器一樣，返回一個元素包裝集
//你可以為他使用格式方法，比如下面這樣修改它的css樣式
 $('a:withRel').css('background-color','green');
});
 
<ul>
<li>
<ahref="#">without rel</a>
</li>
<li>
<arel="somerel" href="#">with rel</a>
</li>
<li>
<arel="" href="#">without rel</a>
</li>
<li>
<arel="nofollow" href="#">a link with rel</a>
</li>
</ul>
 
　　13.預載入圖片

　　通常使用JavaScript來預載入圖片是個相當不錯的方法:
//定義預載入圖片列表的函式(有引數)  
jQuery.preloadImages= function(){
//遍歷圖片
 for(var i= 0; i<arguments.length; i++){
 jQuery("<img>").attr("src", arguments[i]);
 }
}
// 你可以這樣使用預載入函式
$.preloadImages("images/logo.png","images/logo-face.png","images/mission.png");
 
　　14.將你的程式碼測試完好
　　jQuery有一個名為QUnit單元測試框架。編寫測試很容易，它能讓您可以放心地修改您的程式碼，並確保它仍然按預期工作。下面是如何工作的：
//將測試分成若干模組.
module("Module B");
 test("some other test",function() {
//指定多少個判斷語句需要加入測試中.
 expect(2);
 equals(true,false,"failing test" );
 equals(true,true,"passing test" );
});

豆瓣的jQuery使用技巧

Douban是2.0 社群裡面比較成功的一個產品, 裡面ajax技術也做得不錯, 把它的原始碼拿來研究了一下, 它在頁面上使用了jquery,  我比較喜歡它的一體式的事件處理機制，不用寫很多的事件繫結程式碼，只需要通過一定的命名規則就可以自動給頁面元素加上一些功能, 它上面幾乎所有的功能都通過這個實現, 配合jquery強大的選擇器，程式碼看起來比較簡潔清晰.  下面我們就來看看它的一些核心部分. 我使用的是jquery 1.2.3，壓縮之後29kb大小, 速度感覺上比以前有比較大的改善.廢話不多說了，直接看看程式碼吧. 另外推薦一下blueprint 這個css框架，還挺好用的.

//定義名稱空間
var Bowtech=new Object();

//註冊全域性的事件監視器.
Bowtech.EventMonitor = function(){
    this.listeners = new Object();
}
//廣播事件
Bowtech.EventMonitor.prototype.broadcast=function(widgetObj, msg, data){
    var lst = this.listeners[msg];

    if(lst != null){
        for(var o in lst){
            lst[o](widgetObj, data);
        }
    }
}
//繫結所有的事件. 
Bowtech.EventMonitor.prototype.subscribe=function(msg, callback){
    var lst = this.listeners[msg];
    if (lst) {
        lst.push(callback);
    } else {
        this.listeners[msg] = [callback];
    }
}
//取消事件繫結.
Bowtech.EventMonitor.prototype.unsubscribe=function(msg, callback){
    var lst = this.listener[msg];
    if (lst != null){
        lst = lst.filter(function(ele, index, arr){return ele!=callback;});
    }
}

// Page scope event-monitor obj.
var event_monitor = new Bowtech.EventMonitor();
//對於所有 class="j a_xxx yyy" id="xxx-123"的元素執行事件繫結, xxx-123部分用來獲取元素的ID，比如一個帖子的ID,
// a_xxx  後面的部
//分用來標識應用如 vote / review / blog 等.
//繫結的事件就是 :  Bowtech.init_vote / Bowtech.init_blog 等.
function load_event_monitor(root) {
    var re = /a_(\w+)/; //正則表示式獲取ID.
    var fns = {};
    $(".j", root).each(function(i) {
        var m = re.exec(this.className);
        if (m) {
            var f = fns[m[1]];
            if (!f) { //如果事件處理函式不存在則建立函式物件.
                f = eval("Bowtech.init_"+m[1]); 
                fns[m[1]] = f;//呼叫繫結函式.
            }
            f && f(this);
        }
    });
}
//在文件載入完畢後將執行的方法(參見jquery文件)
//一般來說文件載入的時候應該繫結所有的事件, 但是有一種情況例外.
//比如 通過Ajax方法取回來的內容裡面還含有動作按鈕的，這時需要針對這部分功能執行繫結.
//需要手動呼叫 load_event_monitor(element);  方法.
$(function() {
    load_event_monitor(document);
});
//注意這裡的o物件是一個html 元素而非是一個jquery物件，所以在呼叫它的方法時應該使用$(o)函式
//把它轉化為jquery物件.
Bowtech.init_forder = function(o) {
    var eid = $(o).attr("id").split("-")[1];
    var fo = $("#f-"+eid);
    var unfo = $("#unf-"+eid);
    
    fo.click(function() {
       $(o).hide();
       unfo.show();
       fo.hide();
    });
    unfo.click(function() {
        $(o).show();
        fo.show();
        unfo.hide();
    });
}

jQuery.fn.extend({
    set_caret: function(){
        if(!$.browser.msie) return;
        var initSetCaret = function(){this.caretPos = document.selection.createRange().duplicate()};
        this.click(initSetCaret).select(initSetCaret).keyup(initSetCaret);
    }, 
    insert_caret:function(textFeildValue){
        var textObj = this[0];
        if(document.all && textObj.createTextRange && textObj.caretPos){
            var caretPos=textObj.caretPos;
            caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ? textFeildValue+'' : textFeildValue;
        } else if(textObj.setSelectionRange){
            var rangeStart=textObj.selectionStart;
            var rangeEnd=textObj.selectionEnd;
            var tempStr1=textObj.value.substring(0,rangeStart);
            var tempStr2=textObj.value.substring(rangeEnd);
            textObj.value=tempStr1+textFeildValue+tempStr2;
            textObj.focus();
            var len=textFeildValue.length;
            textObj.setSelectionRange(rangeStart+len,rangeStart+len);
            textObj.blur();
        } else {
            textObj.value+=textFeildValue;
        }
    }
})

前臺要用就比較簡單了,  只需要這樣寫:
<div id="test2" class="mod">
                <h3>
                    這裡可以放標題
                h3>
                <div class="j modb a_forder" id="modb-1002">
                    這裡是一些主要的內容
                    <dl>
                        <dt>Hello worlddt>
                        <dd>
                            hahahadd>
                    dl>
                    這個實驗在沙加的神舟本上完成
                div>
                <div class="edit">
                    <a id="f-1002" class="forder" href="javascript:void(0);">[收起]a> <a id="unf-1002"
                        class="unforder" href="javascript:void(0);">[展開]a>
                div>
            div>

樣式就省略了, 大家可以自己寫, 最後發兩個效果圖:

收起時的樣子

JQuery 常用方法基礎教程
對於學習使用jquery 的朋友，能用的到，簡單的瞭解下jquery的一些操作。
　　$(”p”).addClass(css中定義的樣式型別); 給某個元素新增樣式
　　$(”img”).attr({src:”test.jpg”,alt:”test Image”}); 給某個元素新增屬性/值，引數是map
　　$(”img”).attr(”src”,”test.jpg”); 給某個元素新增屬性/值
　　$(”img”).attr(”title”, function() { return this.src }); 給某個元素新增屬性/值
　　$(”元素名稱”).html(); 獲得該元素內的內容(元素，文字等)
　　$(”元素名稱”).html(”new stuff”); 給某元素設定內容
　　$(”元素名稱”).removeAttr(”屬性名稱”) 給某元素刪除指定的屬性以及該屬性的值
　　$(”元素名稱”).removeClass(”class”) 給某元素刪除指定的樣式
　　$(”元素名稱”).text(); 獲得該元素的文字
　　$(”元素名稱”).text(value); 設定該元素的文字值為value
　　$(”元素名稱”).toggleClass(class) 當元素存在引數中的樣式的時候取消,如果不存在就設定此樣式
　　$(”input元素名稱”).val(); 獲取input元素的值
　　$(”input元素名稱”).val(value); 設定input元素的值為value
　　Manipulation：
　　$(”元素名稱”).after(content); 在匹配元素後面新增內容
　　$(”元素名稱”).append(content); 將content作為元素的內容插入到該元素的後面
　　$(”元素名稱”).appendTo(content); 在content後接元素
　　$(”元素名稱”).before(content); 與after方法相反
　　$(”元素名稱”).clone(布林表示式) 當布林表示式為真時，克隆元素(無參時，當作true處理)
　　$(”元素名稱”).empty() 將該元素的內容設定為空
　　$(”元素名稱”).insertAfter(content); 將該元素插入到content之後
　　$(”元素名稱”).insertBefore(content); 將該元素插入到content之前
　　$(”元素”).prepend(content); 將content作為該元素的一部分，放到該元素的最前面
　　$(”元素”).prependTo(content); 將該元素作為content的一部分，放content的最前面
　　$(”元素”).remove(); 刪除所有的指定元素
　　$(”元素”).remove(”exp”); 刪除所有含有exp的元素
　　$(”元素”).wrap(”html”); 用html來包圍該元素
　　$(”元素”).wrap(element); 用element來包圍該元素
　　Traversing：
　　add(expr)
　　add(html)
　　add(elements)
　　children(expr)
　　contains(str)
　　end()
　　filter(expression)
　　filter(filter)
　　find(expr)
　　is(expr)
　　next(expr)
　　not(el)
　　not(expr)
　　not(elems)
　　parent(expr)
　　parents(expr)
　　prev(expr)
　　siblings(expr)
　　Core：
　　$(html).appendTo(”body”) 相當於在body中寫了一段html程式碼
　　$(elems) 獲得DOM上的某個元素
　　$(function(){……..}); 執行一個函式
　　$(”div > p”).css(”border”, “1px solid gray”); 查詢所有div的子節點p，新增樣式
　　$(”input:radio”, document.forms[0]) 在當前頁面的第一個表單中查詢所有的單選按鈕
　　$.extend(prop) prop是一個jquery物件，
　　舉例：
　　jQuery.extend({
　　min: function(a, b) { return a < b ? a : b; },
　　max: function(a, b) { return a > b ? a : b; }
　　});
　　jQuery( expression, [context] ) —$( expression, [context]); 在預設情況下，$()查詢的是當前HTML文件中的DOM元素。
　　each( callback ) 以每一個匹配的元素作為上下文來執行一個函式
　　舉例：1
　　$(”span”).click(function){
　　$(”li”).each(function(){
　　$(this).toggleClass(”example”);
　　});
　　});
　　舉例：2
　　$(”button”).click(function () {
　　$(”div”).each(function (index, domEle) {
　　// domEle == this
　　$(domEle).css(”backgroundColor”, “yellow”);
　　if ($(this).is(”#stop”)) {
　　$(”span”).text(”Stopped at div index #” + index);
　　return false;
　　}
　　});
　　});
　　jQuery Event:
　　ready(fn); $(document).ready()注意在body中沒有onload事件，否則該函式不能執行。在每個頁面中可以
　　有很多個函式被載入執行，按照fn的順序來執行。
　　bind( type, [data], fn ) 為每一個匹配元素的特定事件(像click)繫結一個或多個事件處理器函式。可能的事件屬性有：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
　　mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
　　keyup, error
　　one( type, [data], fn ) 為每一個匹配元素的特定事件(像click)繫結一個或多個事件處理器函式。在每個對
　　象上，這個事件處理函式只會被執行一次。其他規則與bind()函式相同。
　　trigger( type, [data] ) 在每一個匹配的元素上觸發某類事件。
　　triggerHandler( type, [data] ) 這一特定方法會觸發一個元素上特定的事件(指定一個事件型別)，同時取消瀏覽器對此事件的預設行動
　　unbind( [type], [data] ) 反繫結，從每一個匹配的元素中刪除繫結的事件。
　　$(”p”).unbind() 移除所有段落上的所有繫結的事件
　　$(”p”).unbind( “click” ) 移除所有段落上的click事件
　　hover( over, out ) over,out都是方法, 當滑鼠移動到一個匹配的元素上面時，會觸發指定的第一個函式。當滑鼠移出這個元素時，會觸發指定的第二個函式。
　　$(”p”).hover(function(){
　　$(this).addClass(”over”);
　　},
　　function(){
　　$(this).addClass(”out”);
　　}
　　);
　　toggle( fn, fn ) 如果點選了一個匹配的元素，則觸發指定的第一個函式，當再次點選同一元素時，則觸發指定的第二個函式。
　　$(”p”).toggle(function(){
　　$(this).addClass(”selected”);
　　},
　　function(){
　　$(this).removeClass(”selected”);
　　}
　　);
　　元素事件列表說明
　　注：不帶引數的函式，其引數為可選的 fn。jQuery不支援form元素的reset事件。
　　事件 描述 支援元素或物件
　　blur( ) 元素失去焦點 a, input, textarea, button, select, label, map, area
　　change( ) 使用者改變域的內容 input, textarea, select
　　click( ) 滑鼠點選某個物件 幾乎所有元素
　　dblclick( ) 滑鼠雙擊某個物件 幾乎所有元素
　　error( ) 當載入文件或影象時發生某個錯誤 window, img
　　focus( ) 元素獲得焦點 a, input, textarea, button, select, label, map, area
　　keydown( ) 某個鍵盤的鍵被按下 幾乎所有元素
　　keypress( ) 某個鍵盤的鍵被按下或按住 幾乎所有元素
　　keyup( ) 某個鍵盤的鍵被鬆開 幾乎所有元素
　　load( fn ) 某個頁面或影象被完成載入 window, img
　　mousedown( fn ) 某個滑鼠按鍵被按下 幾乎所有元素
　　mousemove( fn ) 滑鼠被移動 幾乎所有元素
　　mouseout( fn ) 滑鼠從某元素移開 幾乎所有元素
　　mouseover( fn ) 滑鼠被移到某元素之上 幾乎所有元素
　　mouseup( fn ) 某個滑鼠按鍵被鬆開 幾乎所有元素
　　resize( fn ) 視窗或框架被調整尺寸 window, iframe, frame
　　scroll( fn ) 滾動文件的可視部分時 window
　　select( ) 文字被選定 document, input, textarea
　　submit( ) 提交按鈕被點選 form
　　unload( fn ) 使用者退出頁面 window
　　JQuery Ajax 方法說明:
　　load( url, [data], [callback] ) 裝入一個遠端HTML內容到一個DOM結點。
　　$(”#feeds”).load(”feeds.html”); 將feeds.html檔案載入到id為feeds的div中
　　$(”#feeds”).load(”feeds.php”, {limit: 25}, function(){
　　alert(”The last 25 entries in the feed have been loaded”);
　　});
　　jQuery.get( url, [data], [callback] ) 使用GET請求一個頁面。
　　$.get(”test.cgi”, { name: “John”, time: “2pm” }, function(data){
　　alert(”Data Loaded: ” + data);
　　});
　　jQuery.getJSON( url, [data], [callback] ) 使用GET請求JSON資料。
　　$.getJSON(”test.js”, { name: “John”, time: “2pm” }, function(json){
　　alert(”JSON Data: ” + json.users[3].name);
　　});
　　jQuery.getScript( url, [callback] ) 使用GET請求javascript檔案並執行。
　　$.getScript(”test.js”, function(){
　　alert(”Script loaded and executed.”);
　　});
　　jQuery.post( url, [data], [callback], [type] ) 使用POST請求一個頁面。
　　ajaxComplete( callback ) 當一個AJAX請求結束後，執行一個函式。這是一個Ajax事件
　　$(”#msg”).ajaxComplete(function(request, settings){
　　$(this).append(”
* Request Complete.”); 
　　});
　　ajaxError( callback ) 當一個AJAX請求失敗後，執行一個函式。這是一個Ajax事件
　　$(”#msg”).ajaxError(function(request, settings){
　　$(this).append(”
* Error requesting page ” + settings.url + “”); 
　　});
　　ajaxSend( callback ) 在一個AJAX請求傳送時，執行一個函式。這是一個Ajax事件
　　$(”#msg”).ajaxSend(function(evt, request, settings){
　　$(this).append(”
* < p> 
　　+ “<”);< p>
　　});
　　ajaxStart( callback ) 在一個AJAX請求開始但還沒有啟用時，執行一個函式。這是一個Ajax事件
　　當AJAX請求開始(並還沒有啟用時)顯示loading資訊
　　$(”#loading”).ajaxStart(function(){
　　$(this).show();
　　});
　　ajaxStop( callback ) 當所有的AJAX都停止時，執行一個函式。這是一個Ajax事件
　　當所有AJAX請求都停止時，隱藏loading資訊。
　　$(”#loading”).ajaxStop(function(){
　　$(this).hide();
　　});
　　ajaxSuccess( callback ) 當一個AJAX請求成功完成後，執行一個函式。這是一個Ajax事件
　　當AJAX請求成功完成時，顯示資訊。
　　$(”#msg”).ajaxSuccess(function(evt, request, settings){
　　$(this).append(”
* 
* Successful Request!”); 
　　});
　　jQuery.ajaxSetup( options ) 為所有的AJAX請求進行全域性設定。檢視$.ajax函式取得所有選項資訊。
　　設定預設的全域性AJAX請求選項。
　　$.ajaxSetup({
　　url: “/xmlhttp/”,
　　global: false,
　　type: “POST”
　　});
　　$.ajax({ data: myData });
　　serialize( ) 以名稱和值的方式連線一組input元素。實現了正確表單元素序列
　　function showValues() {
　　var str = $(”form”).serialize();
　　$(”#results”).text(str);
　　}
　　$(”:checkbox, :radio”).click(showValues);
　　$(”select”).change(showValues);
　　showValues();
　　serializeArray( ) 連線所有的表單和表單元素(類似於.serialize()方法)，但是返回一個JSON資料格式。
　　從form中取得一組值，顯示出來
　　function showValues() {
　　var fields = $(”:input”).serializeArray();
　　alert(fields);
　　$(”#results”).empty();
　　jQuery.each(fields, function(i, field){
　　$(”#results”).append(field.value + ” “);
　　});
　　}
　　$(”:checkbox, :radio”).click(showValues);
　　$(”select”).change(showValues);
　　showValues();
　　JQuery Effects 方法說明
　　show( ) 顯示隱藏的匹配元素。
　　show( speed, [callback] ) 以優雅的動畫顯示所有匹配的元素，並在顯示完成後可選地觸發一個回撥函式。
　　hide( ) 隱藏所有的匹配元素。
　　hide( speed, [callback] ) 以優雅的動畫隱藏所有匹配的元素，並在顯示完成後可選地觸發一個回撥函式
　　toggle( ) 切換元素的可見狀態。如果元素是可見的，切換為隱藏的;如果元素是隱藏的，
　　切換為可見的。
　　slideDown( speed, [callback] ) 通過高度變化(向下增大)來動態地顯示所有匹配的元素，在顯示完成後可選
　　地觸發一個回撥函式。這個動畫效果只調整元素的高度，可以使匹配的元素以
　　“滑動”的方式顯示出來。
　　slideUp( speed, [callback] ) 通過高度變化(向上減小)來動態地隱藏所有匹配的元素，在隱藏完成後可選地
　　觸發一個回撥函式。這個動畫效果只調整元素的高度，可以使匹配的元素以”滑動”
　　的方式隱藏起來。
　　slideToggle( speed, [callback] ) 通過高度變化來切換所有匹配元素的可見性，並在切換完成後可選地觸發一個回
　　調函式。 這個動畫效果只調整元素的高度，可以使匹配的元素以”滑動”的方式隱
　　藏或顯示。
　　fadeIn( speed, [callback] ) 通過不透明度的變化來實現所有匹配元素的淡入效果，並在動畫完成後可選地觸
　　發一個回撥函式。 這個動畫只調整元素的不透明度，也就是說所有匹配的元素的
　　高度和寬度不會發生變化。
　　fadeOut( speed, [callback] ) 通過不透明度的變化來實現所有匹配元素的淡出效果，並在動畫完成後可選地觸
　　發一個回撥函式。 這個動畫只調整元素的不透明度，也就是說所有匹配的元素的
　　高度和寬度不會發生變化。
　　fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成
　　後可選地觸發一個回撥函式。 這個動畫只調整元素的不透明度，也就是說所
　　有匹配的元素的高度和寬度不會發生變化。
　　stop( ) 停止所有匹配元素當前正在執行的動畫。如果有動畫處於隊列當中，他們就會立即開始。
　　queue( ) 取得第一個匹配元素的動畫序列的引用(返回一個內容為函式的陣列)
　　queue( callback ) 在每一個匹配元素的事件序列的末尾新增一個可執行函式，作為此元素的事件函式
　　queue( queue ) 以一個新的動畫序列代替所有匹配元素的原動畫序列
　　dequeue( ) 執行並移除動畫序列前端的動畫
　　animate( params, [duration], [easing], [callback] ) 用於建立自定義動畫的函式。
　　animate( params, options ) 建立自定義動畫的另一個方法。作用同上。
　　JQuery Traversing 方法說明
　　eq( index ) 從匹配的元素集合中取得一個指定位置的元素，index從0開始
　　filter( expr ) 返回與指定表示式匹配的元素集合，可以使用”,”號分割多個expr，用於實現多個條件篩選
　　filter( fn ) 利