內容簡介
《HTML5+jQuery Mobile移動套用開發》主要對移動Web開發進行介紹,主要內容包括HTML5相關技術、界面樣式及CSS3相關技術、Javascript基本使用以及jQuery Mobile移動開發框架。
《HTML5+jQuery Mobile移動套用開發》內容涵蓋移動Web開發相關的基礎知識、開發經驗、針對移動端的開發技巧、移動開發框架以及項目實戰。書中詳細介紹移動Web開發的前沿技術,比對了傳統Web開發和移動Web開發的區別,對HTML5、CSS3等前沿技術進行了詳細深入的介紹,對移動套用開發中的移動設備適配、Web實時通信等核心問題進行了詳細講解。在理論的基礎上,注重項目實踐,是一本可讀性很高的移動Web開發教程。
《HTML5+jQuery Mobile移動套用開發》適合移動Web開發初學者、大學生,以及對移動Web開發感興趣的人員閱讀,也適合作為培訓機構或大中專院校及職業學院的教學用書。
圖書目錄
第1章 認識HTML 1
1.1 HTML基本介紹 1
1.2 HTML常用標籤 2
1.3 HTML表單 3
1.4 HTML和CSS的簡單互動 4
第2章 語義化標籤 5
2.1 什麼是語義化標籤 5
2.2 header標籤 6
2.3 footer標籤 8
2.4 nav標籤 9
2.5 article標籤 10
2.6 section標籤 12
2.7 aside標籤 13
第3章 視頻和音頻 15
3.1 音頻播放器——audio 15
3.1.1 audio標籤的使用 15
3.1.2 如何獲取音頻檔案的URL 16
3.1.3 autoplay屬性 17
3.1.4 loop屬性 18
3.1.5 preload屬性 18
3.1.6 audio標籤支持的音頻檔案 18
3.2 視頻播放器——video 19
3.2.1 video標籤的使用 19
3.2.2 video標籤的屬性 20
3.3 Media事件 23
3.3.1 HTML5中audio和video的方法 23
3.3.2 HTML5中audio和video的屬性 26
3.3.3 HTML5中audio和video的事件 36
第4章 存儲 38
4.1 本地存儲 39
4.2 localStorage對象 39
4.2.1 通過localStorage設定存儲元素 40
4.2.2 獲取數據 43
4.2.3 刪除數據 44
4.2.4 清除數據 45
4.3 sessionStorage 48
4.3.1 存儲數據 48
4.3.2 獲取數據 50
4.3.3 刪除數據 51
4.3.4 清除數據 51
4.4 storage對象 52
4.5 storage事件 53
4.6 應用程式快取 54
4.7 本地資料庫 57
4.7.1 創建/打開資料庫 57
4.7.2 執行操作 58
第5章 即時通信 61
5.1 概述 61
5.1.1 Web端即時通信技術 61
5.1.2 實現Web端即時通信的方法 62
5.1.3 四種Web即時通信技術比較 63
5.2 短輪詢原理與實現 63
5.2.1 原理 63
5.2.2 實現 63
5.3 長輪詢原理與實現 64
5.3.1 原理 64
5.3.2 實現 64
5.4 長連線的原理與實現 66
5.4.1 原理 66
5.4.2 實現 67
5.5 WebSocket原理與前端API 68
5.5.1 原理 68
5.5.2 前端API 68
第6章 Canvas繪圖 69
6.1 Canvas基礎 69
6.1.1 基本Canvas創建 69
6.1.2 開始在Canvas上繪製元素 71
6.1.3 繪製一條直線 71
6.1.4 為直線設定樣式 72
6.1.5 繪製多條直線 73
6.2 使用Canvas繪製圖形 76
6.2.1 繪製矩形 76
6.2.2 繪製圓形 78
6.3 圖形變換 85
6.4 圖形的組合 89
6.4.1 繪製兩個圖形 89
6.4.2 新圖形和原圖形之間的關係 90
6.4.3 加色處理 91
6.5 圖像處理 91
6.5.1 載入圖像 92
6.5.2 圖像剪裁 94
6.5.3 像素處理 95
第7章 CSS選擇器 97
7.1 基本選擇器 97
7.1.1 id選擇器 97
7.1.2 class選擇器 98
7.1.3 元素選擇器 103
7.2 基本選擇器綜合使用 104
7.2.1 選擇器的嵌套 104
7.2.2 基本選擇器優先權問題 109
7.2.3 同時設定多個元素樣式 110
7.3 偽類選擇器 111
7.3.1 狀態選擇器 111
7.3.2 :before和:after 116
7.4 位置選擇器 120
7.4.1 .:first-child 120
7.4.2 :last-child 121
7.4.3 :nth-child(n) 122
7.4.4 :nth-of-type(n) 123
7.5 屬性選擇器 123
7.5.1 [attribute] 123
7.5.2 [attribute=value] 124
7.5.3 [attribute~=value] 125
7.6 其他選擇器 126
第8章 元素定位 127
8.1 static 127
8.2 relative 129
8.3 absolute 130
8.4 fixed 132
8.5 float浮動布局 133
第9章 移動元素單位 137
9.1 px 137
9.1.1 需求描述一 138
9.1.2 需求描述二 140
9.2 em 143
9.3 rem 144
9.3.1 需求描述一 145
9.3.2 需求描述二 146
第10章 盒模型 148
10.1 內容 149
10.1.1 text-align 149
10.1.2 line-height 150
10.1.3 字型 152
10.1.4 截斷 153
10.2 內邊距邊界 155
10.3 框線邊界 156
10.4 外邊距邊界 161
第11章 Flex布局——FlexBox 162
第12章 使用CSS3新特性 188
12.1 transform屬性 188
12.2 translate方法 189
12.3 rotate方法 194
12.4 scale()方法 196
12.5 skew()方法 197
12.6 transition方法 203
12.7 幀動畫 212
第13章 DOM操作 229
13.1 DOM是什麼 229
13.2 通過DOM獲取文檔元素 230
13.2.1 getElementById()方法 230
13.2.2 innerHTML方法 230
13.2.3 getElementsByTagName()方法 233
13.2.4 getElementsByClassName()方法 234
13.3 DOM節點 236
13.3.1 節點之間的關係 236
13.3.2 節點的屬性 240
13.4 DOM事件 245
13.4.1 滑鼠單擊事件onclick 246
13.4.2 表單改變事件onchange() 247
13.4.3 完成載入事件onload 248
第14章 JavaScript對象 249
14.1 數組 249
14.1.1 Array對象的屬性 250
14.1.2 Array對象的方法 250
14.1.3 數組遍歷 254
14.2 字元串對象 254
14.2.1 String對象的屬性 254
14.2.2 String對象的方法 255
14.3 日期 257
14.3.1 初始化一個日期 258
14.3.2 獲取日期參數 258
第15章 JavaScript基本語法 261
15.1 開始使用JavaScript 261
15.2 變數 265
15.3 基本數據類型 265
15.4 基本語句 266
15.4.1 if else語句 266
15.4.2 循環語句 267
15.5 函式 267
15.6 對象 268
第16章 Window對象 270
16.1 setInterval()方法和clearInterval()方法 270
16.2 setTimeout()方法和clearTimeout()方法 274
16.3 Location對象 277
第17章 函式 279
17.1 函式的定義 279
17.1.1 初識函式 279
17.1.2 匿名函式 280
17.1.3 自我調用函式 280
17.2 函式調用 281
17.3 函式的作用域 281
17.4 函式的參數 283
第18章 jQuery中的選擇器 284
18.1 選取所有元素 284
18.2 基本選擇器 288
18.2.1 id選擇器 288
18.2.2 class選擇器 288
18.2.3 元素選擇器 291
18.2.4 組合使用基本選擇器 292
18.3 位置選擇器 293
18.3.1 選擇特殊位置 293
18.3.2 任意位置選擇器 295
18.4 屬性選擇器 297
18.5 表單選擇器 299
18.5.1 根據type選擇對應的input 299
18.5.2 狀態選擇器 300
18.6 靈活使用各種選擇器 301
第19章 jQuery中的DOM方法 303
19.1 獲取上層元素 303
19.1.1 parent()方法 303
19.1.2 parents()方法 305
19.1.3 parentsUntil() 方法 306
19.2 獲取後代元素 307
19.2.1 children()方法 307
19.2.2 find()方法 309
19.3 選擇兄弟節點 310
19.3.1 siblings()方法 310
19.3.2 next()方法、nextAll()方法和nextUntil()方法 312
19.4 jQuery與JavaScript的DOM選擇對比 314
19.5 jQuery中其他DOM節點選擇方法 315
19.5.1 first()和last() 315
19.5.2 eq() 315
19.5.3 filter()方法和not()方法 316
第20章 jQuery操縱CSS樣式 318
20.1 css()方法——直接控制元素樣式 318
20.1.1 獲取某個元素的CSS屬性值 318
20.1.2 設定元素的CSS屬性 319
20.2 其他CSS方法 323
20.2.1 和元素尺寸相關的方法 323
20.2.2 和位置相關的方法 324
第21章 jQuery中的動畫效果 328
21.1 基本動畫效果 328
21.1.1 顯示和隱藏 328
21.1.2 淡入和淡出 331
21.1.3 滑動 333
21.2 複雜動畫效果 335
21.3 jQuery中的動畫佇列 342
21.4 停止動畫 344
第22章 jQuery中的AJAX 348
22.1 環境搭建 349
22.2 load()方法 350
22.3 $.get()方法和$.post()方法 352
22.3.1 $.get()方法和$.post()方法的原理和使用 352
22.3.2 實戰訓練 356
22.4 ajax()方法 360
22.5 ajaxStart()和ajaxComplete()方法 364
第23章 jQuery Mobile組件 367
23.1 定義一個移動套用界面——page組件 367
23.1.1 指定一個頁面 367
23.1.2 為頁面劃分不同的區域 368
23.2 添加功能按鈕——button組件 369
23.2.1 按鈕組件的定義方式 369
23.2.2 按鈕組件樣式設定 371
23.2.3 按鈕組 373
23.3 選單欄 374
23.4 定義可滑動的面板——panel組件 376
23.5 彈框組件 379
23.5.1 定義基本彈框 379
23.5.2 裝飾彈窗 381
23.6 在移動套用中添加回響式表格 385
23.6.1 回流表格 385
23.6.2 列切換表格 387
第24章 jQuery Mobile的觸摸事件 389
24.1 開始使用jQuery Mobile 390
24.2 jQuery Mobile事件 390
24.3 觸摸事件 391
24.3.1 tap——手指單擊一次 391
24.3.2 taphold——手指長按事件 393
24.3.3 swipe——滑動事件 394
24.3.4 設備轉動事件 396
24.3.5 螢幕滾動事件 398
24.3.6 頁面事件 399
第25章 jQuery Mobile表單 401
25.1 jQuery Mobile中表單的基本結構 401
25.2 表單樣式 402
25.2.1 隱藏標籤內容 402
25.2.2 為輸入框添加小圖示 403
25.3 表單的種類 404
25.3.1 搜尋框 405
25.3.2 滑塊輸入 405
25.3.3 單選框和複選框 407
第26章 jQuery Mobile列表 410
26.1 簡單列表 410
26.2 複雜樣式的列表 414
26.2.1 氣泡數字 414
26.2.2 列表圖示 417
26.2.3 複雜結構的列表 418
26.2.4 為列表添加功能 420
第27章 jQuery Mobile項目結構 425
27.1 基本結構 425
27.2 頁面間的過渡 427
27.2.1 淡入過渡——fade 427
27.2.2 翻轉過渡——flip 428
27.2.3 拋出效果——flow 429
27.2.4 滑動效果——slide 430
27.2.5 彈窗效果——pop 432
第28章 項目實戰:聊天APP的開發 434
28.1 移動界面編寫 434
28.1.1 聊天列表頁面框架搭建 434
28.1.2 聊天列表製作 435
28.1.3 頁面頭部和底部的編寫 437
28.2 聊天詳情頁面搭建 439