|
|
|
隨著互聯網技術的不斷發展，HTML5、CSS3、JavaScript語言以及它們的相關技術越來越受到人們的關注，前端框架層出不窮。jQuery和Bootstrap作為前端框架中的代表，為廣大開發者提供了諸多便利，持久地佔據著Web開發技術中的重要位置。本書通過豐富的實例詳細講解jQuery和Bootstrap框架的相關技術。jQuery篇主要包括jQuery基礎、如何使用jQuery控制DOM、簡化AJAX操作、製作動畫與以及jQuery外掛程式等內容。Bootstrap篇主要包括工具類、柵格佈局、表單樣式和元件庫等內容。
本書使用大量的案例幫助讀者理解這兩個框架的使用，同時演示綜合使用這兩個框架進行Web開發的方法。本書內容翔實、結構框架清晰、講解循序漸進，並注重各章以及實例之間的呼應與對照。本書既可以作為高等院校相關專業的網頁設計與製作、前端開發等課程的教材，也可以作為jQuery和Bootstrap初學者的入門用書，還可以作為用戶進一步學習前端框架的參考資料。
溫謙
全棧工程師，前沿科技創始人，現從事企業大型軟體系統的分析與開發工作，擁有超20年的軟體發展經驗，主持並成功開發了多個複雜系統，專案實戰經驗豐富。
常銷書作者，畢業於華中科技大學計算器專業，主編網頁設計與軟體發展相關領域圖書共12本，圖書編寫經驗頗豐，其中《HTML+CSS網頁設計與佈局從入門到精通》《網頁設計與佈局專案化教程（HTML+CSS+DIV）》等圖書常銷10餘年，被百餘所高校選作教材。
【上篇】jQuery篇
第1章 jQuery基礎
1.1jQuery概述 2
1.1.1jQuery簡介 2
1.1.2下載並使用jQuery 3
1.2jQuery的＄ 4
1.2.1選擇器 4
1.2.2功能函數的首碼 6
1.2.3[removed] 6
1.2.4創建DOM元素 7
1.2.5擴展jQuery 8
1.2.6衝突問題 9
1.3使用VSCode編寫第一個jQuery頁面 10
1.3.1創建基礎的HTML文檔 10
1.3.2編寫jQuery代碼 11
本章小結 12
習題1 12
第2章 HTML5、CSS3和JavaScript基礎知識
2.1ES6的新特性 13
2.1.1let關鍵字 14
2.1.2const關鍵字 14
2.1.3for…of迴圈 15
2.1.4字串範本 15
2.1.5參數預設值 16
2.1.6類與繼承 16
2.1.7箭頭函數 17
2.1.8剩餘運算子與剩餘參數 19
2.1.9展開運算子 19
2.1.10數組的解構賦值 19
2.1.11對象的解構賦值 20
2.1.12模組 20
2.2HTML5新增的語義化標記 21
2.3CSS3引入的常用新特性 23
2.3.1新增的常用樣式屬性 23
2.3.2新增的佈局方式——彈性盒子 25
2.3.3新增的佈局方式——網格 26
本章小結 27
習題2 27
第3章 jQuery選擇器與管理結果集
3.1選擇器 28
3.1.1屬性選擇器 28
3.1.2包含選擇器 31
3.1.3位置選擇器 32
3.1.4過濾選擇器 35
3.1.5反向選擇器 36
3.2遍歷DOM 37
3.2.1children() 37
3.2.2parent()和parents() 39
3.2.3siblings() 41
3.3管理結果集 43
3.3.1獲取選中元素的個數 43
3.3.2提取元素 44
3.3.3添加、刪除、過濾 46
3.3.4查找 49
3.3.5遍歷 50
3.4jQuery鏈 51
本章小結 51
習題3 51
第4章 使用jQuery控制DOM
4.1網頁中的DOM框架 54
4.2DOM中的節點 54
4.2.1元素節點 55
4.2.2文本節點 55
4.2.3屬性節點 55
4.3標記的屬性 55
4.3.1獲取屬性的值 56
4.3.2設置屬性的值 57
4.3.3刪除屬性 59
4.4元素的樣式 59
4.4.1添加、刪除CSS類 60
4.4.2動態切換 60
4.4.3直接獲取、設置樣式 61
4.5頁面的元素 63
4.5.1直接獲取、編輯內容 63
4.5.2添加元素 64
4.5.3刪除元素 68
4.5.4克隆元素 70
4.6表單元素的值 71
4.6.1獲取表單元素的值 72
4.6.2設置表單元素的值 73
4.7元素的尺寸 74
4.8元素的位置 76
4.8.1offset()方法 76
4.8.2position()方法 77
4.8.3scrollTop()方法 78
本章小結 79
習題4 79
第5章 jQuery事件
5.1事件與事件流 80
5.2事件監聽 81
5.2.1bind()方法 81
5.2.2one()方法 83
5.2.3JavaScript的事件監聽 84
5.3事件刪除 85
5.4事件物件 87
5.5事件觸發 88
5.6事件的動態交替 89
5.6.1hover事件的交替 89
5.6.2click事件的交替 90
5.7事件委託 91
5.8動手練習：速食線上 93
5.8.1框架搭建 93
5.8.2添加事件 94
5.8.3樣式 97
本章小結 99
習題5 99
第6章 jQuery的功能函數
6.1處理JavaScript物件 101
6.1.1遍歷 101
6.1.2數據過濾 103
6.1.3數組的轉化 104
6.1.4數組元素的查找 107
6.2＄.data()方法 108
6.3＄.extend()方法 109
6.4類型判斷 110
本章小結 112
習題6 112
第7章 jQuery與AJAX
7.1認識AJAX 113
7.1.1AJAX的基本概念 113
7.1.2AJAX的組成 115
7.2獲取非同步數據 115
7.2.1傳統方法 116
7.2.2jQuery的load()方法 117
7.3GET與POST 119
7.4控制AJAX 121
7.4.1設置AJAX訪問伺服器的細節 121
7.4.2全域設定AJAX 123
7.4.3AJAX事件 124
7.4.4實例：模擬百度的數據載入 126
7.5實例：利用jQuery製作自動提示的文字方塊 128
7.5.1框架結構 128
7.5.2匹配用戶輸入 129
7.5.3顯示/清除提示框 130
本章小結 133
習題7 133
第8章 利用jQuery製作動畫與
8.1元素的顯示和隱藏 135
8.1.1show()和hide() 135
8.1.2實例：多級菜單 136
8.1.3toggle() 138
8.2淡入淡出的 138
8.2.1再探討show()、hide()和toggle() 139
8.2.2fadeIn()和fadeOut() 140
8.2.3自訂變化透明度 141
8.3幻燈片 142
8.4自訂動畫 144
本章小結 145
習題8 146
第9章 jQuery外掛程式
9.1模擬加入購物車 147
9.1.1滑鼠拖曳 147
9.1.2拖入購物車 151
9.2流行的Tab功能表 152
本章小結 155
習題9 155
第10章 綜合實例一：網頁留言本
10.1基本留言本 156
10.2改用AJAX方式實現留言本 158
10.2.1讀取留言列表 158
10.2.2保存並返回新留言 159
10.2.3留言本入口頁面 159
10.3對表單數據進行驗證 161
本章小結 162
【下篇】Bootstrap篇
第11章 Bootstrap基礎
11.1Bootstrap是什麼 164
11.2下載並使用Bootstrap 165
11.3常用樣式 167
11.3.1文本樣式 167
11.3.2圖片樣式 171
11.3.3表格樣式 172
11.4圖示庫 174
本章小結 176
習題11 176
第12章 CSS原子化與工具類
12.1CSS原子化理念 177
12.2Bootstrap的工具類規則 181
12.3顏色工具類 182
12.4尺寸工具類 184
12.4.1font-size 184
12.4.2padding和margin 184
12.4.3width和height 185
12.5佈局工具類 186
12.5.1display 186
12.5.2flexbox 186
12.5.3實例：製作巡覽列 187
12.5.4float 190
12.6其他工具類 191
12.7動手練習：創建嵌套的留言佈局 192
12.7.1搭建框架 193
12.7.2用工具類佈局 193
12.7.3頭像放在右側 194
12.7.4實現佈局的嵌套 194
本章小結 195
習題12 195
第13章 Bootstrap的柵格佈局
13.1柵格佈局基礎 196
13.1.1柵格佈局的理念 196
13.1.2實例 198
13.1.3理解螢幕的解析度概念 204
13.2基本用法 206
13.2.1回應式中斷點 206
13.2.2常規用法 207
13.2.3設置行間距與列間距 209
13.3用法 212
13.3.1柵格嵌套 212
13.3.2流式佈局 213
13.3.3設定列寬 214
13.3.4列的偏移與對齊 216
本章小結 219
習題13 219
第14章 Bootstrap的表單樣式
14.1表單控制項樣式 221
14.1.1輸入框 221
14.1.2選擇框 224
14.1.3單選框與核取方塊 225
14.1.4滑動條輸入 227
14.1.5輸入組 227
14.2表單佈局 228
14.3表單校驗 230
14.3.1用戶端校驗 230
14.3.2伺服器端校驗 232
14.4動手練習：創建一個下單結帳頁面 233
本章小結 234
習題14 235
第15章 Bootstrap的組件庫
15.1按鈕 236
15.2回饋和提示類組件 238
15.2.1警告框 238
15.2.2載入中 238
15.2.3輕量提示 239
15.2.4模態框 242
15.3巡覽列 244
15.4卡片 248
15.5輪播圖 252
本章小結 253
習題15 253
第16章 綜合實例二：產品著陸頁
16.1頁面結構分析 256
16.2製作頁頭和頁腳 257
16.3製作第一屏 258
16.4制作圖文介紹 259
16.5製作課程特色 261
16.6適配平板電腦端 262
16.6.1適配頁頭 263
16.6.2適配第一屏 263
16.6.3適配圖文介紹 264
16.6.4適配課程特色 265
16.7適配PC端 266
本章小結 268
第17章 綜合實例三：網路相冊
17.1分析架構 269
17.2模組拆分 270
17.2.1縮略圖排列 270
17.2.2縮略圖提示 272
17.2.3顯示大圖 273
17.3功能細化 273
17.3.1按一下縮略圖顯示大圖 273
17.3.2流覽大圖 274
17.3.3按一下大圖切換為下一幅圖 276
本章小結 276
