jQuery學習總結（一）——jQuery基礎與學習資源

時間 2019-11-17

原文原文鏈接

前一段時間錄了一套關於jQuery的視頻分享給你們，能夠在下載區下載到，原本想配合文字一塊兒的，後面發現視頻+幫助文檔也是很是好的學習方法。javascript

1、jQuery簡介與第一個jQuery程序

1.一、jQuery簡介

jQuery是繼Prototype以後又一個優秀的JavaScript庫，是一個由John Resig建立於2006年1月的開源項目。如今的jQuery團隊主要包括核心庫、UI和插件等開發人員以及推廣和網站設計維護人員。php

jQuery憑藉簡介的語法和跨瀏覽器的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操做DOM、處理事件、執行動畫和開發AJAX的操做。其獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。總之，不管是網頁設計師、後臺開發者、仍是項目管理者，也不管是JavaScript初學者仍是JavaScript高手，都有足夠多的理由去學習jQuery。css

1.二、jQuery特色

jQuery是免費、開源的，使用MIT許可協議。jQuery的語法設計可使開發更加便捷，例如操做文檔對象、選擇DOM元素、製做動畫效果、事件處理、使用Ajax以及其餘功能。除此之外，jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者能夠很輕鬆的開發出功能強大的靜態或動態網頁。jQuery的特色：html

功能強大，強調的理念是寫的少，作得多（write less，do more）
封裝了大量經常使用的DOM操做
靈活的事件處理機制
擁有完善的AJAX功能
擴展性強、插件豐富
易學易用
多瀏覽器支持（支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+，在2.0.0中取消了對Internet Explorer6,7,8的支持）、兼容性好

1.三、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。java

說明：無論是jQuery1.x仍是2.x使用的API都是同樣的，只是內部實現的方式有區別，2.x不支持IE6/7/8而1.x則支持，2.x更小，效率更高，但功能是同樣。jquery

1.四、得到jQuery庫

jQuery不須要安裝，把下載的jQuery庫放到網站的一個公共位置，想要在某個頁面上使用jQuery時，只須要在相關的HTML文檔中引入該庫文件便可。得到jQuery相關資源的網站地址以下：git

官網： http://jquery.com/ 程序員

源碼： https://github.com/jquery/jquery

文檔： http://api.jquery.com/

中文幫助： http://www.jquery123.com/

CDN： http://cdn.code.baidu.com/

jQuery1.12.1在線中文版： http://hemin.cn/jq/

下載較新版的jQuery:下載jQuery1.11.3幫助與庫

下載最新版的jQuery:下載jQuery1.12.4庫

學習jQuery的權威資料就是幫助文檔：

1.4.一、開發工具

http://www.dcloud.io/

1.五、第一個jQuery程序

jQuery的開發不依賴特定的開發工具，使用經常使用Web開發工具都行，如：Eclipse、Visual Studio、Dreamweaver、intelliJ IDEA、HBuilder、webstorm、sublime、notepad++等。

<!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>

這裏使用HBuilder，這是一個國人開發的基於Eclipse的免費IDE，感受還不錯。

HBuilder下載地址： http://www.dcloud.io/（有Mac版與Windows版本）

運行結果：

2、jQuery對象和DOM對象

2.一、DOM對象

使用JavaScript中的DOM API操做得到的元素對象叫DOM對象。文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標誌語言的標準編程接口。在網頁上，組織頁面（或文檔）的對象被組織在一個樹形結構中，用來表示文檔中對象的標準模型就稱爲DOM。

得到DOM對象的示例：

<!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>

示例中的foo是一個DOM對象，items是一DOM數組，innerHTML是DOM元素的一個屬性。

運行結果：

調試：

在Chrome瀏覽器按Ctrl+Shift+I啓動開發者工具，調試上面的代碼，添加監視foo對象，在右側展開監視的foo對象，能夠看到該DOM對象的全部屬性、方法與事件信息。

2.二、jQuery對象

jQuery對象就是經過jQuery包裝DOM對象後產生的對象叫jQuery對象。 jQuery對象是對DOM元素封裝事後的數組，也稱爲包裝集。不管選擇器匹配了多個或者零個元素，jQuery對象都再也不是null。意味着你只可以用jQuery對象的.length屬性來判斷選擇器是否選中了元素。

得到jQuery對象的示例：

<!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>

代碼中的$foo是一個jQuery對象,$items也是一個jQuery對象。

運行結果：

調試：

從上面的調試信息中能夠看到$foo是一個長度爲1的集合，集合中下標爲0的元素就是1個DOM元素（0：p#foo），上DOM示例中的foo對象徹底同樣；能夠看出$foo是對DOM元素foo的封裝，使用功能更增強大，從隱式原型__proto__中的內容就能夠看到，中間提供了大量的方法，事件與屬性，簡化操做。

2.三、DOM轉換成jQuery對象

要使用jQuery中的方法與屬性就須要把一個JavaScript中的DOM對象轉換成jQuery對象。

轉換方法一：

使用工廠方法jQuery(DOM對象)，如jQuery(document.getElementById("foo"))，$是jQuery方法的簡寫形式，也能夠寫成$(document.getElementById("foo"))

轉換方法二：

簡化形式jQuery(選擇器)，如jQuery("#foo")，也能夠寫成$("#foo")

示例以下：

<!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>

運行結果：

2.四、jQuery對象轉換成DOM對象

DOM對象是jQuery對象的組成部分，jQuery對象是對DOM對象的包裝升級，每個jQuery對象都是一個集合，是一個包裝集，每一個包裝集中能夠包含0到N個DOM元素。將jQuery對象轉換成DOM對象方法以下

方法一：

jQuery對象[下標]

方法二：

jQuery對象.get(下標)

示例：

<!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>

運行結果：

2.五、DOM對象與jQuery對象區別

DOM對象只能調用DOM方法、屬性與事件；
jQuery對象只能調用jQuery方法、屬性與事件；
能夠將DOM轉換成jQuery對象，也能夠將jQuery轉換成DOM對象；
$只是jQuery的別名形式；
每個jQuery對象都是一個DOM對象的集合

3、經常使用選擇器

經過jQuery中的選擇器實際上取得的是HTML中的DOM元素。在jQuery中使用CSS匹配(CSS like)來進行元素指定，比其餘JavaScript庫都簡單，這也正是jQuery在網頁設計人員中大受歡迎的理由了。

在其核心，jQuery重點放在從HTML頁面裏獲取元素並對其進行操做。若是你熟悉CSS，就會很清楚選擇器的威力，經過元素的特性或元素在文檔中的位置去描述元素組。有了jQuery，就可以利用現有知識去發揮選擇器的威力，在很大程度上簡化JavaScript代碼。CSS中可使用的選擇器基本均可以用到jQuery中，反之否則。

3.1. 選擇器和包裝集

爲了使設計和內容分離而把CSS引入Web技術的時候，須要以某種方式從外部樣式表中引用頁面元素組。開發出來的方法就是經過使用選擇器—基於元素的屬性或元素在HTML文檔中的位置，簡明地表現元素。

例如，選擇器：p a

引用全部嵌套於<p>元素以內的超連接(<a>元素)組。jQuery利用一樣的選擇器，不只支持目前CSS中使用的常見選擇器，還支持還沒有被大多數瀏覽器徹底實現的更強大的選擇器。收集一組元素，可使用以下簡單的語法：

$(selector) 或者 jQuery(selector)

也許剛開始你會以爲$()符號有點奇怪，但大部分jQuery用戶很快就喜歡上它的簡潔。例如，爲了獲取嵌套在<p>元素內的一組超連接，咱們使用以下語句：

$("p a")

$( )函數返回特別的JavaScript對象，它包含着與選擇器相匹配的DOM元素的數組。該對象擁有大量預約義的有用方法，可以做用於該組元素。

用編程的話來講，這種構造稱爲包裝器(wrapper)，由於它用擴展功能來對匹配的元素進行包裝。咱們使用術語jQuery包裝器或者包裝集(wrapped set)，來指可以在其上用jQuery定義的方法去操做的、匹配元素的集合。

假定咱們想選擇帶有CSS類notLongForThisWorld的全部<div>元素。jQuery語句以下所示：

$("notLongForThisWorld");

3.2. 基本選擇器

基本選擇器是jQuery中最經常使用的選擇器，也是最簡單的選擇器，它經過元素id、class和標籤名等來查找DOM元素。在網頁中，每一個id名稱只能使用一次，class容許重複使用。

選擇器	描述	返回	示例
#id	根據給定的id匹配一個元素	單個元素	$("#test")選取id爲test的元素
.class	根據給定的類名匹配元素	集合元素	$(".test")選取全部class爲test的元素
element	根據給定的元素名稱匹配元素	集合元素	$("p")選取全部的<p>元素
selector1, selector2, selector3...	將每個選擇器匹配到的元素合併後一塊兒返回	集合元素	$("div,span,p.cls")選取全部<div>，<span>和擁有class爲cls的<p>標籤的一組元素
*	匹配全部元素	集合元素	$("*")選取全部的元素

可使用這些基本選擇器來完成絕大多數的工做，下面咱們對這些選擇器一一進行講解。

3.2.一、經過id獲取元素

在CSS中常用id來控制元素，在jQuery中獲取元素時，也使用一樣方法。與CSS同樣，在id前面加上#號。

語法：$("#id")

能夠控制指定id的HTML元素，在HTML中有id不可重複的規定，所以能夠控制文檔內部唯一的元素。若是定義了多個同名的id元素，則只有最初出現的同名id有效。在JavaScript中使用document對象的getElemnetById(id)方法來獲取元素，在jQuery中則更爲簡化。同時經過jQuery得到id對應的元素後能夠調用jQuery中的相應方法對該元素進行操做，具體代碼以下所示：

<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>

3.2.二、經過類名獲取元素

在網頁當中，使用class屬性引用樣式表中的類樣式，由於類樣式的可重用，因此多個元素能夠引用同一個樣式。在jQuery中，能夠獲取同一類名的多個HTML元素，編寫方式同CSS，即在類名的前面加上點號。

語法：$(".className")

本例經過類名來獲取元素，由於使用同一個類樣式的元素可能有多個，因此經過類名來獲取元素返回的將是一個數組對象，即jQuery中的包裝集，而後對此包裝集中的元素進行相關操做。示例代碼以下所示：

  <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>

3.2.三、經過標籤名獲取元素

在CSS中咱們一般使用標籤名來爲這一類標籤訂義樣式，在jQuery中也能夠用一樣方法來獲取標籤元素。

若是使用普通JavaScript，則必須用document對象的getElementsByTagName(tagName)方法來進行元素的抓取。而jQuery方法與CSS相同，指定須要操做的標籤名便可操控全部的標籤。

語法：$("tagName")

示例代碼以下所示：

  <div>DIV1</div>
  <div>DIV2</div>
  <span>SPAN</span>
  <script>
     $("div").css("border","9px solid red");
  </script>

4、350行jQuery經常使用腳本

4.一、經常使用選擇器

$('#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>標籤的一組元素

4.二、基本篩選器

$('span:first')    //第一個節點
$('span:last')     //最後一個節點

$("td:even")     //索引爲偶數的節點，從 0 開始
$("td:odd")      //索引爲奇數的節點，從 0 開始
 
$("td:eq(1)")    //給定索引值的節點
$("td:gt(0)")    //大於給定索引值的節點
$("td:lt(2)")    //小於給定索引值的節點

$(":focus")      //當前獲取焦點的節點
$(":animated")   //正在執行動畫效果的節點

4.三、內容選擇器

$("div:contains('hello')")    //包含hello文本的節點
$("td:empty")    //不包含子節點或者文本的空節點
$("div:has(p)")  //含有選擇器所匹配的節點
$("td:parent")   //含有子節點或者文本的節點

4.四、表單選擇器

$("input:checked") //全部選中的節點
$("select option:selected") //select中全部選中的option節點

$(":input") //匹配全部 input, textarea, select 和 button 節點
$(":text") //全部的單行文本框
$(":password") //全部密碼框
$(":radio") //全部單選按鈕
$(":checkbox") //全部複選框
$(":submit") //全部提交按鈕
$(":reset") //全部重置按鈕
$(":button") //全部button按鈕
$(":file") //全部文件域

4.五、篩選與查找

$("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() //全部的同輩節點,不包括本身

4.六、屬性操做

$("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屬性

4.七、樣式操做

$("p").addClass("selected"); 　　//爲p節點加上 'selected' 類
$("p").removeClass("selected"); //從p節點中刪除 'selected' 類
$("p").toggleClass("selected"); //若是存在就刪除,不然就添加HTML代碼/文本/值

4.八、內容操做

$('p').html(); 　　　　　　　　　　 //返回p節點的html內容
$("p").html("Hello <b>hello</b>!"); //設置p節點的html內容
$('p').text(); 　　　　　　　　　　 //返回p節點的文本內容
$("p").text("hello"); 　　　　　　　//設置p節點的文本內容
$("input").val(); 　　　　　　　　 //獲取文本框中的值
$("input").val("hello"); 　　　　 //設置文本框中的內容

4.九、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.十、定位與偏移

$('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

4.十一、尺寸

$("p").height(); //獲取p節點的高度
$("p").width(); //獲取p節點的寬度

$("p:first").innerHeight() //獲取第一個匹配節點內部區域高度(包括補白、不包括邊框)
$("p:first").innerWidth() //獲取第一個匹配節點內部區域寬度(包括補白、不包括邊框)

$("p:first").outerHeight() //匹配節點外部高度(默認包括補白和邊框)
$("p:first").outerWidth() //匹配節點外部寬度(默認包括補白和邊框)
$("p:first").outerHeight(true) //爲true時包括邊距

4.十二、DOM內部插入

$("p").append("<b>hello</b>"); //每一個p節點內後面追加內容
$("p").appendTo("div"); 　　　 //p節點追加到div內後
$("p").prepend("<b>Hello</b>"); //每一個p節點內前面追加內容
$("p").prependTo("div"); 　 //p節點追加到div內前

4.1三、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.1四、DOM替換

$("p").replaceWith("<b>Paragraph. </b>"); //將全部匹配的節點替換成指定的HTML或DOM節點
$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的節點替換掉全部 selector匹配到的節點

4.1五、DOM刪除

$("p").empty(); //刪除匹配的節點集合中全部的子節點，不包括自己
$("p").remove(); //刪除全部匹配的節點,包括自己
$("p").detach(); //刪除全部匹配的節點(和remove()不一樣的是:全部綁定的事件、附加的數據會保留下來)

4.1六、DOM複製

$("p").clone() 　　//克隆節點並選中克隆的副本
$("p").clone(true) //布爾值指事件處理函數是否會被複制

4.1七、DOM加載完成事件

$(document).ready(function(){
    您的代碼...
});

//縮寫
$(function($) {
   您的代碼...
});

4.1八、綁定事件

//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() //用戶離開頁面時

4.1九、事件對象

$("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() //中止事件向上層節點冒泡

4.20、動態事件綁定

//當p中增長span時仍然有效
$("p").on("click",'span',function(){
     alert( $(this).text() );
});

4.2一、動畫效果

$("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

4.2二、工具方法

$("#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() //判斷瀏覽器是否支持某個特性

4.2三、AJAX

//保存數據到服務器，成功時顯示信息
$.ajax({
     type: "POST",
     url: "some.php",
     data: "name=John&location=Boston",
     success: function(msg){
          alert( "Data Saved: " + msg );
     }
});

//加載 feeds.html 文件內容。
$("#feeds").load("feeds.html");

//請求 test.php 網頁，傳送2個參數，忽略返回值。
$.get("test.php", { name: "John", time: "2pm" } );

//從 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;
   });
});

//加載並執行 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 });

5、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.一、回調函數

若是要處理$.ajax()獲得的數據，則須要使用回調函數。beforeSend、error、dataFilter、success、complete。

beforeSend 在發送請求以前調用，而且傳入一個XMLHttpRequest做爲參數。
error 在請求出錯時調用。傳入XMLHttpRequest對象，描述錯誤類型的字符串以及一個異常對象（若是有的話）
dataFilter 在請求成功以後調用。傳入返回的數據以及"dataType"參數的值。而且必須返回新的數據（多是處理過的）傳遞給success回調函數。
success 當請求以後調用。傳入返回後的數據，以及包含成功代碼的字符串。
complete 當請求完成以後調用這個函數，不管成功或失敗。傳入XMLHttpRequest對象，以及一個包含成功或錯誤代碼的字符串。

5.二、數據類型

$.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類型，那麼當從服務器接收到數據時，其實是用了<script>標籤而不是XMLHttpRequest對象。這種狀況下，$.ajax()再也不返回一個XMLHttpRequest對象，而且也不會傳遞事件處理函數，好比beforeSend。

5.三、發送數據到服務器

默認狀況下，Ajax請求使用GET方法。若是要使用POST方法，能夠設定type參數值。這個選項也會影響data選項中的內容如何發送到服務器。

data選項既能夠包含一個查詢字符串，好比 key1=value1&key2=value2 ，也能夠是一個映射，好比 {key1: 'value1', key2: 'value2'} 。若是使用了後者的形式，則數據再發送器會被轉換成查詢字符串。這個處理過程也能夠經過設置processData選項爲false來回避。若是咱們但願發送一個XML對象給服務器時，這種處理可能並不合適。而且在這種狀況下，咱們也應當改變contentType選項的值，用其餘合適的MIME類型來取代默認的 application/x-www-form-urlencoded 。

5.四、高級選項

global選項用於阻止響應註冊的回調函數，好比.ajaxSend，或者ajaxError，以及相似的方法。這在有些時候頗有用，好比發送的請求很是頻繁且簡短的時候，就能夠在ajaxSend裏禁用這個。更多關於這些方法的詳細信息，請參閱下面的內容。

若是服務器須要HTTP認證，可使用用戶名和密碼能夠經過username和password選項來設置。

Ajax請求是限時的，因此錯誤警告被捕獲並處理後，能夠用來提高用戶體驗。請求超時這個參數一般就保留其默認值，要不就經過jQuery.ajaxSetup來全局設定，不多爲特定的請求從新設置timeout選項。

默認狀況下，請求總會被髮出去，但瀏覽器有可能從他的緩存中調取數據。要禁止使用緩存的結果，能夠設置cache參數爲false。若是但願判斷數據自從上次請求後沒有更改過就報告出錯的話，能夠設置ifModified爲true。

scriptCharset容許給<script>標籤的請求設定一個特定的字符集，用於script或者jsonp相似的數據。當腳本和頁面字符集不一樣時，這特別好用。

Ajax的第一個字母是asynchronous的開頭字母，這意味着全部的操做都是並行的，完成的順序沒有先後關係。$.ajax()的async參數老是設置成true，這標誌着在請求開始後，其餘代碼依然可以執行。強烈不建議把這個選項設置成false，這意味着全部的請求都再也不是異步的了，這也會致使瀏覽器被鎖死。

$.ajax函數返回他建立的XMLHttpRequest對象。一般jQuery只在內部處理並建立這個對象，但用戶也能夠經過xhr選項來傳遞一個本身建立的xhr對象。返回的對象一般已經被丟棄了，但依然提供一個底層接口來觀察和操控請求。好比說，調用對象上的.abort()能夠在請求完成前掛起請求。

5.五、參數大全

$.ajax(url,[settings])

url:一個用來包含發送請求的URL字符串。

settings:AJAX 請求設置。全部選項都是可選的。

settings是ajax參數對象，如:

//ajax通常形式，路徑也可使用setting中的url屬性
$.ajax(""some.php"",
  {
   type: "POST",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

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 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。

"text": 返回純文本字符串

error Function

(默認: 自動判斷 (xml 或 html)) 請求失敗時調用此函數。有如下三個參數：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象。若是發生了錯誤，錯誤信息（第二個參數）除了獲得null以外，還多是"timeout", "error", "notmodified" 和 "parsererror"。 Ajax 事件。

function (XMLHttpRequest, textStatus, errorThrown) {
    // 一般 textStatus 和 errorThrown 之中
    // 只有一個會包含信息
    this; // 調用本次AJAX請求時傳遞的options參數
}

global Boolean

(默認: true) 是否觸發全局 AJAX 事件。設置爲 false 將不會觸發全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用於控制不一樣的 Ajax 事件。

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，將觸發如下警報：

$.ajax({
  statusCode: {404: function() {
    alert('page not found');
  }
});

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.六、AJAX示例

描述:

加載並執行一個 JS 文件。

jQuery 代碼:

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

描述:

保存數據到服務器，成功時顯示信息。

jQuery 代碼:

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

描述:

裝入一個 HTML 網頁最新版本。

jQuery 代碼:

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

描述:

同步加載數據。發送請求時鎖住瀏覽器。須要鎖定用戶交互操做時使用同步方式。

jQuery 代碼:

 var html = $.ajax({
  url: "some.php",
  async: false
 }).responseText;

描述:

發送 XML 數據至服務器。設置 processData 選項爲 false，防止自動轉換數據格式。

jQuery 代碼:

 var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
 });

6、視頻與資料下載

原本想一點一點寫完的，不事後面錄了比較全的視頻，你們能夠邊看視頻邊參考示例練習：

下載較新版的jQuery:下載 jQuery1.11.3幫助與庫

下載最新版的jQuery: 下載jQuery1.12.4庫

示例下載： jQuery視頻配套示例

視頻下載： https://pan.baidu.com/s/1hsJtb0K 密碼: m7bt

IDE HBuilder下載地址： http://www.dcloud.io/

B站直接觀看：http://www.bilibili.com/video/av9205766/?from=search&seid=5595908124286890857

7、做業

7.一、DOM大做業

7.二、AJAX大做業

7.三、jQuery UI大做業

自學一個基於bootstrap的UI框架，如layui

將7.2的AJAX大做業整合到UI中，UI框架類型不限

http://www.layui.com/

http://www.javashuo.com/article/p-ahaeicdf-cq.html

8、上課示例與本章視頻

8.一、示例源代碼

https://git.coding.net/zhangguo5/jQuery143.git

8.二、視頻

https://www.bilibili.com/video/av24045348/

9、其它

9.一、javascript對象與each

代碼：

        <script type="text/javascript">
            var app={
                data:[
                    {id:1,name:"張學友",city:"中國香港"},
                    {id:2,name:"張國立",city:"中國北京"},
                    {id:5,name:"張惠妹",city:"中國上海"}
                ],
                start:function(){
                    $.each(app.data,function(index,obj){
                        console.log(obj.id+","+obj.name);
                        console.log(obj)
                    });
                }
            };
            app.start();
        </script>

結果：

9.二、新增用戶

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
    </head>

    <body>
        <h2>DOM-用戶管理</h2>
        <table border="1" id="tabUsers" width="100%">
            <tr>
                <th>編號</th>
                <th>姓名</th>
                <th>城市</th>
                <th>操做</th>
            </tr>

        </table>

        <fieldset>
            <legend>用戶信息</legend>
            <p>
                <label for="name">姓名：</label>
                <input type="text" name="name" id="name" placeholder="請輸入姓名" />
            </p>
            <p>
                <label for="city">城市：</label>
                <input type="text" name="city" id="city" placeholder="請輸入城市" />
            </p>
            <p>
                <button type="button" id="btnSave">保存</button>
                <button type="button" id="btnUpdate">更新</button>
            </p>
        </fieldset>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            var app = {
                data: [{
                        id: 1,
                        name: "張學友",
                        city: "中國香港"
                    },
                    {
                        id: 2,
                        name: "張國立",
                        city: "中國北京"
                    },
                    {
                        id: 5,
                        name: "張惠妹",
                        city: "中國上海"
                    }
                ],
                bind: function() { //將數組中的數據渲染到頁面中
                    //將表格中第一行之外的數組清空
                    $("#tabUsers tr:gt(0)").remove();
                    $.each(app.data, function(i, obj) {
                        var tr = $("<tr/>");
                        $("<td/>").html(obj.id).appendTo(tr);
                        $("<td/>").html(obj.name).appendTo(tr);
                        $("<td/>").html(obj.city).appendTo(tr);
                        $("<td/>").html("<a>刪除</a>").appendTo(tr);
                        //在#tabUsers元素中追加子元素tr
                        $("#tabUsers").append(tr);
                    });
                },
                save:function(){  //新增
                    var user={
                        id:1,
                        name:$("#name").val(),
                        city:$("#city").val()
                    };
                    if(app.data.length>0){ //若是數組中有數據
                        user.id=app.data[app.data.length-1].id+1;
                    };
                    app.data.push(user);  //將user對象添加到數組的末尾
                    //從新渲染
                    app.bind();
                },
                start: function() {
                    //綁定事件
                    $("#btnSave").click(app.save);
                    
                    app.bind();
                }
            };

            app.start();
        </script>
    </body>

</html>

結果：

9.三、刪除與多刪除

代碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
    </head>

    <body>
        <h2>DOM-用戶管理</h2>
        <table border="1" id="tabUsers" width="100%">
            <tr>
                <th>
                    <input type="checkbox" id="chbAll" />
                </th>
                <th>編號</th>
                <th>姓名</th>
                <th>城市</th>
                <th>操做</th>
            </tr>

        </table>
        <p>
            <button type="button" id="btnDelSelected">刪除選擇項</button>
        </p>
        <fieldset>
            <legend>用戶信息</legend>
            <p>
                <label for="name">姓名：</label>
                <input type="text" name="name" id="name" placeholder="請輸入姓名" />
            </p>
            <p>
                <label for="city">城市：</label>
                <input type="text" name="city" id="city" placeholder="請輸入城市" />
            </p>
            <p>
                <button type="button" id="btnSave">保存</button>
                <button type="button" id="btnUpdate">更新</button>
            </p>
        </fieldset>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            var app = {
                data: [{
                        id: 1,
                        name: "張學友",
                        city: "中國香港"
                    },
                    {
                        id: 2,
                        name: "張國立",
                        city: "中國北京"
                    },
                    {
                        id: 5,
                        name: "張惠妹",
                        city: "中國上海"
                    }
                ],
                bind: function() { //將數組中的數據渲染到頁面中
                    //將表格中第一行之外的數組清空
                    $("#tabUsers tr:gt(0)").remove();
                    $.each(app.data, function(i, obj) {
                        var tr = $("<tr/>");

                        var chbItem = $("<input type='checkbox' name='chbItem'/>").data("index", i);
                        $("<td/>").append(chbItem).appendTo(tr);
                        $("<td/>").html(obj.id).appendTo(tr);
                        $("<td/>").html(obj.name).appendTo(tr);
                        $("<td/>").html(obj.city).appendTo(tr);

                        //建立一個刪除元素，在元素中隱藏數據index，對應了數組中的索引
                        var aDel = $("<a href='#' class='del'>刪除</a>").data("index", i);

                        $("<td/>").append(aDel).appendTo(tr);
                        //在#tabUsers元素中追加子元素tr
                        $("#tabUsers").append(tr);
                    });
                },
                save: function() { //新增
                    var user = {
                        id: 1,
                        name: $("#name").val(),
                        city: $("#city").val()
                    };
                    if(app.data.length > 0) { //若是數組中有數據
                        user.id = app.data[app.data.length - 1].id + 1;
                    };
                    app.data.push(user); //將user對象添加到數組的末尾
                    //從新渲染
                    app.bind();
                },
                deleteOne:function(obj){  //根據一個元素刪除當前行
                    var index = $(obj).data("index");
                    //index表示刪除的起始位置，1表示刪除幾個
                    app.data.splice(index, 1);
                    //更新頁面
                    //app.bind();
                    $(obj).closest("tr").remove(); //移除最近的tr父節點
                },
                deleteSelected:function(){  //多刪除
                     var items=$("input[name=chbItem]:checked");
                     for(var i=items.size();i>=0;i--){
                         app.deleteOne(items[i]);
                     }
                },
                start: function() {
                    //綁定事件
                    $("#btnSave").click(app.save);
                    $("#tabUsers").on("click", ".del", function() {
                        if(confirm('您肯定要刪除嗎？')) {
                            app.deleteOne(this);
                        }
                    });
                    $("#chbAll").click(function() {
                        $("input[name=chbItem]").prop("checked", $(this).prop("checked"));
                    });
                    //多刪除
                    $("#btnDelSelected").click(app.deleteSelected);
                    app.bind();
                }
            };

            app.start();
        </script>
    </body>

</html>

結果：

9.四、更新與驗證

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
        <style type="text/css">
            .red{
                color:red;
            }
        </style>
    </head>

    <body>
        <h2>DOM-用戶管理</h2>
        <table border="1" id="tabUsers" width="100%">
            <tr>
                <th>
                    <input type="checkbox" id="chbAll" />
                </th>
                <th>編號</th>
                <th>姓名</th>
                <th>城市</th>
                <th>操做</th>
            </tr>

        </table>
        <p>
            <button type="button" id="btnDelSelected">刪除選擇項</button>
        </p>
        <fieldset>
            <legend>用戶信息</legend>
            <p>
                <label for="name">姓名：</label>
                <input type="text" name="name" id="name" placeholder="請輸入姓名" />
                <span id="nameMsg" class="red"></span>
            </p>
            <p>
                <label for="city">城市：</label>
                <input type="text" name="city" id="city" placeholder="請輸入城市" />
                <span id="cityMsg" class="red"></span>
            </p>
            <p>
                <button type="button" id="btnSave">保存</button>
                <button type="button" id="btnUpdate">更新</button>
            </p>
        </fieldset>

        <script src="../js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = {
                    data: [{
                            id: 1,
                            name: "張學友",
                            city: "中國香港"
                        },
                        {
                            id: 2,
                            name: "張國立",
                            city: "中國北京"
                        },
                        {
                            id: 5,
                            name: "張惠妹",
                            city: "中國上海"
                        }
                    ],
                    index: -1,
                    bind: function() { //將數組中的數據渲染到頁面中
                        //將表格中第一行之外的數組清空
                        $("#tabUsers tr:gt(0)").remove();
                        $.each(app.data, function(i, obj) {
                            var tr = $("<tr/>");

                            var chbItem = $("<input type='checkbox' name='chbItem'/>").data("index", i);
                            $("<td/>").append(chbItem).appendTo(tr);
                            $("<td/>").html(obj.id).appendTo(tr);
                            $("<td/>").html(obj.name).appendTo(tr);
                            $("<td/>").html(obj.city).appendTo(tr);

                            //建立一個刪除元素，在元素中隱藏數據index，對應了數組中的索引
                            var aDel = $("<a href='#' class='del'>刪除</a>").data("index", i);
                            var aEdit = $("<a href='#' class='edit'> | 編輯</a>").data("index", i).data("user", obj);

                            $("<td/>").append(aDel).append(aEdit).appendTo(tr);
                            //在#tabUsers元素中追加子元素tr
                            $("#tabUsers").append(tr);
                        });
                    },
                    save: function() { //新增
                        var user = {
                            id: 1,
                            name: $("#name").val(),
                            city: $("#city").val()
                        };

                        if(app.verify(user)) {
                            if(app.data.length > 0) { //若是數組中有數據
                                user.id = app.data[app.data.length - 1].id + 1;
                            };
                            app.data.push(user); //將user對象添加到數組的末尾
                            //從新渲染
                            app.bind();
                        }
                    },
                    deleteOne: function(obj) { //根據一個元素刪除當前行
                        var index = $(obj).data("index");
                        //index表示刪除的起始位置，1表示刪除幾個
                        app.data.splice(index, 1);
                        //更新頁面
                        //app.bind();
                        $(obj).closest("tr").remove(); //移除最近的tr父節點
                    },
                    deleteSelected: function() { //多刪除
                        var items = $("input[name=chbItem]:checked");
                        for(var i = items.size(); i >= 0; i--) {
                            app.deleteOne(items[i]);
                        }
                    },
                    verify: function(user) {
                            if(!(user.name && /^[\u4e00-\u9fa5]{2,4}$/.test(user.name))) {
                                    $("#nameMsg").html("姓名格式錯誤");
                                    return false;
                                } else {
                                    $("#nameMsg").html("");
                                }

                                if(!(user.city && /^.{2,10}$/.test(user.city))){
                                        $("#cityMsg").html("城市格式錯誤");
                                        return false;
                                    } else {
                                        $("#cityMsg").html("");
                                    }

                                    return true;
                                },
                                start: function() {
                                    //綁定事件
                                    $("#btnSave").click(app.save);
                                    $("#tabUsers").on("click", ".del", function() {
                                        if(confirm('您肯定要刪除嗎？')) {
                                            app.deleteOne(this);
                                        }
                                    });
                                    $("#chbAll").click(function() {
                                        $("input[name=chbItem]").prop("checked", $(this).prop("checked"));
                                    });
                                    //多刪除
                                    $("#btnDelSelected").click(app.deleteSelected);
                                    //編輯
                                    $("#tabUsers").on("click", ".edit", function() {
                                        //索引
                                        var index = $(this).data("index");
                                        //對象
                                        var obj = $(this).data("user");
                                        $("#name").val(obj.name);
                                        $("#city").val(obj.city);
                                        app.index = index;
                                    });
                                    //更新
                                    $("#btnUpdate").click(function() {
                                        //得到要更新的對象
                                        var user = app.data[app.index];
                                        user.name = $("#name").val();
                                        user.city = $("#city").val();
                                        app.bind();
                                        app.index = -1;
                                    });
                                    app.bind();
                                }

                            };

                            app.start();
        </script>
    </body>

</html>

結果：

9.五、打字遊戲

代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var code = "";
        var W, H, L, T;
        var time = 10000;
        var N = 10;  //每次掉下幾個
        var CNT = 0;  //共掉下幾個
        var DONE = 0; //打完幾個
        $(function () {
            W = $("#div1").width();
            H = $("#div1").height();
            L = $("#div1").offset().left;
            if (L == 0) {
                document.location.reload();
            }
            T = $("#div1").offset().top;
            //alert(W + "," + H + "," + L + "," + T);
        });

        function GetLetter() {
            CNT++;
            ShoMsg();
            var chars = "A B C D E F G H I J K L M N O P Q R S T U V W X Y Z".split(" ");
            var i = Random(0, 25);
            $("<div/>")
            .html(chars[i])
            .css({ "font-size": 16 + i * 2, "left": L + Random(0, W - 60), "top": Random((T + 60) * -1, T + 60) * 3 })
            .addClass("item")
            .appendTo("#div1")
            .animate({ top: (T + H) }, time, "linear", function () {
                $(this).remove();
                GetLetter();
            });
            code += chars[i];
            return chars[i];
        }

        function Random(start, end) {
            return parseInt(Math.random() * (end + 1)) + start;
        }

        function ShoMsg() {
            $("#spanDONE").html(DONE);
            $("#spanCNT").html(CNT);
            $("#spanScore").html(parseInt(DONE*100/CNT*100)/100);
        }

        $(function () {
            $("body").keydown(function (event) {
                var code = String.fromCharCode(event.keyCode);
                $("#div1 div").each(function () {
                    if ($(this).text() == code) {
                        DONE++;
                        $(this).stop().css({"color":"red","width":130,"height":130}).animate({ "font-size": "+=50" }, 100).hide(500, function () { $(this).remove(); GetLetter(); });
                    }
                });
            });
        });

        $(function () {
            $("#btnStart").click(function () {
                N = parseInt($("#txtSpeed").val());
                time = parseInt($("#txtTime").val()) * 1000;
                CNT = 0;
                DONE = 0;
                for (var i = 0; i < N; i++) {
                    GetLetter();
                }
            });

            $("#btnStop").click(function () {
                $("#div1 *").remove().stop();
            });
        });
    </script>
    <style type="text/css">
        *
        {
            margin:0;
            padding:0;
        }
        #div1
        {
            width: 600px;
            height: 300px;
            background: #000;
            overflow: hidden;
        }
        .item
        {
            color: #fff;
            position: absolute;
            width: 60px;
            height: 60px;
        }
        #msg
        {
            line-height:30px;
            font-size:20px;
            color:#6f6;
            font-family:黑體;
            background:#000;
            width:580px;
            padding:0 10px;
        }
        #container
        {
            width:610px;
            margin:0 auto;
        }
        h2
        {
             line-height:40px;
             height:40px;
             text-align:center;
        }
        p
        {
            margin:10px 0;
        }
    </style>
</head>
<body>
    <div id="container">
    <h2>打字小遊戲</h2>
    <p>
       個數：<input id="txtSpeed" type="text" value="10" />個 
       速度：<input id="txtTime" type="text" value="10" />秒 
        <input id="btnStart" type="button" value="開始"  /> 
        <input id="btnStop" type="button" value="中止" />
    </p>
    <div id="div1">
    </div>
    <p id="msg">
        產生：<span id="spanCNT">0</span>個 
        完成：<span id="spanDONE">0</span>個 
        得分：<span id="spanScore">0</span>分 
    </p>
    </div>
</body>
</html>

結果：

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>jQuery DOM</title>
        <style>
            #div1 {
                position: relative;
                width: 900px;
                height: 500px;
                border: 2px solid red;
                margin: 0 auto;
            }
            
            .letter {
                position: absolute;
                font-size: 50px;
            }
        </style>
    </head>

    <body>
        <h2>jQuery DOM</h2>

        <div id="div1">

        </div>

        <script src="../js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            function game() {
                $("<div/>")
                    .html("ABCDEFGHIJKLMNOPQRSTUVWXYZ".split('')[R(0,25)])
                    .addClass("letter")
                    .css({
                        left: R(0, 900) + "px",
                        top: R(-50, 0) + "px"
                    })
                    .appendTo("#div1")
                    .animate({
                        top: '500px'
                    }, R(100, 8000), "linear", function() {
                        $(this).remove();
                        game();
                    });
            }

            function R(start, end) {
                return parseInt(Math.random() * (end + 1)) + start;
            }

            game();
            game();
            game();
            game();
            game();
            game();
        </script>
    </body>

</html>

結果：

9.六、AJAX基礎

工程：

User

package com.zhangguo.entity;

/***
 * 用戶實體 Bean
 *
 */
public class User {
    private int id;
    private String name;
    private String city;

    public User() {
    }

    public User(int id, String name, String city) {
        super();
        this.id = id;
        this.name = name;
        this.city = city;
    }

    @Override
    public String toString() {
        return "User [id=" + id + ", name=" + name + ", city=" + city + "]";
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

}

UserDao:

package com.zhangguo.dao;

import java.util.ArrayList;
import java.util.List;

import com.zhangguo.entity.User;

/**
 * 用戶數據訪問
 * */
public class UserDao {
    private static List<User> users=new ArrayList<>();
    
    static{
        users.add(new User(1,"張國立", "中國北京"));
        users.add(new User(2,"張學友", "中國香港"));
        users.add(new User(6,"張慧妹", "中國珠海"));
    }
    
    /**得到全部用戶*/
    public List<User> getAllUsers(){
        return users;
    }
    
    /**添加用戶*/
    public void addUser(User user){
        users.add(user);
    }
    
}

UserController:

package com.zhangguo.action;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zhangguo.dao.UserDao;
import com.zhangguo.entity.User;

/**
 * 用戶控制器
 */
@WebServlet("/UserController")
public class UserController extends HttpServlet {
    private static final long serialVersionUID = 1L;
    
    private UserDao userDao=new UserDao();

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        
        String result="[";
        for (User user : userDao.getAllUsers()) {
            result+="{\"id\":"+user.getId()+",\"name\":\""+user.getName()+"\",\"city\":\""+user.getCity()+"\"},";
        }
         if(result.substring(result.length()-1,result.length()).equals(","))
         {
             result=result.substring(0,result.length()-1);
         }
        result+="]";
        
        
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        
        response.getWriter().print(result);
    }

    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>jQuery AJAX</title>
</head>

<body>
    <h2>jQuery AJAX</h2>
    <table border="1" id="tabUsers" width="100%">
        <tr>
            <th>編號</th>
            <th>姓名</th>
            <th>城市</th>
        </tr>
    </table>
    <h3 id="msg"></h3>
    <script src="js/jquery-1.12.3.min.js" type="text/javascript"
        charset="utf-8"></script>
    <script type="text/javascript">
        $.ajax({
               type: "get",  //請求類型
               url: "UserController",  //路徑
               beforeSend:function(){  //請求前的事件
                   $("#msg").html("努力加載中...");
               },
               success: function(data){  //請求成功後的事件

                   $.each(data, function(i, obj) {
                        var tr = $("<tr/>");
                        $("<td/>").html(obj.id).appendTo(tr);
                        $("<td/>").html(obj.name).appendTo(tr);
                        $("<td/>").html(obj.city).appendTo(tr);
                        $("#tabUsers").append(tr);
                    });
                     
               },
               complete:function(){  //請求完成時的事件，不論成功或失敗
                   $("#msg").html("");
                },
               error:function (xhr, textStatus, errorThrown) {  //錯誤時
                    alert(xhr+textStatus+errorThrown);
                }
            });
        </script>
</body>

</html>

運行結果：

9.七、AJAX添加用戶

UserController

package com.zhangguo.action;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zhangguo.dao.UserDao;
import com.zhangguo.entity.User;

/**
 * 用戶控制器
 */
@WebServlet("/UserController")
public class UserController extends HttpServlet {
    private static final long serialVersionUID = 1L;

    private UserDao userDao = new UserDao();

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");
        request.setCharacterEncoding("utf-8");

        String action = request.getParameter("action");

        if (action.equals("list")) {
            list(response);  //得到全部用戶
        }else if (action.equals("add")) {
            add(request, response);  //添加新用戶
        }
    }

    /**添加新用戶*/
    public void add(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String name = request.getParameter("name");
        String city = request.getParameter("city");
        userDao.addUser(new User(name, city));
        
        delay();
        response.getWriter().print("{\"msg\":\"添加成功\"}");
    }

    /**得到全部用戶*/
    public void list(HttpServletResponse response) throws IOException {
        String result = "[";
        for (User user : userDao.getAllUsers()) {
            result += "{\"id\":" + user.getId() + ",\"name\":\"" + user.getName() + "\",\"city\":\""
                    + user.getCity() + "\"},";
        }
        if (result.substring(result.length() - 1, result.length()).equals(",")) {
            result = result.substring(0, result.length() - 1);
        }
        result += "]";
        
        delay();
        response.getWriter().print(result);
    }
    
    public void delay(){
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>jQuery AJAX</title>
        <style type="text/css">
            #loading{
                display: none;
            }
        </style>
    </head>

    <body>
        <h2>jQuery AJAX</h2>
        <table border="1" id="tabUsers" width="100%">
            <tr>
                <th>編號</th>
                <th>姓名</th>
                <th>城市</th>
            </tr>
        </table>
        <p></p>
        <fieldset>
            <legend>用戶信息</legend>
            <p>
                <label for="name">姓名：</label> <input type="text" name="name" id="name" placeholder="請輸入姓名" /> <span id="nameMsg" class="red"></span>
            </p>
            <p>
                <label for="city">城市：</label> <input type="text" name="city" id="city" placeholder="請輸入城市" /> <span id="cityMsg" class="red"></span>
            </p>
            <p>
                <button type="button" id="btnSave">保存</button>
                <button type="button" id="btnUpdate">更新</button>
            </p>
        </fieldset>
        <div id="loading">
            <img src="img/loading.gif" height="100"/>
        </div>
        <script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var list = function() {
                $.ajax({
                    type: "get", //請求類型
                    url: "UserController?action=list", //路徑
                    beforeSend: function() { //請求前的事件
                        $("#loading").show(500);
                    },
                    success: function(data) { //請求成功後的事件
                        $("#tabUsers tr:gt(0)").remove();  //移除表格中除第一行之外的數據
                        $.each(data, function(i, obj) {
                            var tr = $("<tr/>");
                            $("<td/>").html(obj.id).appendTo(tr);
                            $("<td/>").html(obj.name).appendTo(tr);
                            $("<td/>").html(obj.city).appendTo(tr);
                            $("#tabUsers").append(tr);
                        });

                    },
                    complete: function() { //請求完成時的事件，不論成功或失敗
                        $("#loading").hide(500);
                    },
                    error: function(xhr, textStatus, errorThrown) { //錯誤時
                        alert(xhr + textStatus + errorThrown);
                    }
                });
            }

            list();
            
            //添加
            $("#btnSave").click(function(){
                $.ajax({
                    url:"UserController?action=add",  //請求地址
                    data:{name:$("#name").val(),city:$("#city").val()},  //發送給後臺的數據
                    type:"post",  //請求類型
                    beforeSend:function(){  //請求前
                        $("#loading").show(500);
                        $("#btnSave").prop("disabled",true).html("請求中...");
                    },
                    success:function(data){  //請求成功事件
                        alert(data.msg);  
                        list();  //從新綁定
                    },
                    complete:function(){  //請求完成，不論成功或失敗
                        $("#loading").hide(500);
                        $("#btnSave").prop("disabled",false).html("保存");
                    }
                });
                
            });
            
        </script>
    </body>

</html>

效果：

9.八、序列化與反序列化

示例下載：https://files.cnblogs.com/files/best/Ajax14301.zip

在解析JSON方面，無疑JACKSON是作的最好的，下面從幾個方面簡單複習下。

FASTJSON 
JACKSON

1 JAVA 對象轉爲JSON 
 
import java.io.File;  
import java.io.IOException;  
import org.codehaus.jackson.JsonGenerationException;  
import org.codehaus.jackson.map.JsonMappingException;  
import org.codehaus.jackson.map.ObjectMapper;  
   
public class JacksonExample {  
    public static void main(String[] args) {  
   
    User user = new User();  
    ObjectMapper mapper = new ObjectMapper();  
   
    try {  
   
        // convert user object to json string, and save to a file  
        mapper.writeValue(new File("c:\\user.json"), user);  
   
        // display to console  
        System.out.println(mapper.writeValueAsString(user));  
   
    } catch (JsonGenerationException e) {  
   
        e.printStackTrace();  
   
    } catch (JsonMappingException e) {  
   
        e.printStackTrace();  
   
    } catch (IOException e) {  
   
        e.printStackTrace();  
   
    }  
   
  }  
   


輸出爲： 
{"age":29,"messages":["msg 1","msg 2","msg 3"],"name":"mkyong"} 


2 JSON反序列化爲JAVA對象 
  
import java.io.File;  
import java.io.IOException;  
import org.codehaus.jackson.JsonGenerationException;  
import org.codehaus.jackson.map.JsonMappingException;  
import org.codehaus.jackson.map.ObjectMapper;  
   
public class JacksonExample {  
    public static void main(String[] args) {  
   
    ObjectMapper mapper = new ObjectMapper();  
   
    try {  
   
        // read from file, convert it to user class  
        User user = mapper.readValue(new File("c:\\user.json"), User.class);  
   
        // display to console  
        System.out.println(user);  
   
    } catch (JsonGenerationException e) {  
   
        e.printStackTrace();  
   
    } catch (JsonMappingException e) {  
   
        e.printStackTrace();  
   
    } catch (IOException e) {  
   
        e.printStackTrace();  
   
    }  
   
  }  
   

輸出：User [age=29, name=mkyong, messages=[msg 1, msg 2, msg 3]] 

3 在上面的例子中，若是要輸出的JSON好看點，仍是有辦法的，就是使用 
defaultPrettyPrintingWriter()方法，例子爲： 

User user = new User();  
  ObjectMapper mapper = new ObjectMapper();  
  System.out.println(mapper.defaultPrettyPrintingWriter().writeValueAsString(user));  


則輸出整齊： 
{ 
  "age" : 29, 
  "messages" : [ "msg 1", "msg 2", "msg 3" ], 
  "name" : "mkyong" 
} 


Jackson 格式化日期問題
Jackson 默認是轉成timestamps形式的，如何使用本身須要的類型，

解決辦法： 1、在實體字段上使用@JsonFormat註解格式化日期

@JsonFormat(locale="zh", timezone="GMT+8", pattern="yyyy-MM-dd HH:mm:ss")
2、經過下面方式能夠取消timestamps形式

objectMapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
自定義輸出格式

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
objectMapper.setDateFormat(sdf)

jsonutil

package com.zhangguo.test;

import java.text.SimpleDateFormat;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class JsonUtils {
    /**
     * 序列化成json
     * */
    public static String toJson(Object obj) {
        // 對象映射器
        ObjectMapper mapper = new ObjectMapper();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd HH:mm:ss");
        mapper.setDateFormat(sdf);
        
        String result = null;
        // 序列化user對象爲json字符串
        try {
            result = mapper.writeValueAsString(obj);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return result;
    }
    
    /**
     * 反序列化成對象
     * */
    public static <T> T toObject(String json,Class<T> valueType) {
        //對象映射器
        ObjectMapper mapper=new ObjectMapper();
        T result=null;
        try {
            result=mapper.readValue(json,valueType);

        }catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }
}

9.九、原生AJAX

api幫助： https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

參考示例：http://www.javashuo.com/article/p-mdkqrtyw-k.html

簡單示例：

var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}

XMLHttpRequest 最初由微軟設計，隨後被 Mozilla、Apple 和 Google採納。現在，該對象已經被 W3C組織標準化。經過它，你能夠很容易的取回一個 URL 上的資源數據。儘管名字裏有 XML，但 XMLHttpRequest 能夠取回全部類型的數據資源，並不侷限於 XML。並且除了 HTTP ，它還支持 file 和 ftp 協議。

XHR構造函數

XMLHttpRequest(): 構造函數初始化一個 XMLHttpRequest 對象。必須在全部其餘方法被調用前調用構造函數。

XHR屬性

此接口繼承了 XMLHttpRequestEventTarget 和 EventTarget 的屬性。

屬性類型描述

onreadystatechange

Function?

一個JavaScript函數對象，當readyState屬性改變時會調用它。回調函數會在user interface線程中調用。

警告: 不能在本地代碼中使用. 也不該該在同步模式的請求中使用.

readyState

unsigned short

請求的五種狀態

值	狀態	描述
`0`	`UNSENT` (未打開)	`open()`方法還未被調用.
`1`	`OPENED` (未發送)	`open()`方法已經被調用.
`2`	`HEADERS_RECEIVED (已獲取響應頭)`	`send()`方法已經被調用, 響應頭和響應狀態已經返回.
`3`	`LOADING (正在下載響應體)`	響應體下載中; `responseText`中已經獲取了部分數據.
`4`	`DONE (請求完成)`	整個請求過程已經完畢.

response

varies

響應實體的類型由 responseType 來指定， 能夠是 ArrayBuffer， Blob， Document， JavaScript 對象 (即 "json")，或者是字符串。若是請求未完成或失敗，則該值爲 null。

responseText DOMString 這次請求的響應爲文本，或是當請求未成功或還未發送時爲 null。只讀。

responseType

XMLHttpRequestResponseType

設置該值可以改變響應類型。就是告訴服務器你指望的響應格式。

Value	Data type of `response` property
`""` (空字符串)	字符串(默認值)
`"arraybuffer"`	`ArrayBuffer`
`"blob"`	`Blob`
`"document"`	`Document`
`"json"`	JavaScript 對象，解析自服務器傳遞回來的JSON 字符串。
`"text"`	字符串

responseXML

Document?

本次請求的響應是一個 Document 對象，若是是如下狀況則值爲 null：請求未成功，請求未發送，或響應沒法被解析成 XML 或 HTML。當響應爲text/xml 流時會被解析。當 responseType 設置爲"document"，而且請求爲異步的，則響應會被當作 text/html 流來解析。只讀.

注意: 若是服務器不支持 text/xml Content-Type 頭，你可使用 overrideMimeType() 強制 XMLHttpRequest 將響應解析爲 XML。

status unsigned short 該請求的響應狀態碼 (例如, 狀態碼200 表示一個成功的請求).只讀.

statusText DOMString 該請求的響應狀態信息,包含一個狀態碼和緣由短語 (例如 "200 OK"). 只讀.

upload XMLHttpRequestUpload 能夠在 upload 上添加一個事件監聽來跟蹤上傳過程。

withCredentials

boolean

代表在進行跨站(cross-site)的訪問控制(Access-Control)請求時，是否使用認證信息(例如cookie或受權的header)。默認爲 false。

注意: 這不會影響同站(same-site)請求.

XHR非標準屬性

Attribute	Type	Description
`channel`	`nsIChannel`	The channel used by the object when performing the request. This is `null` if the channel hasn't been created yet. In the case of a multi-part request, this is the initial channel, not the different parts in the multi-part request. Requires elevated privileges to access; 只讀.
`mozBackgroundRequest`	`boolean`	Indicates whether or not the object represents a background service request. If `true`, no load group is associated with the request, and security dialogs are prevented from being shown to the user. Requires elevated privileges to access. In cases in which a security dialog (such as authentication or a bad certificate notification) would normally be shown, the request simply fails instead.
`mozResponseArrayBuffer`已廢棄 Gecko 6	`ArrayBuffer`	The response to the request, as a JavaScript typed array. This is NULL if the request was not successful, or if it hasn't been sent yet. 只讀
`multipart`	`boolean`	Indicates whether or not the response is expected to be a stream of possibly multiple XML documents. If set to `true`, the content type of the initial response must be `multipart/x-mixed-replace` or an error will occur. All requests must be asynchronous. This enables support for server push; for each XML document that's written to this request, a new XML DOM document is created and the `onload` handler is called between documents. 注意: 當這個屬性被開啓，XMLdocument被初次加載後onload事件處理器以及其它事件處理器不會被重置，而且onload事件處理器會在每一次響應接收的時候被調用。

XHR方法

abort()

若是請求已經被髮送,則馬上停止請求.

getAllResponseHeaders()

DOMString getAllResponseHeaders();

返回全部響應頭信息(響應頭名和值), 若是響應頭還沒接受,則返回null. 注意: For multipart requests, this returns the headers from the current part of the request, not from the original channel.

getResponseHeader()

DOMString? getResponseHeader(DOMString header);

返回指定的響應頭的值, 若是響應頭還沒被接受,或該響應頭不存在,則返回null.

open()

初始化一個請求. 該方法用於JavaScript代碼中;若是是本地代碼, 使用 openRequest()方法代替.

注意: 在一個已經激活的request下（已經調用open()或者openRequest()方法的request）再次調用這個方法至關於調用了abort（）方法。

void open(
   DOMString method,
   DOMString url,
   optional boolean async,
   optional DOMString user,
   optional DOMString password
);

參數

method: 請求所使用的HTTP方法; 例如 "GET", "POST", "PUT", "DELETE"等. 若是下個參數是非HTTP(S)的URL,則忽略該參數.
url: 該請求所要訪問的URL
async: 一個可選的布爾值參數，默認爲true,意味着是否執行異步操做，若是值爲false,則send()方法不會返回任何東西，直到接受到了服務器的返回數據。若是爲值爲true，一個對開發者透明的通知會發送到相關的事件監聽者。這個值必須是true,若是multipart 屬性是true，不然將會出現一個意外。
user: 用戶名,可選參數,爲受權使用;默認參數爲空string.
password: 密碼,可選參數,爲受權使用;默認參數爲空string.

overrideMimeType()

重寫由服務器返回的MIME type。這個可用於, 例如，強制把一個響應流看成「text/xml」來處理和解析,即便服務器沒有指明數據是這個類型。注意，這個方法必須在send()以前被調用。

void overrideMimeType(DOMString mimetype);

send()

發送請求. 若是該請求是異步模式(默認),該方法會馬上返回. 相反,若是請求是同步模式,則直到請求的響應徹底接受之後,該方法纔會返回.

注意: 全部相關的事件綁定必須在調用 send()方法以前進行.

void send();
void send(ArrayBuffer data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);

注意

若是發送的數據是個文檔，它會在發送以前進行序列化。當發送一個文檔，Firefox高於3的版本會對發送的請求使用UTF-8編碼；Firefox 3 也能夠支持發送文檔的時候經過使用body.xmlEncoding指定編碼方式，若是不指定則默認使用UTF-8編碼。

If it's an nsIInputStream, it must be compatible with nsIUploadChannel's setUploadStream()method. In that case, a Content-Length header is added to the request, with its value obtained using nsIInputStream's available()method. Any headers included at the top of the stream are treated as part of the message body. The stream's MIMEtype should be specified by setting the Content-Type header using the setRequestHeader()method prior to calling send().

setRequestHeader()

給指定的HTTP請求頭賦值.在這以前,你必須確認已經調用 open() 方法打開了一個url.

void setRequestHeader(
   DOMString header,
   DOMString value
);

參數

header: 將要被賦值的請求頭名稱.
value: 給指定的請求頭賦的值.

非標準方法

init()

在 C++代碼中初始化一個XHR對象.

警告: 該方法不能在 JavaScript 代碼中使用.

[noscript] void init(
   in nsIPrincipal principal,
   in nsIScriptContext scriptContext,
   in nsPIDOMWindow ownerWindow
);

參數

principal: 主要用於請求;不能夠爲null.
scriptContext: 請求上下文;不能夠爲null.
ownerWindow: 和窗口相關請求; 可能爲null.

openRequest()

初始化一個請求. 這個方法用於本地代碼; 若是用JavaScript 代碼來初始化請求, 使用 open()代替. 看文檔open().

sendAsBinary()

發送二進制數據的send()方法變種.

void sendAsBinary(
   in DOMString body
);

參數

body: 請求體的DOMstring。這個數據已由一系列單字節字符截取（移除每一個字符的高位字節）轉換成了字符串。

9.十、原生AJAX示例

代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>原生ajax</title>
    </head>
    <body>
        <h2>原生ajax</h2>
        
        <h3 id="time"></h3>
        
        <button type="button" onclick="getTime_click()">得到服務器時間</button>
        
        <script>
            
            function getXHR(){
                //判斷是否擁有xhr對象
                if(window.XMLHttpRequest){
                    return new XMLHttpRequest();
                }else if(window.ActiveXObject){
                    //ie6,ie5下的xhr對象得到辦法
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
                return null;
            }
            
            
            function getTime_click(){
                var xhr=getXHR();
                //當狀態變化時的事件
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4){  //請求成功
                        if(xhr.status==200){  //服務器響應狀態成功
                            //將從服務器得到的數據顯示在頁面上
                            document.getElementById("time").innerHTML= xhr.responseText;
                        }  
                    }
                }
                //打開請求
                xhr.open("GET","GetTime",true);  //請求類型,路徑,是否爲異步請求
                //發送請求
                xhr.send(null);  //參數
            }
            
            
        </script>
    </body>
</html>

Servlet:

package com.zhangguo.action;

import java.io.IOException;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/GetTime")
public class GetTime extends HttpServlet {
    private static final long serialVersionUID = 1L;
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.getWriter().write(new Date().toString());
    }

}

結果：

jQuery ajax請求

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>原生ajax</title>
    </head>
    <body>
        <h2>原生ajax</h2>
        
        <h3 id="time"></h3>
        
        <button type="button" onclick="getTime_click()">得到服務器時間</button>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>
            
            
            function getTime_click(){
                $.get("GetTime",function(data){$("#time").html(data); });
            }
            
            
        </script>
    </body>
</html>

9.十一、AJAX用戶示例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>jQuery AJAX</title>
        <style type="text/css">
            #loading{
                display: none;
            }
        </style>
    </head>

    <body>
        <h2>jQuery AJAX</h2>
        <table border="1" id="tabUsers" width="100%">
            <tr>
                <th>編號</th>
                <th>姓名</th>
                <th>城市</th>
                <th>操做</th>
            </tr>
        </table>
        <p></p>
        <fieldset>
            <legend>用戶信息</legend>
            <p>
                <label for="name">姓名：</label> <input type="text" name="name" id="name" placeholder="請輸入姓名" /> <span id="nameMsg" class="red"></span>
            </p>
            <p>
                <label for="city">城市：</label> <input type="text" name="city" id="city" placeholder="請輸入城市" /> <span id="cityMsg" class="red"></span>
            </p>
            <p>
                <button type="button" id="btnSave">保存</button>
                <button type="button" id="btnUpdate">更新</button>
            </p>
        </fieldset>
        <div id="loading">
            <img src="img/loading.gif" height="100"/>
        </div>
        <script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            var list = function() {
                $.ajax({
                    type: "get", //請求類型
                    url: "UserController?action=list", //路徑
                    beforeSend: function() { //請求前的事件
                        $("#loading").show(500);
                    },
                    success: function(data) { //請求成功後的事件
                        $("#tabUsers tr:gt(0)").remove();  //移除表格中除第一行之外的數據
                        $.each(data, function(i, obj) {
                            var tr = $("<tr/>");
                            $("<td/>").html(obj.id).appendTo(tr);
                            $("<td/>").html(obj.name).appendTo(tr);
                            $("<td/>").html(obj.city).appendTo(tr);
                            
                            var del=$("<a href='#' class='del'>刪除 | </a>").data("id",obj.id);
                            var edit=$("<a href='#' class='edit'>編輯</a>").data("user",obj);
                            $("<td/>").append(del).append(edit).appendTo(tr);
                            $("#tabUsers").append(tr);
                        });

                    },
                    complete: function() { //請求完成時的事件，不論成功或失敗
                        $("#loading").hide(500);
                    },
                    error: function(xhr, textStatus, errorThrown) { //錯誤時
                        alert(xhr + textStatus + errorThrown);
                    }
                });
            }

            list();
            
            //添加
            $("#btnSave").click(function(){
                $.ajax({
                    url:"UserController?action=add",  //請求地址
                    data:{name:$("#name").val(),city:$("#city").val()},  //發送給後臺的數據
                    type:"post",  //請求類型
                    beforeSend:function(){  //請求前
                        $("#loading").show(500);
                        $("#btnSave").prop("disabled",true).html("請求中...");
                    },
                    success:function(data){  //請求成功事件
                        alert(data.msg);  
                        list();  //從新綁定
                    },
                    complete:function(){  //請求完成，不論成功或失敗
                        $("#loading").hide(500);
                        $("#btnSave").prop("disabled",false).html("保存");
                    }
                });
                
            });
            
            $("#tabUsers").on("click",".del",function(){
                var id=$(this).data("id");
                //發送ajax get請求
                $.get("UserController?action=del",{"id":id},function(data){
                    alert(data.msg);
                    list();
                });
            });
            
            var user=null;
            $("#tabUsers").on("click",".edit",function(){
                user=$(this).data("user");
                $("#name").val(user.name);
                $("#city").val(user.city);
            });
            
            //更新事件
            $("#btnUpdate").click(function(){
                
                user.name=$("#name").val();
                user.city=$("#city").val();
                
                //向服務器發送post請求
                $.post("UserController?action=update",user,function(data){
                    alert(data.msg);
                    list();
                });
                
            });
            
        </script>
    </body>

</html>

9.十二、artDialog彈出層

幫助：http://aui.github.io/artDialog/doc/index.html

應用：http://www.javashuo.com/article/p-mdkqrtyw-k.html

上課示例：https://files.cnblogs.com/files/best/Ajax14301_2.zip

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>artDialog</title>
        <link rel="stylesheet" type="text/css" href="js/artDialog7/css/dialog.css"/>
        <style type="text/css">
            #formUser{
                display: none;
            }
        </style>
    </head>
    <body>
        <h2>artDialog</h2>
        
        <button type="button" onclick="click1()">提示</button>
        <button type="button" onclick="click2()">添加用戶</button>
        <button type="button" onclick="click3()">加載中</button>
        <fieldset id="formUser">
            <legend>用戶信息</legend>
            <p>
                <label for="name">姓名：</label> <input type="text" name="name" id="name" placeholder="請輸入姓名" /> <span id="nameMsg" class="red"></span>
            </p>
            <p>
                <label for="city">城市：</label> <input type="text" name="city" id="city" placeholder="請輸入城市" /> <span id="cityMsg" class="red"></span>
            </p>
            <p>
                <button type="button" id="btnSave">保存</button>
                <button type="button" id="btnUpdate">更新</button>
            </p>
        </fieldset>
        
        <script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/artDialog7/dist/dialog.js" type="text/javascript" charset="utf-8"></script>
        
        <script>
            function click1(){
                var d=dialog({
                    title:"提示",
                    content:"恭喜您，刪除成功!",
                     okValue: '肯定',
                    ok:function(){
                        
                        setTimeout(function(){
                            d.close().remove();
                        },2000);
                        
                        return false;
                    },
                    cancel:function(){
                        
                    }
                });
                d.show();
            }
            
            function click2(){
                var d=dialog({
                    title:"添加用戶",
                    modal:true,
                    backdropOpacity:0.2,
                    width:'600px',
                    height:'300px',
                    content:$("#formUser")
                });
                d.show();
            }
            
            var box
            function click3(){
                var box=dialog({
                    modal:true
                });
                box.show();
            };
            
        </script>
    </body>
</html>

結果：

9.1三、Bootstrap基礎

http://www.layui.com/
http://www.h-ui.net/H-ui.admin.shtml

移動端
http://www.dcloud.io/mui.html
http://m.sui.taobao.org/components/#forms

http://www.bootCSS.com

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>BootStrap Demo</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    </head>

    <body>

        <div class="container-fluid">
            <div class="row">
                <div class="jumbotron">
                    <h1>Hello, Bootstrap!</h1>
                    <p>這是個人第一個bootstrap頁面！</p>
                    <p>
                        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
                    </p>
                </div>
            </div>

            <div class="row">
                <div class="col-md-8">.col-md-8

                    <!-- Standard button -->
                    <button type="button" class="btn btn-default">（默認樣式）Default</button>

                    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                    <button type="button" class="btn btn-primary">（首選項）Primary</button>

                    <!-- Indicates a successful or positive action -->
                    <button type="button" class="btn btn-success">（成功）Success</button>

                    <!-- Contextual button for informational alert messages -->
                    <button type="button" class="btn btn-info">（通常信息）Info</button>

                    <!-- Indicates caution should be taken with this action -->
                    <button type="button" class="btn btn-warning">（警告）Warning</button>

                    <!-- Indicates a dangerous or potentially negative action -->
                    <button type="button" class="btn btn-danger">（危險）Danger</button>

                    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                    <button type="button" class="btn btn-link">（連接）Link</button>

                </div>
                <div class="col-md-4">.col-md-4</div>
            </div>
        </div>
        <script src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    </body>

</html>

效果

9.1四、在線可視化佈局系統

http://www.ibootstrap.cn/
http://www.bootcss.com/p/layoutit/

示例：

代碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>BootStrap Demo</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    </head>

    <body>

        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
                            <a class="navbar-brand" href="#">Brand</a>
                        </div>

                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class="active">
                                    <a href="#">Link</a>
                                </li>
                                <li>
                                    <a href="#">Link</a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Action</a>
                                        </li>
                                        <li>
                                            <a href="#">Another action</a>
                                        </li>
                                        <li>
                                            <a href="#">Something else here</a>
                                        </li>
                                        <li class="divider">
                                        </li>
                                        <li>
                                            <a href="#">Separated link</a>
                                        </li>
                                        <li class="divider">
                                        </li>
                                        <li>
                                            <a href="#">One more separated link</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <form class="navbar-form navbar-left" role="search">
                                <div class="form-group">
                                    <input type="text" class="form-control" />
                                </div> <button type="submit" class="btn btn-default">Submit</button>
                            </form>
                            <ul class="nav navbar-nav navbar-right">
                                <li>
                                    <a href="#">Link</a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Action</a>
                                        </li>
                                        <li>
                                            <a href="#">Another action</a>
                                        </li>
                                        <li>
                                            <a href="#">Something else here</a>
                                        </li>
                                        <li class="divider">
                                        </li>
                                        <li>
                                            <a href="#">Separated link</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

                    </nav>
                    <div class="jumbotron">
                        <h1>
                    Hello, world!
                </h1>
                        <p>
                            This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
                        </p>
                        <p>
                            <a class="btn btn-primary btn-large" href="#">Learn more</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="carousel slide" id="carousel-941720">
                        <ol class="carousel-indicators">
                            <li class="active" data-slide-to="0" data-target="#carousel-941720">
                            </li>
                            <li data-slide-to="1" data-target="#carousel-941720">
                            </li>
                            <li data-slide-to="2" data-target="#carousel-941720">
                            </li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                                <img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/1/default.jpg" />
                                <div class="carousel-caption">
                                    <h4>
                                First Thumbnail label
                            </h4>
                                    <p>
                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                    </p>
                                </div>
                            </div>
                            <div class="item">
                                <img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/2/default.jpg" />
                                <div class="carousel-caption">
                                    <h4>
                                Second Thumbnail label
                            </h4>
                                    <p>
                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                    </p>
                                </div>
                            </div>
                            <div class="item">
                                <img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/3/default.jpg" />
                                <div class="carousel-caption">
                                    <h4>
                                Third Thumbnail label
                            </h4>
                                    <p>
                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#carousel-941720" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                        <a class="right carousel-control" href="#carousel-941720" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-4 column">
                    <h2>
                Heading
            </h2>
                    <p>
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                    </p>
                    <p>
                        <a class="btn" href="#">View details »</a>
                    </p>
                </div>
                <div class="col-md-4 column">
                    <h2>
                Heading
            </h2>
                    <p>
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                    </p>
                    <p>
                        <a class="btn" href="#">View details »</a>
                    </p>
                </div>
                <div class="col-md-4 column">
                    <h2>
                Heading
            </h2>
                    <p>
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                    </p>
                    <p>
                        <a class="btn" href="#">View details »</a>
                    </p>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="thumbnail">
                                <img alt="300x200" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/600/200/people/default.jpg" />
                                <div class="caption">
                                    <h3>
                                Thumbnail label
                            </h3>
                                    <p>
                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                    </p>
                                    <p>
                                        <a class="btn btn-primary" href="#">Action</a>
                                        <a class="btn" href="#">Action</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="thumbnail">
                                <img alt="300x200" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/600/200/city/default.jpg" />
                                <div class="caption">
                                    <h3>
                                Thumbnail label
                            </h3>
                                    <p>
                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                    </p>
                                    <p>
                                        <a class="btn btn-primary" href="#">Action</a>
                                        <a class="btn" href="#">Action</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="thumbnail">
                                <img alt="300x200" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/600/200/sports/default.jpg" />
                                <div class="caption">
                                    <h3>
                                Thumbnail label
                            </h3>
                                    <p>
                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                    </p>
                                    <p>
                                        <a class="btn btn-primary" href="#">Action</a>
                                        <a class="btn" href="#">Action</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-8 column">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>
                                    編號
                                </th>
                                <th>
                                    產品
                                </th>
                                <th>
                                    交付時間
                                </th>
                                <th>
                                    狀態
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    1
                                </td>
                                <td>
                                    TB - Monthly
                                </td>
                                <td>
                                    01/04/2012
                                </td>
                                <td>
                                    Default
                                </td>
                            </tr>
                            <tr class="success">
                                <td>
                                    1
                                </td>
                                <td>
                                    TB - Monthly
                                </td>
                                <td>
                                    01/04/2012
                                </td>
                                <td>
                                    Approved
                                </td>
                            </tr>
                            <tr class="error">
                                <td>
                                    2
                                </td>
                                <td>
                                    TB - Monthly
                                </td>
                                <td>
                                    02/04/2012
                                </td>
                                <td>
                                    Declined
                                </td>
                            </tr>
                            <tr class="warning">
                                <td>
                                    3
                                </td>
                                <td>
                                    TB - Monthly
                                </td>
                                <td>
                                    03/04/2012
                                </td>
                                <td>
                                    Pending
                                </td>
                            </tr>
                            <tr class="info">
                                <td>
                                    4
                                </td>
                                <td>
                                    TB - Monthly
                                </td>
                                <td>
                                    04/04/2012
                                </td>
                                <td>
                                    Call in to confirm
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-md-4 column">
                    <h2>
                Heading
            </h2>
                    <p>
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                    </p>
                    <p>
                        <a class="btn" href="#">View details »</a>
                    </p>
                </div>
            </div>
        </div>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    </body>

</html>