第1篇　基礎(chǔ)知識篇
第1章　JavaScript簡介    2 視頻講解：6節(jié)，50分鐘
1.1  JavaScript簡述    3
1.2  WebStorm的下載與安裝    5
1.3  JavaScript在HTML中的使用    8
1.3.1  在頁面中直接嵌入JavaScript代碼    8
[實例1.1]  編寫第一個JavaScript程序    9
1.3.2  鏈接外部JavaScript文件    11
[實例1.2]  調(diào)用外部JavaScript文件    11
1.3.3  作為標(biāo)簽的屬性值使用    12
1.4  JavaScript基本語法    13
本章知識思維導(dǎo)圖    15

第2章　JavaScript語言基礎(chǔ)    16 視頻講解：15節(jié)，135分鐘
2.1  數(shù)據(jù)類型    17
2.1.1  數(shù)值型    17
2.1.2  字符串型    19
[實例2.1]  輸出奧尼爾的中文名、英文名和別名    20
2.1.3  布爾型    21
2.1.4  特殊數(shù)據(jù)類型    22
2.2  變量    22
2.2.1  變量的命名    22
2.2.2  變量的聲明    23
2.2.3  變量的賦值    23
2.2.4  變量的類型    24
[實例2.2]  輸出球員信息    25
2.3  運算符    25
2.3.1  算術(shù)運算符    25
[實例2.3]  將華氏度轉(zhuǎn)換為攝氏度    26
2.3.2  字符串運算符    26
[實例2.4]  字符串運算符的使用    27
2.3.3  比較運算符    27
[實例2.5]  比較運算符的使用    28
2.3.4  賦值運算符    28
[實例2.6]  賦值運算符的使用    29
2.3.5  邏輯運算符    29
[實例2.7]  邏輯運算符的使用    30
2.3.6  條件運算符    30
[實例2.8]  條件運算符的使用    30
2.3.7  其他運算符    31
2.3.8  運算符優(yōu)先級    32
[實例2.9]  運算符優(yōu)先級的使用    33
2.4  表達(dá)式    33
2.5  數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則    34
本章知識思維導(dǎo)圖    36

第3章  條件判斷語句    37 視頻講解：5節(jié)，49分鐘
3.1  if語句    38
3.1.1  簡單if語句    38
[實例3.1]  獲取3個數(shù)中的最大值    39
3.1.2  if…else語句    39
[實例3.2]  判斷2022年2月份的天數(shù)    40
3.1.3  if…else if語句    40
[實例3.3]  輸出考試成績對應(yīng)的等級    41
3.1.4  if語句的嵌套    42
[實例3.4]  判斷女職工是否已經(jīng)退休    42
3.2  switch語句    43
[實例3.5]  輸出獎項級別及獎品    44
本章知識思維導(dǎo)圖    45

第4章  循環(huán)控制語句    46 視頻講解：6節(jié)，56分鐘
4.1  循環(huán)語句    47
4.1.1  while語句    47
[實例4.1]  計算1500米比賽的完整圈數(shù)    48
4.1.2  do…while語句    48
[實例4.2]  計算1 2 … 100的和    49
4.1.3  for語句    49
[實例4.3]  計算100以內(nèi)所有偶數(shù)的和    51
4.1.4  循環(huán)語句的嵌套    51
[實例4.4]  輸出乘法口訣表    51
4.2  跳轉(zhuǎn)語句    52
4.2.1  continue語句    52
[實例4.5]  輸出影廳座位圖    52
4.2.2  break語句    53
本章知識思維導(dǎo)圖    54

第5章  函數(shù)    55 視頻講解：13節(jié)，80分鐘
5.1  函數(shù)的定義和調(diào)用    56
5.1.1  函數(shù)的定義    56
5.1.2  函數(shù)的調(diào)用    57
5.2  函數(shù)的參數(shù)    58
[實例5.1]  輸出圖書名稱和圖書作者    59
5.3  函數(shù)的返回值    59
[實例5.2]  計算購物車中商品總價    60
5.4  嵌套函數(shù)    60
5.4.1  函數(shù)的嵌套定義    60
5.4.2  函數(shù)的嵌套調(diào)用    61
[實例5.3]  獲得選手的平均分    61
5.5  遞歸函數(shù)    62
5.6  變量的作用域    62
5.6.1  全局變量和局部變量    62
5.6.2  變量的優(yōu)先級    63
5.7  內(nèi)置函數(shù)    63
5.7.1  數(shù)值處理函數(shù)    64
5.7.2  字符串處理函數(shù)    66
5.8  定義匿名函數(shù)    67
5.8.1  在表達(dá)式中定義函數(shù)    67
[實例5.4]  輸出星號金字塔形圖案    68
5.8.2  使用Function()構(gòu)造函數(shù)    68
本章知識思維導(dǎo)圖    69

第6章  自定義對象    70 視頻講解：8節(jié)，71分鐘
6.1  對象簡介    71
6.1.1  什么是對象    71
6.1.2  對象的屬性和方法    71
6.1.3  JavaScript對象的種類    72
6.2  自定義對象的創(chuàng)建    72
6.2.1  直接創(chuàng)建自定義對象    72
6.2.2  通過自定義構(gòu)造函數(shù)創(chuàng)建對象    73
[實例6.1]  創(chuàng)建一個球員對象    74
[實例6.2]  輸出演員個人簡介    75
[實例6.3]  創(chuàng)建一個圓的對象    76
6.2.3  通過Object對象創(chuàng)建自定義對象    76
[實例6.4]  創(chuàng)建一個圖書對象    78
6.3  對象訪問語句    78
6.3.1  for…in語句    78
6.3.2  with語句    79
本章知識思維導(dǎo)圖    80

第7章  Math對象和Date對象    81 視頻講解：2節(jié)，58分鐘
7.1  Math對象    82
7.1.1  Math對象的屬性    82
7.1.2  Math對象的方法    82
[實例7.1]  生成指定位數(shù)的隨機數(shù)    83
7.2  Date對象    84
7.2.1  創(chuàng)建Date對象    84
7.2.2  Date對象的屬性    85
7.2.3  Date對象的方法    86
[實例7.2]  輸出當(dāng)前的日期和時間    87
[實例7.3]  獲取當(dāng)前日期距離明年元旦的天數(shù)    89
本章知識思維導(dǎo)圖    90

第8章  數(shù)組    91 視頻講解：14節(jié)，111分鐘
8.1  數(shù)組介紹    92
8.2  定義數(shù)組    92
8.2.1  定義空數(shù)組    92
8.2.2  指定數(shù)組長度    93
8.2.3  指定數(shù)組元素    93
8.2.4  直接定義數(shù)組    94
8.3  操作數(shù)組元素    94
8.3.1  數(shù)組元素的輸入和輸出    94
[實例8.1]  輸出3個學(xué)霸姓名    96
8.3.2  數(shù)組元素的添加    96
8.3.3  數(shù)組元素的刪除    97
8.4  數(shù)組的屬性    97
8.4.1  length屬性    97
[實例8.2]  輸出省份、省會以及旅游景點    98
8.4.2  prototype屬性    99
[實例8.3]  應(yīng)用自定義方法輸出數(shù)組    99
8.5  數(shù)組的方法    99
8.5.1  數(shù)組的添加和刪除    100
8.5.2  設(shè)置數(shù)組的排列順序    103
[實例8.4]  輸出2020年電影票房排行榜前五名    105
8.5.3  獲取某段數(shù)組元素    105
[實例8.5]  計算選手的最終得分    106
8.5.4  數(shù)組轉(zhuǎn)換成字符串    107
本章知識思維導(dǎo)圖    108

第9章  String對象    109 視頻講解：9節(jié)，65分鐘
9.1  String對象的創(chuàng)建    110
9.2  String對象的屬性    110
9.2.1  length屬性    110
[實例9.1]  為金庸小說人物名稱按字?jǐn)?shù)分類    111
9.2.2  constructor屬性    111
9.2.3  prototype屬性    112
9.3  String對象的方法    112
9.3.1  查找字符串    113
[實例9.2]  獲取字符“葡萄”在繞口令中的出現(xiàn)次數(shù)    114
9.3.2  截取字符串    115
[實例9.3]  截取網(wǎng)站公告標(biāo)題    116
9.3.3  大小寫轉(zhuǎn)換    117
9.3.4  連接和拆分    118
[實例9.4]  輸出梁山好漢人物信息    119
9.3.5  格式化字符串    120
本章知識思維導(dǎo)圖    122

第2篇　核心技術(shù)篇
第10章  JavaScript事件處理    124 視頻講解：13節(jié)，45分鐘
10.1  事件與事件處理概述    125
10.1.1  什么是事件    125
10.1.2  JavaScript的常用事件    125
10.1.3  事件的調(diào)用    126
10.1.4  Event對象    127
10.2  表單相關(guān)事件    127
10.2.1  獲得焦點與失去焦點事件    128
[實例10.1]  改變文本框的背景顏色    128
10.2.2  失去焦點內(nèi)容改變事件    129
[實例10.2]  改變文本框的字體顏色    129
10.2.3  表單提交與重置事件    129
[實例10.3]  驗證提交表單中是否有空值    130
10.3  鼠標(biāo)鍵盤事件    130
10.3.1  鼠標(biāo)單擊事件    131
[實例10.4]  動態(tài)改變頁面的背景顏色    131
10.3.2  鼠標(biāo)按下和松開事件    131
[實例10.5]  用事件模擬超鏈接標(biāo)記的功能    132
10.3.3  鼠標(biāo)移入移出事件    132
[實例10.6]  動態(tài)改變圖片的焦點    132
10.3.4  鼠標(biāo)移動事件    133
10.3.5  鍵盤事件    133
[實例10.7]  實現(xiàn)單擊“A”鍵刷新的功能    135
10.4  頁面事件    135
10.4.1  頁面加載事件    136
[實例10.8]  動態(tài)改變圖片大小    136
10.4.2  頁面大小事件    136
本章知識思維導(dǎo)圖    137

第11章  文檔對象    138 視頻講解：7節(jié)，39分鐘
11.1  文檔對象概述    139
11.2  文檔對象的應(yīng)用    140
11.2.1  設(shè)置文檔前景色和背景色    140
[實例11.1]  動態(tài)改變文檔的前景色和背景色    140
11.2.2  設(shè)置動態(tài)標(biāo)題欄    141
[實例11.2]  實現(xiàn)動態(tài)標(biāo)題欄    141
11.2.3  獲取URL    142
[實例11.3]  顯示當(dāng)前頁面的URL    142
11.2.4  在文檔中輸出數(shù)據(jù)    142
11.2.5  動態(tài)添加一個HTML標(biāo)記    143
[實例11.4]  動態(tài)添加文本框    143
11.2.6  獲取文本框并修改其內(nèi)容    144
本章知識思維導(dǎo)圖    145

第12章  表單對象    146 視頻講解：7節(jié)，46分鐘
12.1  訪問表單與表單元素    147
12.1.1  JavaScript訪問表單    147
12.1.2  JavaScript訪問表單元素    147
12.2  表單對象的屬性、方法與事件    148
12.3  表單元素    148
12.3.1  文本框    149
[實例12.1]  驗證表單內(nèi)容是否為空    149
12.3.2  按鈕    150
[實例12.2]  獲取表單元素的值    151
12.3.3  單選按鈕和復(fù)選框    152
[實例12.3]  獲取人物信息    153
12.3.4  下拉菜單    153
[實例12.4]  制作簡單的選擇職位的程序    155
本章知識思維導(dǎo)圖    157

第13章  圖像對象    158 視頻講解：9節(jié)，55分鐘
13.1  圖像對象概述    159
13.1.1  圖像對象介紹    159
13.1.2  圖像對象的屬性    159
[實例13.1]  輸出圖片的基本信息    160
13.1.3  圖像對象的事件    160
[實例13.2]  當(dāng)鼠標(biāo)指向圖片時實現(xiàn)圖片置換    160
13.2  圖像對象的應(yīng)用    161
13.2.1  圖片的隨機顯示    161
[實例13.3]  實現(xiàn)網(wǎng)頁背景的隨機變化    161
13.2.2  圖片置頂    162
[實例13.4]  實現(xiàn)圖片總置于頂端的功能    163
13.2.3  圖片驗證碼    163
[實例13.5]  隨機生成圖片驗證碼    163
13.2.4  圖像的預(yù)裝載    164
[實例13.6]  使用預(yù)裝載圖像制作幻燈效果    165
13.2.5  圖片漸變效果    166
[實例13.7]  圖片漸變效果    166
13.2.6  進(jìn)度條的顯示    167
[實例13.8]  進(jìn)度條的顯示    167
本章知識思維導(dǎo)圖    168

第14章  文檔對象模型（DOM）    169 視頻講解：11節(jié)，41分鐘
14.1  DOM概述    170
14.2  DOM對象節(jié)點屬性    171
14.3  節(jié)點的操作    171
14.3.1  創(chuàng)建節(jié)點    172
[實例14.1]  補全古詩    172
14.3.2  插入節(jié)點    173
[實例14.2]  向頁面中插入文本    173
14.3.3  復(fù)制節(jié)點    174
[實例14.3]  復(fù)制下拉菜單    174
14.3.4  刪除節(jié)點    175
[實例14.4]  動態(tài)刪除選中的文本    175
14.3.5  替換節(jié)點    176
[實例14.5]  替換標(biāo)記和文本    176
14.4  獲取文檔中的指定元素    176
14.4.1  通過元素的id屬性獲取元素    177
[實例14.6]  在頁面的指定位置顯示當(dāng)前日期    177
14.4.2  通過元素的name屬性獲取元素    177
[實例14.7]  實現(xiàn)電影圖片的輪換效果    178
14.5  與DHTML相對應(yīng)的DOM    178
14.5.1  innerHTML和innerText屬性    179
[實例14.8]  顯示時間和問候語    179
14.5.2  outerHTML和outerText屬性    180
本章知識思維導(dǎo)圖    181

第15章  Window對象    182 視頻講解：14節(jié)，54分鐘
15.1  Window對象概述    183
15.1.1  Window對象的屬性    183
15.1.2  Window對象的方法    183
15.1.3  Window對象的使用    184
15.2  對話框    184
15.2.1  警告對話框    185
[實例15.1]  彈出警告對話框    185
15.2.2  確認(rèn)對話框    185
[實例15.2]  彈出確認(rèn)對話框    186
15.2.3  提示對話框    186
15.3  打開與關(guān)閉窗口    187
15.3.1  打開窗口    187
[實例15.3]  彈出指定大小和位置的新窗口    188
15.3.2  關(guān)閉窗口    188
[實例15.4]  關(guān)閉子窗口時自動刷新父窗口    189
15.4  控制窗口    190
15.4.1  移動窗口    190
[實例15.5]  控制彈出窗口的居中顯示    191
15.4.2  窗口滾動    192
15.4.3  改變窗口大小    193
[實例15.6]  動態(tài)改變窗口的大小    193
15.4.4  訪問窗口歷史    194
15.4.5  設(shè)置超時    195
[實例15.7]  動態(tài)顯示日期和時間    195
15.5  通用窗口事件    196
本章知識思維導(dǎo)圖    197

第16章  Style對象    198 視頻講解：2節(jié)，29分鐘
16.1  Style對象簡介    199
16.2  Style對象的樣式標(biāo)簽屬性和樣式屬性    199
16.2.1  樣式標(biāo)簽屬性和樣式屬性    199
16.2.2  顏色和背景屬性    202
[實例16.1]  選中的行背景變色    202
[實例16.2]  背景固定居中    204
16.2.3  邊框?qū)傩?nbsp;   205
[實例16.3]  單元格邊框變色    205
[實例16.4]  立體窗口    207
16.2.4  定位屬性    207
[實例16.5]  百葉窗    208
[實例16.6]  煙花效果    209
[實例16.7]  跟隨鼠標(biāo)指針移動的圖片    211
16.2.5  字體屬性    212
[實例16.8]  改變超鏈接字體樣式    214
16.2.6  表格布局屬性    215
[實例16.9]  限制表格的寬度    216
本章知識思維導(dǎo)圖    217

第3篇　高級應(yīng)用篇
第17章  JavaScript中使用XML    220 視頻講解：8節(jié)，40分鐘
17.1  XML簡介    221
17.1.1  創(chuàng)建XML    221
[實例17.1]  XML文檔的創(chuàng)建    221
17.1.2  DOM與XML    222
17.2  解析XML文本    223
17.2.1  在IE瀏覽器中解析XML文本    223
17.2.2  在非IE瀏覽器中解析XML文本    224
[實例17.2]  獲取XML文本中的數(shù)據(jù)    225
17.3  讀取XML數(shù)據(jù)    226
17.3.1  獲取XML元素的屬性值    226
[實例17.3]  獲取XML元素的屬性值    226
17.3.2  通過DOM元素的方法讀取XML數(shù)據(jù)    227
[實例17.4]  應(yīng)用名稱訪問XML數(shù)據(jù)    227
17.3.3  在表格中讀取XML數(shù)據(jù)    229
[實例17.5]  在表格中讀取XML數(shù)據(jù)    229
17.3.4  通過JavaScript操作XML實現(xiàn)分頁    231
[實例17.6]  對讀取的XML數(shù)據(jù)進(jìn)行分頁操作    231
本章知識思維導(dǎo)圖    233

第18章  Ajax技術(shù)    234 視頻講解：11節(jié)，31分鐘
18.1  Ajax概述    235
18.1.1  Ajax應(yīng)用案例    235
18.1.2  Ajax的開發(fā)模式    235
18.1.3  Ajax的優(yōu)點    236
18.2  Ajax的技術(shù)組成    237
18.2.1  XMLHttpRequest對象    237
18.2.2  XML語言    237
18.2.3  JavaScript腳本語言    239
18.2.4  DOM    239
18.2.5  CSS    239
18.3  XMLHttpRequest對象    239
18.3.1  XMLHttpRequest對象的初始化    239
18.3.2  XMLHttpRequest對象的常用屬性    240
18.3.3  XMLHttpRequest對象的常用方法    242
[實例18.1]  讀取HTML文件    244
本章知識思維導(dǎo)圖    246

第19章  jQuery基礎(chǔ)    247 視頻講解：8節(jié)，61分鐘
19.1  jQuery概述    248
19.2  jQuery下載與配置    248
19.2.1  下載jQuery    248
19.2.2  配置jQuery    249
19.3  jQuery選擇器    249
19.3.1  jQuery的工廠函數(shù)    250
19.3.2  基本選擇器    250
[實例19.1]  獲取文本框中輸入的值    250
[實例19.2]  修改div元素的內(nèi)容    252
[實例19.3]  獲取元素并設(shè)置CSS樣式    253
[實例19.4]  篩選元素并添加新的樣式    255
19.3.3  層級選擇器    256
[實例19.5]  為版權(quán)列表設(shè)置樣式    257
[實例19.6]  為表單元素?fù)Q膚    258
[實例19.7]  改變匹配元素的背景顏色    260
[實例19.8]  篩選div元素的同輩元素    261
19.3.4  過濾選擇器    262
[實例19.9]  實現(xiàn)一個帶表頭的雙色表格    263
[實例19.10]  應(yīng)用內(nèi)容過濾器匹配不同的單元格    265
[實例19.11]  利用表單對象的屬性過濾器匹配元素    267
19.3.5  屬性選擇器    268
19.3.6  表單選擇器    269
[實例19.12]  利用表單選擇器匹配元素    269
本章知識思維導(dǎo)圖    271

第20章  jQuery控制頁面    272 視頻講解：4節(jié)，34分鐘
20.1  對元素內(nèi)容和值進(jìn)行操作    273
20.1.1  對元素內(nèi)容操作    273
[實例20.1]  對元素內(nèi)容進(jìn)行設(shè)置    274
20.1.2  對元素值操作    275
[實例20.2]  為多行列表框設(shè)置并獲取值    275
20.2  對DOM節(jié)點進(jìn)行操作    276
20.2.1  創(chuàng)建節(jié)點    276
20.2.2  插入節(jié)點    276
20.2.3  刪除、復(fù)制與替換節(jié)點    278
[實例20.3]  我的開心小農(nóng)場    279
20.3  對元素屬性進(jìn)行操作    281
[實例20.4]  改變圖片大小    282
20.4  對元素的CSS樣式進(jìn)行操作    282
20.4.1  通過修改CSS類實現(xiàn)    283
[實例20.5]  改變文本樣式    283
20.4.2  通過修改CSS屬性實現(xiàn)    284
[實例20.6]  為圖片添加和去除邊框    285
本章知識思維導(dǎo)圖    286

第21章  jQuery的事件處理    287 視頻講解：4節(jié)，14分鐘
21.1  頁面加載響應(yīng)事件    288
21.2  jQuery中的事件    288
[實例21.1]  橫向?qū)Ш讲藛?nbsp;   290
21.3  事件綁定    292
21.3.1  為元素綁定事件    292
[實例21.2]  表格的動態(tài)換膚    292
21.3.2  移除綁定    293
21.3.3  綁定一次性事件處理    293
21.4  模擬用戶操作    294
21.4.1  模擬用戶的操作觸發(fā)事件    294
[實例21.3]  模擬用戶單擊事件    294
21.4.2  模仿懸停事件    294
[實例21.4]  切換表情圖片    295
本章知識思維導(dǎo)圖    296

第22章  jQuery的動畫效果    297 視頻講解：4節(jié)，26分鐘
22.1  基本的動畫效果    298
22.1.1  隱藏匹配元素    298
22.1.2  顯示匹配元素    298
[實例22.1]  實現(xiàn)自動隱藏式菜單    299
22.2  淡入、淡出的動畫效果    300
22.3  滑動效果    301
22.3.1  滑動顯示匹配的元素    302
22.3.2  滑動隱藏匹配的元素    302
22.3.3  通過高度的變化動態(tài)切換元素的可見性    302
[實例22.2]  實現(xiàn)伸縮式導(dǎo)航菜單    303
22.4  自定義的動畫效果    305
22.4.1  使用animate()方法創(chuàng)建自定義動畫    305
[實例22.3]  實現(xiàn)幕簾的效果    306
22.4.2  使用stop()方法停止動畫    308
本章知識思維導(dǎo)圖    308

第23章  Vue.js基礎(chǔ)    309 視頻講解：11節(jié)，86分鐘
23.1  什么是Vue.js    310
23.2  Vue.js的安裝    311
23.2.1  直接下載并使用