瘋狂前端開發(fā)講義：jQuery+AngularJS+Bootstrap前端開發(fā)實(shí)戰(zhàn)

第1章　前端開發(fā)與Ajax技術(shù) 1
1．1　重新思考Web應(yīng)用 2
1．1．1　應(yīng)用系統(tǒng)的發(fā)展史 2
1．1．2　傳統(tǒng)Web應(yīng)用的優(yōu)勢(shì)和缺點(diǎn) 3
1．2　重新設(shè)計(jì)Web應(yīng)用 4
1．2．1　富Internet應(yīng)用 4
1．2．2　改進(jìn)的服務(wù)器通信 5
1．2．3　豐富的客戶端交互 6
1．3　前端開發(fā)介紹 7
1．3．1　XMLHttpRequest簡(jiǎn)介 7
1．3．2　前端開發(fā)的核心技術(shù) 7
1．3．3　前端Ajax的特征 9
1．3．4　Ajax帶來的優(yōu)勢(shì) 10
1．4　前端開發(fā)體驗(yàn)：Ajax聊天室 11
1．4．1　實(shí)現(xiàn)業(yè)務(wù)邏輯組件 12
1．4．2　注冊(cè)、登錄控制器 15
1．4．3　注冊(cè)、登錄視圖 16
1．4．4　異步發(fā)送請(qǐng)求 17
1．4．5　聊天控制器 18
1．4．6　解析服務(wù)器響應(yīng) 21
1．4．7　何時(shí)發(fā)送請(qǐng)求 21
1．5　前端開發(fā)的技術(shù)難點(diǎn) 24
1．6　本章小結(jié) 25
第2章　HTML 5增強(qiáng)的XMLHttpRequest對(duì)象 26
2．1　XMLHttpRequest對(duì)象的方法和屬性 27
2．1．1　XMLHttpRequest對(duì)象的方法 27
2．1．2　XMLHttpRequest對(duì)象的屬性 30
2．2．3　XMLHttpRequest對(duì)象的事件 32
2．2　發(fā)送請(qǐng)求 33
2．2．1　發(fā)送簡(jiǎn)單請(qǐng)求 33
2．2．2　發(fā)送GET請(qǐng)求 34
2．2．3　發(fā)送POST請(qǐng)求 36
2．2．4　發(fā)送XML請(qǐng)求 37
2．2．5　發(fā)送表單數(shù)據(jù) 40
2．2．6　發(fā)送Blob對(duì)象 42
2．3　處理響應(yīng) 44
2．3．1　處理響應(yīng)的時(shí)機(jī) 44
2．3．2　使用文本響應(yīng) 44
2．3．3　使用JSON響應(yīng) 45
2．3．4　使用Blob或ArrayBuffer響應(yīng) 48
2．4　XMLHttpRequest對(duì)象的運(yùn)行周期 50
2．5　跨域請(qǐng)求和安全性問題 50
2．5．1　跨域請(qǐng)求 50
2．5．2　安全性問題 53
2．5．3　性能問題 54
2．6　本章小結(jié) 56
第3章　jQuery庫(kù)詳解 57
3．1　jQuery入門 58
3．1．1　理解jQuery的設(shè)計(jì) 58
3．1．2　下載和安裝jQuery 59
3．1．3　讓jQuery與其他JavaScript庫(kù)共存 60
3．2　獲取jQuery對(duì)象 61
3．2．1　jQuery核心函數(shù) 61
3．2．2　jQuery與jQuery．holdReady 62
3．2．3　以CSS選擇器訪問DOM元素 63
3．2．4　以偽類選擇器訪問DOM元素 65
3．2．5　表單相關(guān)的選擇器 70
3．3　jQuery操作類數(shù)組的工具方法 72
3．3．1　過濾相關(guān)方法 74
3．3．2　仿DOM導(dǎo)航查找的相關(guān)方法 76
3．3．3　串聯(lián)方法 78
3．4　jQuery支持的方法 79
3．4．1　jQuery命名空間的方法 80
3．4．2　數(shù)據(jù)存儲(chǔ)的相關(guān)方法 83
3．4．3　操作屬性的相關(guān)方法 84
3．4．4　操作CSS屬性的相關(guān)方法 86
3．4．5　操作元素內(nèi)容的相關(guān)方法 89
3．4．6　操作DOM節(jié)點(diǎn)的相關(guān)方法 90
3．5　jQuery事件相關(guān)方法 96
3．5．1　綁定事件處理函數(shù) 96
3．5．2　特定事件相關(guān)的方法 98
3．5．3　事件對(duì)象 99
3．6　動(dòng)畫效果相關(guān)的方法 100
3．6．1　簡(jiǎn)單動(dòng)畫和復(fù)雜動(dòng)畫 100
3．6．2　操作動(dòng)畫隊(duì)列 103
3．7　jQuery的回調(diào)支持 104
3．7．1　回調(diào)支持的基本用法 104
3．7．2　創(chuàng)建Callbacks對(duì)象支持的選項(xiàng) 106
3．8　Ajax相關(guān)方法 108
3．8．1　三個(gè)工具方法 108
3．8．2　使用load方法 109
3．8．3　jQuery．a(chǎn)jax(options)與jQuery．a(chǎn)jaxSetup(options) 111
3．8．4　使用get/post方法 112
3．9　jQuery的Deferred對(duì)象 115
3．9．1　jQuery的異步調(diào)用 115
3．9．2　為多個(gè)耗時(shí)操作指定回調(diào)函數(shù) 119
3．9．3　為普通對(duì)象增加Defered接口 119
3．9．4　jQuery對(duì)象的promise方法 120
3．10　擴(kuò)展jQuery和jQuery插件 121
3．11　本章小結(jié) 122
第4章　基于jQuery的應(yīng)用：電子相冊(cè)系統(tǒng) 123
4．1　實(shí)現(xiàn)持久層 124
4．1．1　實(shí)現(xiàn)持久化類 124
4．1．2　配置SessionFactory 126
4．2　實(shí)現(xiàn)DAO組件 127
4．2．1　開發(fā)通用DAO組件 127
4．2．2　DAO接口定義 130
4．2．3　完成DAO組件的實(shí)現(xiàn)類 131
4．3　實(shí)現(xiàn)業(yè)務(wù)邏輯層 132
4．3．1　實(shí)現(xiàn)業(yè)務(wù)邏輯組件 132
4．3．2　配置業(yè)務(wù)邏輯組件 134
4．4　實(shí)現(xiàn)客戶端調(diào)用 135
4．4．1　訪問業(yè)務(wù)邏輯組件 135
4．4．2　處理用戶登錄 136
4．4．3　獲得用戶相片列表 138
4．4．4　處理翻頁 140
4．4．5　使用jQuery實(shí)現(xiàn)文件上傳 141
4．4．6　加載頁面時(shí)的處理 144
4．5　本章小結(jié) 145
第5章　AngularJS詳解 147
5．1　AngularJS入門 148
5．1．1　理解AngularJS的基本設(shè)計(jì) 148
5．1．2　下載和安裝AngularJS 149
5．2　表達(dá)式 150
5．2．1　簡(jiǎn)單表達(dá)式 150
5．2．2　復(fù)合對(duì)象表達(dá)式 151
5．2．3　AngularJS表達(dá)式的容錯(cuò)性 152
5．2．4　AngularJS表達(dá)式與JavaScript表達(dá)式 152
5．3　模塊與控制器 153
5．3．1　模塊的加載 153
5．3．2　控制器初始化$scope對(duì)象 155
5．3．3　$rootScope作用域 157
5．3．4　$watch方法的使用 158
5．4　過濾器 159
5．4．1　內(nèi)置過濾器 159
5．4．2　在表達(dá)式中使用過濾器 160
5．4．3　在指令中使用過濾器 162
5．4．4　自定義過濾器 162
5．5　函數(shù)API 164
5．5．1　擴(kuò)展型函數(shù) 164
5．5．2　jqLite函數(shù) 168
5．5．3　判斷型函數(shù) 169
5．6　指令 170
5．6．1　表單相關(guān)的指令 170
5．6．2　表單的輸入校驗(yàn) 175
5．6．3　事件相關(guān)的指令 178
5．6．4　流程控制相關(guān)的指令 179
5．6．5　綁定相關(guān)的指令 183
5．6．5　DOM及DOM狀態(tài)相關(guān)指令 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　調(diào)用內(nèi)置服務(wù) 205
5．7．1　$animate服務(wù) 205
5．7．2　$cacheFactory服務(wù) 207
5．7．3　$compile服務(wù) 209
5．7．4　$document、$window、$timeout、$interval和$rootElement 211
5．7．5　$parse服務(wù) 214
5．7．6　$interpolate服務(wù) 214
5．7．7　$log服務(wù) 215
5．7．8　$q服務(wù) 216
5．7．9　$templateCache服務(wù) 218
5．8　自定義服務(wù) 219
5．8．1　使用factory()方法創(chuàng)建自定義服務(wù) 219
5．8．2　使用service()方法創(chuàng)建自定義服務(wù) 220
5．8．3　使用provider()方法創(chuàng)建自定義服務(wù) 221
5．8．4　使用$provide服務(wù)創(chuàng)建自定義服務(wù) 223
5．8．5　在過濾器中使用自定義服務(wù) 225
5．9　依賴注入 226
5．9．1　依賴注入機(jī)制簡(jiǎn)介 226
5．9．2　使用$injector對(duì)象獲取組件 228
5．9．3　隱式依賴注入 230
5．9．4　行內(nèi)數(shù)組式依賴注入 230
5．9．5　標(biāo)記式依賴注入 231
5．10　與服務(wù)器交互 232
5．10．1　$http服務(wù) 232
5．10．2　$http的快捷方法 235
5．10．3　使用$http上傳文件 237
5．10．4　使用$resource服務(wù) 239
5．11　多視圖和路由 240
5．11．1　使用$routeProvider配置路由規(guī)則 240
5．11．2　創(chuàng)建多視圖 242
5．11．3　通過路由切換視圖 244
5．11．4　使用$location實(shí)現(xiàn)多視圖切換 246
5．12　使用ui-router框架實(shí)現(xiàn)多視圖 248
5．12．1　ui-router的下載和安裝 248
5．12．1　使用$stateProvider配置路由 248
5．12．2　多視圖切換與$state 250
5．12．3　多個(gè)命名的嵌套視圖 252
5．13　本章小結(jié) 255
第6章　Bootstrap全局樣式 256
6．1　Bootstrap 257
6．1．1　Bootstrap簡(jiǎn)介 257
6．1．2　下載和安裝Bootstrap 257
6．2　網(wǎng)格布局 260
6．2．1　網(wǎng)格布局基礎(chǔ) 261
6．2．2　多余的列另起一行 264
6．2．3　響應(yīng)式列重置 264
6．2．4　單元格偏移 266
6．2．5　單元格排序 267
6．2．6　嵌套網(wǎng)格 268
6．3　Less和mixin 269
6．3．1　Less簡(jiǎn)介 269
6．3．2　Less的兩種用法 270
6．3．3　Less的變量和運(yùn)算符 274
6．3．4　mixin 274
6．3．5　內(nèi)嵌規(guī)則 275
6．3．6　Bootstrap網(wǎng)格系統(tǒng)的變量和mixin 276
6．4　Bootstrap排版相關(guān)樣式 278
6．4．1　標(biāo)題元素和樣式 278
6．4．2　段落 279
6．4．3　增強(qiáng)的HTML元素 280
6．4．4　對(duì)齊 282
6．4．5　改變大小寫 283
6．4．6　列表 283
6．5　表格相關(guān)樣式 286
6．5．1　基礎(chǔ)表格 286
6．5．2　條紋表格 287
6．5．3　邊框表格 287
6．5．4　鼠標(biāo)高亮 288
6．5．5　緊湊型表格 289
6．5．6　響應(yīng)式表格 289
6．5．7　表格行狀態(tài) 290
6．6　圖片和圖標(biāo) 291
6．6．1　圖片相關(guān)樣式 291
6．6．2　圖標(biāo) 293
6．7　輔助樣式 294
6．7．1　情境背景色 294
6．7．2　情境文本顏色 295
6．7．3　關(guān)閉按鈕和三角箭頭 295
6．7．4　快速浮動(dòng) 296
6．7．5　顯示或隱藏內(nèi)容 296
6．7．6　屏幕閱讀器和鍵盤導(dǎo)航 297
6．7．7　圖片替換 297
6．8　響應(yīng)式布局相關(guān)樣式 297
6．8．1　顯示/隱藏相關(guān)樣式 298
6．8．2　打印相關(guān)樣式 299
6．9　表單相關(guān)樣式 299
6．9．1　基礎(chǔ)表單 299
6．9．2　行內(nèi)表單 300
6．9．3　水平表單 302
6．9．4　多選框和單選框 303
6．9．5　表單控件的大小 305
6．9．6　靜態(tài)控件 307
6．9．7　表單控件的狀態(tài) 309
6．9．8　幫助文本 309
6．9．9　校驗(yàn)狀態(tài) 310
6．9．10　校驗(yàn)狀態(tài)的圖標(biāo) 311
6．10　本章小結(jié) 313
第7章　Bootstrap內(nèi)置組件 314
7．1　按鈕 315
7．1．1　按鈕大小 316
7．1．2　按鈕狀態(tài) 317
7．2　下拉菜單 319
7．2．1　對(duì)齊 321
7．2．2　禁用菜單項(xiàng) 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　兩端對(duì)齊的按鈕組 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　導(dǎo)航 338
7．5．1　簡(jiǎn)單導(dǎo)航的基礎(chǔ)樣式 338
7．5．2　兩端對(duì)齊 340
7．5．3　嵌套下拉菜單 340
7．5．4　路徑導(dǎo)航 341
7．5．5　基礎(chǔ)導(dǎo)航條 342
7．5．6　導(dǎo)航條中的品牌圖標(biāo) 344
7．5．7　導(dǎo)航條中的按鈕 344
7．5．8　導(dǎo)航條中的表單 345
7．5．9　導(dǎo)航條中的文本和鏈接 346
7．5．10　導(dǎo)航條中的組件的排列方式 347
7．5．11　設(shè)置導(dǎo)航條的位置 347
7．5．12　響應(yīng)式導(dǎo)航條 349
7．5．13　分頁導(dǎo)航 351
7．5．14　控制分頁導(dǎo)航的大小 352
7．5．15　翻頁導(dǎo)航 352
7．6　標(biāo)簽和徽章 353
7．6．1　標(biāo)簽 354
7．6．2　徽章 355
7．7　面板 355
7．7．1　面板的基礎(chǔ)結(jié)構(gòu) 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　警告框基礎(chǔ) 365
7．10．2　警告框中的鏈接 367
7．11　進(jìn)度條 367
7．11．1　各種樣式的進(jìn)度條 367
7．11．2　帶進(jìn)度值的進(jìn)度條 369
7．11．3　動(dòng)畫效果 370
7．11．4　多進(jìn)度效果 371
7．12　媒體對(duì)象 372
7．12．1　媒體對(duì)象的基本組成 372
7．12．2　對(duì)齊方式 374
7．12．3　嵌套媒體對(duì)象 375
7．12．4　媒體對(duì)象列表 376
7．13　列表組 377
7．13．1　列表組基礎(chǔ) 378
7．13．2　鏈接列表組 379
7．13．3　按鈕列表組 379
7．13．4　列表項(xiàng)的狀態(tài) 380
7．13．5　定制內(nèi)容 381
7．14　本章小結(jié) 381
第8章　Bootstrap的JS插件 382
8．1　插件庫(kù)概述 383
8．1．1　使用插件的兩種方式 383
8．1．2　解決命名沖突 384
8．2　對(duì)話框 384
8．2．1　靜態(tài)對(duì)話框 384
8．2．2　使用data-*屬性彈出對(duì)話框 387
8．2．3　使用JS彈出對(duì)話框 388
8．2．4　對(duì)話框事件 389
8．2．5　基于事件源改變對(duì)話框內(nèi)容 390
8．3　下拉菜單 392
8．3．1　使用data-*屬性觸發(fā)下拉菜單 392
8．3．2　使用JS觸發(fā)下拉菜單 393
8．3．3　下拉菜單事件 394
8．4　滾動(dòng)監(jiān)聽 395
8．4．1　通過data-*屬性實(shí)現(xiàn)滾動(dòng)監(jiān)聽 395
8．4．2　使用JS實(shí)現(xiàn)滾動(dòng)監(jiān)聽 397
8．5　標(biāo)簽頁 398
8．5．1　靜態(tài)標(biāo)簽頁 398
8．5．2　使用data-*屬性切換標(biāo)簽頁 399
8．5．3　使用JS切換標(biāo)簽頁 401
8．5．4　膠囊式標(biāo)簽頁 402
8．5．5　標(biāo)簽頁事件 403
8．6　工具提示 404
8．6．1　使用data-*屬性和JS觸發(fā)工具提示 405
8．6．2　工具提示支持的屬性 406
8．6．3　工具提示的事件 407
8．7　彈出框 408
8．7．1　使用data-*屬性和JS觸發(fā)彈出框 409
8．7．2　焦點(diǎn)觸發(fā)的彈出框 411
8．7．3　彈出框支持的屬性 411
8．7．4　彈出框的事件 412
8．8　警告框 412
8．8．1　使用data-*屬性關(guān)閉警告框 412
8．8．2　使用JS關(guān)閉警告框 413
8．8．3　警告框事件 413
8．9　按鈕 414
8．9．1　切換按鈕狀態(tài) 414
8．9．2　單選按鈕或多選按鈕 414
8．9．2　使用JS方法改變按鈕文本 416
8．10　折疊插件 416
8．10．1　簡(jiǎn)單折疊效果 416
8．10．2　手風(fēng)琴效果 417
8．10．3　使用JS觸發(fā)折疊元素 419
8．10．4　折疊插件的相關(guān)事件 420
8．11　輪播圖 420
8．11．1　靜態(tài)輪播圖 420
8．11．2　通過data-*屬性激活輪播圖 422
8．11．3　通過JS觸發(fā)輪播圖 424
8．11．4　輪播圖事件 425
8．12　本章小結(jié) 426
第9章　Angular+Bootstrap整合開發(fā)：圖書管理系統(tǒng) 427
9．1　總體說明和概要設(shè)計(jì) 428
9．1．1　系統(tǒng)的總體架構(gòu)設(shè)計(jì) 428
9．1．2　數(shù)據(jù)庫(kù)設(shè)計(jì) 429
9．2　實(shí)現(xiàn)Hibernate持久化類 430
9．2．1　設(shè)計(jì)Domain Object 430
9．2．2　實(shí)現(xiàn)Domain Object 431
9．3　DAO層實(shí)現(xiàn) 435
9．3．1　DAO的基礎(chǔ)配置 435
9．3．2　實(shí)現(xiàn)DAO組件 436
9．3．3　部署DAO組件 437
9．4　業(yè)務(wù)邏輯層實(shí)現(xiàn) 438
9．4．1　設(shè)計(jì)業(yè)務(wù)邏輯組件 439
9．4．2　依賴注入DAO組件 441
9．4．3　業(yè)務(wù)邏輯組件的異常處理 441
9．4．4　實(shí)現(xiàn)業(yè)務(wù)邏輯組件 442
9．4．5　事務(wù)管理 443
9．4．6　配置業(yè)務(wù)層組件 444
9．5　前端整合開發(fā) 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　圖書入庫(kù) 459
9．5．8　銷售圖書 465
9．6　本章小結(jié) 470
第10章　jQuery+Bootstrap整合開發(fā)：電子拍賣系統(tǒng) 471
10．1　總體說明和概要設(shè)計(jì) 472
10．1．1　系統(tǒng)的總體架構(gòu)設(shè)計(jì) 472
10．1．2　數(shù)據(jù)庫(kù)設(shè)計(jì) 473
10．2　實(shí)現(xiàn)Hibernate持久化類 474
10．2．1　設(shè)計(jì)Domain Object 474
10．2．2　實(shí)現(xiàn)Domain Object 475
10．3　DAO層實(shí)現(xiàn) 479
10．3．1　DAO的基礎(chǔ)配置 480
10．3．2　實(shí)現(xiàn)DAO組件 481
10．3．3　部署DAO組件 484
10．4　業(yè)務(wù)邏輯層實(shí)現(xiàn) 485
10．4．1　設(shè)計(jì)業(yè)務(wù)邏輯組件 485
10．4．2　依賴注入DAO組件 487
10．4．3　業(yè)務(wù)邏輯組件的異常處理 488
10．4．4　處理用戶競(jìng)價(jià) 489
10．4．5　判斷拍賣物品狀態(tài) 491
10．4．6　事務(wù)管理 492
10．4．7　配置業(yè)務(wù)層組件 493
10．5　開發(fā)前端JSON接口 494
10．5．1　初始化Spring容器 494
10．5．2　開發(fā)Spring MVC控制器 496
10．5．3　處理前端權(quán)限控制 498
10．6　前端整合開發(fā) 500
10．6．1　定義系統(tǒng)首頁 500
10．6．2　瀏覽所有流拍物品 502
10．6．3　處理用戶登錄 503
10．6．4　管理物品 507
10．6．6　管理物品種類 512
10．6．7　查看競(jìng)得物品 515
10．6．8　查看自己的競(jìng)價(jià)記錄 517
10．6．9　瀏覽拍賣物品 518
10．6．10　參與競(jìng)價(jià) 520
10．7　本章小結(jié) 524