前一段時間錄了一套關於jQuery的視頻分享給大家，可以在下載區下載到，本來想配合文字一起的，后面發現視頻+幫助文檔也是非常好的學習方法。
一、jQuery簡介與第一個jQuery程序
1.1、jQuery簡介
jQuery是繼Prototype之后又一個優秀的JavaScript庫，是一個由John Resig創建於2006年1月的開源項目。現在的jQuery團隊主要包括核心庫、UI和插件等開發人員以及推廣和網站設計維護人員。
jQuery憑借簡介的語法和跨瀏覽器的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發AJAX的操作。其獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。總之，無論是網頁設計師、后台開發者、還是項目管理者，也無論是JavaScript初學者還是JavaScript高手，都有足夠多的理由去學習jQuery。
1.2、jQuery特點
jQuery是免費、開源的，使用MIT許可協議。jQuery的語法設計可以使開發更加便捷，例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者可以很輕松的開發出功能強大的靜態或動態網頁。jQuery的特點：
- 功能強大，強調的理念是寫的少，做得多（write less，do more）
- 封裝了大量常用的DOM操作
- 靈活的事件處理機制
- 擁有完善的AJAX功能
- 擴展性強、插件豐富
- 易學易用
- 多瀏覽器支持（支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+，在2.0.0中取消了對Internet Explorer6,7,8的支持）、兼容性好
1.3、jQuery版本
jQuery 1.0
（2006年8月）：該庫的第一個穩定版本，已經具有了對CSS選擇符、事件處理和AJAX交互的穩健支持。
jQuery 1.1
（2007年1月）：這一版大幅簡化了API。許多較少使用的方法被合並，減少了需要掌握和解釋的方法數量。
jQuery 1.1.3
（2007年7月）：這次小版本變化包含了對jQuery選擇符引擎執行速度的顯著提升。從這個版本開始，jQuery的性能達到了Prototype、Mootools以及
Dojo等同類JavaScript庫的水平。
jQuery 1.2
（2007年9月）：這一版去掉了對XPath選擇符的支持，原因是相對於CSS語法它已經變得多余了。這一版能夠支持對效果的更靈活定制，而且借助新增
的命名空間事件，也使插件開發變得更容易。
jQuery UI（2007年9月）：這個新的插件套件是作為曾經流行但已過時的Interface插件的替代項目而發布的。jQuery UI中包含大量預定義好的部件（
widget），以及一組用於構建高級元素（例如可拖放的界面元素）的工具。
jQuery 1.2.6
（2008年5月）：這一版主要是將Brandon Aaron開發的流行的Dimensions插件的功能移植到了核心庫中。
jQuery 1.3
（2009年1月）：這一版使用了全新的選擇符引擎Sizzle，庫的性能也因此有了極大提升。這一版正式支持事件委托特性。
jQuery 1.3.2
（2009年2月）：這次小版本升級進一步提升了庫的性能，例如改進了：visible/:hidden選擇符、.height()/.width()方法的底層處理機制。另外，也支
持查詢的元素按文檔順序返回。
jQuery 1.4
（2010年1月14號）：對代碼庫進行了內部重寫組織，開始建立一些風格規范。老的core.js文件被分為
attribute.js,css.js,data.js,manipulation.js,traversing.js和queue.js；CSS和attribute的邏輯分離。
jQuery 1.5
（2011年1月31日）：該版本修復了83個bug，解決了460個問題。重大改進有：重寫了Ajax模塊；新增延緩對象（Deferred Objects）；jQuery替身
——jQuery.sub()；增強了遍歷相鄰節點的性能；jQuery開發團隊構建系統的改進。
jQuery1.7
（2011年11月04號）：新版本包含了很多新的特征，特別提升了事件委派時的性能尤其是在IE7下。
jQuery 1.7.2
（2012年03月24號）：jQuery 1.7.2正式版發布。
該版本在1.7.1的基礎上修復了大量的bug，並改進了部分功能。而相比於1.7.2 RC1，只修復了一個bug。值得注意的是：如果你正在使用jQuery
Mobile，請使用最新的jQuery 1.7.2和jQuery Mobile 1.1這兩個版本，因為之前的jQuery Mobile版本還基於jQuery core 1.7.1或更早的版本。
jQuery 1.8.3
2012年11月14日 jQuery 1.8.3 發布，修復 bug 和性能衰退問題、IE8中的HTML相關Bug、jQuery 1.8.2在IE9中調用ajax失敗的問題
jQuery 2.0
2013年4月18日 jQuery 2.0正式版發布
不再支持IE 6/7/8：如果在IE9/10版本中使用“兼容性視圖”模式也將會受到影響。而jQuery3修復了大量的bug，增加了新的方法，同時移除了一些接口，並修改了少量接口的行為，不1和2是不同的API。
更輕更快：2.0版本文件與1.9.1相比小了12%。可以構建一個更小、更輕量的版本、表現更好。
jQuery 2.0 API完全兼容jQuery 1.9 API。
更多版本請查看：
https://github.com/jquery/jquery/releases
說明：不管是jQuery1.x還是2.x使用的API都是一樣的，只是內部實現的方式有區別，2.x不支持IE6/7/8而1.x則支持，2.x更小，效率更高，但功能是一樣。
1.4、獲得jQuery庫
jQuery不需要安裝，把下載的jQuery庫放到網站的一個公共位置，想要在某個頁面上使用jQuery時，只需要在相關的HTML文檔中引入該庫文件即可。獲得jQuery相關資源的網站地址如下：
源碼： https://github.com/jquery/jquery
中文幫助： 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.1、開發工具
1.5、第一個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版本）
運行結果：
二、jQuery對象和DOM對象
2.1、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.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.3、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.4、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.5、DOM對象與jQuery對象區別
- DOM對象只能調用DOM方法、屬性與事件；
- jQuery對象只能調用jQuery方法、屬性與事件；
- 可以將DOM轉換成jQuery對象，也可以將jQuery轉換成DOM對象；
- $只是jQuery的別名形式；
- 每一個jQuery對象都是一個DOM對象的集合
三、常用選擇器
通過jQuery中的選擇器實際上取得的是HTML中的DOM元素。在jQuery中使用CSS匹配(CSS like)來進行元素指定，比其他JavaScript庫都簡單，這也正是jQuery在網頁設計人員中大受歡迎的理由了。
在其核心，jQuery重點放在從HTML頁面里獲取元素並對其進行操作。如果你熟悉CSS，就會很清楚選擇器的威力，通過元素的特性或元素在文檔中的位置去描述元素組。有了jQuery，就能夠利用現有知識去發揮選擇器的威力，在很大程度上簡化JavaScript代碼。CSS中可以使用的選擇器基本都可以用到jQuery中，反之不然。
3.1. 選擇器和包裝集
為了使設計和內容分離而把CSS引入Web技術的時候，需要以某種方式從外部樣式表中引用頁面元素組。開發出來的方法就是通過使用選擇器—基於元素的屬性或元素在HTML文檔中的位置，簡明地表現元素。
例如，選擇器：p a
引用所有嵌套於<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.1、通過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.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.3、通過標簽名獲取元素
在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>
四、350行jQuery常用腳本
4.1、常用選擇器
$('#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.2、基本篩選器
$('span:first') //第一個節點
$('span:last') //最后一個節點
$("td:even") //索引為偶數的節點，從 0 開始
$("td:odd") //索引為奇數的節點，從 0 開始
$("td:eq(1)") //給定索引值的節點
$("td:gt(0)") //大於給定索引值的節點
$("td:lt(2)") //小於給定索引值的節點
$(":focus") //當前獲取焦點的節點
$(":animated") //正在執行動畫效果的節點
4.3、內容選擇器
$("div:contains('hello')") //包含hello文本的節點
$("td:empty") //不包含子節點或者文本的空節點
$("div:has(p)") //含有選擇器所匹配的節點
$("td:parent") //含有子節點或者文本的節點
4.4、表單選擇器
$("input:checked") //所有選中的節點
$("select option:selected") //select中所有選中的option節點
$(":input") //匹配所有 input, textarea, select 和 button 節點
$(":text") //所有的單行文本框
$(":password") //所有密碼框
$(":radio") //所有單選按鈕
$(":checkbox") //所有復選框
$(":submit") //所有提交按鈕
$(":reset") //所有重置按鈕
$(":button") //所有button按鈕
$(":file") //所有文件域
4.5、篩選與查找
$("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.6、屬性操作
$("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.7、樣式操作
$("p").addClass("selected"); //為p節點加上 'selected' 類
$("p").removeClass("selected"); //從p節點中刪除 'selected' 類
$("p").toggleClass("selected"); //如果存在就刪除,否則就添加HTML代碼/文本/值
4.8、內容操作
$('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.9、CSS操作
$("p").css("color"); //訪問查看p節點的color屬性
$("p").css("color","red"); //設置p節點的color屬性為red
$("p").css({ "color": "red", "background": "yellow" }); //設置p節點的color為red，background屬性為yellow（設置多個屬性要用{}字典形式）
4.10、定位與偏移
$('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.11、尺寸
$("p").height(); //獲取p節點的高度
$("p").width(); //獲取p節點的寬度
$("p:first").innerHeight() //獲取第一個匹配節點內部區域高度(包括補白、不包括邊框)
$("p:first").innerWidth() //獲取第一個匹配節點內部區域寬度(包括補白、不包括邊框)
$("p:first").outerHeight() //匹配節點外部高度(默認包括補白和邊框)
$("p:first").outerWidth() //匹配節點外部寬度(默認包括補白和邊框)
$("p:first").outerHeight(true) //為true時包括邊距
4.12、DOM內部插入
$("p").append("<b>hello</b>"); //每個p節點內后面追加內容
$("p").appendTo("div"); //p節點追加到div內后
$("p").prepend("<b>Hello</b>"); //每個p節點內前面追加內容
$("p").prependTo("div"); //p節點追加到div內前
4.13、DOM外部插入
$("p").after("<b>hello</b>"); //每個p節點同級之后插入內容
$("p").before("<b>hello</b>"); //在每個p節點同級之前插入內容
$("p").insertAfter("#node"); //所有p節點插入到id為node節點的后面
$("p").insertBefore("#node"); //所有p節點插入到id為node節點的前面
4.14、DOM替換
$("p").replaceWith("<b>Paragraph. </b>"); //將所有匹配的節點替換成指定的HTML或DOM節點
$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的節點替換掉所有 selector匹配到的節點
4.15、DOM刪除
$("p").empty(); //刪除匹配的節點集合中所有的子節點，不包括本身
$("p").remove(); //刪除所有匹配的節點,包括本身
$("p").detach(); //刪除所有匹配的節點(和remove()不同的是:所有綁定的事件、附加的數據會保留下來)
4.16、DOM復制
$("p").clone() //克隆節點並選中克隆的副本
$("p").clone(true) //布爾值指事件處理函數是否會被復制
4.17、DOM加載完成事件
$(document).ready(function(){ 您的代碼... }); //縮寫 $(function($) { 您的代碼... });
4.18、綁定事件
//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.19、事件對象
$("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.21、動畫效果
$("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.22、工具方法
$("#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.23、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 });
五、AJAX詳解
AJAX全稱為“Asynchronous JavaScript And XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的開發技術。其使用基於Web2.0標准的XHTML+CSS表示方式，使用DOM（Document Object Model）進行動態顯示及交互，使用XML和XSLT進行數據交換及其相關操作，使用XMLHttpRequest進行異步數據查詢、檢索，使用JavaScript將所有的東西綁定在一起。
AJAX應用可以僅向服務器發送並取回必需的數據，它使用SOAP或其他一些基於XML的Web Service接口，並在客戶端采用JavaScript處理來自服務器的響應。因為在服務器和瀏覽器之間交換的數據大量減少，結果我們就能看到響應速度更快的應用。同時很多的處理工作可以在發出請求的客戶端機器上完成，Web服務的處理時間也就減少了。
jQuery為AJAX帶來方便，語法格式如下：
jQuery.ajax(url,[settings])
通過 HTTP 請求加載遠程數據。
jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得更多的靈活性。
最簡單的情況下，$.ajax()可以不帶任何參數直接使用。
注意，所有的選項都可以通過$.ajaxSetup()函數來全局設置。
5.1、回調函數
如果要處理$.ajax()得到的數據，則需要使用回調函數。beforeSend、error、dataFilter、success、complete。
- beforeSend 在發送請求之前調用，並且傳入一個XMLHttpRequest作為參數。
- error 在請求出錯時調用。傳入XMLHttpRequest對象，描述錯誤類型的字符串以及一個異常對象（如果有的話）
- dataFilter 在請求成功之后調用。傳入返回的數據以及"dataType"參數的值。並且必須返回新的數據（可能是處理過的）傳遞給success回調函數。
- success 當請求之后調用。傳入返回后的數據，以及包含成功代碼的字符串。
- complete 當請求完成之后調用這個函數，無論成功或失敗。傳入XMLHttpRequest對象，以及一個包含成功或錯誤代碼的字符串。
5.2、數據類型
$.ajax()函數依賴服務器提供的信息來處理返回的數據。如果服務器報告說返回的數據是XML，那么返回的結果就可以用普通的XML方法或者jQuery的選擇器來遍歷。如果見得到其他類型，比如HTML，則數據就以文本形式來對待。
通過dataType選項還可以指定其他不同數據處理方式。除了單純的XML，還可以指定 html、json、jsonp、script或者text。
其中，text和xml類型返回的數據不會經過處理。數據僅僅簡單的將XMLHttpRequest的responseText或responseHTML屬性傳遞給success回調函數，
'''注意'''，我們必須確保網頁服務器報告的MIME類型與我們選擇的dataType所匹配。比如說，XML的話，服務器端就必須聲明 text/xml 或者 application/xml 來獲得一致的結果。
如果指定為html類型，任何內嵌的JavaScript都會在HTML作為一個字符串返回之前執行。類似的，指定script類型的話，也會先執行服務器端生成JavaScript，然后再把腳本作為一個文本數據返回。
如果指定為json類型，則會把獲取到的數據作為一個JavaScript對象來解析，並且把構建好的對象作為結果返回。為了實現這個目的，他首先嘗試使用JSON.parse()。如果瀏覽器不支持，則使用一個函數來構建。JSON數據是一種能很方便通過JavaScript解析的結構化數據。如果獲取的數據文件存放在遠程服務器上（域名不同，也就是跨域獲取數據），則需要使用jsonp類型。使用這種類型的話，會創建一個查詢字符串參數 callback=? ，這個參數會加在請求的URL后面。服務器端應當在JSON數據前加上回調函數名，以便完成一個有效的JSONP請求。如果要指定回調函數的參數名來取代默認的callback，可以通過設置$.ajax()的jsonp參數。
注意，JSONP是JSON格式的擴展。他要求一些服務器端的代碼來檢測並處理查詢字符串參數。
如果指定了script或者jsonp類型，那么當從服務器接收到數據時，實際上是用了<script>標簽而不是XMLHttpRequest對象。這種情況下，$.ajax()不再返回一個XMLHttpRequest對象，並且也不會傳遞事件處理函數，比如beforeSend。
5.3、發送數據到服務器
默認情況下，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.4、高級選項
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.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.6、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 });
六、視頻與資料下載
本來想一點一點寫完的，不過后面錄了比較全的視頻，大家可以邊看視頻邊參考示例練習：
下載較新版的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.1、DOM大作業
7.2、AJAX大作業
7.3、jQuery UI大作業
自學一個基於bootstrap的UI框架，如layui
將7.2的AJAX大作業整合到UI中，UI框架類型不限
https://www.cnblogs.com/best/p/5782891.html
八、上課示例與本章視頻
8.1、示例源代碼
https://git.coding.net/zhangguo5/jQuery143.git
8.2、視頻
https://www.bilibili.com/video/av24045348/
九、其它
9.1、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.2、新增用戶
<!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.3、刪除與多刪除
代碼：
<!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.4、更新與驗證
示例：
<!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.5、打字游戲
代碼：
<!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.6、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.7、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.8、序列化與反序列化
示例下載：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.9、原生AJAX
api幫助： https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
參考示例：https://www.cnblogs.com/best/p/6196202.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 的屬性。
| 屬性 | 類型 | 描述 | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
Function? |
一個JavaScript函數對象，當readyState屬性改變時會調用它。回調函數會在user interface線程中調用。
警告: 不能在本地代碼中使用. 也不應該在同步模式的請求中使用.
|
||||||||||||||||||
readyState |
unsigned short |
請求的五種狀態
|
||||||||||||||||||
response |
varies | 響應實體的類型由 |
||||||||||||||||||
responseText |
DOMString |
此次請求的響應為文本，或是當請求未成功或還未發送時為 null。只讀。 |
||||||||||||||||||
responseType |
XMLHttpRequestResponseType |
設置該值能夠改變響應類型。就是告訴服務器你期望的響應格式。
|
||||||||||||||||||
responseXML |
Document? |
本次請求的響應是一個
注意: 如果服務器不支持
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)。 默認為
注意: 這不會影響同站(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 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 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
注意: 當這個屬性被開啟，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()方法代替.
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對象.
[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.10、原生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.11、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.12、artDialog彈出層
幫助：http://aui.github.io/artDialog/doc/index.html
應用：https://www.cnblogs.com/best/p/6196202.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.13、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.14、在線可視化布局系統
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>
結果：
