jQuery+Bootstrap Web開發(fā)案例教程
定 價(jià):69.8 元
- 作者:前沿科技 溫謙
- 出版時間:2022/4/1
- ISBN:9787115577863
- 出 版 社:人民郵電出版社
- 中圖法分類:TP393.092.2
- 頁碼:0
- 紙張:
- 版次:01
- 開本:16開
隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展,HTML5、CSS3、JavaScript語言以及它們的相關(guān)技術(shù)越來越受到人們的關(guān)注,前端框架層出不窮。jQuery和Bootstrap作為前端框架中的優(yōu)秀代表,為廣大開發(fā)者提供了諸多便利,持久地占據(jù)著Web開發(fā)技術(shù)中的重要位置。
本書通過豐富的實(shí)例詳細(xì)講解jQuery和Bootstrap框架的相關(guān)技術(shù)。jQuery篇主要包括jQuery基礎(chǔ)、如何使用jQuery控制DOM、簡化AJAX操作、制作動畫與特效以及jQuery插件等內(nèi)容。Bootstrap篇主要包括工具類、柵格布局、表單樣式和組件庫等內(nèi)容。本書使用大量的案例幫助讀者理解這兩個框架的使用,同時演示綜合使用這兩個框架進(jìn)行Web開發(fā)的方法。本書內(nèi)容翔實(shí)、結(jié)構(gòu)框架清晰、講解循序漸進(jìn),并注重各章以及實(shí)例之間的呼應(yīng)與對照。
本書既可以作為高等院校相關(guān)專業(yè)的網(wǎng)頁設(shè)計(jì)與制作、前端開發(fā)等課程的教材,也可以作為jQuery和Bootstrap初學(xué)者的入門用書,還可以作為高級用戶進(jìn)一步學(xué)習(xí)前端框架的參考資料。
叢書特色:
(1)編排豐富實(shí)戰(zhàn)案例,可掃前言二維碼進(jìn)行快速預(yù)覽。
(2)提供在線實(shí)訓(xùn)平臺(http://code.artech.cn),支撐隨時開展全書案例實(shí)戰(zhàn)演練。
(3)開源分階實(shí)戰(zhàn)項(xiàng)目(http://www.geekfun.website),助力不同層次讀者(學(xué)生)獲取企業(yè)實(shí)戰(zhàn)項(xiàng)目開發(fā)能力。
(4)配套多類教輔資源,包含文本類、視頻類(微課視頻)、案例類、平臺類等。
(5)建立教師服務(wù)與交流群(QQ群號:368845661),立體化服務(wù)院校教師教學(xué)。
特別說明:
為了使本書中的案例作用最大化,我們專門為其提供了“在線實(shí)訓(xùn)平臺”(http://code.artech.cn)。該平臺的具體功能介紹如下。
【在線實(shí)訓(xùn)平臺】功能:
(1)教師可以利用該平臺,在上課過程中直接演練(展示)書中的所有案例,并可通過實(shí)時的運(yùn)行結(jié)果同步講解相關(guān)知識點(diǎn)和技能。
(2)師生可以通過該平臺觀看全書導(dǎo)學(xué)、原理講解、案例講解等視頻,配合實(shí)操演練,隨時隨地進(jìn)行學(xué)習(xí),支持開展線上線下混合式教學(xué)。
(3)學(xué)生可以在課前或課后通過該平臺,實(shí)操練習(xí)書中的所有案例,實(shí)時查看代碼運(yùn)行結(jié)果,而且所有案例代碼均支持復(fù)制與還原。
(4)學(xué)生還可以通過該平臺實(shí)操練習(xí)各章課后的實(shí)操題,并可通過微信分享功能,將實(shí)操的結(jié)果分享給其他人,如分享給老師進(jìn)行審閱。
說明:掃描“從書序中的二維碼”可以了解該平臺的具體使用方法,教師也可通過“教師用書指導(dǎo)手冊”了解該平臺的具體操作步驟。
溫謙:
## 全棧工程師,前沿科技創(chuàng)始人,現(xiàn)從事企業(yè)大型軟件系統(tǒng)的分析與開發(fā)工作,擁有超20年的軟件開發(fā)經(jīng)驗(yàn),主持并成功開發(fā)了多個復(fù)雜系統(tǒng),項(xiàng)目實(shí)戰(zhàn)經(jīng)驗(yàn)豐富。
## 常銷書作者,畢業(yè)于華中科技大學(xué)計(jì)算機(jī)專業(yè),主編網(wǎng)頁設(shè)計(jì)與軟件開發(fā)相關(guān)領(lǐng)域圖書共12本,圖書編寫經(jīng)驗(yàn)頗豐,其中《HTML+CSS網(wǎng)頁設(shè)計(jì)與布局從入門到精通》《網(wǎng)頁設(shè)計(jì)與布局項(xiàng)目化教程(HTML+CSS+DIV)》等圖書常銷10余年,被百余所高校選作教材。
## 章名目錄
【上篇】 jQuery篇
第 1章 jQuery基礎(chǔ)
第 2章 HTML5、CSS3和JavaScript基礎(chǔ)知識
第3章 jQuery選擇器與管理結(jié)果集
第4章 使用jQuery控制DOM
第5章 jQuery事件
第6章 jQuery的功能函數(shù)
第7章 jQuery與AJAX
第8章 利用jQuery制作動畫與特效
第9章 jQuery插件
第 10章 綜合實(shí)例一:網(wǎng)頁留言本
【下篇】 Bootstrap篇
第 11章 Bootstrap基礎(chǔ)
第 12章 CSS原子化與工具類
第 13章 Bootstrap的柵格布局
第 14章 Bootstrap的表單樣式
第 15章 Bootstrap的組件庫
第 16章 綜合實(shí)例二:產(chǎn)品著陸頁
第 17章 綜合實(shí)例三:網(wǎng)絡(luò)相冊
## 詳細(xì)目錄
【上篇】 jQuery篇
第 1章 jQuery基礎(chǔ)
1.1 jQuery概述 2
1.1.1 jQuery簡介 2
1.1.2 下載并使用jQuery 3
1.2 jQuery的$ 4
1.2.1 選擇器 4
1.2.2 功能函數(shù)的前綴 6
1.2.3 window.onload 6
1.2.4 創(chuàng)建DOM元素 7
1.2.5 擴(kuò)展jQuery 8
1.2.6 沖突問題 9
1.3 使用VSCode編寫第 一個jQuery頁面 10
1.3.1 創(chuàng)建基礎(chǔ)的HTML文檔 10
1.3.2 編寫jQuery代碼 11
本章小結(jié) 12
習(xí)題1 12
第 2章 HTML5、CSS3和JavaScript基礎(chǔ)知識
2.1 ES6的新特性 13
2.1.1 let關(guān)鍵字 14
2.1.2 const關(guān)鍵字 14
2.1.3 for…of循環(huán) 15
2.1.4 字符串模板 15
2.1.5 參數(shù)默認(rèn)值 16
2.1.6 類與繼承 16
2.1.7 箭頭函數(shù) 17
2.1.8 剩余運(yùn)算符與剩余參數(shù) 19
2.1.9 展開運(yùn)算符 19
2.1.10 數(shù)組的解構(gòu)賦值 19
2.1.11 對象的解構(gòu)賦值 20
2.1.12 模塊 20
2.2 HTML5新增的語義化標(biāo)記 21
2.3 CSS3引入的常用新特性 23
2.3.1 新增的常用樣式屬性 23
2.3.2 新增的布局方式——彈性盒子 25
2.3.3 新增的布局方式——網(wǎng)格 26
本章小結(jié) 27
習(xí)題2 27
第3章 jQuery選擇器與管理結(jié)果集
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.1 children() 37
3.2.2 parent()和parents() 39
3.2.3 siblings() 41
3.3 管理結(jié)果集 43
3.3.1 獲取選中元素的個數(shù) 43
3.3.2 提取元素 44
3.3.3 添加、刪除、過濾 46
3.3.4 查找 49
3.3.5 遍歷 50
3.4 jQuery鏈 51
本章小結(jié) 51
習(xí)題3 51
第4章 使用jQuery控制DOM
4.1 網(wǎng)頁中的DOM框架 54
4.2 DOM中的節(jié)點(diǎn) 54
4.2.1 元素節(jié)點(diǎn) 55
4.2.2 文本節(jié)點(diǎn) 55
4.2.3 屬性節(jié)點(diǎn) 55
4.3 標(biāo)記的屬性 55
4.3.1 獲取屬性的值 56
4.3.2 設(shè)置屬性的值 57
4.3.3 刪除屬性 59
4.4 元素的樣式 59
4.4.1 添加、刪除CSS類 60
4.4.2 動態(tài)切換 60
4.4.3 直接獲取、設(shè)置樣式 61
4.5 頁面的元素 63
4.5.1 直接獲取、編輯內(nèi)容 63
4.5.2 添加元素 64
4.5.3 刪除元素 68
4.5.4 克隆元素 70
4.6 表單元素的值 71
4.6.1 獲取表單元素的值 72
4.6.2 設(shè)置表單元素的值 73
4.7 元素的尺寸 74
4.8 元素的位置 76
4.8.1 offset()方法 76
4.8.2 position()方法 77
4.8.3 scrollTop()方法 78
本章小結(jié) 79
習(xí)題4 79
第5章 jQuery事件
5.1 事件與事件流 80
5.2 事件監(jiān)聽 81
5.2.1 bind()方法 81
5.2.2 one()方法 83
5.2.3 JavaScript的事件監(jiān)聽 84
5.3 事件刪除 85
5.4 事件對象 87
5.5 事件觸發(fā) 88
5.6 事件的動態(tài)交替 89
5.6.1 hover事件的交替 89
5.6.2 click事件的交替 90
5.7 事件委托 91
5.8 動手練習(xí):快餐在線 93
5.8.1 框架搭建 93
5.8.2 添加事件 94
5.8.3 樣式 97
本章小結(jié) 99
習(xí)題5 99
第6章 jQuery的功能函數(shù)
6.1 處理JavaScript對象 101
6.1.1 遍歷 101
6.1.2 數(shù)據(jù)過濾 103
6.1.3 數(shù)組的轉(zhuǎn)化 104
6.1.4 數(shù)組元素的查找 107
6.2 $.data()方法 108
6.3 $.extend()方法 109
6.4 類型判斷 110
本章小結(jié) 112
習(xí)題6 112
第7章 jQuery與AJAX
7.1 認(rèn)識AJAX 113
7.1.1 AJAX的基本概念 113
7.1.2 AJAX的組成 115
7.2 獲取異步數(shù)據(jù) 115
7.2.1 傳統(tǒng)方法 116
7.2.2 jQuery的load()方法 117
7.3 GET與POST 119
7.4 控制AJAX 121
7.4.1 設(shè)置AJAX訪問服務(wù)器的細(xì)節(jié) 121
7.4.2 全局設(shè)定AJAX 123
7.4.3 AJAX事件 124
7.4.4 實(shí)例:模擬百度的數(shù)據(jù)加載 126
7.5 實(shí)例:利用jQuery制作自動提示的文本框 128
7.5.1 框架結(jié)構(gòu) 128
7.5.2 匹配用戶輸入 129
7.5.3 顯示/清除提示框 130
本章小結(jié) 133
習(xí)題7 133
第8章 利用jQuery制作動畫與特效
8.1 元素的顯示和隱藏 135
8.1.1 show()和hide() 135
8.1.2 實(shí)例:多級菜單 136
8.1.3 toggle() 138
8.2 淡入淡出的特效 138
8.2.1 再探討show()、hide()和toggle() 139
8.2.2 fadeIn()和fadeOut() 140
8.2.3 自定義變化透明度 141
8.3 幻燈片特效 142
8.4 自定義動畫 144
本章小結(jié) 145
習(xí)題8 146
第9章 jQuery插件
9.1 模擬加入購物車 147
9.1.1 鼠標(biāo)拖曳 147
9.1.2 拖入購物車 151
9.2 流行的Tab菜單 152
本章小結(jié) 155
習(xí)題9 155
第 10章 綜合實(shí)例一:網(wǎng)頁留言本
10.1 基本留言本 156
10.2 改用AJAX方式實(shí)現(xiàn)留言本 158
10.2.1 讀取留言列表 158
10.2.2 保存并返回新留言 159
10.2.3 留言本入口頁面 159
10.3 對表單數(shù)據(jù)進(jìn)行驗(yàn)證 161
本章小結(jié) 162
【下篇】 Bootstrap篇
第 11章 Bootstrap基礎(chǔ)
11.1 Bootstrap是什么 164
11.2 下載并使用Bootstrap 165
11.3 常用樣式 167
11.3.1 文本樣式 167
11.3.2 圖片樣式 171
11.3.3 表格樣式 172
11.4 圖標(biāo)庫 174
本章小結(jié) 176
習(xí)題11 176
第 12章 CSS原子化與工具類
12.1 CSS原子化理念 177
12.2 Bootstrap的工具類規(guī)則 181
12.3 顏色工具類 182
12.4 尺寸工具類 184
12.4.1 font-size 184
12.4.2 padding和margin 184
12.4.3 width和height 185
12.5 布局工具類 186
12.5.1 display 186
12.5.2 flexbox 186
12.5.3 實(shí)例:制作導(dǎo)航欄 187
12.5.4 float 190
12.6 其他工具類 191
12.7 動手練習(xí):創(chuàng)建嵌套的留言布局 192
12.7.1 搭建框架 193
12.7.2 用工具類布局 193
12.7.3 頭像放在右側(cè) 194
12.7.4 實(shí)現(xiàn)布局的嵌套 194
本章小結(jié) 195
習(xí)題12 195
第 13章 Bootstrap的柵格布局
13.1 柵格布局基礎(chǔ) 196
13.1.1 柵格布局的理念 196
13.1.2 實(shí)例 198
13.1.3 理解屏幕的分辨率概念 204
13.2 基本用法 206
13.2.1 響應(yīng)式斷點(diǎn) 206
13.2.2 常規(guī)用法 207
13.2.3 設(shè)置行間距與列間距 209
13.3 高級用法 212
13.3.1 柵格嵌套 212
13.3.2 流式布局 213
13.3.3 設(shè)定列寬 214
13.3.4 列的偏移與對齊 216
本章小結(jié) 219
習(xí)題13 219
第 14章 Bootstrap的表單樣式
14.1 表單控件樣式 221
14.1.1 輸入框 221
14.1.2 選擇框 224
14.1.3 單選框與復(fù)選框 225
14.1.4 滑動條輸入 227
14.1.5 輸入組 227
14.2 表單布局 228
14.3 表單校驗(yàn) 230
14.3.1 客戶端校驗(yàn) 230
14.3.2 服務(wù)器端校驗(yàn) 232
14.4 動手練習(xí):創(chuàng)建一個下單結(jié)賬頁面 233
本章小結(jié) 234
習(xí)題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 模態(tài)框 242
15.3 導(dǎo)航欄 244
15.4 卡片 248
15.5 輪播圖 252
本章小結(jié) 253
習(xí)題15 253
第 16章 綜合實(shí)例二:產(chǎn)品著陸頁
16.1 頁面結(jié)構(gòu)分析 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
本章小結(jié) 268
第 17章 綜合實(shí)例三:網(wǎng)絡(luò)相冊
17.1 分析架構(gòu) 269
17.2 模塊拆分 270
17.2.1 縮略圖排列 270
17.2.2 縮略圖提示 272
17.2.3 顯示大圖 273
17.3 功能細(xì)化 273
17.3.1 單擊縮略圖顯示大圖 273
17.3.2 瀏覽大圖 274
17.3.3 單擊大圖切換為下一幅圖 276
本章小結(jié) 276