從零開始學(xué)HTML5+CSS3+JavaScript

第1篇　HTML基礎(chǔ)篇
第1章  HTML基礎(chǔ)  2 視頻講解：5節(jié)，58分鐘
1.1  HTML概述  3
1.1.1  什么是HTML  3
1.1.2  HTML的發(fā)展歷程  3
1.2  HTML文件的基本結(jié)構(gòu)  3
1.2.1  HTML的基本結(jié)構(gòu)  4
1.2.2  HTML的基本標(biāo)簽  5
1.3  編寫第一個HTML文件  8
1.3.1  HTML文件的編寫方法  8
1.3.2  手工編寫頁面  9
1.3.3  使用WebStorm制作頁面  10
[實(shí)例1.1]  運(yùn)用屬性，渲染頁面效果  15
本章知識思維導(dǎo)圖  16

第2章  文本  17 視頻講解：10節(jié)，72分鐘
2.1  標(biāo)題  18
2.1.1  標(biāo)題標(biāo)簽  18
[實(shí)例2.1]  巧用標(biāo)題標(biāo)簽，編寫開心一笑  18
2.1.2  標(biāo)題的對齊方式  20
[實(shí)例2.2]  活用文字居中，推薦商品信息  20
2.2  文字  21
2.2.1  文字的斜體、下劃線、刪除線  21
[實(shí)例2.3]  活用文字裝飾，推薦商品信息  21
2.2.2  文字的上標(biāo)與下標(biāo)  22
[實(shí)例2.4]  使用上標(biāo)與下標(biāo)，展示數(shù)學(xué)公示表   23
2.2.3  特殊文字符號  23
[實(shí)例2.5]  巧用文字符，繪制字符畫  24
2.3  段落  24
2.3.1  段落標(biāo)簽  25
[實(shí)例2.6]  巧用段落標(biāo)簽，介紹創(chuàng)意文字  25
2.3.2  段落的換行標(biāo)簽  26
[實(shí)例2.7]  巧用換行，書寫古詩  26
2.3.3  段落的原格式標(biāo)簽  27
[實(shí)例2.8]  巧用原格式標(biāo)簽，輸出元旦快樂  27
2.4  水平線  28
2.4.1  水平線標(biāo)簽  28
[實(shí)例2.9]  巧用水平線，繪制行表格  28
2.4.2  水平線標(biāo)簽的寬度  29
[實(shí)例2.10]  巧用的寬度屬性，裝飾文字  29
本章知識思維導(dǎo)圖  30

第3章  添加圖像  31 視頻講解：5節(jié)，74分鐘
3.1  添加圖像  32
3.1.1  圖像的基本格式  32
3.1.2  添加圖像  32
[實(shí)例3.1]  使用img標(biāo)簽，實(shí)現(xiàn)象棋簡介  33
3.2  設(shè)置圖像屬性  34
3.2.1  圖像大小與邊框  34
[實(shí)例3.2]  改變手機(jī)商品圖像的大小和邊框  34
3.2.2  圖像間距與對齊方式  35
[實(shí)例3.3]  使用align和vspace等改變頭像的位置  36
3.2.3  替換文本與提示文字  36
[實(shí)例3.4]  設(shè)置圖像的提示文字與替換文本  37
本章知識思維導(dǎo)圖  38

第4章  超鏈接的使用  39 視頻講解：4節(jié)，67分鐘
4.1  鏈 接 標(biāo) 簽  40
4.1.1  文本鏈接  40
[實(shí)例4.1]  巧用文本鏈接，實(shí)現(xiàn)網(wǎng)站導(dǎo)航  40
4.1.2  書簽鏈接  41
[實(shí)例4.2]  巧用書簽鏈接，實(shí)現(xiàn)商城網(wǎng)頁內(nèi)部跳轉(zhuǎn)  41
4.2  圖像的超鏈接  43
4.2.1  圖像的超鏈接  43
[實(shí)例4.3]  添加圖像鏈接，實(shí)現(xiàn)“手機(jī)風(fēng)暴”板塊  43
4.2.2  圖像熱區(qū)鏈接  44
[實(shí)例4.4]  使用熱區(qū)鏈接，添加多個鏈接地址  45
本章知識思維導(dǎo)圖  46

第5章  表格與標(biāo)簽  47 視頻講解：9節(jié)，72分鐘
5.1  簡單表格  48
5.1.1  簡單表格的制作  48
[實(shí)例5.1]  使用表格標(biāo)簽編寫值日表  48
5.1.2  表頭的設(shè)置  49
[實(shí)例5.2]  使用表頭標(biāo)簽制作簡單課程表  50
5.2  表格的高級應(yīng)用  51
5.2.1  表格的樣式  51
[實(shí)例5.3]  制作商品推薦表格  51
5.2.2  表格的合并  52
[實(shí)例5.4]  使用表格標(biāo)簽，制作復(fù)雜的課程表  53
5.2.3  表格的分組  54
[實(shí)例5.5]  使用表格分組制作學(xué)生練習(xí)表  54
5.3  標(biāo)簽  56
5.3.1  標(biāo)簽的介紹  56
[實(shí)例5.6]  使用標(biāo)簽制作一首古詩  56
5.3.2  標(biāo)簽的應(yīng)用  57
[實(shí)例5.7]  使用標(biāo)簽制作個人簡歷  57
5.4  標(biāo)簽  58
5.4.1  標(biāo)簽的介紹  58
[實(shí)例5.8]  使用標(biāo)簽制作春節(jié)介紹短文  59
5.4.2  標(biāo)簽的應(yīng)用  59
[實(shí)例5.9]  使用標(biāo)簽制作公司介紹小短文  60
本章知識思維導(dǎo)圖  61

第2篇　CSS3與HTML5應(yīng)用篇
第6章  CSS3概述  64 視頻講解：9節(jié)，141分鐘
6.1  CSS概述  65
6.1.1  CSS的發(fā)展史  65
6.1.2  一個簡單的CSS示例  65
6.2  CSS3中的選擇器  67
6.2.1  屬性選擇器  68
[實(shí)例6.1]  實(shí)現(xiàn)51購商城中的手機(jī)風(fēng)暴版塊  68
6.2.2  類和ID選擇器  69
[實(shí)例6.2]  實(shí)現(xiàn)商城首頁中爆款特賣版塊  70
6.2.3  偽類和偽元素選擇器  71
[實(shí)例6.3]  實(shí)現(xiàn)vivo X9s手機(jī)的宣傳頁面  72
6.2.4  其他選擇器  74
[實(shí)例6.4]  實(shí)現(xiàn)商城的分類版塊界面  74
6.3  常用屬性  76
6.3.1  文本相關(guān)屬性  76
[實(shí)例6.5]  實(shí)現(xiàn)51購商城的搶購頁面  78
6.3.2  背景相關(guān)屬性  79
[實(shí)例6.6]  實(shí)現(xiàn)為登錄頁面插入背景圖像  80
6.3.3  列表相關(guān)屬性  81
[實(shí)例6.7]  實(shí)現(xiàn)購物商城導(dǎo)航欄  81
本章知識思維導(dǎo)圖  83

第7章  CSS3高級應(yīng)用  84 視頻講解：8節(jié)，155分鐘
7.1  框模型  85
7.1.1  外邊距（margin）  85
[實(shí)例7.1]  實(shí)現(xiàn)vivo X9 Plus手機(jī)宣傳頁面  86
7.1.2  內(nèi)邊距（padding）  87
[實(shí)例7.2]  實(shí)現(xiàn)手機(jī)商城新品專區(qū)的商品頁面  88
7.1.3  邊框（border）  89
[實(shí)例7.3]  實(shí)現(xiàn)購物商城中的商品列表  91
7.2  布局常用屬性  92
7.2.1  浮動  93
[實(shí)例7.4]  比較各浮動方式的區(qū)別  93
7.2.2  定位  94
[實(shí)例7.5]  實(shí)現(xiàn)鼠標(biāo)滑過文字顯示對應(yīng)的內(nèi)容  95
7.3  動畫與特效  95
7.3.1  變換（transform）  96
[實(shí)例7.6]  實(shí)現(xiàn)鼠標(biāo)滑過時圖像顯示對應(yīng)的變形效果  96
7.3.2  過渡（transition）  98
[實(shí)例7.7]  實(shí)現(xiàn)鼠標(biāo)滑過時逐漸展開圖像的效果  99
7.3.3  動畫（animation）  100
[實(shí)例7.8]  實(shí)現(xiàn)滾動廣告動畫  102
本章知識思維導(dǎo)圖  103

第8章  列表  104 視頻講解：7節(jié)，32分鐘
8.1  列表的標(biāo)簽  105
8.2  無序列表  105
8.2.1  無序列表標(biāo)簽  105
[實(shí)例8.1]  無序列表列舉唐宋八大家  106
8.2.2  無序列表屬性  106
[實(shí)例8.2]  無序列表制作商品預(yù)覽效果  106
8.3  有序列表  108
8.3.1  有序列表標(biāo)簽  108
[實(shí)例8.3]  運(yùn)用有序列表輸出古詩  108
8.3.2  有序列表屬性  108
[實(shí)例8.4]  運(yùn)用有序列表制作商城頁面  109
8.4  列表的嵌套  110
8.4.1  定義列表的嵌套  110
[實(shí)例8.5]  運(yùn)用列表嵌套輸出古詩  111
8.4.2  無序列表和有序列表的嵌套  112
[實(shí)例8.6]  使用列表嵌套制作導(dǎo)航欄  112
本章知識思維導(dǎo)圖  114

第9章  表單  115 視頻講解：8節(jié)，44分鐘
9.1  表單概述  116
9.1.1  概述  116
9.1.2  表單標(biāo)簽  116
9.2  輸入標(biāo)簽  118
9.2.1  文本框  118
[實(shí)例9.1]  實(shí)現(xiàn)商城中登錄頁面  119
9.2.2  單選框和復(fù)選框  120
[實(shí)例9.2]  實(shí)現(xiàn)購物車界面選擇商品功能  120
9.2.3  按鈕  121
[實(shí)例9.3]  實(shí)現(xiàn)收貨地址信息填寫頁面  122
9.2.4  圖像域和文件域  123
[實(shí)例9.4]  實(shí)現(xiàn)上傳頭像頁面  124
9.3  文本域和菜單/列表  125
9.3.1  文本域  125
[實(shí)例9.5]  實(shí)現(xiàn)商品評價輸入框  126
9.3.2  菜單/列表  126
[實(shí)例9.6]  實(shí)現(xiàn)個人資料填寫頁面  127
本章知識思維導(dǎo)圖  128

第10章  多媒體播放  129 視頻講解：8節(jié)，116分鐘
10.1  HTML5多媒體的簡述  130
10.1.1  HTML4中多媒體的應(yīng)用  130
10.1.2  HTML5頁面中的多媒體  130
10.2  多媒體元素基本屬性  131
10.3  多媒體元素常用方法  135
10.3.1  媒體播放時的方法  135
[實(shí)例10.1]  多功能的視頻播放效果  135
10.3.2  canPlayType(type)方法  137
10.4  多媒體元素重要事件  138
10.4.1  事件處理方式  138
10.4.2  事件介紹  138
10.4.3  事件實(shí)例  139
[實(shí)例10.2]  多媒體元素重要事件的運(yùn)用示例  139
本章知識思維導(dǎo)圖  141

第11章  HTML5新特性  142 視頻講解：12節(jié)，53分鐘
11.1  誰在開發(fā)HTML5  143
11.2  HTML5和HTML4的區(qū)別  143
11.2.1  HTML5的語法變化  143
11.2.2  HTML5中的標(biāo)記方法  143
11.2.3  HTML5語法中需要掌握的3個要點(diǎn)  144
[實(shí)例11.1]  巧用標(biāo)簽制作區(qū)域圖像映射  145
11.3  新增和廢除的元素  146
11.3.1  新增的結(jié)構(gòu)元素  146
[實(shí)例11.2]  運(yùn)用結(jié)構(gòu)元素制作導(dǎo)航鏈接  147
11.3.2  新增的塊級（block）的語義元素  149
11.3.3  新增的行內(nèi)（inline）的語義元素  150
[實(shí)例11.3]  運(yùn)用meter元素制作柱狀圖  151
11.3.4  新增的嵌入多媒體元素與交互性元素  151
11.3.5  新增的input元素的類型  152
11.3.6  廢除的元素  153
11.4  新增的屬性和廢除的屬性  153
11.4.1  新增的屬性  153
11.4.2  廢除的屬性  155
本章知識思維導(dǎo)圖  157

第12章  響應(yīng)式網(wǎng)頁設(shè)計(jì)  158 視頻講解：10節(jié)，40分鐘
12.1  概述  159
12.1.1  響應(yīng)式網(wǎng)頁設(shè)計(jì)的概念  159
12.1.2  響應(yīng)式網(wǎng)頁設(shè)計(jì)的優(yōu)缺點(diǎn)和技術(shù)原理  159
12.2  像素和屏幕分辨率  160
12.2.1  像素和屏幕分辨率  160
12.2.2  設(shè)備像素和CSS像素  161
12.3  視口  162
12.3.1  視口  162
12.3.2  視口常用屬性  163
12.3.3  媒體查詢  163
12.4  響應(yīng)式網(wǎng)頁的布局設(shè)計(jì)  164
12.4.1  常用布局類型  164
12.4.2  布局的實(shí)現(xiàn)方式  165
12.4.3  響應(yīng)式布局的設(shè)計(jì)與實(shí)現(xiàn)  166
[實(shí)例12.1]  實(shí)現(xiàn)51購商城登錄頁面的響應(yīng)式布局  166
本章知識思維導(dǎo)圖  167

第13章  響應(yīng)式組件  168 視頻講解：9節(jié)，76分鐘
13.1  響應(yīng)式圖像  169
13.1.1  方法1：使用標(biāo)簽  169
[實(shí)例13.1]  巧用標(biāo)簽實(shí)現(xiàn)圖像響應(yīng)式布局  169
13.1.2  方法2：使用CSS圖像  170
[實(shí)例13.2]  巧用媒體查詢控制圖像顯示  170
13.2  響應(yīng)式視頻  171
13.2.1  方法1：使用標(biāo)簽  172
[實(shí)例13.3]  巧用標(biāo)簽播放手機(jī)視頻  172
13.2.2  方法2：使用HTML5手機(jī)播放器  173
[實(shí)例13.4]  實(shí)現(xiàn)帶點(diǎn)贊、分享和換膚功能的手機(jī)播放器  173
13.3  響應(yīng)式導(dǎo)航菜單  174
13.3.1  方法1：CSS3響應(yīng)式菜單  175
[實(shí)例13.5]  巧用media關(guān)鍵字實(shí)現(xiàn)響應(yīng)式菜單  175
13.3.2  方法2：JavaScript響應(yīng)式菜單  176
[實(shí)例13.6]  巧用第三方組件實(shí)現(xiàn)響應(yīng)式菜單  177
13.4  響應(yīng)式表格  178
13.4.1  方法1：隱藏表格中的列  178
[實(shí)例13.7]  設(shè)計(jì)招聘信息表格隱藏次要信息列  178
13.4.2  方法2：滾動表格中的列  180
[實(shí)例13.8]   設(shè)計(jì)招聘信息表格滾動查看信息列  180
13.4.3  方法3：轉(zhuǎn)換表格中的列  182
[實(shí)例13.9]  將招聘信息的表格變?yōu)榱斜?nbsp; 182
本章知識思維導(dǎo)圖  183

第3篇　JavaScript基礎(chǔ)篇
第14章   JavaScript概述  186 視頻講解：6節(jié)，46分鐘
14.1  JavaScript簡述  187
14.2  WebStorm簡介  190
14.3  JavaScript在HTML中的使用  190
14.3.1  在頁面中直接嵌入JavaScript代碼  190
[實(shí)例14.1]  編寫第一個JavaScript程序  191
14.3.2  鏈接外部JavaScript文件  194
[實(shí)例14.2]  調(diào)用外部JavaScript文件  194
14.3.3  作為標(biāo)簽的屬性值使用  196
14.4  JavaScript基本語法  197
本章知識思維導(dǎo)圖  198

第15章  JavaScript基礎(chǔ)  199 視頻講解：16節(jié)，139分鐘
15.1  數(shù)據(jù)類型  200
15.1.1  數(shù)值型  200
[實(shí)例15.1]  輸出紅、綠、藍(lán)三種顏色的色值  201
[實(shí)例15.2]  輸出科學(xué)計(jì)數(shù)法表示的浮點(diǎn)數(shù)  202
15.1.2  字符串型  202
[實(shí)例15.3]  輸出奧尼爾的中文名、英文名和別名  204
15.1.3  布爾型  205
15.1.4  特殊數(shù)據(jù)類型  205
15.2  常量和變量  206
15.2.1  常量  206
15.2.2  變量  206
[實(shí)例15.4]   輸出球員信息  208
15.3  運(yùn)算符  209
15.3.1  算術(shù)運(yùn)算符  209
[實(shí)例15.5]  將華氏度轉(zhuǎn)換為攝氏度  210
15.3.2  字符串運(yùn)算符  210
[實(shí)例15.6]  字符串運(yùn)算符的使用  211
15.3.3  比較運(yùn)算符  211
[實(shí)例15.7]  比較運(yùn)算符的使用  212
15.3.4  賦值運(yùn)算符  213
[實(shí)例15.8]  賦值運(yùn)算符的使用  213
15.3.5  邏輯運(yùn)算符  214
[實(shí)例15.9]  邏輯運(yùn)算符的使用  214
15.3.6  條件運(yùn)算符  215
[實(shí)例15.10]  條件運(yùn)算符的使用  215
15.3.7  其他運(yùn)算符  216
15.3.8  運(yùn)算符優(yōu)先級  217
[實(shí)例15.11]  運(yùn)算符優(yōu)先級的使用  218
15.4  表達(dá)式  219
15.5  數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則  219
本章思維導(dǎo)圖  220

第16章  JavaScript基本語句  221 視頻講解：11節(jié)，115分鐘
16.1  條件判斷語句  222
16.1.1  if語句  222
[實(shí)例16.1]  獲取3個數(shù)中的最大值  223
[實(shí)例16.2]  判斷2021年2月份的天數(shù)  224
[實(shí)例16.3]  輸出考試成績對應(yīng)的等級  225
[實(shí)例16.4]  判斷女職工是否已經(jīng)退休  227
16.1.2  switch語句  227
[實(shí)例16.5]  輸出獎項(xiàng)級別及獎品  229
16.2  循環(huán)語句  229
16.2.1  while語句  230
[實(shí)例16.6]  計(jì)算5000米比賽的完整圈數(shù)  231
16.2.2  do...while語句  231
[實(shí)例16.7]  計(jì)算1 2 … 100的和  232
16.2.3  for語句  232
[實(shí)例16.8]  計(jì)算100以內(nèi)所有偶數(shù)的和  234
16.2.4  循環(huán)語句的嵌套  234
[實(shí)例16.9]  輸出乘法口訣表  235
16.3  跳轉(zhuǎn)語句  235
16.3.1  continue語句  235
[實(shí)例16.10]  輸出影廳座位圖  236
16.3.2  break語句  236
16.4  異常處理語句  237
16.4.1  try...catch...finally語句  238
16.4.2  Error對象  239
16.4.3  使用throw語句拋出異常  239
本章知識思維導(dǎo)圖  240

第17章   JavaScript中的函數(shù)  241 視頻講解：13節(jié)，82分鐘
17.1  函數(shù)的定義和調(diào)用  242
17.1.1  函數(shù)的定義  242
17.1.2  函數(shù)的調(diào)用  243
17.2  函數(shù)的參數(shù)  244
[實(shí)例17.1]  輸出圖書名稱和圖書作者  245
17.3  函數(shù)的返回值  245
[實(shí)例17.2]  計(jì)算購物車中商品總價  246
17.4  嵌套函數(shù)  247
17.4.1  函數(shù)的嵌套定義  247
17.4.2  函數(shù)的嵌套調(diào)用  247
[實(shí)例17.3]  獲得選手的平均分  248
17.5  遞歸函數(shù)  249
17.6  變量的作用域  249
17.6.1  全局變量和局部變量  249
17.6.2  變量的優(yōu)先級  250
17.7  內(nèi)置函數(shù)  250
17.7.1  數(shù)值處理函數(shù)  251
17.7.2  字符串處理函數(shù)  253
17.8  定義匿名函數(shù)  254
17.8.1  在表達(dá)式中定義函數(shù)  254
[實(shí)例17.4]  輸出6以內(nèi)的乘法表  255
17.8.2  使用Function()構(gòu)造函數(shù)  255
本章知識思維導(dǎo)圖  256

第18章  JavaScript中的對象  257 視頻講解：10節(jié)，132分鐘
18.1  對象簡介  258
18.1.1  什么是對象  258
18.1.2  對象的屬性和方法  258
18.1.3  JavaScript對象的種類  259
18.2  自定義對象的創(chuàng)建  259
18.2.1  直接創(chuàng)建自定義對象  259
18.2.2  通過自定義構(gòu)造函數(shù)創(chuàng)建對象  260
[實(shí)例18.1]  創(chuàng)建一個球員對象  261
[實(shí)例18.2]  輸出電影信息  262
[實(shí)例18.3]  創(chuàng)建一個圓的對象  263
18.2.3  通過Object對象創(chuàng)建自定義對象  264
[實(shí)例18.4]  創(chuàng)建一個圖書對象  265
18.3  對象訪問語句  266
18.3.1  for...in語句  266
18.3.2  with語句  266
18.4  常用內(nèi)部對象  267
18.4.1  Math對象  268
[實(shí)例18.5]  生成指定位數(shù)的隨機(jī)數(shù)  269
18.4.2  Date對象  270
[實(shí)例18.6]  輸出當(dāng)前日期和時間  273
[實(shí)例18.7]  獲取當(dāng)前日期距離明年元旦的天數(shù)  275
本章知識思維導(dǎo)圖  276

第19章  JavaScript中的數(shù)組  277 視頻講解：14節(jié)，114分鐘
19.1  數(shù)組介紹  278
19.2  定義數(shù)組  278
19.2.1  定義空數(shù)組  278
19.2.2  指定數(shù)組長度  279
19.2.3  指定數(shù)組元素  279
19.2.4  直接定義數(shù)組  280
19.3  操作數(shù)組元素  280
19.3.1  數(shù)組元素的輸入和輸出  280
[實(shí)例19.1]  輸出3個學(xué)霸的姓名  282
19.3.2  數(shù)組元素的添加  282
19.3.3  數(shù)組元素的刪除  283
19.4  數(shù)組的屬性  283
19.4.1  length屬性  283
[實(shí)例19.2]  輸出省份、省會以及旅游景點(diǎn)  284
19.4.2  prototype屬性  285
[實(shí)例19.3]  應(yīng)用自定義方法輸出數(shù)組  285
19.5  數(shù)組的方法  286
19.5.1  數(shù)組的添加和刪除  287
19.5.2  設(shè)置數(shù)組的排列順序  290
[實(shí)例19.4]  輸出2016電影票房排行榜前五名  292
19.5.3  獲取某段數(shù)組元素  293
[實(shí)例19.5]  計(jì)算選手的最終得分  294
19.5.4  數(shù)組轉(zhuǎn)換成字符串  294
本章知識思維導(dǎo)圖  296

第4篇　JavaScript高級篇
第20章  Ajax技術(shù)  298 視頻講解：11節(jié)，33分鐘
20.1  Ajax概述  299
20.1.1  Ajax應(yīng)用案例  299
20.1.2  Ajax的開發(fā)模式  299
20.1.3  Ajax的優(yōu)點(diǎn)和缺點(diǎn)  300
20.2  Ajax的技術(shù)組成  301
20.2.1  XMLHttpRequest對象  301
20.2.2  XML語言  301
20.2.3  JavaScript腳本語言  303
20.2.4  DOM  303
20.2.5  CSS  303
20.3  XMLHttpRequest對象  304
20.3.1  XMLHttpRequest對象的初始化  304
20.3.2  XMLHttpRequest對象的常用屬性  305
20.3.3  XMLHttpRequest對象的常用方法  306
[實(shí)例20.1]  讀取HTML文件  309
本章知識思維導(dǎo)圖  310

第21章  jQuery基礎(chǔ)  311 視頻講解：8節(jié)，62分鐘
21.1  jQuery概述  312
21.2  jQuery下載與配置  312
21.3  jQuery選擇器  313
21.3.1  jQuery的工廠函數(shù)  313
21.3.2  基本選擇器  314
[實(shí)例21.1]  獲取文本框中輸入的值  314
[實(shí)例21.2]  修改div元素的內(nèi)容  316
[實(shí)例21.3]  獲取元素并設(shè)置CSS樣式  317
[實(shí)例21.4]  篩選元素并添加新的樣式  319
21.3.3  層級選擇器  319
[實(shí)例21.5]  為版權(quán)列表設(shè)置樣式  320
[實(shí)例21.6]  實(shí)現(xiàn)為匹配元素?fù)Q膚  322
[實(shí)例21.7]  改變匹配元素的背景顏色  323
[實(shí)例21.8]  篩選div元素的同輩元素  324
21.3.4  過濾選擇器  325
[實(shí)例21.9]  實(shí)現(xiàn)一個帶表頭的雙色表格  326
[實(shí)例21.10]  應(yīng)用內(nèi)容過濾器匹配不同的單元格  328
[實(shí)例21.11]  利用表單對象的屬性過濾器匹配元素  329
21.3.5  屬性選擇器  331
21.3.6  表單選擇器  331
[實(shí)例21.12]  利用表單選擇器匹配元素  332
本章知識思維導(dǎo)圖  333

第22章  jQuery控制頁面和事件處理  334 視頻講解：8節(jié)，50分鐘
22.1  jQuery控制頁面和時間處理  335
22.1.1  對元素內(nèi)容和值進(jìn)行操作  335
[實(shí)例22.1]  對元素內(nèi)容進(jìn)行設(shè)置  336
[實(shí)例22.2]  為多行列表框設(shè)置并獲取值  337
22.1.2  對DOM節(jié)點(diǎn)進(jìn)行操作  338
[實(shí)例22.3]  開心小農(nóng)場  341
22.1.3  對元素屬性進(jìn)行操作  343
22.1.4  對元素的CSS樣式進(jìn)行操作  343
22.2  jQuery的事件處理  345
22.2.1  頁面加載響應(yīng)事件  345
22.2.2  jQuery中的事件  345
22.2.3  事件綁定  346
22.2.4  模擬用戶操作  347
[實(shí)例22.4]  模擬用戶單擊事件  348
[實(shí)例22.5]  為圖像添加和去除邊框  348
本章知識思維導(dǎo)圖  349

第5篇　項(xiàng)目開發(fā)篇
第23章  設(shè)計(jì)叮叮商城網(wǎng)站  352 視頻講解：1節(jié)，4分鐘
23.1  項(xiàng)目設(shè)計(jì)思路  353
23.1.1  需求分析  353
23.1.2  功能結(jié)構(gòu)  353
23.1.3  叮叮商城概覽  353
23.2  主頁功能實(shí)現(xiàn)  354
23.2.1  關(guān)鍵技術(shù)  355
23.2.2  實(shí)現(xiàn)過程  355
23.3  商品詳情頁面設(shè)計(jì)  356
23.3.1  關(guān)鍵技術(shù)  356
23.3.2  實(shí)現(xiàn)過程  357
23.4  購物車頁面設(shè)計(jì)  357
23.4.1  關(guān)鍵技術(shù)  358
23.4.2  實(shí)現(xiàn)過程  358
23.5  付款頁面設(shè)計(jì)  359
23.5.1  關(guān)鍵技術(shù)  359
23.5.2  實(shí)現(xiàn)過程  360
本章知識思維導(dǎo)圖  361

第24章  模仿王者榮耀網(wǎng)站  362 視頻講解：1節(jié)，3分鐘
24.1  功能概述  363
24.2  界面預(yù)覽  363
24.3  設(shè)計(jì)思路  364
24.4  實(shí)現(xiàn)過程  364
24.4.1  主頁的設(shè)計(jì)與實(shí)現(xiàn)  364
24.4.2  登錄頁面的設(shè)計(jì)與實(shí)現(xiàn)  368
24.4.3  注冊頁面的設(shè)計(jì)與實(shí)現(xiàn)  370
本章知識思維導(dǎo)圖  371