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 ) 利用一個特殊的函數來作爲篩選條件移除集合中不匹配的元素。
is( expr ) 用一個表達式來檢查當前選擇的元素集合，如果其中至少有一個元素符合這個給定的
表達式就返回true。
map( callback ) 將jQuery對象中的一組元素利用callback方法轉換其值，然後添加到一個jQuery數組中。
not( expr ) 從匹配的元素集合中刪除與指定的表達式匹配的元素。
slice( start, [end] ) 從匹配元素集合中取得一個子集，和內建的數組的slice方法相同。
add( expr ) 把與表達式匹配的元素添加到jQuery對象中。
children( [expr] ) 取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。可選的過濾器
將使這個方法只匹配符合的元素(只包括元素節點，不包括文本節點)。
contents( ) 取得一個包含匹配的元素集合中每一個元素的所有子孫節點的集合(只包括元素節點，不
包括文本節點)，如果元素爲iframe，則取得其中的文檔元素
find( expr ) 搜索所有與指定表達式匹配的元素。
next( [expr] ) 取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。
nextAll( [expr] ) 取得一個包含匹配的元素集合中每一個元素所有的後面同輩元素的元素集合
parent( [expr] ) 取得一個包含着所有匹配元素的唯一父元素的元素集合。
parents( [expr] ) 取得一個包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。
prev( [expr] ) 取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。
prevAll( [expr] ) 取得一個包含匹配的元素集合中每一個元素的之前所有同輩元素的元素集合。
siblings( [expr] ) 取得一個包含匹配的元素集合中每一個元素的所有同輩元素的元素集合。
andSelf( ) 將前一個匹配的元素集合添加到當前的集合中
取得所有div元素和其中的p元素，添加border類屬性。取得所有div元素中的p元素，
添加background類屬性
$(”div”).find(”p”).andSelf().addClass(”border”);
$(”div”).find(”p”).addClass(”background”);
end( ) 結束當前的操作，回到當前操作的前一個操作
找到所有p元素其中的span元素集合，然後返回p元素集合，添加css屬性
$(”p”).find(”span”).end().css(”border”, “2px red solid”);
JQuery Selectors 方法說明
基本選擇器
$(”#myDiv”) 匹配唯一的具有此id值的元素
$(”div”) 匹配指定名稱的所有元素
$(”.myClass”) 匹配具有此class樣式值的所有元素
$(”*”) 匹配所有元素
$(”div,span,p.myClass”) 聯合所有匹配的選擇器
層疊選擇器
$(”form input”) 後代選擇器，選擇ancestor的所有子孫節點
$(”#main > *”) 子選擇器，選擇parent的所有子節點
$(”label + input”) 臨選擇器，選擇prev的下一個臨節點
$(”#prev ~ div”) 同胞選擇器，選擇prev的所有同胞節點
基本過濾選擇器
$(”tr:first”) 匹配第一個選擇的元素
$(”tr:last”) 匹配最後一個選擇的元素
$(”input:not(:checked) + span”)從原元素集合中過濾掉匹配selector的所有元素(這裏有是一個臨選擇器)
$(”tr:even”) 匹配集合中偶數位置的所有元素(從0開始)
$(”tr:odd”) 匹配集合中奇數位置的所有元素(從0開始)
$(”td:eq(2)”) 匹配集合中指定位置的元素(從0開始)
$(”td:gt(4)”) 匹配集合中指定位置之後的所有元素(從0開始)
$(”td:gl(4)”) 匹配集合中指定位置之前的所有元素(從0開始)
$(”:header”) 匹配所有標題
$(”div:animated”) 匹配所有正在運行動畫的所有元素
內容過濾選擇器
$(”div:contains('John')”) 匹配含有指定文本的所有元素
$(”td:empty”) 匹配所有空元素(只含有文本的元素不算空元素)
$(”div:has(p)”) 從原元素集合中再次匹配所有至少含有一個selector的所有元素
$(”td:parent”) 匹配所有不爲空的元素(含有文本的元素也算)
$(”div:hidden”) 匹配所有隱藏的元素，也包括表單的隱藏域
$(”div:visible”) 匹配所有可見的元素
屬性過濾選擇器
$(”div[id]”) 匹配所有具有指定屬性的元素
$(”input[name='newsletter']”) 匹配所有具有指定屬性值的元素
$(”input[name!='newsletter']”) 匹配所有不具有指定屬性值的元素
$(”input[name^='news']”) 匹配所有指定屬性值以value開頭的元素
$(”input[name$='letter']”) 匹配所有指定屬性值以value結尾的元素
$(”input[name*='man']”) 匹配所有指定屬性值含有value字符的元素
$(”input[id][name$='man']”) 匹配同時符合多個選擇器的所有元素
子元素過濾選擇器
$(”ul li:nth-child(2)”),
$(”ul li:nth-child(odd)”), 匹配父元素的第n個子元素
$(”ul li:nth-child(3n + 1)”)
$(”div span:first-child”) 匹配父元素的第1個子元素
$(”div span:last-child”) 匹配父元素的最後1個子元素
$(”div button:only-child”) 匹配父元素的唯一1個子元素
表單元素選擇器
$(”:input”) 匹配所有的表單輸入元素，包括所有類型的input, textarea, select 和 button
$(”:text”) 匹配所有類型爲text的input元素
$(”:password”) 匹配所有類型爲password的input元素
$(”:radio”) 匹配所有類型爲radio的input元素
$(”:checkbox”) 匹配所有類型爲checkbox的input元素
$(”:submit”) 匹配所有類型爲submit的input元素
$(”:image”) 匹配所有類型爲image的input元素
$(”:reset”) 匹配所有類型爲reset的input元素
$(”:button”) 匹配所有類型爲button的input元素
$(”:file”) 匹配所有類型爲file的input元素
$(”:hidden”) 匹配所有類型爲hidden的input元素或表單的隱藏域
表單元素過濾選擇器
$(”:enabled”) 匹配所有可操作的表單元素
$(”:disabled”) 匹配所有不可操作的表單元素
$(”:checked”) 匹配所有已點選的元素
$(”select option:selected”) 匹配所有已選擇的元素
JQuery CSS 方法說明
css( name ) 訪問第一個匹配元素的樣式屬性。
css( properties ) 把一個”名/值對”對象設置爲所有匹配元素的樣式屬性。
$(”p”).hover(function () {
$(this).css({ backgroundColor:”yellow”, fontWeight:”bolder” });
}, function () {
var cssObj = {
backgroundColor: “#ddd”,
fontWeight: “”,
color: “#0028f4”
}
$(this).css(cssObj);
});
css( name, value ) 在所有匹配的元素中，設置一個樣式屬性的值。
offset( ) 取得匹配的第一個元素相對於當前可視窗口的位置。返回的對象有2個屬性，
top和left，屬性值爲整數。這個函數只能用於可見元素。
var p = $(”p:last”);
var offset = p.offset();
p.html( “left: ” + offset.left + “, top: ” + offset.top );
width( ) 取得當前第一匹配的元素的寬度值，
width( val ) 爲每個匹配的元素設置指定的寬度值。
height( ) 取得當前第一匹配的元素的高度值，
height( val ) 爲每個匹配的元素設置指定的高度值。
JQuery Utilities 方法說明
jQuery.browser
.msie 表示ie
jQuery.browser.version 讀取用戶瀏覽器的版本信息
jQuery.boxModel 檢測用戶瀏覽器針對當前頁的顯示是否基於w3c CSS的盒模型
jQuery.isFunction( obj ) 檢測傳遞的參數是否爲function
function stub() { }
var objs = [
function () {},
{ x:15, y:20 },
null,
stub,
“function”
];
jQuery.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$(”span:eq( ” + i + “)”).text(isFunc);
});
jQuery.trim( str ) 清除字符串兩端的空格，使用正則表達式來清除給定字符兩端的空格
jQuery.each( object, callback ) 一個通用的迭代器，可以用來無縫迭代對象和數組
jQuery.extend( target, object1, [objectN] ) 擴展一個對象，修改原來的對象並返回，這是一個強大的實現繼承的
工具，這種繼承是採用傳值的方法來實現的，而不是JavaScript中的
原型鏈方式。
合併settings和options對象，返回修改後的settings對象
var settings = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
jQuery.extend(settings, options);
合併defaults和options對象，defaults對象並沒有被修改。options對象中的值
代替了defaults對象的值傳遞給了empty。
var empty = {}
var defaults = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
var settings = $.extend(empty, defaults, options);
jQuery.grep( array, callback, [invert] ) 通過一個篩選函數來去除數組中的項
$.grep( [0,1,2], function(n,i){
return n > 0;
});
jQuery.makeArray( obj ) 將一個類似數組的對象轉化爲一個真正的數組
將選取的div元素集合轉化爲一個數組
var arr = jQuery.makeArray(document.getElementsByTagName(”div”));
arr.reverse(); // use an Array method on list of dom elements
$(arr).appendTo(document.body);
jQuery.map( array, callback ) 使用某個方法修改一個數組中的項，然後返回一個新的數組
jQuery.inArray( value, array ) 返回value在數組中的位置，如果沒有找到，則返回-1
jQuery.unique( array ) 刪除數組中的所有重複元素，返回整理後的數組。