**目錄** * [一、jQuery簡介與第一個jQuery程序](https://www.cnblogs.com/best/p/5748515.html#_label0) * [1.1、jQuery簡介](https://www.cnblogs.com/best/p/5748515.html#_lab2_0_0) * [?1.2、jQuery特點](https://www.cnblogs.com/best/p/5748515.html#_lab2_0_1) * [1.3、jQuery版本](https://www.cnblogs.com/best/p/5748515.html#_lab2_0_2) * [1.4、獲得jQuery庫](https://www.cnblogs.com/best/p/5748515.html#_lab2_0_3) * [1.5、第一個jQuery程序](https://www.cnblogs.com/best/p/5748515.html#_lab2_0_4) * [二、jQuery對象和DOM對象](https://www.cnblogs.com/best/p/5748515.html#_label1) * [2.1、DOM對象](https://www.cnblogs.com/best/p/5748515.html#_lab2_1_0) * [2.2、jQuery對象](https://www.cnblogs.com/best/p/5748515.html#_lab2_1_1) * [2.3、DOM轉換成jQuery對象](https://www.cnblogs.com/best/p/5748515.html#_lab2_1_2) * [2.4、jQuery對象轉換成DOM對象](https://www.cnblogs.com/best/p/5748515.html#_lab2_1_3) * [2.5、DOM對象與jQuery對象區別](https://www.cnblogs.com/best/p/5748515.html#_lab2_1_4) * [三、常用選擇器](https://www.cnblogs.com/best/p/5748515.html#_label2) * [3.1.?選擇器和包裝集](https://www.cnblogs.com/best/p/5748515.html#_lab2_2_0) * [3.2.?? 基本選擇器](https://www.cnblogs.com/best/p/5748515.html#_lab2_2_1) * [3.2.1、通過id獲取元素](https://www.cnblogs.com/best/p/5748515.html#_label3_2_1_0) * [3.2.2、通過類名獲取元素](https://www.cnblogs.com/best/p/5748515.html#_label3_2_1_1) * [3.2.3、通過標簽名獲取元素](https://www.cnblogs.com/best/p/5748515.html#_label3_2_1_2) * [四、350行jQuery常用腳本](https://www.cnblogs.com/best/p/5748515.html#_label3) * [4.1、常用選擇器](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_0) * [4.2、基本篩選器](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_1) * [4.3、內容選擇器](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_2) * [4.4、表單選擇器](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_3) * [4.5、篩選與查找](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_4) * [4.6、屬性操作](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_5) * [4.7、樣式操作](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_6) * [4.8、內容操作](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_7) * [4.9、CSS操作](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_8) * [4.10、定位與偏移](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_9) * [4.11、尺寸](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_10) * [4.12、DOM內部插入](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_11) * [4.13、DOM外部插入](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_12) * [4.14、DOM替換](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_13) * [4.15、DOM刪除](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_14) * [4.16、DOM復制](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_15) * [4.17、DOM加載完成事件](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_16) * [4.18、綁定事件](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_17) * [4.19、事件對象](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_18) * [4.20、動態事件綁定](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_19) * [4.21、動畫效果](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_20) * [4.22、工具方法](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_21) * [4.23、AJAX](https://www.cnblogs.com/best/p/5748515.html#_lab2_3_22) * [五、AJAX詳解](https://www.cnblogs.com/best/p/5748515.html#_label4) * [5.1、回調函數](https://www.cnblogs.com/best/p/5748515.html#_lab2_4_0) * [5.2、數據類型](https://www.cnblogs.com/best/p/5748515.html#_lab2_4_1) * [5.3、發送數據到服務器](https://www.cnblogs.com/best/p/5748515.html#_lab2_4_2) * [5.4、高級選項](https://www.cnblogs.com/best/p/5748515.html#_lab2_4_3) * [5.5、參數大全](https://www.cnblogs.com/best/p/5748515.html#_lab2_4_4) * [六、視頻與資料下載](https://www.cnblogs.com/best/p/5748515.html#_label5) 前一段時間錄了一套關于jQuery的視頻分享給大家，可以在下載區下載到，本來想配合文字一起的，后面發現視頻+幫助文檔也是非常好的學習方法。 # 一、jQuery簡介與第一個jQuery程序 ## 1.1、jQuery簡介 jQuery是繼Prototype之后又一個優秀的JavaScript庫，是一個由John Resig創建于2006年1月的開源項目。現在的jQuery團隊主要包括核心庫、UI和插件等開發人員以及推廣和網站設計維護人員。  jQuery憑借簡介的語法和跨瀏覽器的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發AJAX的操作。其獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。總之，無論是網頁設計師、后臺開發者、還是項目管理者，也無論是JavaScript初學者還是JavaScript高手，都有足夠多的理由去學習jQuery。 ## ?1.2、jQuery特點 jQuery是免費、開源的，使用MIT許可協議。jQuery的語法設計可以使開發更加便捷，例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者可以很輕松的開發出功能強大的靜態或動態網頁。jQuery的特點： * 功能強大，強調的理念是寫的少，做得多（write less，do more） * 封裝了大量常用的DOM操作 * 靈活的事件處理機制 * 擁有完善的AJAX功能 * 擴展性強、插件豐富 * 易學易用 * 多瀏覽器支持（支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+，在2.0.0中取消了對Internet Explorer6,7,8的支持）、兼容性好 ## 1.3、jQuery版本 jQuery 1.0 （2006年8月）：該庫的第一個穩定版本，已經具有了對CSS選擇符、事件處理和AJAX交互的穩健支持。 jQuery 1.1 （2007年1月）：這一版大幅簡化了API。許多較少使用的方法被合并，減少了需要掌握和解釋的方法數量。 jQuery 1.1.3 （2007年7月）：這次小版本變化包含了對jQuery選擇符引擎執行速度的顯著提升。從這個版本開始，jQuery的性能達到了Prototype、Mootools以及 Dojo等同類JavaScript庫的水平。 jQuery 1.2 （2007年9月）：這一版去掉了對XPath選擇符的支持，原因是相對于CSS語法它已經變得多余了。這一版能夠支持對效果的更靈活定制，而且借助新增 的命名空間事件，也使插件開發變得更容易。 jQuery UI（2007年9月）：這個新的插件套件是作為曾經流行但已過時的Interface插件的替代項目而發布的。jQuery UI中包含大量預定義好的部件（ widget），以及一組用于構建高級元素（例如可拖放的界面元素）的工具。 jQuery 1.2.6 （2008年5月）：這一版主要是將Brandon Aaron開發的流行的Dimensions插件的功能移植到了核心庫中。 jQuery 1.3 （2009年1月）：這一版使用了全新的選擇符引擎Sizzle，庫的性能也因此有了極大提升。這一版正式支持事件委托特性。 jQuery 1.3.2 （2009年2月）：這次小版本升級進一步提升了庫的性能，例如改進了：visible/:hidden選擇符、.height()/.width()方法的底層處理機制。另外，也支 持查詢的元素按文檔順序返回。 jQuery 1.4 （2010年1月14號）：對代碼庫進行了內部重寫組織，開始建立一些風格規范。老的core.js文件被分為 attribute.js,css.js,data.js,manipulation.js,traversing.js和queue.js；CSS和attribute的邏輯分離。 jQuery 1.5 （2011年1月31日）：該版本修復了83個bug，解決了460個問題。重大改進有：重寫了Ajax模塊；新增延緩對象（Deferred Objects）；jQuery替身 ——jQuery.sub()；增強了遍歷相鄰節點的性能；jQuery開發團隊構建系統的改進。 jQuery1.7 （2011年11月04號）：新版本包含了很多新的特征，特別提升了事件委派時的性能尤其是在IE7下。 jQuery 1.7.2 （2012年03月24號）：jQuery 1.7.2正式版發布。 該版本在1.7.1的基礎上修復了大量的bug，并改進了部分功能。而相比于1.7.2 RC1，只修復了一個bug。值得注意的是：如果你正在使用jQuery Mobile，請使用最新的jQuery 1.7.2和jQuery Mobile 1.1這兩個版本，因為之前的jQuery Mobile版本還基于jQuery core 1.7.1或更早的版本。 jQuery 1.8.3 2012年11月14日 jQuery 1.8.3 發布，修復 bug 和性能衰退問題、IE8中的HTML相關Bug、jQuery 1.8.2在IE9中調用ajax失敗的問題 jQuery 2.0 2013年4月18日 jQuery 2.0正式版發布 不再支持IE 6/7/8：如果在IE9/10版本中使用“兼容性視圖”模式也將會受到影響。而jQuery3修復了大量的bug，增加了新的方法，同時移除了一些接口，并修改了少量接口的行為，不1和2是不同的API。 更輕更快：2.0版本文件與1.9.1相比小了12%。可以構建一個更小、更輕量的版本、表現更好。 jQuery 2.0 API完全兼容jQuery 1.9 API。 更多版本請查看： [https://github.com/jquery/jquery/releases](https://github.com/jquery/jquery/releases)  說明：不管是jQuery1.x還是2.x使用的API都是一樣的，只是內部實現的方式有區別，2.x不支持IE6/7/8而1.x則支持，2.x更小，效率更高，但功能是一樣。 ## 1.4、獲得jQuery庫 jQuery不需要安裝，把下載的jQuery庫放到網站的一個公共位置，想要在某個頁面上使用jQuery時，只需要在相關的HTML文檔中引入該庫文件即可。獲得jQuery相關資源的網站地址如下： 官網：[http://jquery.com/](http://jquery.com/) 源碼：[https://github.com/jquery/jquery](https://github.com/jquery/jquery) 文檔：[http://api.jquery.com/](http://api.jquery.com/) 中文幫助：[http://www.jquery123.com/](http://www.jquery123.com/) CDN：[http://cdn.code.baidu.com/](http://cdn.code.baidu.com/) jQuery1.12.1在線中文版：[http://hemin.cn/jq/](http://hemin.cn/jq/) 下載較新版的jQuery:下載[jQuery1.11.3幫助與庫](http://files.cnblogs.com/files/best/jQuery1.11.3%E5%BA%93%E4%B8%8E%E5%B8%AE%E5%8A%A9.rar) 下載最新版的jQuery:[下載jQuery1.12.4庫](https://www.cnblogs.com/best/p/%E4%B8%8B%E8%BD%BDjQuery1.12.4%E5%BA%93) 學習jQuery的權威資料就是幫助文檔：  ## 1.5、第一個jQuery程序 jQuery的開發不依賴特定的開發工具，使用常用Web開發工具都行，如：Eclipse、Visual Studio、Dreamweaver、intelliJ IDEA、HBuilder、webstorm、sublime、notepad++等。 [](javascript:void(0); "復制代碼") ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello jQuery</title> </head> <body> <script src="js/jQuery/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function(){ alert("Hello jQuery!"); }); </script> </body> </html> ~~~ [](javascript:void(0); "復制代碼") ?這里使用HBuilder，這是一個國人開發的基于Eclipse的免費IDE，感覺還不錯。 HBuilder下載地址：[http://www.dcloud.io/](http://www.dcloud.io/)（有Mac版與Windows版本）  運行結果：  # 二、jQuery對象和DOM對象 ## 2.1、DOM對象 使用JavaScript中的DOM API操作獲得的元素對象叫DOM對象。文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標志語言的標準編程接口。在網頁上，組織頁面（或文檔）的對象被組織在一個樹形結構中，用來表示文檔中對象的標準模型就稱為DOM。  獲得DOM對象的示例： [](javascript:void(0); "復制代碼") ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM元素</title> </head> <body> <h2>DOM元素</h2> <p id="foo">Foo</p> <p id="bar">Bar</p> <script type="text/javascript"> //獲得文檔中id為foo的元素 var foo=document.getElementById("foo"); //將元素的HTML內容修改為Foo DOM foo.innerHTML="Foo DOM"; //獲得文檔中標簽名稱為p的所有元素 var items=document.getElementsByTagName("p"); //向控制臺輸出元素數組的個數 console.log(items.length); //遍歷數組中的元素 for (var i=0;i<items.length;i++) { //將每個元素的HTML內容增加DOM字符 items[i].innerHTML+=" DOM"; } </script> </body> </html> ~~~ [](javascript:void(0); "復制代碼") 示例中的foo是一個DOM對象，items是一DOM數組，innerHTML是DOM元素的一個屬性。 運行結果：  調試：  在Chrome瀏覽器按Ctrl+Shift+I啟動開發者工具，調試上面的代碼，添加監視foo對象，在右側展開監視的foo對象，可以看到該DOM對象的所有屬性、方法與事件信息。 ## 2.2、jQuery對象 jQuery對象就是通過jQuery包裝DOM對象后產生的對象叫jQuery對象。?jQuery對象是對DOM元素封裝過后的數組，也稱為包裝集。無論選擇器匹配了多個或者零個元素，jQuery對象都不再是null。意味著你只能夠用jQuery對象的.length屬性來判斷選擇器是否選中了元素。 獲得jQuery對象的示例： [](javascript:void(0); "復制代碼") ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery對象</title> </head> <body> <h2>jQuery對象</h2> <p id="foo">Foo</p> <p id="bar">Bar</p> <script type="text/javascript" src="js/jQuery/jquery.min.js" ></script> <script type="text/javascript"> //從文檔中獲得id為foo的jQuery對象 var $foo=$("#foo"); //修改$foo元素的HTML內容為Foo jQuery $foo.html("Foo jQuery"); //獲得頁面中所有的p標簽元素 var $items=$("p"); //從控制臺輸出元素個數 console.log($items.size()); //遍歷并修改元素的HTML內容 $items.html($items.html()+" jQuery"); </script> </body> </html> ~~~ [](javascript:void(0); "復制代碼") 代碼中的是一個對象foo是一個jQuery對象,items也是一個jQuery對象。 運行結果：  調試：  從上面的調試信息中可以看到foo是一個長度為1的集合，集合中下標為0的元素就是1個DOM元素（0：p#foo），上DOM示例中的foo對象完全一樣；可以看出foo是一個長度為1的集合，集合中下標為0的元素就是1個DOM元素（0：p#foo），上DOM示例中的foo對象完全一樣；可以看出foo是對DOM元素foo的封裝，使用功能更加強大，從隱式原型\_\_proto\_\_中的內容就可以看到，中間提供了大量的方法，事件與屬性，簡化操作。 ## 2.3、DOM轉換成jQuery對象 要使用jQuery中的方法與屬性就需要把一個JavaScript中的DOM對象轉換成jQuery對象。 轉換方法一： 使用工廠方法jQuery(DOM對象)，如jQuery(document.getElementById("foo"))，是方法的簡寫形式，也可以寫成是jQuery方法的簡寫形式，也可以寫成(document.getElementById("foo")) 轉換方法二： 簡化形式jQuery(選擇器)，如jQuery("#foo")，也可以寫成$("#foo") 示例如下： [](javascript:void(0); "復制代碼") ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM轉換成jQuery對象</title> </head> <body> <h2>DOM轉換成jQuery對象</h2> <p id="foo">Foo</p> <p id="bar">Bar</p> <script type="text/javascript" src="js/jQuery/jquery.min.js" ></script> <script type="text/javascript"> //方法一 //在文檔中獲得id為foo的DOM對象 var foo=document.getElementById("foo"); //將DOM對象轉換成jQuery對象 var $foo1=jQuery(foo); var $foo2=$(foo); //調用jQuery對象中的方法 $foo1.html("Foo jQuery"); $foo2.css("color","red"); //方法二 //獲得文檔中id為bar的DOM對象，將DOM包裝成一個jQuery對象，調用jQuery方法html修改元素HTML jQuery("#bar").html("Bar jQuery"); //為id為bar的元素設置樣式，將前景色修改為藍色 $("#bar").css("color","blue"); </script> </body> </html> ~~~ [](javascript:void(0); "復制代碼") 運行結果：  ## 2.4、jQuery對象轉換成DOM對象 DOM對象是jQuery對象的組成部分，jQuery對象是對DOM對象的包裝升級，每一個jQuery對象都是一個集合，是一個包裝集，每個包裝集中可以包含0到N個DOM元素。將jQuery對象轉換成DOM對象方法如下 方法一： jQuery對象\[下標\] 方法二： jQuery對象.get(下標) 示例： [](javascript:void(0); "復制代碼") ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery對象轉換成DOM對象</title> </head> <body> <h2>jQuery對象轉換成DOM對象</h2> <p id="foo">Foo</p> <p id="bar">Bar</p> <script type="text/javascript" src="js/jQuery/jquery.min.js" ></script> <script type="text/javascript"> //方法一 var $foo=$("#foo"); //從jQuery對象中獲得下標為0的DOM元素，并調用DOM屬性 $foo[0].innerHTML="foo DOM"; //方法二 var $p=$("p"); //從jQuery對象中獲得下標為1的DOM元素，并調用DOM屬性 $p.get(1).innerHTML="bar DOM"; </script> </body> </html> ~~~ [](javascript:void(0); "復制代碼") 運行結果：  ## 2.5、DOM對象與jQuery對象區別 1. DOM對象只能調用DOM方法、屬性與事件； 2. jQuery對象只能調用jQuery方法、屬性與事件； 3. 可以將DOM轉換成jQuery對象，也可以將jQuery轉換成DOM對象； 4. $只是jQuery的別名形式； 5. 每一個jQuery對象都是一個DOM對象的集合 # 三、常用選擇器 通過jQuery中的選擇器實際上取得的是HTML中的DOM元素。在jQuery中使用CSS匹配(CSS like)來進行元素指定，比其他JavaScript庫都簡單，這也正是jQuery在網頁設計人員中大受歡迎的理由了。 在其核心，jQuery重點放在從HTML頁面里獲取元素并對其進行操作。如果你熟悉CSS，就會很清楚選擇器的威力，通過元素的特性或元素在文檔中的位置去描述元素組。有了jQuery，就能夠利用現有知識去發揮選擇器的威力，在很大程度上簡化JavaScript代碼。CSS中可以使用的選擇器基本都可以用到jQuery中，反之不然。 ## 3.1.?選擇器和包裝集 為了使設計和內容分離而把CSS引入Web技術的時候，需要以某種方式從外部樣式表中引用頁面元素組。開發出來的方法就是通過使用選擇器—基于元素的屬性或元素在HTML文檔中的位置，簡明地表現元素。 例如，選擇器：p a 引用所有嵌套于元素之內的超鏈接(元素)組。jQuery利用同樣的選擇器，不僅支持目前CSS中使用的常見選擇器，還支持尚未被大多數瀏覽器完全實現的更強大的選擇器。收集一組元素，可以使用如下簡單的語法： ~~~ $(selector) 或者 jQuery(selector) ~~~ 也許剛開始你會覺得$()符號有點奇怪，但大部分jQuery用戶很快就喜歡上它的簡潔。例如，為了獲取嵌套在元素內的一組超鏈接，我們使用如下語句： ~~~ $("p a") ~~~ $( )函數返回特別的JavaScript對象，它包含著與選擇器相匹配的DOM元素的數組。該對象擁有大量預定義的有用方法，能夠作用于該組元素。 用編程的話來說，這種構造稱為包裝器(wrapper)，因為它用擴展功能來對匹配的元素進行包裝。我們使用術語jQuery包裝器或者包裝集(wrapped set)，來指能夠在其上用jQuery定義的方法去操作的、匹配元素的集合。 假定我們想選擇帶有CSS類notLongForThisWorld的所有元素。jQuery語句如下所示： ~~~ $("notLongForThisWorld"); ~~~ ## 3.2.?? 基本選擇器 基本選擇器是jQuery中最常用的選擇器，也是最簡單的選擇器，它通過元素id、class和標簽名等來查找DOM元素。在網頁中，每個id名稱只能使用一次，class允許重復使用。 選擇器描述返回示例#id根據給定的id匹配一個元素單個元素$("#test")選取id為test的元素.class根據給定的類名匹配元素集合元素$(".test")選取所有class為test的元素element根據給定的元素名稱匹配元素集合元素$("p")選取所有的&lt;p&gt;元素selector1,selector2,selector3...將每一個選擇器匹配到的元素合并后一起返回集合元素$("div,span,p.cls")選取所有&lt;div&gt;，&lt;span&gt;和擁有class為cls的&lt;p&gt;標簽的一組元素*匹配所有元素集合元素$("*")選取所有的元素 可以使用這些基本選擇器來完成絕大多數的工作，下面我們對這些選擇器一一進行講解。 ### 3.2.1、通過id獲取元素 在CSS中經常使用id來控制元素，在jQuery中獲取元素時，也使用同樣方法。與CSS一樣，在id前面加上#號。 語法：**$("#id")** 可以控制指定id的HTML元素，在HTML中有id不可重復的規定，因此可以控制文檔內部惟一的元素。如果定義了多個同名的id元素，則只有最初出現的同名id有效。在JavaScript中使用document對象的getElemnetById(id)方法來獲取元素，在jQuery中則更為簡化。同時通過jQuery獲得id對應的元素后可以調用jQuery中的相應方法對該元素進行操作，具體代碼如下所示： [](javascript:void(0); "復制代碼") ~~~ <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <div id="notMe"><p>id="notMe"</p></div> <div id="myDiv">id="myDiv"</div> <script> $("#myDiv").css("border","3px solid red"); </script> ~~~ [](javascript:void(0); "復制代碼") ### 3.2.2、通過類名獲取元素 在網頁當中，使用class屬性引用樣式表中的類樣式，因為類樣式的可重用，所以多個元素可以引用同一個樣式。在jQuery中，可以獲取同一類名的多個HTML元素，編寫方式同CSS，即在類名的前面加上點號。 語法：**$(".className")** 本例通過類名來獲取元素，因為使用同一個類樣式的元素可能有多個，所以通過類名來獲取元素返回的將是一個數組對象，即jQuery中的包裝集，然后對此包裝集中的元素進行相關操作。示例代碼如下所示： [](javascript:void(0); "復制代碼") ~~~ <div class="myclass">div class="notMe"</div> <div class="myclass otherclass">div class="myClass"</div> <span class="myclass otherclass">span class="myClass"</span> <script> $(".myclass.otherclass").css("border","13px solid red"); </script>? ~~~ [](javascript:void(0); "復制代碼") ### 3.2.3、通過標簽名獲取元素 在CSS中我們通常使用標簽名來為這一類標簽定義樣式，在jQuery中也可以用同樣方法來獲取標簽元素。 如果使用普通JavaScript，則必須用document對象的getElementsByTagName(tagName)方法來進行元素的抓取。而jQuery方法與CSS相同，指定需要操作的標簽名即可操控所有的標簽。 語法：**$("tagName")** 示例代碼如下所示： [](javascript:void(0); "復制代碼") ~~~ <div>DIV1</div> <div>DIV2</div> <span>SPAN</span> <script> $("div").css("border","9px solid red"); </script> ? ~~~ [](javascript:void(0); "復制代碼") # 四、350行jQuery常用腳本 ## 4.1、常用選擇器 [](javascript:void(0); "復制代碼") ~~~ $('#div1') //id為div1的節點，如<div id='div1'></div> $('span') //所有的span結點，一個包裝集 $('p span') //p標簽下的所有span節點，后代節點 $('p>span') //p標簽下的所有span子節點，子代節點 $('.red') //使用樣式red的節點，如<span class="red"></span> $('*') //所有節點 $("div,span,p.cls") //選取所有<div>，<span>和擁有class為cls的<p>標簽的一組元素 ~~~ [](javascript:void(0); "復制代碼") ## 4.2、基本篩選器 [](javascript:void(0); "復制代碼") ~~~ $('span:first') //第一個節點 $('span:last') //最后一個節點 $("td:even") //索引為偶數的節點，從 0 開始 $("td:odd") //索引為奇數的節點，從 0 開始 $("td:eq(1)") //給定索引值的節點 $("td:gt(0)") //大于給定索引值的節點 $("td:lt(2)") //小于給定索引值的節點 $(":focus") //當前獲取焦點的節點 $(":animated") //正在執行動畫效果的節點 ~~~ [](javascript:void(0); "復制代碼") ## 4.3、內容選擇器 ~~~ $("div:contains('hello')") //包含hello文本的節點 $("td:empty") //不包含子節點或者文本的空節點 $("div:has(p)") //含有選擇器所匹配的節點 $("td:parent") //含有子節點或者文本的節點 ~~~ ## 4.4、表單選擇器 [](javascript:void(0); "復制代碼") ~~~ $("input:checked") //所有選中的節點 $("select option:selected") //select中所有選中的option節點 $(":input") //匹配所有 input, textarea, select 和 button 節點 $(":text") //所有的單行文本框 $(":password") //所有密碼框 $(":radio") //所有單選按鈕 $(":checkbox") //所有復選框 $(":submit") //所有提交按鈕 $(":reset") //所有重置按鈕 $(":button") //所有button按鈕 $(":file") //所有文件域 ~~~ [](javascript:void(0); "復制代碼") ## 4.5、篩選與查找 [](javascript:void(0); "復制代碼") ~~~ $("p").eq(0) //當前操作中第N個jQuery對象,類似索引 $('li').first() //第一個節點 $('li').last() //最后一個節點 $(this).hasClass("node") //節點是否含有某個特定的類,返回布爾值 $('li').has('ul') //包含特定后代的節點 $("div").children() //div中的每個子節點,第一層 $("div").find("span") //查找div下的所有span節點 $("p").next() 　　　//緊鄰p節點后的一個同輩節點 $("p").nextAll() //p節點之后所有的同輩節點 $("#node").nextUntil("#node2") //id為"#node"節點之后到id為'#node2'之間所有的同輩節點,掐頭去尾 $("p").prev() //緊鄰p節點前的一個同輩節點 $("p").prevAll() //p節點之前所有的同輩節點 $("#node").prevUntil("#node2") //id為"#node"節點之前到id為'#node2'之間所有的同輩節點,掐頭去尾 $("p").parent() //每個p節點的父節點 $("p").parents() //每個p節點的所有祖先節點,body,html $("#node").parentsUntil("#node2") //id為"#node"節點到id為'#node2'之間所有的父級節點,掐頭去尾 $("div").siblings() //所有的同輩節點,不包括自己 ~~~ [](javascript:void(0); "復制代碼") ## 4.6、屬性操作 [](javascript:void(0); "復制代碼") ~~~ $("img").attr("src"); 　　　　　　 //返回文檔中所有圖像的src屬性值 $("img").attr("src","node.jpg"); //設置所有圖像的src屬性 $("img").removeAttr("src"); 　　　//將文檔中圖像的src屬性刪除 $("input[type='checkbox']").prop("checked", true); //選中復選框 $("input[type='checkbox']").prop("checked", false); //不選中復選框 $("img").removeProp("src"); 　　 //刪除img的src屬性 ~~~ [](javascript:void(0); "復制代碼") ## 4.7、樣式操作 ~~~ $("p").addClass("selected"); 　　//為p節點加上 'selected' 類 $("p").removeClass("selected"); //從p節點中刪除 'selected' 類 $("p").toggleClass("selected"); //如果存在就刪除,否則就添加HTML代碼/文本/值 ~~~ ## 4.8、內容操作 [](javascript:void(0); "復制代碼") ~~~ $('p').html(); 　　　　　　　　　　 //返回p節點的html內容 $("p").html("Hello <b>hello</b>!"); //設置p節點的html內容 $('p').text(); 　　　　　　　　　　 //返回p節點的文本內容 $("p").text("hello"); 　　　　　　　//設置p節點的文本內容 $("input").val(); 　　　　　　　　 //獲取文本框中的值 $("input").val("hello"); 　　　　 //設置文本框中的內容 ~~~ [](javascript:void(0); "復制代碼") ## 4.9、CSS操作 ~~~ $("p").css("color"); //訪問查看p節點的color屬性 $("p").css("color","red"); //設置p節點的color屬性為red $("p").css({ "color": "red", "background": "yellow" }); //設置p節點的color為red，background屬性為yellow（設置多個屬性要用{}字典形式） ~~~ ## 4.10、定位與偏移 [](javascript:void(0); "復制代碼") ~~~ $('p').offset() //節點在當前視口的相對偏移,對象 {top: 5, left: 9} $('p').offset().top $('p').offset().left $("p").position() //節點相對父節點的偏移,對可見節點有效，Object {top: 5, left: 8} $(window).scrollTop() //獲取滾輪滑的高度 $(window).scrollLeft() //獲取滾輪滑的寬度 $(window).scrollTop('25') //設置滾輪滑的高度為25 ~~~ [](javascript:void(0); "復制代碼") ## 4.11、尺寸 [](javascript:void(0); "復制代碼") ~~~ $("p").height(); //獲取p節點的高度 $("p").width(); //獲取p節點的寬度 $("p:first").innerHeight() //獲取第一個匹配節點內部區域高度(包括補白、不包括邊框) $("p:first").innerWidth() //獲取第一個匹配節點內部區域寬度(包括補白、不包括邊框) $("p:first").outerHeight() //匹配節點外部高度(默認包括補白和邊框) $("p:first").outerWidth() //匹配節點外部寬度(默認包括補白和邊框) $("p:first").outerHeight(true) //為true時包括邊距 ~~~ [](javascript:void(0); "復制代碼") ## 4.12、DOM內部插入 ~~~ $("p").append("<b>hello</b>"); //每個p節點內后面追加內容 $("p").appendTo("div"); 　　　 //p節點追加到div內后 $("p").prepend("<b>Hello</b>"); //每個p節點內前面追加內容 $("p").prependTo("div"); 　 //p節點追加到div內前 ~~~ ## 4.13、DOM外部插入 ~~~ $("p").after("<b>hello</b>"); //每個p節點同級之后插入內容 $("p").before("<b>hello</b>"); //在每個p節點同級之前插入內容 $("p").insertAfter("#node"); //所有p節點插入到id為node節點的后面 $("p").insertBefore("#node"); //所有p節點插入到id為node節點的前面 ~~~ ## 4.14、DOM替換 ~~~ $("p").replaceWith("<b>Paragraph. </b>"); //將所有匹配的節點替換成指定的HTML或DOM節點 $("<b>Paragraph. </b>").replaceAll("p"); //用匹配的節點替換掉所有 selector匹配到的節點 ~~~ ## 4.15、DOM刪除 ~~~ $("p").empty(); //刪除匹配的節點集合中所有的子節點，不包括本身 $("p").remove(); //刪除所有匹配的節點,包括本身 $("p").detach(); //刪除所有匹配的節點(和remove()不同的是:所有綁定的事件、附加的數據會保留下來) ~~~ ## 4.16、DOM復制 ~~~ $("p").clone() 　　//克隆節點并選中克隆的副本 $("p").clone(true) //布爾值指事件處理函數是否會被復制 ~~~ ## 4.17、DOM加載完成事件 [](javascript:void(0); "復制代碼") ~~~ $(document).ready(function(){ 您的代碼... }); //縮寫 $(function($) { 您的代碼... }); ~~~ [](javascript:void(0); "復制代碼") ## 4.18、綁定事件 [](javascript:void(0); "復制代碼") ~~~ //bind 為每個匹配節點綁定事件處理函數，綁定多個用{}。 $("p").bind("click", function(){ alert( $(this).text() ); }); $('#div1').bind({ "mouseover":function () { $('#div1').parent().removeClass("hide"); },"mouseout":function () { $('#div1').parent().addClass("hide"); } }); $("p").one( "click", function(){}) //事件綁定后只會執行一次 $("p").unbind( "click" ) //反綁一個事件 //與bind 不同的是當時間發生時才去臨時綁定。 $("p").delegate("click",function(){ 您的代碼 }); $("p").undelegate(); 　　　//p節點刪除由 delegate() 方法添加的所有事件 $("p").undelegate("click") //從p節點刪除由 delegate() 方法添加的所有click事件 $("p").click(); 　　//單擊事件 $("p").dblclick(); //雙擊事件 $("input[type=text]").focus() //節點獲得焦點時,觸發 focus 事件 $("input[type=text]").blur() //節點失去焦點時,觸發 blur事件 $("button").mousedown()//當按下鼠標時觸發事件 $("button").mouseup() //節點上放松鼠標按鈕時觸發事件 $("p").mousemove() //當鼠標指針在指定的節點中移動時觸發事件 $("p").mouseover() //當鼠標指針位于節點上方時觸發事件 $("p").mouseout() 　//當鼠標指針從節點上移開時觸發事件 $(window).keydown() //當鍵盤或按鈕被按下時觸發事件 $(window).keypress() //當鍵盤或按鈕被按下時觸發事件,每輸入一個字符都觸發一次 $("input").keyup() //當按鈕被松開時觸發事件 $(window).scroll() //當用戶滾動時觸發事件 $(window).resize() //當調整瀏覽器窗口的大小時觸發事件 $("input[type='text']").change() //當節點的值發生改變時觸發事件 $("input").select() //當input 節點中的文本被選擇時觸發事件 $("form").submit() //當提交表單時觸發事件 $(window).unload() //用戶離開頁面時 ~~~ [](javascript:void(0); "復制代碼") ## 4.19、事件對象 [](javascript:void(0); "復制代碼") ~~~ $("p").click(function(event){ alert(event.type); //"click" }); (evnet object) 屬性方法： event.pageX 　 //事件發生時，鼠標距離網頁左上角的水平距離 event.pageY 　 //事件發生時，鼠標距離網頁左上角的垂直距離 event.type 　　//事件的類型 event.which 　 //按下了哪一個鍵 event.data 　　//在事件對象上綁定數據，然后傳入事件處理函數 event.target 　//事件針對的網頁節點 event.preventDefault() 　//阻止事件的默認行為(比如點擊鏈接，會自動打開新頁面) event.stopPropagation() //停止事件向上層節點冒泡 ~~~ [](javascript:void(0); "復制代碼") ## 4.20、動態事件綁定 ~~~ //當p中增加span時仍然有效 $("p").on("click",'span',function(){ alert( $(this).text() ); }); ~~~ ## 4.21、動畫效果 [](javascript:void(0); "復制代碼") ~~~ $("p").show() 　　　　//顯示隱藏的匹配節點 $("p").show("slow"); //參數表示速度,("slow","normal","fast"),也可為600毫秒 $("p").hide() 　　　　//隱藏顯示的節點 $("p").toggle(); 　　 //切換 顯示/隱藏 $("p").slideDown("600"); //用600毫秒時間將段落滑下 $("p").slideUp("600"); 　//用600毫秒時間將段落滑上 $("p").slideToggle("600"); //用600毫秒時間將段落滑上，滑下淡入淡出 $("p").fadeIn("600"); 　　 //用600毫秒時間將段落淡入 $("p").fadeOut("600"); 　　 //用600毫秒時間將段落淡出 $("p").fadeToggle("600"); 　//用600毫秒時間將段落淡入,淡出 $("p").fadeTo("slow", 0.6); //用600毫秒時間將段落的透明度調整到0.6 ~~~ [](javascript:void(0); "復制代碼") ## 4.22、工具方法 [](javascript:void(0); "復制代碼") ~~~ $("#form1").serialize() //序列表表格內容為字符串。 $("select, :radio").serializeArray(); //序列化表單元素為數組返回 JSON 數據結構數據 $.trim() 　　//去除字符串兩端的空格 $.each() 　　//遍歷一個數組或對象，for循環 $.inArray() //返回一個值在數組中的索引位置，不存在返回-1 $.grep() 　 //返回數組中符合某種標準的節點 $.extend({a:1,b:2},{b:3,c:4},{c:5:d:6}) //將多個對象，合并到第一個對象{a:1,b:3,c:5,d:6} $.makeArray() //將對象轉化為數組 $.type() //判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等 $.isArray() //判斷某個參數是否為數組 $.isEmptyObject() //判斷某個對象是否為空(不含有任何屬性) $.isFunction() //判斷某個參數是否為函數 $.isPlainObject() //判斷某個參數是否為用"{}"或"new Object"建立的對象 $.support() //判斷瀏覽器是否支持某個特性 ~~~ [](javascript:void(0); "復制代碼") ## 4.23、AJAX [](javascript:void(0); "復制代碼") ~~~ //保存數據到服務器，成功時顯示信息 $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); ~~~ [](javascript:void(0); "復制代碼") ~~~ //加載 feeds.html 文件內容。 $("#feeds").load("feeds.html"); ~~~ ~~~ //請求 test.php 網頁，傳送2個參數，忽略返回值。 $.get("test.php", { name: "John", time: "2pm" } ); ~~~ [](javascript:void(0); "復制代碼") ~~~ //從 Flickr JSONP API 載入 4 張最新的關于貓的圖片。 $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format =json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); }); ~~~ [](javascript:void(0); "復制代碼") [](javascript:void(0); "復制代碼") ~~~ //加載并執行 test.js ，成功后顯示信息 $.getScript("test.js", function(){ alert("Script loaded and executed."); }); //向頁面 test.php 發送數據，并輸出結果（HTML 或 XML，取決于所返回的內容）： $.post("test.php", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); }); //AJAX 請求完成時執行函數。 $("#msg").ajaxComplete(function(event,request, settings){ $(this).append("<li>請求完成.</li>"); }); //AJAX 請求失敗時顯示信息。 $("#msg").ajaxError(function(event,request, settings){ $(this).append("<li>出錯頁面:" + settings.url + "</li>"); }); //AJAX 請求發送前顯示信息。 $("#msg").ajaxSend(function(evt, request, settings){ $(this).append("<li>開始請求: " + settings.url + "</li>"); }); //AJAX 請求開始時顯示信息。 $("#loading").ajaxStart(function(){ $(this).show(); }); //AJAX 請求結束后隱藏信息。 $("#loading").ajaxStop(function(){ $(this).hide(); }); //當 AJAX 請求成功后顯示消息。 $("#msg").ajaxSuccess(function(evt, request, settings){ $(this).append("<li>請求成功!</li>"); }); //請求前過濾 $.ajaxPrefilter( function( options, originalOptions, jqXHR ) { // Modify options, control originalOptions, store jqXHR, etc }); //設置全局 AJAX 默認選項，設置 AJAX 請求默認地址為 "/xmlhttp/"，禁止觸發全局 AJAX 事件，用 POST 代替默認 GET 方法。其后的 AJAX 請求不再設置任何選項參數。 $.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }); $.ajax({ data: myData }); ~~~ [](javascript:void(0); "復制代碼") # 五、AJAX詳解 AJAX全稱為“Asynchronous JavaScript And XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的開發技術。其使用基于Web2.0標準的XHTML+CSS表示方式，使用DOM（Document Object Model）進行動態顯示及交互，使用XML和XSLT進行數據交換及其相關操作，使用XMLHttpRequest進行異步數據查詢、檢索，使用JavaScript將所有的東西綁定在一起。  AJAX應用可以僅向服務器發送并取回必需的數據，它使用SOAP或其他一些基于XML的Web Service接口，并在客戶端采用JavaScript處理來自服務器的響應。因為在服務器和瀏覽器之間交換的數據大量減少，結果我們就能看到響應速度更快的應用。同時很多的處理工作可以在發出請求的客戶端機器上完成，Web服務的處理時間也就減少了。  jQuery為AJAX帶來方便，語法格式如下： jQuery.ajax(url,\[settings\]) 通過 HTTP 請求加載遠程數據。 jQuery 底層 AJAX 實現。簡單易用的高層實現見.get,.post 等。$.ajax() 返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得更多的靈活性。 最簡單的情況下，$.ajax()可以不帶任何參數直接使用。 **注意**，所有的選項都可以通過$.ajaxSetup()函數來全局設置。 ## 5.1、回調函數 如果要處理$.ajax()得到的數據，則需要使用回調函數。beforeSend、error、dataFilter、success、complete。 * beforeSend 在發送請求之前調用，并且傳入一個XMLHttpRequest作為參數。 * error 在請求出錯時調用。傳入XMLHttpRequest對象，描述錯誤類型的字符串以及一個異常對象（如果有的話） * dataFilter 在請求成功之后調用。傳入返回的數據以及"dataType"參數的值。并且必須返回新的數據（可能是處理過的）傳遞給success回調函數。 * success 當請求之后調用。傳入返回后的數據，以及包含成功代碼的字符串。 * complete 當請求完成之后調用這個函數，無論成功或失敗。傳入XMLHttpRequest對象，以及一個包含成功或錯誤代碼的字符串。 ## 5.2、數據類型 $.ajax()函數依賴服務器提供的信息來處理返回的數據。如果服務器報告說返回的數據是XML，那么返回的結果就可以用普通的XML方法或者jQuery的選擇器來遍歷。如果見得到其他類型，比如HTML，則數據就以文本形式來對待。 通過dataType選項還可以指定其他不同數據處理方式。除了單純的XML，還可以指定 html、json、jsonp、script或者text。 其中，text和xml類型返回的數據不會經過處理。數據僅僅簡單的將XMLHttpRequest的responseText或responseHTML屬性傳遞給success回調函數， '''注意'''，我們必須確保網頁服務器報告的MIME類型與我們選擇的dataType所匹配。比如說，XML的話，服務器端就必須聲明 text/xml 或者 application/xml 來獲得一致的結果。 如果指定為html類型，任何內嵌的JavaScript都會在HTML作為一個字符串返回之前執行。類似的，指定script類型的話，也會先執行服務器端生成JavaScript，然后再把腳本作為一個文本數據返回。 如果指定為json類型，則會把獲取到的數據作為一個JavaScript對象來解析，并且把構建好的對象作為結果返回。為了實現這個目的，他首先嘗試使用JSON.parse()。如果瀏覽器不支持，則使用一個函數來構建。JSON數據是一種能很方便通過JavaScript解析的結構化數據。如果獲取的數據文件存放在遠程服務器上（域名不同，也就是跨域獲取數據），則需要使用jsonp類型。使用這種類型的話，會創建一個查詢字符串參數 callback=? ，這個參數會加在請求的URL后面。服務器端應當在JSON數據前加上回調函數名，以便完成一個有效的JSONP請求。如果要指定回調函數的參數名來取代默認的callback，可以通過設置$.ajax()的jsonp參數。 **注意**，JSONP是JSON格式的擴展。他要求一些服務器端的代碼來檢測并處理查詢字符串參數。 如果指定了script或者jsonp類型，那么當從服務器接收到數據時，實際上是用了&lt;script&gt;標簽而不是XMLHttpRequest對象。這種情況下，$.ajax()不再返回一個XMLHttpRequest對象，并且也不會傳遞事件處理函數，比如beforeSend。 ## 5.3、發送數據到服務器 默認情況下，Ajax請求使用GET方法。如果要使用POST方法，可以設定type參數值。這個選項也會影響data選項中的內容如何發送到服務器。 data選項既可以包含一個查詢字符串，比如 key1=value1&amp;key2=value2 ，也可以是一個映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，則數據再發送器會被轉換成查詢字符串。這個處理過程也可以通過設置processData選項為false來回避。如果我們希望發送一個XML對象給服務器時，這種處理可能并不合適。并且在這種情況下，我們也應當改變contentType選項的值，用其他合適的MIME類型來取代默認的 application/x-www-form-urlencoded 。 ## 5.4、高級選項 global選項用于阻止響應注冊的回調函數，比如.ajaxSend，或者ajaxError，以及類似的方法。這在有些時候很有用，比如發送的請求非常頻繁且簡短的時候，就可以在ajaxSend里禁用這個。更多關于這些方法的詳細信息，請參閱下面的內容。 如果服務器需要HTTP認證，可以使用用戶名和密碼可以通過username和password選項來設置。 Ajax請求是限時的，所以錯誤警告被捕獲并處理后，可以用來提升用戶體驗。請求超時這個參數通常就保留其默認值，要不就通過jQuery.ajaxSetup來全局設定，很少為特定的請求重新設置timeout選項。 默認情況下，請求總會被發出去，但瀏覽器有可能從他的緩存中調取數據。要禁止使用緩存的結果，可以設置cache參數為false。如果希望判斷數據自從上次請求后沒有更改過就報告出錯的話，可以設置ifModified為true。 scriptCharset允許給&lt;script&gt;標簽的請求設定一個特定的字符集，用于script或者jsonp類似的數據。當腳本和頁面字符集不同時，這特別好用。 Ajax的第一個字母是asynchronous的開頭字母，這意味著所有的操作都是并行的，完成的順序沒有前后關系。$.ajax()的async參數總是設置成true，這標志著在請求開始后，其他代碼依然能夠執行。強烈不建議把這個選項設置成false，這意味著所有的請求都不再是異步的了，這也會導致瀏覽器被鎖死。 $.ajax函數返回他創建的XMLHttpRequest對象。通常jQuery只在內部處理并創建這個對象，但用戶也可以通過xhr選項來傳遞一個自己創建的xhr對象。返回的對象通常已經被丟棄了，但依然提供一個底層接口來觀察和操控請求。比如說，調用對象上的.abort()可以在請求完成前掛起請求。 ? ## 5.5、參數大全 ### **$.ajax(url,\[settings\])** url:一個用來包含發送請求的URL字符串。 settings:AJAX 請求設置。所有選項都是可選的。 settings是ajax參數對象，如: [](javascript:void(0); "復制代碼") ~~~ //ajax一般形式，路徑也可以使用setting中的url屬性 $.ajax(""some.php"", { type: "POST", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); ~~~ [](javascript:void(0); "復制代碼") #### **settings所有可以選擇的參數如下：** #### accepts ??Map 默認： 取決于數據類型。 內容類型發送請求頭，告訴服務器什么樣的響應會接受返回。如果accepts設置需要修改，推薦在$.ajaxSetup()方法中做一次。 #### async ??Boolean (默認: true) 默認設置下，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行。 #### beforeSend(XHR) ??Function 發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。XMLHttpRequest 對象是唯一的參數。這是一個 Ajax 事件。如果返回false可以取消本次ajax請求。 ~~~ function (XMLHttpRequest) { this; // 調用本次AJAX請求時傳遞的options參數 } ~~~ #### cache ??Boolean (默認: true,dataType為script和jsonp時默認為false) jQuery 1.2 新功能，設置為 false 將不緩存此頁面。 #### complete(XHR, TS) ??Function 請求完成后回調函數 (請求成功或失敗之后均調用)。參數： XMLHttpRequest 對象和一個描述成功請求類型的字符串。 Ajax 事件。 ~~~ function (XMLHttpRequest, textStatus) { this; // 調用本次AJAX請求時傳遞的options參數 } ~~~ #### contents ??Map 一個以"{字符串:正則表達式}"配對的對象，用來確定jQuery將如何解析響應，給定其內容類型。 #### contentType ??String (默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型。默認值適合大多數情況。如果你明確地傳遞了一個content-type給 $.ajax() 那么他必定會發送給服務器（即使沒有數據要發送） #### context?Object 這個對象用于設置Ajax相關回調函數的上下文。也就是說，讓回調函數內this指向這個對象（如果不設定這個參數，那么this就指向調用本次AJAX請求時傳遞的options參數）。比如指定一個DOM元素作為context參數，這樣就設置了success回調函數的上下文為這個DOM元素。就像這樣： ~~~ $.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); }});? ~~~ #### converters?map 默認： {"\* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML} 一個數據類型對數據類型轉換器的對象。每個轉換器的值是一個函數，返回響應的轉化值 #### crossDomain?map 默認： 同域請求為false 跨域請求為true如果你想強制跨域請求（如JSONP形式）同一域，設置crossDomain為true。這使得例如，服務器端重定向到另一個域 #### data?Object,String 發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組，jQuery 將自動為不同值對應同一個名稱。如 {foo:\["bar1", "bar2"\]} 轉換為 "&foo=bar1&foo=bar2"。 #### data Filter?Function 給Ajax返回的原始數據的進行預處理的函數。提供data和type兩個參數：data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。 ~~~ function (data, type) { // 對Ajax返回的原始數據進行預處理 return data // 返回處理后的數據 } ~~~ #### dataType ??String 預期服務器返回的數據類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，比如XML MIME類型就被識別為XML。在1.4中，JSON就會生成一個JavaScript對象，而script則會執行這個腳本。隨后服務器端返回的數據會根據這個值解析后，傳遞給回調函數。可用值: "xml": 返回 XML 文檔，可用 jQuery 處理。 "html": 返回純文本 HTML 信息；包含的script標簽會在插入dom時執行。 "script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了"cache"參數。'''注意：'''在遠程請求時(不在同一個域下)，所有POST請求都將轉為GET請求。(因為將使用DOM的script標簽來加載) "json": 返回 JSON 數據 。 "jsonp":[JSONP](http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/ "http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/")格式。使用[JSONP](http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/ "http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/")形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。 "text": 返回純文本字符串 #### error ??Function (默認: 自動判斷 (xml 或 html)) 請求失敗時調用此函數。有以下三個參數：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象。如果發生了錯誤，錯誤信息（第二個參數）除了得到null之外，還可能是"timeout", "error", "notmodified" 和 "parsererror"。[Ajax 事件](http://docs.jquery.com/Ajax_Events "Ajax Events")。 [](javascript:void(0); "復制代碼") ~~~ function (XMLHttpRequest, textStatus, errorThrown) { // 通常 textStatus 和 errorThrown 之中 // 只有一個會包含信息 this; // 調用本次AJAX請求時傳遞的options參數 } ~~~ [](javascript:void(0); "復制代碼") #### global ??Boolean (默認: true) 是否觸發全局 AJAX 事件。設置為 false 將不會觸發全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的[Ajax 事件](http://docs.jquery.com/Ajax_Events "Ajax Events")。 #### headers ??map ~~~ Default: {} ~~~ 一個額外的"{鍵:值}"對映射到請求一起發送。此設置被設置之前beforeSend函數被調用;因此，消息頭中的值設置可以在覆蓋beforeSend函數范圍內的任何設置。 #### ifModified ??Boolean (默認: false) 僅在服務器數據改變時獲取新數據。使用 HTTP 包 Last-Modified 頭信息判斷。在jQuery 1.4中，他也會檢查服務器指定的'etag'來確定數據沒有被修改過。 #### isLocal ??map 默認: 取決于當前的位置協議 允許當前環境被認定為“本地”，（如文件系統），即使jQuery默認情況下不會承認它。以下協議目前公認為本地：file, \*-extension, and widget。如果isLocal設置需要修改，建議在$.ajaxSetup()方法中這樣做一次。 #### jsonp ??String 在一個jsonp請求中重寫回調函數的名字。這個值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分，比如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。 #### jsonpCallback ??String 為jsonp請求指定一個回調函數名。這個值將用來取代jQuery自動生成的隨機函數名。這主要用來讓jQuery生成度獨特的函數名，這樣管理請求更容易，也能方便地提供回調函數和錯誤處理。你也可以在想讓瀏覽器緩存GET請求的時候，指定這個回調函數名。 #### mimeType ??String 一個mime類型用來覆蓋XHR的 MIME類型。 #### password ??String 用于響應HTTP訪問認證請求的密碼 #### processData ??Boolean (默認: true) 默認情況下，通過data選項傳遞進來的數據，如果是一個對象(技術上講只要不是字符串)，都會處理轉化成一個查詢字符串，以配合默認內容類型 "application/x-www-form-urlencoded"。如果要發送 DOM 樹信息或其它不希望轉換的信息，請設置為 false。 #### scriptCharset ??String 只有當請求時dataType為"jsonp"或"script"，并且type是"GET"才會用于強制修改charset。通常只在本地和遠程的內容編碼不同時使用。 #### statusCode ??map 默認: {} 一組數值的HTTP代碼和函數對象，當響應時調用了相應的代碼。例如，如果響應狀態是404，將觸發以下警報： [](javascript:void(0); "復制代碼") ~~~ $.ajax({ statusCode: {404: function() { alert('page not found'); } });? ~~~ [](javascript:void(0); "復制代碼") #### success(data, textStatus, jqXHR) ??Function,Array 請求成功后的回調函數。參數：由服務器返回，并根據dataType參數進行處理后的數據；描述狀態的字符串。還有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 對象 。在jQuery 1.5， 成功設置可以接受一個函數數組。每個函數將被依次調用。 ~~~ function (data, textStatus) { // data 可能是 xmlDoc, jsonObj, html, text, 等等... this; // 調用本次AJAX請求時傳遞的options參數 } ~~~ #### traditional ??Boolean 如果你想要用傳統的方式來序列化數據，那么就設置為true。請參考工具分類下面的jQuery.param 方法。 #### timeout ??Number 設置請求超時時間（毫秒）。此設置將覆蓋全局設置。 #### type ??String (默認: "GET") 請求方式 ("POST" 或 "GET")， 默認為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。 #### url ??String (默認: 當前頁地址) 發送請求的地址。 #### username ??String 用于響應HTTP訪問認證請求的用戶名 #### xhr ??Function 需要返回一個XMLHttpRequest 對象。默認在IE下是ActiveXObject 而其他情況下是XMLHttpRequest 。用于重寫或者提供一個增強的XMLHttpRequest 對象。這個參數在jQuery 1.3以前不可用。 #### xhrFields ??map 一對“文件名-文件值”在本機設置XHR對象。例如，如果需要的話，你可以用它來設置withCredentials為true的跨域請求。 ### 5.6、AJAX示例 ### 描述: 加載并執行一個 JS 文件。 ##### jQuery 代碼: [](javascript:void(0); "復制代碼") ~~~ $.ajax({ type: "GET", url: "test.js", dataType: "script" }); ~~~ [](javascript:void(0); "復制代碼") ### 描述: 保存數據到服務器，成功時顯示信息。 ##### jQuery 代碼: [](javascript:void(0); "復制代碼") ~~~ $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); ~~~ [](javascript:void(0); "復制代碼") ### 描述: 裝入一個 HTML 網頁最新版本。 ##### jQuery 代碼: [](javascript:void(0); "復制代碼") ~~~ $.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } }); ~~~ [](javascript:void(0); "復制代碼") ### 描述: 同步加載數據。發送請求時鎖住瀏覽器。需要鎖定用戶交互操作時使用同步方式。 ##### jQuery 代碼: ~~~ var html = $.ajax({ url: "some.php", async: false }).responseText; ~~~ ### 描述: 發送 XML 數據至服務器。設置 processData 選項為 false，防止自動轉換數據格式。 ##### jQuery 代碼: [](javascript:void(0); "復制代碼") ~~~ var xmlDocument = [create xml document]; $.ajax({ url: "page.php", processData: false, data: xmlDocument, success: handleResponse }); ~~~ [](javascript:void(0); "復制代碼") # 六、視頻與資料下載 本來想一點一點寫完的，不過后面錄了比較全的視頻，大家可以邊看視頻邊參考示例練習： 下載較新版的jQuery:下載[jQuery1.11.3幫助與庫](http://files.cnblogs.com/files/best/jQuery1.11.3%E5%BA%93%E4%B8%8E%E5%B8%AE%E5%8A%A9.rar) 下載最新版的jQuery:[下載jQuery1.12.4庫](https://www.cnblogs.com/best/p/%E4%B8%8B%E8%BD%BDjQuery1.12.4%E5%BA%93) 示例下載：[jQuery視頻配套示例](http://download.csdn.net/detail/zhangguo5/9783738) 視頻下載：[https://pan.baidu.com/s/1hsJtb0K](https://pan.baidu.com/s/1hsJtb0K)密碼: m7bt IDE HBuilder下載地址：[http://www.dcloud.io/](http://www.dcloud.io/) [](https://pan.baidu.com/s/1hsJtb0K) ?B站直接觀看：[http://www.bilibili.com/video/av9205766/?from=search&seid=5595908124286890857](http://www.bilibili.com/video/av9205766/?from=search&seid=5595908124286890857) [](http://www.bilibili.com/video/av9205766/?from=search&seid=5595908124286890857)