目 錄
第1章 認(rèn)識(shí)HTML 1
1.1HTML基本介紹 1
1.2HTML常用標(biāo)簽 2
1.3HTML表單 3
1.4HTML和CSS的簡(jiǎn)單交互 4
第2章 語(yǔ)義化標(biāo)簽 5
2.1 什么是語(yǔ)義化標(biāo)簽 5
2.2header標(biāo)簽 6
2.3footer標(biāo)簽 8
2.4nav標(biāo)簽 9
2.5article標(biāo)簽 10
2.6 section標(biāo)簽 12
2.7aside標(biāo)簽 13
第3章 視頻和音頻 15
3.1 音頻播放器——audio 15
3.1.1audio標(biāo)簽的使用 15
3.1.2如何獲取音頻文件的URL 16
3.1.3autoplay屬性 17
3.1.4loop屬性 18
3.1.5preload屬性 18
3.1.6audio標(biāo)簽支持的音頻文件 18
3.2 視頻播放器——video 19
3.2.1video標(biāo)簽的使用 19
3.2.2video標(biāo)簽的屬性 20
3.3Media事件 23
3.3.1HTML5中audio和video的方法 23
3.3.2HTML5中audio和video的屬性 26
3.3.3HTML5中audio和video的事件 36
第4章 存儲(chǔ) 38
4.1 本地存儲(chǔ) 39
4.2localStorage對(duì)象 39
4.2.1通過(guò)localStorage設(shè)置存儲(chǔ)元素 40
4.2.2獲取數(shù)據(jù) 43
4.2.3刪除數(shù)據(jù) 44
4.2.4清除數(shù)據(jù) 45
4.3sessionStorage 48
4.3.1存儲(chǔ)數(shù)據(jù) 48
4.3.2獲取數(shù)據(jù) 50
4.3.3刪除數(shù)據(jù) 51
4.3.4清除數(shù)據(jù) 51
4.4storage對(duì)象 52
4.5storage事件 53
4.6 應(yīng)用程序緩存 54
4.7 本地?cái)?shù)據(jù)庫(kù) 57
4.7.1創(chuàng)建/打開(kāi)數(shù)據(jù)庫(kù) 57
4.7.2執(zhí)行操作 58
第5章 即時(shí)通信 61
5.1 概述 61
5.1.1Web端即時(shí)通信技術(shù) 61
5.1.2實(shí)現(xiàn)Web端即時(shí)通信的方法 62
5.1.3四種Web即時(shí)通信技術(shù)比較 63
5.2 短輪詢?cè)砼c實(shí)現(xiàn) 63
5.2.1原理 63
5.2.2實(shí)現(xiàn) 63
5.3 長(zhǎng)輪詢?cè)砼c實(shí)現(xiàn) 64
5.3.1原理 64
5.3.2實(shí)現(xiàn) 64
5.4 長(zhǎng)連接的原理與實(shí)現(xiàn) 66
5.4.1原理 66
5.4.2實(shí)現(xiàn) 67
5.5WebSocket原理與前端API 68
5.5.1原理 68
5.5.2前端API 68
第6章 Canvas繪圖 69
6.1Canvas基礎(chǔ) 69
6.1.1基本Canvas創(chuàng)建 69
6.1.2開(kāi)始在Canvas上繪制元素 71
6.1.3繪制一條直線 71
6.1.4為直線設(shè)定樣式 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繪制兩個(gè)圖形 89
6.4.2新圖形和原圖形之間的關(guān)系 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.1id選擇器 97
7.1.2class選擇器 98
7.1.3元素選擇器 103
7.2 基本選擇器綜合使用 104
7.2.1選擇器的嵌套 104
7.2.2基本選擇器優(yōu)先級(jí)問(wèn)題 109
7.2.3同時(shí)設(shè)定多個(gè)元素樣式 110
7.3 偽類選擇器 111
7.3.1狀態(tài)選擇器 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.1static 127
8.2relative 129
8.3absolute 130
8.4fixed 132
8.5float浮動(dòng)布局 133
第9章 移動(dòng)元素單位 137
9.1px 137
9.1.1需求描述一 138
9.1.2需求描述二 140
9.2em 143
9.3rem 144
9.3.1需求描述一 145
9.3.2需求描述二 146
第10章 盒模型 148
10.1內(nèi)容 149
10.1.1text-align 149
10.1.2line-height 150
10.1.3字體 152
10.1.4截?cái)?153
10.2內(nèi)邊距邊界 155
10.3邊框邊界 156
10.4外邊距邊界 161
第11章 Flex布局——FlexBox 162
第12章 使用CSS3新特性 188
12.1transform屬性 188
12.2translate方法 189
12.3rotate方法 194
12.4scale()方法 196
12.5skew()方法 197
12.6transition方法 203
12.7幀動(dòng)畫(huà) 212
第13章 DOM操作 229
13.1DOM是什么 229
13.2通過(guò)DOM獲取文檔元素 230
13.2.1getElementById()方法 230
13.2.2innerHTML方法 230
13.2.3getElementsByTagName()方法 233
13.2.4getElementsByClassName()方法 234
13.3DOM節(jié)點(diǎn) 236
13.3.1節(jié)點(diǎn)之間的關(guān)系 236
13.3.2節(jié)點(diǎn)的屬性 240
13.4DOM事件 245
13.4.1鼠標(biāo)單擊事件onclick 246
13.4.2表單改變事件onchange() 247
13.4.3完成加載事件onload1 248
第14章 JavaScript對(duì)象 249
14.1數(shù)組 249
14.1.1Array對(duì)象的屬性 250
14.1.2Array對(duì)象的方法 250
14.1.3數(shù)組遍歷 254
14.2字符串對(duì)象 254
14.2.1String對(duì)象的屬性 254
14.2.2String對(duì)象的方法 255
14.3日期 257
14.3.1初始化一個(gè)日期 258
14.3.2獲取日期參數(shù) 258
第15章 JavaScript基本語(yǔ)法 261
15.1開(kāi)始使用JavaScript 261
15.2變量 265
15.3基本數(shù)據(jù)類型 265
15.4基本語(yǔ)句 266
15.4.1if else語(yǔ)句 266
15.4.2循環(huán)語(yǔ)句 267
15.5函數(shù) 267
15.6對(duì)象 268
第16章 Window對(duì)象 270
16.1setInterval()方法和clearInterval()方法 270
16.2setTimeout()方法和clearTimeout()方法 274
16.3Location對(duì)象 277
第17章 函數(shù) 279
17.1函數(shù)的定義 279
17.1.1初識(shí)函數(shù) 279
17.1.2匿名函數(shù) 280
17.1.3自我調(diào)用函數(shù) 280
17.2函數(shù)調(diào)用 281
17.3函數(shù)的作用域 281
17.4函數(shù)的參數(shù) 283
第18章 jQuery中的選擇器 284
18.1選取所有元素 284
18.2基本選擇器 288
18.2.1id選擇器 288
18.2.2class選擇器 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根據(jù)type選擇對(duì)應(yīng)的input 299
18.5.2狀態(tài)選擇器 300
18.6靈活使用各種選擇器 301
第19章 jQuery中的DOM方法 303
19.1獲取上層元素 303
19.1.1parent()方法 303
19.1.2parents()方法 305
19.1.3parentsUntil() 方法 306
19.2獲取后代元素 307
19.2.1children()方法 307
19.2.2find()方法 309
19.3選擇兄弟節(jié)點(diǎn) 310
19.3.1siblings()方法 310
19.3.2next()方法、nextAll()方法和nextUntil()方法 312
19.4jQuery與JavaScript的DOM選擇對(duì)比 314
19.5jQuery中其他DOM節(jié)點(diǎn)選擇方法 315
19.5.1first()和last() 315
19.5.2eq() 315
19.5.3filter()方法和not()方法 316
第20章 jQuery操縱CSS樣式 318
20.1css()方法——直接控制元素樣式 318
20.1.1獲取某個(gè)元素的CSS屬性值 318
20.1.2設(shè)置元素的CSS屬性 319
20.2其他CSS方法 323
20.2.1和元素尺寸相關(guān)的方法 323
20.2.2和位置相關(guān)的方法 324
第21章 jQuery中的動(dòng)畫(huà)效果 328
21.1基本動(dòng)畫(huà)效果 328
21.1.1顯示和隱藏 328
21.1.2淡入和淡出 331
21.1.3滑動(dòng) 333
21.2復(fù)雜動(dòng)畫(huà)效果 335
21.3jQuery中的動(dòng)畫(huà)隊(duì)列 342
21.4停止動(dòng)畫(huà) 344
第22章 jQuery中的AJAX 348
22.1環(huán)境搭建 349
22.2load()方法 350
22.3$.get()方法和$.post()方法 352
22.3.1$.get()方法和$.post()方法的原理和使用 352
22.3.2實(shí)戰(zhàn)訓(xùn)練 356
22.4ajax()方法 360
22.5ajaxStart()和ajaxComplete()方法 364
第23章 jQuery Mobile組件 367
23.1定義一個(gè)移動(dòng)應(yīng)用界面——page組件 367
23.1.1指定一個(gè)頁(yè)面 367
23.1.2為頁(yè)面劃分不同的區(qū)域 368
23.2添加功能按鈕——button組件 369
23.2.1按鈕組件的定義方式 369
23.2.2按鈕組件樣式設(shè)定 371
23.2.3按鈕組 373
23.3菜單欄 374
23.4定義可滑動(dòng)的面板——panel組件 376
23.5彈框組件 379
23.5.1定義基本彈框 379
23.5.2裝飾彈窗 381
23.6在移動(dòng)應(yīng)用中添加響應(yīng)式表格 385
23.6.1回流表格 385
23.6.2列切換表格 387
第24章 jQuery Mobile的觸摸事件 389
24.1開(kāi)始使用jQuery Mobile 390
24.2jQuery Mobile事件 390
24.3觸摸事件 391
24.3.1tap——手指單擊一次 391
24.3.2taphold——手指長(zhǎng)按事件 393
24.3.3swipe——滑動(dòng)事件 394
24.3.4設(shè)備轉(zhuǎn)動(dòng)事件 396
24.3.5屏幕滾動(dòng)事件 398
24.3.6頁(yè)面事件 399
第25章 jQuery Mobile表單 401
25.1jQuery Mobile中表單的基本結(jié)構(gòu) 401
25.2表單樣式 402
25.2.1隱藏標(biāo)簽內(nèi)容 402
25.2.2為輸入框添加小圖標(biāo) 403
25.3表單的種類 404
25.3.1搜索框 405
25.3.2滑塊輸入 405
25.3.3單選框和復(fù)選框 407
第26章 jQuery Mobile列表 410
26.1簡(jiǎn)單列表 410
26.2復(fù)雜樣式的列表 414
26.2.1氣泡數(shù)字 414
26.2.2列表圖標(biāo) 417
26.2.3復(fù)雜結(jié)構(gòu)的列表 418
26.2.4為列表添加功能 420
第27章 jQuery Mobile項(xiàng)目結(jié)構(gòu) 425
27.1基本結(jié)構(gòu) 425
27.2頁(yè)面間的過(guò)渡 427
27.2.1淡入過(guò)渡——fade 427
27.2.2翻轉(zhuǎn)過(guò)渡——flip 428
27.2.3拋出效果——flow 429
27.2.4滑動(dòng)效果——slide 430
27.2.5彈窗效果——pop 432
第28章 項(xiàng)目實(shí)戰(zhàn):聊天APP的開(kāi)發(fā) 434
28.1移動(dòng)界面編寫 434
28.1.1聊天列表頁(yè)面框架搭建 434
28.1.2聊天列表制作 435
28.1.3頁(yè)面頭部和底部的編寫 437
28.2聊天詳情頁(yè)面搭建 439