Web前端開發技術——HTML5+Ajax+jQuery

內容簡介

本書介紹了Web 前端開發需要的項狼付各種技術，如HTML5、CSS3、JavaScript、jQuery、jQuery Mobile，以及多媒體新特臘茅頁性、HTML5 瀏覽器兼容性測試、DOM 模型、Ajax 原理、JSON 格式等。本書是作者多年教學、項目經驗的總結，匯集了學生在學習Web 前端技術時遇到的各種問題及解決方案，在介紹範例代碼的時候，使用了較新的開發工具及線上編輯工具，使讀者能夠高效地完成書中的案例。

本書適合Web 前端精棗匪技術初學者學習，也適合軟體培訓機構採納作為培訓教材，可作為套用類本科及高職高專學生Web 課程的教材。

圖書目錄

第1 章 HTML5 1

1.1 HTML5 介紹 1

1.1.1 HTML5 發展史 1

1.1.2 誰在開發HTML5 2

1.1.3 HTML5 的主要新功能 2

1.2 HTML5 的優勢2

1.2.1 解決跨瀏覽器問題 2

1.2.2 用盼嚷戶優先的原則 3

1.2.3 化繁為簡的優勢 4

1.3 HTML5 基本語法 4

1.3.1 新的DOCTYPE 6

1.3.2 新的字元編碼7

1.3.3 引用連結和樣式表 7

1.3.4 HTML5 標籤的向後兼容性 8

1.3.5 base 元素 9

1.4 HTML5 內容分組 9

1.4.1 header 元素 10

1.4.2 footer 元素促整墊迎10

1.4.3 address 元素 10

1.4.4 article 元素10

1.4.5 nav 元素 11

1.4.6 section 元素 11

1.4.7 hr 元素 12

1.4.8 blockquote 元素 12

1.4.9 aside 元素 12

1.4.10 hgroup 元素 12

1.4.11 a 元素 12

1.4.12 HTML5 的文檔大綱 13

1.5 HTML5 使肯奔遷端用列表 18

1.5.1 使用 ul 元素創建無序列表 18

1.5.2 使用 ol 元素創建有序列表 19

1.6 HTML5 語義元素 20

1.6.1 ruby 元素 20

1.6.2 small 元素 21

1.6.3 time 元素 21

1.6.4 details 元素22

1.6.5 progress 元素 22

1.6.6 datalist 元素 22

1.6.7 meter 元素23

1.6.8 mark 元素 23

1.6.9 figure 及 figcaption 元素 24

1.7 HTML5 多媒體 24

1.7.1 audio 元素 24

1.7.2 video 元素 25

1.7.3 音頻、視頻容器和編解碼器 26

1.7.4 跨瀏覽器問題 28

1.8 HTML5 表單介紹 28

1.9 HTML5 新增的輸入元素 29

1.10 HTML5 新增的表單屬性38

1.10.1 autocomplete 屬性 38

1.10.2 required 屬性 38

1.10.3 multiple 屬性 38

1.10.4 autofocus 屬刪白櫃性 38

1.10.5 formnovalidate 屬性 39

1.10.6 placeholder 屬性39

1.10.7 list 屬性 40

1.10.8 pattern 屬性 40

本章小結44

本章練習45

Web 前端開發技術——HTML5+Ajax+jQuer? IV ? y

第2 章 CSS3 和BootStrap 47

2.1 CSS3 簡介 47

2.1.1 CSS3 框線 47

2.1.2 CSS3 多列 48

2.1.3 CSS3 Box-Sizing 49

2.1.4 CSS3 背景 49

2.1.5 CSS3 2D 轉換 52

2.1.6 CSS3 過渡 54

2.1.7 CSS3 動畫 57

2.2 less 簡介 58

2.2.1 在客戶端使用less59

2.2.2 混合 60

2.2.3 嵌套規則 61

2.2.4 函式 & 運算 62

2.3 BootStrap 簡介 62

任務一：下載BootStrap 並查看其

結構 63

任務二：個人簡歷的製作63

本章小結70

本章練習70

第3 章 JavaScript 71

3.1 JavaScript 簡介 71

3.1.1 JavaScript 是什麼 71

3.1.2 JavaScript 的作用 72

3.1.3 在網頁中插入JavaScript 的

方法 72

3.1.4 如何調試JavaScript 74

3.2 JavaScript 基礎語法75

3.2.1 JavaScript 的變數 75

3.2.2 JavaScript 的6 種數據類型 76

3.2.3 JavaScript 的運算符 79

3.2.4 JavaScript 流程控制 81

3.3 JavaScript 對象 85

3.3.1 創建對象 85

3.3.2 屬性的查詢和設定88

3.3.3 刪除屬性 88

3.3.4 檢測屬性 89

3.3.5 JavaScript 數組 89

3.3.6 JavaScript 內置對象 91

3.3.7 瀏覽器對象 96

3.4 JavaScript 函式 100

3.4.1 創建函式 100

3.4.2 調用函式 101

3.4.3 匿名函式 103

3.4.4 作用域和閉包 103

3.5 事件處理 104

3.5.1 瀏覽器事件介紹 104

3.5.2 處理事件的兩種方法 105

3.5.3 事件對象 107

本章小結 110

本章練習 110

第4 章 JavaScript 圖形 111

4.1 走進canvas 的世界111

4.1.1 canvas 是什麼 111

4.1.2 在頁面中放置canvas 元素 111

4.1.3 canvas 坐標114

4.1.4 繪製帶框線的矩形 114

4.2 繪製基本圖形 116

4.2.1 繪製線條 116

4.2.2 繪製圓形 116

4.3 繪製文本 117

4.3.1 文本設定 117

4.3.2 文本的對齊方式 118

4.4 使用圖像 125

4.4.1 繪製圖像 125

4.4.2 放大縮小圖像 126

4.4.3 平鋪圖像 127

4.4.4 裁剪圖像 129

本章小結 133

本章練習 133

目錄 ? V ?

第5 章 MongoDB135

5.1 MongoDB 初探 135

5.2 MongoDB 的下載與安裝136

5.3 MongoDB 的基本概念 138

5.3.1 資料庫 138

5.3.2 文檔和集合138

5.4 MongoDB 常用命令 142

5.4.1 插入數據 142

5.4.2 查詢數據 142

5.4.3 刪除數據 144

5.4.4 更新數據 144

5.4.5 索引 145

本章小結 147

本章練習 148

第6 章 jQuery 149

6.1 jQuery 入門 149

6.1.1 jQuery 初體驗 149

6.1.2 jQuery 環境搭建 150

6.1.3 jQuery 中的$及其作用 150

6.1.4 jQuery 對象和DOM 對象 153

6.2 jQuery 選擇器 154

6.2.1 jQuery 基本選擇器 154

6.2.2 jQuery 層次選擇器 155

6.3 jQuery 過濾選擇器155

6.3.1 jQuery 基本過濾 155

6.3.2 jQuery 內容過濾 156

6.3.3 jQuery 子元素過濾 156

6.3.4 jQuery 屬性過濾 157

6.3.5 jQuery 表單屬性過濾 158

6.4 jQuery 操作DOM 元素 158

6.4.1 元素的創建158

6.4.2 元素的插入159

6.4.3 元素的刪除159

6.4.4 元素的包裹160

6.4.5 元素的替換和複製 162

6.4.6 遍歷和篩選DOM 元素164

6.5 jQuery 對DOM 屬性操作 166

6.5.1 獲取和設定元素屬性 166

6.5.2 獲取和設定元素內容 167

6.5.3 獲取和設定元素的CSS

屬性 168

6.6 jQuery 回響事件 170

6.6.1 綁定事件 174

6.6.2 移除事件 175

6.6.3 Event 實例175

6.6.4 觸發事件 176

6.6.5 自定義事件176

本章小結 179

本章練習 179

第7 章基於jQuery 的Ajax 技術 181

7.1 Ajax 異步請求原理181

7.1.1 Ajax 技術應用程式模型 181

7.1.2 使用原始的Ajax 與伺服器

通信 182

7.2 jQuery 中載入文檔185

7.2.1 load()方法載入文檔 185

7.2.2 JSON 格式186

7.2.3 比較JSON 和XML 數據

格式 187

7.2.4 $.getJSON()方法載入文檔 191

7.2.5 $.getScript()方法載入文檔 194

7.3 jQuery 中請求伺服器數據 194

7.3.1 $.post()方法194

7.3.2 $.get()方法 195

7.3.3 表單的序列化方法 196

7.4 $.ajax()方法 199

7.4.1 詳解$.ajax()的細節 199

7.4.2 $.ajax()全局事件 203

7.4.3 $.ajax()全局設定 205

本章小結 208

本章練習 208

Web 前端開發技術——HTML5+Ajax+jQuer? VI ? y

第8 章 jQuery 外掛程式 209

8.1 jQuery 外掛程式介紹 209

8.1.1 通過全局函式創建外掛程式209

8.1.2 通過$.fn()方法創建外掛程式 211

8.1.3 讓外掛程式接收參數 212

8.2 尋找外掛程式 214

8.2.1 搜尋jQuery 外掛程式214

8.2.2 選擇jQuery 外掛程式215

8.3 jQuery ImageArea Select 外掛程式

介紹 215

8.3.1 jQuery ImageArea Select

下載及安裝215

8.3.2 使用jQuery ImageArea

Select 216

8.4 jQuery templating 外掛程式介紹 221

8.4.1 jQuery templating 下載及

安裝 221

8.4.2 使用jQuery templating 225

8.5 jQuery UI 外掛程式介紹 229

8.5.1 jQuery UI 下載及安裝 229

8.5.2 使用jQuery UI 231

本章小結 241

本章練習 241

第9 章使用Ajax 和jQuery Mobile 243

9.1 以Ajax 方式載入數據 243

9.1.1 載入XML 數據 243

9.1.2 載入JSON 數據 245

9.2 以Ajax 方式提交數據 246

9.2.1 無刷新的表單修改 246

9.2.2 無刷新的表單新增 248

9.2.3 無刷新的列表數據 251

9.2.4 載入更多列表數據 252

9.3 jQuery Mobile 介紹254

9.3.1 jQuery Mobile 特性 254

9.3.2 jQuery Mobile 初始配置 256

9.4 jQuery Mobile 頁面和對話框 256

9.4.1 頁面基礎 256

9.4.2 創建多個頁面 258

9.4.3 將頁面用作對話框 259

9.5 jQuery Mobile 表單260

9.5.1 jQuery Mobile 表單輸入 260

9.5.2 jQuery Mobile 表單選擇 262

9.6 jQuery Mobile 列表263

9.6.1 jQuery Mobile 列表視圖 263

9.6.2 jQuery Mobile 列表內容 265

9.7 jQuery Mobile 事件266

9.7.1 jQuery Mobile 頁面事件 266

9.7.2 jQuery Mobile 觸屏事件 268

9.7.3 jQuery Mobile 方向事件 270

本章小結 271

本章練習 271

第10 章 jQuery 動畫特效 273

10.1 jQuery 常用特效 273

10.1.1 顯示和隱藏特效 273

10.1.2 淡入淡出特效 275

10.1.3 滑動特效277

10.2 創建自定義動畫 281

10.2.1 基本自定義動畫 281

10.2.2 自定義動畫的回調函式 283

10.2.3 動畫佇列283

10.2.4 停止特效286

10.3 綜合案例賞析 288

本章小結 293

本章練習 294

附錄A 服務端接口 295

Web前端開發技術——HTML5+Ajax+jQuery

基本介紹

內容簡介

圖書目錄

相關詞條

熱門詞條