HTML5+CSS3+JavaScript+jQuery程式設計基礎教程（第2版）

《HTML5+CSS3+JavaScript+jQuery程式設計基礎教程（第2版）》是2018年7月1日人民郵電出版社出版的圖書，作者是閆俊伢、耿強。

基本介紹

• 中文名：HTML5+CSS3+JavaScript+jQuery程式設計基礎教程（第2版）
• 作者：閆俊伢、耿強
• 出版社：人民郵電出版社
• ISBN：9787115484666

內容簡介

本書涵蓋了HTML5的各種新特性，主要內容包括HTML5概述、JavaScript、HTML5表單及檔案處理、CSS、拖放、Canvas API畫圖、繪製可伸縮矢量圖形、播放多媒體、Web通信、本地存儲、開發支持離線的Web應用程式、獲取瀏覽器的地理位置信息、支持多執行緒編程的Web Workers、jQuery等。讀者在閱讀本書時可以充分了解和體驗HTML5的強大功能。

圖書目錄

第1章　HTML5概述　1

1．1　HTML基礎　2

1．1．1　什麼是HTML　2

1．1．2　HTML的歷史　2

1．2　HTML4基礎　3

1．2．1　設定網頁背景和顏色　3

1．2．2　設定字型屬性　4

1．2．3　超級連結　4

1．2．4　圖像和動畫　6

1．2．5　表格　6

1．2．6　使用框架　8

1．2．7　其他常用標籤　9

1．3　HTML5的新特性　12

1．3．1　簡化的文檔類型和字元集　12

1．3．2　HTML5的新結構　13

1．3．3　HTML5的新增內聯元素　16

1．3．4　支持動態頁面　18

1．3．5　全新的表單設計　21

1．3．6　強大的繪圖和多媒體功能　21

1．3．7　打造桌面套用的一系列新功能　22

1．3．8　獲取地理位置信息　22

1．3．9　支持多執行緒　23

1．3．10　small?元素　23

1．3．11　contenteditable屬性　23

1．3．12　placeholder屬性　23

1．3．13　廢棄的標籤　24

1．4　支持HTML5的瀏覽器　25

練習題　26

第2章　JavaScript編程　28

2．1　在HTML中使用JavaScript語言　29

2．1．1　在HTML中插入JavaScript代碼　29

2．1．2　使用js檔案　29

2．2　基本語法　30

2．2．1　數據類型　30

2．2．2　變數　30

2．2．3　注釋　31

2．2．4　運算符　31

2．3　常用語句　34

2．3．1　條件分支語句　34

2．3．2　循環語句　38

2．4　函式　41

2．4．1　創建自定義函式　42

2．4．2　調用函式　42

2．4．3　變數的作用域　43

2．4．4　函式的返回值　44

2．5　面向對象程式設計　44

2．5．1　面向對象程式設計思想簡介　44

2．5．2　JavaScript內置類　45

2．5．3　HTML DOM　53

2．5．4　Window對象　54

2．5．5　Navigator對象　58

2．5．6　document對象　60

2．6　JavaScript事件處理　61

2．6．1　常用的HTML事件　61

2．6．2　Window對象的事件處理　63

2．6．3　Event對象　63

2．7　漸進式前端框架Vue．js　64

2．7．1　下載和安裝Vue．js　64

2．7．2　MVVM開發模式　65

2．7．3　Vue．js的開發流程　66

2．7．4　Vue．js的常用指令　67

2．8　使用webpack+Vue構建模組化項目　72

2．8．1　webpack　72

2．8．2　Babel　76

練習題　81

第3章　HTML5表單及檔案處理　83

3．1　HTML4表單　84

3．1．1　定義表單　84

3．1．2　文本框　84

3．1．3　文本區域　85

3．1．4　單選按鈕　86

3．1．5　複選框　86

3．1．6　組合框　87

3．1．7　按鈕　87

3．2　HTML5表單的新特性　89

3．2．1　新的 標籤類型　89

3．2．2　新的表單元素　92

3．2．3　新的表單屬性　94

3．2．4　表單驗證　95

3．3　在Vue．js表單控制項上實現雙向數據綁定　97

3．3．1　在input和textarea元素上實現雙向數據綁定　97

3．3．2　在複選框上實現雙向數據綁定　99

3．3．3　在select列表上實現雙向數據綁定　100

3．3．4　在單選按鈕上實現雙向數據綁定　101

3．3．5　修飾符　102

3．4　檔案處理　102

3．4．1　選擇檔案的表單控制項　102

3．4．2　檢測瀏覽器是否支持HTML5 File API　103

3．4．3　FileList接口　103

3．4．4　FileReader接口　105

練習題　107

第4章　最新版本的層疊樣式表——CSS3　109

4．1　CSS基礎　110

4．1．1　什麼是CSS　110

4．1．2　在HTML文檔中套用CSS　111

4．1．3　顏色與背景　113

4．1．4　設定字型　114

4．1．5　設定文本屬性　115

4．1．6　超連結　120

4．1．7　列表　122

4．1．8　表格　124

4．1．9　CSS 輪廓　127

4．1．10　浮動元素　129

4．2　CSS3的新技術　130

4．2．1　實現圓角效果　130

4．2．2　多彩的框線顏色　134

4．2．3　陰影　135

4．2．4　背景圖片　136

4．2．5　多列　138

4．2．6　嵌入字型　142

4．2．7　透明度　143

4．2．8　HSL和HSLA顏色表現方法　145

4．3　CSS3套用實例　146

4．3．1　HTML5+CSS3設計頁面布局　147

4．3．2　設計漂亮的導航選單　151

4．3．3　設計登錄頁面　153

4．4　前端CSS框架Bootstrap　156

4．4．1　下載和使用Bootstrap　156

4．4．2　布局容器　159

4．4．3　柵格系統　159

4．4．4　Bootstrap布局組件　160

練習題　163

第5章　HTML5拖放　165

5．1　概述　166

5．1．1　什麼是拖放　166

5．1．2　設定元素為可拖放　166

5．1．3　拖放事件　166

5．2　傳遞拖曳數據　167

5．2．1　dataTransfer對象的屬性　167

5．2．2　dataTransfer對象的方法　168

5．3　HTML5拖放的實例　169

5．3．1　拖放HTML元素　169

5．3．2　拖放檔案　170

5．4　在Vue．js中實現拖曳功能　171

5．4．1　require．js　171

5．4．2　註冊vuedraggable．js組件　172

5．4．3　在HTML中使用vuedraggable．js組件　172

5．4．4　套用實例　174

練習題　176

第6章　使用Canvas API畫圖　177

6．1　Canvas元素　178

6．1．1　Canvas元素的定義語法　178

6．1．2　使用JavaScript獲取網頁中的Canvas對象　178

6．2　坐標與顏色　179

6．2．1　坐標系統　179

6．2．2　顏色的表示方法　179

6．3　繪製圖形　180

6．3．1　繪製直線　180

6．3．2　繪製貝塞爾曲線　182

6．3．3　繪製矩形　185

6．3．4　繪製圓弧　187

6．4　描邊和填充　188

6．4．1　描邊　189

6．4．2　填充圖形內部　192

6．4．3　漸變顏色　193

6．4．4　透明顏色　197

6．5　繪製圖像與文字　198

6．5．1　繪製圖像　198

6．5．2　輸出文字　200

6．6　圖形的操作　203

6．6．1　保存和恢復繪圖狀態　204

6．6．2　移動　205

6．6．3　縮放　206

6．6．4　旋轉　206

6．6．5　變形　207

6．7　組合和陰影　209

6．7．1　組合圖形　209

6．7．2　繪製陰影　212

6．8　HTML5 Canvas套用實例　213

6．8．1　繪製漂亮的警告牌　213

6．8．2　動畫實例：小型太陽系模型　215

練習題　218

第7章　繪製可伸縮矢量圖形（SVG）　220

7．1　SVG概述　221

7．1．1　SVG的特性　221

7．1．2　XML基礎　221

7．1．3　SVG實例　222

7．1．4　SVG坐標系統　223

7．1．5　在HTML5中使用SVG　223

7．2　SVG形狀　224

7．2．1　繪製直線　224

7．2．2　繪製折線　225

7．2．3　繪製矩形　226

7．2．4　繪製圓形　226

7．2．5　繪製橢圓　227

7．2．6　繪製多邊形　227

7．2．7　路徑　228

7．3　線條和填充　230

7．3．1　設定線條的屬性　230

7．3．2　填充　233

7．4　SVG文本與圖片　234

7．4．1　輸出文本　234

7．4．2　SVG圖片　237

7．5　SVG濾鏡　237

7．5．1　定義濾鏡　237

7．5．2　套用濾鏡　238

7．6　漸變顏色　239

7．6．1　線性漸變　239

7．6．2　放射性漸變　240

7．7　變換坐標系　241

7．7．1　視窗變換——viewBox屬性　241

7．7．2　用戶坐標系的變換——transform屬性　242

練習題　244

第8章　播放多媒體　245

8．1　HTML5音頻　246

8．1．1　audio標籤　246

8．1．2　播放背景音樂　247

8．1．3　設定替換音頻源　247

8．1．4　使用JavaScript語言訪問audio對象　248

8．2　HTML5視頻　252

8．2．1　video標籤　252

8．2．2　使用JavaScript語言訪問video對象　253

8．3　視頻播放外掛程式video．js　259

練習題　260

第9章　Web通信　261

9．1　跨文檔訊息機制　262

9．1．1　檢測瀏覽器對跨文檔訊息機制的支持情況　262

9．1．2　使用postMessage API傳送訊息　262

9．1．3　監聽和處理訊息事件　264

9．2　XMLHttpRequest Level 2　265

9．2．1　創建XMLHttpRequest對象　265

9．2．2　傳送HTTP請求　266

9．2．3　從伺服器接收數據　266

9．2．4　進行HTTP頭（HEAD）請求　269

9．2．5　逾時控制　272

9．2．6　使用FormData對象向伺服器傳送數據　272

9．2．7　使用FormData對象上傳檔案　274

9．3　WebSocket　279

9．3．1　什麼是Socket　279

9．3．2　WebSocket API概述　281

9．3．3　WebSocket API編程　282

9．3．4　WebSocket伺服器　284

練習題　286

第10章　本地存儲　287

10．1　概述　288

10．1．1　HTML4的本地數據存儲方式　288

10．1．2　HTML5本地存儲技術概述　289

10．2　localstorage　290

10．2．1　瀏覽器對localstorage的支持情況　290

10．2．2　使用localstorage保存數據　290

10．2．3　獲取localstorage中的數據　291

10．2．4　刪除localstorage中的數據　292

10．2．5　storage事件　292

10．3　sessionstorage　294

10．3．1　判斷瀏覽器是否支持sessionstorage　294

10．3．2　使用sessionstorage保存數據　295

10．3．3　獲取sessionstorage中的數據　295

10．3．4　刪除sessionstorage中的數據　296

10．4　Web SQL Database API　296

10．4．1　判斷瀏覽器是否支持Web SQL Database API　296

10．4．2　新建資料庫　297

10．4．3　執行SQL語句　297

10．5　IndexedDB　300

10．5．1　資料庫的相關概念　300

10．5．2　判斷瀏覽器是否支持IndexedDB　302

10．5．3　創建和打開資料庫　302

10．5．4　創建對象存儲空間ObjectStore　303

10．5．5　創建索引　305

10．5．6　事務　306

10．5．7　游標　309

練習題　313

第11章　開發支持離線的Web應用程式　315

11．1　HTML5離線Web應用程式概述　316

11．1．1　什麼是離線Web應用程式　316

11．1．2　開發離線Web應用程式需要完成的工作　317

11．2　開發HTML5離線Web應用程式　317

11．2．1　Application Cache API　318

11．2．2　Cache Manifest檔案　318

11．2．3　更新快取　320

11．2．4　檢測線上狀態　323

練習題　324

第12章　獲取瀏覽器的地理位置信息　325

12．1　概述　326

12．1．1　什麼是瀏覽器的地理位置　326

12．1．2　瀏覽器對獲取地理位置信息的支持情況　326

12．2　獲取地理位置信息　327

12．2．1　getCurrentPosition( )方法　327

12．2．2　watchPosition( )方法　329

12．2．3　clearWatch( )方法　330

12．3　數據保護　330

12．3．1　在Internet Explorer 9中配置共享地理位置　330

12．3．2　在Chrome中配置共享地理位置　332

12．3．3　在Firefox中配置共享地理位置　334

練習題　335

第13章　支持多執行緒編程的Web Workers　336

13．1　概述　337

13．1．1　什麼是執行緒　337

13．1．2　什麼是HTML5 Web Workers　338

13．1．3　瀏覽器對Web Workers的支持情況　338

13．2　Web Workers編程　339

13．2．1　創建Web Workers對象　339

13．2．2　終止Web Workers對象　341

13．2．3　共享執行緒　341

練習題　343

第14章　jQuery程式設計　344

14．1　jQuery基礎　345

14．1．1　下載jQuery　345

14．1．2　初識jQuery　345

14．2　jQuery選擇器　347

14．2．1　基礎選擇器　347

14．2．2　層次選擇器　350

14．2．3　基本過濾器　354

14．2．4　內容過濾器　355

14．2．5　可見性過濾器　357

14．2．6　屬性過濾器　357

14．2．7　子元素過濾器　359

14．3　設定HTML元素的屬性與CSS樣式　360

14．3．1　設定HTML元素的屬性　360

14．3．2　設定CSS樣式　363

14．4　表單編程　367

14．4．1　表單選擇器　367

14．4．2　表單過濾器　369

14．4．3　表單API　371

14．5　事件和Event對象　375

14．5．1　事件處理函式　375

14．5．2　Event對象　375

14．5．3　綁定到事件處理函式　377

14．5．4　鍵盤事件　378

14．5．5　滑鼠事件　379

14．5．6　文檔載入事件　380

14．5．7　瀏覽器事件　380

14．6　jQuery動畫　382

14．6．1　執行自定義的動畫　382

14．6．2　顯示和隱藏HTML元素　383

14．6．3　淡入淡出效果　384

14．6．4　滑動效果　388

14．6．5　動畫佇列　391

14．7　jQuery Mobile　394

練習題　400

第15章　HTML5移動Web開發　401

15．1　移動Web開發的原則　402

15．1．1　回響式網頁與自適應網頁　402

15．1．2　設計原則　403

15．1．3　使用回響式圖像　405

15．1．4　使用谷歌瀏覽器Chrome測試回響式網頁　405

15．1．5　通過JavaScript判斷移動設備的螢幕尺寸　409

15．1．6　回響式導航外掛程式Mmenu　410

15．2 HTML5前端框架　413

15．2．1　跨平台的移動App開發框架PhoneGap　413

15．2．2　使用Framework7開發混合移動套用　417

練習題　444