瘋狂前端開發講義 — jQuery + AngularJS + Bootstrap 前端開發實戰

李剛

十多年的軟件開發從業經驗，瘋狂軟件教育中心教學總監。瘋狂Java實訓營創始人，瘋狂Java體係原創圖書作者。廣東技術師範學院計算機科學系的兼職副教授，51CTO專家門診特邀嘉賓。

培訓的學生已在華為、IBM、阿里軟件、網易、電信盈科等名企就職。國內著名高端IT技術作家，已出版《瘋狂Java講義》《瘋狂Android講義》《輕量級Java EE企業應用實戰》《瘋狂iOS講義（基礎篇）（高級篇）》《瘋狂Swift講義》《瘋狂Ajax講義》《瘋狂XML講義》《經典Java EE企業應用實戰》《Struts 2.x**指南》《瘋狂HTML 5/CSS 3/JavaScript講義》等著作。

其中瘋狂Java體系圖書均已沉澱多年、贏得極高的市場認同、多次重印成為超級暢銷圖書，並被多所“985”“211”高校選作教材，不少圖書已被翻譯成繁體中文版、 授權到中國台灣地區。

第1章前端開發與Ajax技術1 

1.1重新思考Web應用2 
1.1.1應用系統的發展史2 
1.1.2傳統Web應用的優勢和缺點3 
1.2重新設計Web應用4 
1.2.1富Internet應用4 
1.2. 2改進的服務器通信5 
1.2.3豐富的客戶端交互6 
1.3前端開發介紹7 
1.3.1 XMLHttpRequest簡介7 
1.3.2前端開發的核心技術7 
1.3.3前端Ajax的特徵9 
1.3.4 Ajax帶來的優勢10 
1.4前端開發體驗：Ajax聊天室11 
1.4.1實現業務邏輯組件12 
1.4.2註冊、登錄控制器15 
1.4.3註冊、登錄視圖16 
1.4.4異步發送請求17 
1.4.5聊天控制器18 
1.4.6解析服務器響應21 
1.4.7何時發送請求21 
1.5前端開發的技術難點24 
1.6本章小結25 

第2章HTML 5增強的XMLHttpRequest對象26 

2.1 XMLHttpRequest對象的方法和屬性27 
2.1.1 XMLHttpRequest對象的方法27 
2.1.2 XMLHttpRequest對象的屬性30
2.2.3 XMLHttpRequest對象的事件32 
2.2發送請求33 
2.2.1發送簡單請求33 
2.2.2發送GET請求34 
2.2.3發送POST請求36 
2.2.4發送XML請求37 
2.2.5發送表單數據40 
2.2.6發送Blob對象42 
2.3處理響應44 
2.3.1處理響應的時機44 
2.3.2使用文本響應44 
2.3.3使用JSON響應45 
2.3.4使用Blob或ArrayBuffer響應48 
2.4 XMLHttpRequest對象的運行週期50 
2.5跨域請求和安全性問題50 
2.5.1跨域請求50 
2.5.2安全性問題53 
2.5.3性能問題54 
2.6本章小結56 

第3章jQuery庫詳解57 

3.1 jQuery入門58 
3.1.1理解jQuery的設計58 
3.1. 2下載和安裝jQuery 59 
3.1.3讓jQuery與其他JavaScript庫共存60 
3.2獲取jQuery對象61 
3.2.1 jQuery核心函數61 
3.2.2 jQuery與jQuery.holdReady 62
3.2.3以CSS選擇器訪問DOM元素63 
3.2.4以偽類選擇器訪問DOM元素65 
3.2.5表單相關的選擇器70 
3.3 jQuery操作類數組的工具方法72 
3.3.1過濾相關方法74 
3.3. 2仿DOM導航查找的相關方法76 
3.3.3串聯方法78 
3.4 jQuery支持的方法79 
3.4.1 jQuery命名空間的方法80 
3.4.2數據存儲的相關方法83 
3.4.3操作屬性的相關方法84 
3.4. 4操作CSS屬性的相關方法86 
3.4.5操作元素內容的相關方法89 
3.4.6操作DOM節點的相關方法90 
3.5 jQuery事件相關方法96 
3.5.1綁定事件處理函數96 
3.5.2特定事件相關的方法98 
3.5.3事件對象99 
3.6動畫效果相關的方法100 
3.6.1簡單動畫和復雜動畫100 
3.6.2操作動畫隊列103 
3.7 jQuery的回調支持104 
3.7.1回調支持的基本用法104 
3.7.2創建Callbacks對象支持的選項106 
3.8 Ajax相關方法108 
3.8.1三個工具方法108 
3.8.2使用load方法109
3.8.3 jQuery.ajax(options)與jQuery.ajaxSetup(options) 111 
3.8.4使用get/post方法112 
3.9 jQuery的Deferred對象115 
3.9.1 jQuery的異步調用115 
3.9.2為多個耗時操作指定回調函數119 
3.9.3為普通對象增加Defered接口119 
3.9.4 jQuery對象的promise方法120 
3.10擴展jQuery和jQuery插件121 
3.11本章小結122 

第4章基於jQuery的應用：電子相冊系統123 

4.1實現持久層124 
4.1.1實現持久化類124 
4.1.2配置SessionFactory 126 
4.2實現DAO組件127 
4.2.1開發通用DAO組件127 
4.2.2 DAO接口定義130 
4.2.3完成DAO組件的實現類131 
4.3實現業務邏輯層132 
4.3.1實現業務邏輯組件132 
4.3.2配置業務邏輯組件134 
4.4實現客戶端調用135 
4.4.1訪問業務邏輯組件135 
4.4.2處理用戶登錄136 
4.4.3獲得用戶相片列表138 
4.4.4處理翻頁140
4.4.5使用jQuery實現文件上傳141 
4.4.6加載頁面時的處理144 
4.5本章小結145 

第5章AngularJS詳解147 

5.1 AngularJS入門148 
5.1.1理解AngularJS的基本設計148 
5.1.2下載和安裝AngularJS 149 
5.2表達式150 
5.2.1簡單表達式150 
5.2.2複合對象表達式151 
5.2.3 AngularJS表達式的容錯性152 
5.2.4 AngularJS表達式與JavaScript表達式152 
5.3模塊與控制器153 
5.3.1模塊的加載153 
5.3.2控制器初始化$scope對象155 
5.3.3 $rootScope作用域157 
5.3.4 $watch方法的使用158 
5.4過濾器159 
5.4.1內置過濾器159 
5.4.2在表達式中使用過濾器160 
5.4.3在指令中使用過濾器162 
5.4.4自定義過濾器162 
5.5函數API 164 
5.5.1擴展型函數164 
5.5.2 jqLit​​e函數168 
5.5.3判斷型函數169 
5.6指令170
5.6.1表單相關的指令170 
5.6.2表單的輸入校驗175 
5.6.3事件相關的指令178 
5.6.4流程控制相關的指令179 
5.6.5綁定相關的指令183 
5.6.5 DOM及DOM狀態相關指令187 
5.6.6自定義指令193 
5.6.7自定義指令的scope屬性195 
5.6.8自定義指令的transclude屬性197 
5.6.9自定義指令的link和compile屬性198 
5.6.10自定義指令的controller和controllerAs屬性202 
5.6.11自定義指令的require屬性203 
5.7調用內置服務205 
5.7.1 $animate服務205 
5.7.2 $cacheFactory服務207 
5.7.3 $compile服務209 
5.7.4 $document、$window、$ timeout、$interval和$rootElement 211 
5.7.5 $parse服務214 
5.7.6 $interpolate服務214 
5.7.7 $log服務215 
5.7.8 $q服務216 
5.7.9 $templateCache服務218 
5.8自定義服務219
5.8.1使用factory()方法創建自定義服務219 
5.8.2使用service()方法創建自定義服務220 
5.8.3使用provider()方法創建自定義服務221 
5.8.4使用$provide服務創建自定義服務223 
5.8.5在過濾器中使用自定義服務225 
5.9依賴注入226 
5.9.1依賴注入機制簡介226 
5.9.2使用$injector對象獲取組件228 
5.9.3隱式依賴注入230 
5.9.4行內數組式依賴注入230 
5.9.5標記式依賴注入231 
5.10與服務器交互232 
5.10.1 $http服務232 
5.10.2 $http的快捷方法235 
5.10.3使用$http上傳文件237 
5.10.4使用$resource服務239 
5.11多視圖和路由240 
5.11.1使用$routeProvider配置路由規則240 
5.11.2創建多視圖242 
5.11.3通過路由切換視圖244 
5.11.4使用$location實現多視圖切換246 
5.12使用ui-router框架實現多視圖248 
5.12.1 ui-router的下載和安裝248 
5.12.1使用$stateProvider配置路由248
5.12.2多視圖切換與$state 250 
5.12.3多個命名的嵌套視圖252 
5.13本章小結255 

第6章Bootstrap全局樣式256 

6.1 Bootstrap 257 
6.1.1 Bootstrap簡介257 
6.1.2下載和安裝Bootstrap 257 
6.2網格佈局260 
6.2.1網格佈局基礎261 
6.2.2多餘的列另起一行264 
6.2.3響應式列重置264 
6.2.4單元格偏移266 
6.2.5單元格排序267 
6.2.6嵌套網格268 
6.3 Less和mixin 269 
6.3.1 Less簡介269 
6.3.2 Less的兩種用法270 
6.3.3 Less的變量和運算符274 
6.3.4 mixin 274 
6.3.5內嵌規則275 
6.3.6 Bootstrap網格系統的變量和mixin 276 
6.4 Bootstrap排版相關樣式278 
6.4.1標題元素和样式278 
6.4.2段落279 
6.4.3增強的HTML元素280 
6.4.4對齊282 
6.4.5改變大小寫283 
6.4.6列表283
6.5表格相關樣式286 
6.5.1基礎表格286 
6.5.2條紋表格287 
6.5.3邊框表格287 
6.5.4鼠標高亮288 
6.5.5緊湊型表格289 
6.5.6響應式表格289 
6.5.7表格行狀態290 
6.6圖片和圖標291 
6.6.1圖片相關樣式291 
6.6.2圖標293 
6.7輔助樣式294 
6.7.1情境背景色294 
6.7.2情境文本顏色295 
6.7.3關閉按鈕和三角箭頭295 
6.7.4快速浮動296 
6.7.5顯示或隱藏內容296 
6.7.6屏幕閱讀器和鍵盤導航297 
6.7.7圖片替換297 
6.8響應式佈局相關樣式297 
6.8.1顯示/隱藏相關樣式298 
6.8.2打印相關樣式299 
6.9表單相關樣式299 
6.9.1基礎表單299 
6.9.2行內表單300 
6.9.3水平表單302 
6.9.4多選框和單選框303 
6.9.5表單控件的大小305 
6.9.6靜態控件307 
6.9.7表單控件的狀態309
6.9.8幫助文本309 
6.9.9校驗狀態310 
6.9.10校驗狀態的圖標311 
6.10本章小結313 

第7章Bootstrap內置組件314 

7.1按鈕315 
7.1.1按鈕大小316 
7.1.2按鈕狀態317 
7.2下拉菜單319 
7.2.1對齊321 
7.2.2禁用菜單項322 
7.2.3按鈕式下拉菜單323 
7.2.4分裂式按鈕下拉菜單324 
7.2.5大小326 
7.3按鈕組327 
7.3.1基本按鈕組327 
7.3.2工具欄328 
7.3.3控制按鈕組的大小329 
7.3.4按鈕組嵌套下拉菜單329 
7.3.5兩端對齊的按鈕組331 
7.4輸入框組332 
7.4.1基本輸入框組332 
7.4.2控制輸入框組的大小334 
7.4.3單選框或多選框作為附加元素335 
7.4.4按鈕式下拉菜單作為附加元素336 
7.4.5多按鈕337 
7.5導航338 
7.5.1簡單導航的基礎樣式338 
7.5. 2兩端對齊340 
7.5.3嵌套下拉菜單340
7.5.4路徑導航341 
7.5.5基礎導航條342 
7.5.6導航條中的品牌圖標344 
7.5.7導航條中的按鈕344 
7.5.8導航條中的表單345 
7.5.9導航條中的文本和鏈接346 
7.5.10導航條中的組件的排列方式347 
7.5.11設置導航條的位置347 
7.5.12響應式導航條349 
7.5.13分頁導航351 
7.5.14控制分頁導航的大小352 
7.5.15翻頁導航352 
7.6標籤和徽章353 
7.6.1標籤354 
7.6.2徽章355 
7.7面板355 
7.7.1面板的基礎結構355 
7.7.2面板嵌套表格358 
7.7.3面板嵌套列表組359 
7.8巨幕、頁頭和Well 361 
7.8.1巨幕361 
7.8.2頁頭362 
7.8.3 well 362 
7.9縮略圖363 
7.10警告框365 
7.10.1警告框基礎365 
7.10.2警告框中的鏈接367 
7.11進度條367 
7.11.1各種樣式的進度條367
7.11.2帶進度值的進度條369 
7.11.3動畫效果370 
7.11.4多進度效果371 
7.12媒體對象372 
7.12.1媒體對象的基本組成372 
7.12.2對齊方式374 
7.12.3嵌套媒體對象375 
7.12.4媒體對象列表376 
7.13列表組377 
7.13.1列表組基礎378 
7.13.2鏈接列表組379 
7.13.3按鈕列表組379 
7.13.4列表項的狀態380 
7.13.5定制內容381 
7.14本章小結381 

第8章Bootstrap的JS插件382 

8.1插件庫概述383 
8.1.1使用插件的兩種方式383 
8.1.2解決命名衝突384 
8.2對話框384 
8.2.1靜態對話框384 
8.2.2使用data-*屬性彈出對話框387 
8.2.3使用JS彈出對話框388 
8.2.4對話框事件389 
8.2.5基於事件源改變對話框內容390 
8.3下拉菜單392 
8.3.1使用data-*屬性觸發下拉菜單392 
8.3.2使用JS觸發下拉菜單393
8.3.3下拉菜單事件394 
8.4滾動監聽395 
8.4.1通過data-*屬性實現滾動監聽395 
8.4.2使用JS實現滾動監聽397 
8.5標籤頁398 
8.5.1靜態標籤頁398 
8.5.2使用data-*屬性切換標籤頁399 
8.5.3使用JS切換標籤頁401 
8.5.4膠囊式標籤頁402 
8.5.5標籤頁事件403 
8.6工具提示404 
8.6.1使用data-*屬性和JS觸發工具提示405 
8.6.2工具提示支持的屬性406 
8.6.3工具提示的事件407 
8.7彈出框408 
8.7.1使用data-*屬性和JS觸發彈出框409 
8.7.2焦點觸發的彈出框411 
8.7.3彈出框支持的屬性411 
8.7.4彈出框的事件412 
8.8警告框412 
8.8.1使用data-*屬性關閉警告框412 
8.8.2使用JS關閉警告框413 
8.8.3警告框事件413 
8.9按鈕414 
8.9.1切換按鈕狀態414 
8.9.2單選按鈕或多選按鈕414 
8.9.2使用JS方法改變按鈕文本416 
8.10折疊插件416
8.10.1簡單折疊效果416 
8.10.2手風琴效果417 
8.10.3使用JS觸發折疊元素419 
8.10.4折疊插件的相關事件420 
8.11輪播圖420 
8.11.1靜態輪播圖420 
8.11.2通過data- *屬性激活輪播圖422 
8.11.3通過JS觸發輪播圖424 
8.11.4輪播圖事件425 
8.12本章小結426 

第9章Angular+Bootstrap整合開發：圖書管理系統427 

9.1總體說明和概要設計428 
9.1 .1系統的總體架構設計428 
9.1.2數據庫設計429 
9.2實現Hibernate持久化類430 
9.2.1設計Domain Object 430 
9.2.2實現Domain Object 431 
9.3 DAO層實現435 
9.3.1 DAO的基礎配置435 
9.3. 2實現DAO組件436 
9.3.3部署DAO組件437 
9.4業務邏輯層實現438 
9.4.1設計業務邏輯組件439 
9.4.2依賴注入DAO組件441 
9.4.3業務邏輯組件的異常處理441 
9.4.4實現業務邏輯組件442 
9.4.5事務管理443
9.4.6配置業務層組件444 
9.5前端整合開發445 
9.5.1定義AngularJS路由445 
9.5.2 Spring MVC控制器的異常處理447 
9.5.3管理圖書種類447 
9.5.4修改圖書種類451 
9.5.5管理圖書453 
9.5.6修改圖書457 
9.5.7圖書入庫459 
9.5.8銷售圖書465 
9.6本章小結470 

第10章jQuery+Bootstrap整合開發：電子拍賣系統471 

10.1總體說明和概要設計472 
10.1.1系統的總體架構設計472 
10.1.2數據庫設計473 
10.2實現Hibernate持久化類474 
10.2.1設計Domain Object 474 
10.2.2實現Domain Object 475 
10.3 DAO層實現479 
10.3.1 DAO的基礎配置480 
10.3.2實現DAO組件481 
10.3.3部署DAO組件484 
10.4業務邏輯層實現485 
10.4.1設計業務邏輯組件485 
10.4.2依賴注入DAO組件487 
10.4.3業務邏輯組件的異常處理488
10.4.4處理用戶競價489 
10.4.5判斷拍賣物品狀態491 
10.4.6事務管理492 
10.4.7配置業務層組件493 
10.5開發前端JSON接口494 
10.5.1初始化Spring容器494 
10.5.2開發Spring MVC控制器496 
10.5.3處理前端權限控制498 
10.6前端整合開發500 
10.6.1定義系統首頁500 
10.6.2瀏覽所有流拍物品502 
10.6.3處理用戶登錄503 
10.6.4管理物品507 
10.6.6管理物品種類512 
10.6.7查看競得物品515 
10.6.8查看自己的競價記錄517 
10.6.9瀏覽拍賣物品518 
10.6.10參與競價520 
10.7本章小結524