第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
[實(shí)例1.1] 編寫第一個JavaScript程序 9
1.3.2 鏈接外部JavaScript文件 11
[實(shí)例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
[實(shí)例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
[實(shí)例2.2] 輸出球員信息 25
2.3 運(yùn)算符 25
2.3.1 算術(shù)運(yùn)算符 25
[實(shí)例2.3] 將華氏度轉(zhuǎn)換為攝氏度 26
2.3.2 字符串運(yùn)算符 26
[實(shí)例2.4] 字符串運(yùn)算符的使用 27
2.3.3 比較運(yùn)算符 27
[實(shí)例2.5] 比較運(yùn)算符的使用 28
2.3.4 賦值運(yùn)算符 28
[實(shí)例2.6] 賦值運(yùn)算符的使用 29
2.3.5 邏輯運(yùn)算符 29
[實(shí)例2.7] 邏輯運(yùn)算符的使用 30
2.3.6 條件運(yùn)算符 30
[實(shí)例2.8] 條件運(yùn)算符的使用 30
2.3.7 其他運(yùn)算符 31
2.3.8 運(yùn)算符優(yōu)先級 32
[實(shí)例2.9] 運(yùn)算符優(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
[實(shí)例3.1] 獲取3個數(shù)中的最大值 39
3.1.2 if…else語句 39
[實(shí)例3.2] 判斷2022年2月份的天數(shù) 40
3.1.3 if…else if語句 40
[實(shí)例3.3] 輸出考試成績對應(yīng)的等級 41
3.1.4 if語句的嵌套 42
[實(shí)例3.4] 判斷女職工是否已經(jīng)退休 42
3.2 switch語句 43
[實(shí)例3.5] 輸出獎項級別及獎品 44
本章知識思維導(dǎo)圖 45

第4章 循環(huán)控制語句 46 視頻講解：6節(jié)，56分鐘
4.1 循環(huán)語句 47
4.1.1 while語句 47
[實(shí)例4.1] 計算1500米比賽的完整圈數(shù) 48
4.1.2 do…while語句 48
[實(shí)例4.2] 計算1+2+…+100的和 49
4.1.3 for語句 49
[實(shí)例4.3] 計算100以內(nèi)所有偶數(shù)的和 51
4.1.4 循環(huán)語句的嵌套 51
[實(shí)例4.4] 輸出乘法口訣表 51
4.2 跳轉(zhuǎn)語句 52
4.2.1 continue語句 52
[實(shí)例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
[實(shí)例5.1] 輸出圖書名稱和圖書作者 59
5.3 函數(shù)的返回值 59
[實(shí)例5.2] 計算購物車中商品總價 60
5.4 嵌套函數(shù) 60
5.4.1 函數(shù)的嵌套定義 60
5.4.2 函數(shù)的嵌套調(diào)用 61
[實(shí)例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
[實(shí)例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
[實(shí)例6.1] 創(chuàng)建一個球員對象 74
[實(shí)例6.2] 輸出演員個人簡介 75
[實(shí)例6.3] 創(chuàng)建一個圓的對象 76
6.2.3 通過Object對象創(chuàng)建自定義對象 76
[實(shí)例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
[實(shí)例7.1] 生成指定位數(shù)的隨機(jī)數(shù) 83
7.2 Date對象 84
7.2.1 創(chuàng)建Date對象 84
7.2.2 Date對象的屬性 85
7.2.3 Date對象的方法 86
[實(shí)例7.2] 輸出當(dāng)前的日期和時間 87
[實(shí)例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
[實(shí)例8.1] 輸出3個學(xué)霸姓名 96
8.3.2 數(shù)組元素的添加 96
8.3.3 數(shù)組元素的刪除 97
8.4 數(shù)組的屬性 97
8.4.1 length屬性 97
[實(shí)例8.2] 輸出省份、省會以及旅游景點(diǎn) 98
8.4.2 prototype屬性 99
[實(shí)例8.3] 應(yīng)用自定義方法輸出數(shù)組 99
8.5 數(shù)組的方法 99
8.5.1 數(shù)組的添加和刪除 100
8.5.2 設(shè)置數(shù)組的排列順序 103
[實(shí)例8.4] 輸出2020年電影票房排行榜前五名 105
8.5.3 獲取某段數(shù)組元素 105
[實(shí)例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
[實(shí)例9.1] 為金庸小說人物名稱按字?jǐn)?shù)分類 111
9.2.2 constructor屬性 111
9.2.3 prototype屬性 112
9.3 String對象的方法 112
9.3.1 查找字符串 113
[實(shí)例9.2] 獲取字符“葡萄”在繞口令中的出現(xiàn)次數(shù) 114
9.3.2 截取字符串 115
[實(shí)例9.3] 截取網(wǎng)站公告標(biāo)題 116
9.3.3 大小寫轉(zhuǎn)換 117
9.3.4 連接和拆分 118
[實(shí)例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 獲得焦點(diǎn)與失去焦點(diǎn)事件 128
[實(shí)例10.1] 改變文本框的背景顏色 128
10.2.2 失去焦點(diǎn)內(nèi)容改變事件 129
[實(shí)例10.2] 改變文本框的字體顏色 129
10.2.3 表單提交與重置事件 129
[實(shí)例10.3] 驗(yàn)證提交表單中是否有空值 130
10.3 鼠標(biāo)鍵盤事件 130
10.3.1 鼠標(biāo)單擊事件 131
[實(shí)例10.4] 動態(tài)改變頁面的背景顏色 131
10.3.2 鼠標(biāo)按下和松開事件 131
[實(shí)例10.5] 用事件模擬超鏈接標(biāo)記的功能 132
10.3.3 鼠標(biāo)移入移出事件 132
[實(shí)例10.6] 動態(tài)改變圖片的焦點(diǎn) 132
10.3.4 鼠標(biāo)移動事件 133
10.3.5 鍵盤事件 133
[實(shí)例10.7] 實(shí)現(xiàn)單擊“A”鍵刷新的功能 135
10.4 頁面事件 135
10.4.1 頁面加載事件 136
[實(shí)例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
[實(shí)例11.1] 動態(tài)改變文檔的前景色和背景色 140
11.2.2 設(shè)置動態(tài)標(biāo)題欄 141
[實(shí)例11.2] 實(shí)現(xiàn)動態(tài)標(biāo)題欄 141
11.2.3 獲取URL 142
[實(shí)例11.3] 顯示當(dāng)前頁面的URL 142
11.2.4 在文檔中輸出數(shù)據(jù) 142
11.2.5 動態(tài)添加一個HTML標(biāo)記 143
[實(shí)例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
[實(shí)例12.1] 驗(yàn)證表單內(nèi)容是否為空 149
12.3.2 按鈕 150
[實(shí)例12.2] 獲取表單元素的值 151
12.3.3 單選按鈕和復(fù)選框 152
[實(shí)例12.3] 獲取人物信息 153
12.3.4 下拉菜單 153
[實(shí)例12.4] 制作簡單的選擇職位的程序 155
本章知識思維導(dǎo)圖 157

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

第14章 文檔對象模型（DOM） 169 視頻講解：11節(jié)，41分鐘
14.1 DOM概述 170
14.2 DOM對象節(jié)點(diǎn)屬性 171
14.3 節(jié)點(diǎn)的操作 171
14.3.1 創(chuàng)建節(jié)點(diǎn) 172
[實(shí)例14.1] 補(bǔ)全古詩 172
14.3.2 插入節(jié)點(diǎn) 173
[實(shí)例14.2] 向頁面中插入文本 173
14.3.3 復(fù)制節(jié)點(diǎn) 174
[實(shí)例14.3] 復(fù)制下拉菜單 174
14.3.4 刪除節(jié)點(diǎn) 175
[實(shí)例14.4] 動態(tài)刪除選中的文本 175
14.3.5 替換節(jié)點(diǎn) 176
[實(shí)例14.5] 替換標(biāo)記和文本 176
14.4 獲取文檔中的指定元素 176
14.4.1 通過元素的id屬性獲取元素 177
[實(shí)例14.6] 在頁面的指定位置顯示當(dāng)前日期 177
14.4.2 通過元素的name屬性獲取元素 177
[實(shí)例14.7] 實(shí)現(xiàn)電影圖片的輪換效果 178
14.5 與DHTML相對應(yīng)的DOM 178
14.5.1 innerHTML和innerText屬性 179
[實(shí)例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
[實(shí)例15.1] 彈出警告對話框 185
15.2.2 確認(rèn)對話框 185
[實(shí)例15.2] 彈出確認(rèn)對話框 186
15.2.3 提示對話框 186
15.3 打開與關(guān)閉窗口 187
15.3.1 打開窗口 187
[實(shí)例15.3] 彈出指定大小和位置的新窗口 188
15.3.2 關(guān)閉窗口 188
[實(shí)例15.4] 關(guān)閉子窗口時自動刷新父窗口 189
15.4 控制窗口 190
15.4.1 移動窗口 190
[實(shí)例15.5] 控制彈出窗口的居中顯示 191
15.4.2 窗口滾動 192
15.4.3 改變窗口大小 193
[實(shí)例15.6] 動態(tài)改變窗口的大小 193
15.4.4 訪問窗口歷史 194
15.4.5 設(shè)置超時 195
[實(shí)例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
[實(shí)例16.1] 選中的行背景變色 202
[實(shí)例16.2] 背景固定居中 204
16.2.3 邊框?qū)傩? 205
[實(shí)例16.3] 單元格邊框變色 205
[實(shí)例16.4] 立體窗口 207
16.2.4 定位屬性 207
[實(shí)例16.5] 百葉窗 208
[實(shí)例16.6] 煙花效果 209
[實(shí)例16.7] 跟隨鼠標(biāo)指針移動的圖片 211
16.2.5 字體屬性 212
[實(shí)例16.8] 改變超鏈接字體樣式 214
16.2.6 表格布局屬性 215
[實(shí)例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
[實(shí)例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
[實(shí)例17.2] 獲取XML文本中的數(shù)據(jù) 225
17.3 讀取XML數(shù)據(jù) 226
17.3.1 獲取XML元素的屬性值 226
[實(shí)例17.3] 獲取XML元素的屬性值 226
17.3.2 通過DOM元素的方法讀取XML數(shù)據(jù) 227
[實(shí)例17.4] 應(yīng)用名稱訪問XML數(shù)據(jù) 227
17.3.3 在表格中讀取XML數(shù)據(jù) 229
[實(shí)例17.5] 在表格中讀取XML數(shù)據(jù) 229
17.3.4 通過JavaScript操作XML實(shí)現(xiàn)分頁 231
[實(shí)例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)點(diǎn) 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
[實(shí)例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
[實(shí)例19.1] 獲取文本框中輸入的值 250
[實(shí)例19.2] 修改div元素的內(nèi)容 252
[實(shí)例19.3] 獲取元素并設(shè)置CSS樣式 253
[實(shí)例19.4] 篩選元素并添加新的樣式 255
19.3.3 層級選擇器 256
[實(shí)例19.5] 為版權(quán)列表設(shè)置樣式 257
[實(shí)例19.6] 為表單元素?fù)Q膚 258
[實(shí)例19.7] 改變匹配元素的背景顏色 260
[實(shí)例19.8] 篩選div元素的同輩元素 261
19.3.4 過濾選擇器 262
[實(shí)例19.9] 實(shí)現(xiàn)一個帶表頭的雙色表格 263
[實(shí)例19.10] 應(yīng)用內(nèi)容過濾器匹配不同的單元格 265
[實(shí)例19.11] 利用表單對象的屬性過濾器匹配元素 267
19.3.5 屬性選擇器 268
19.3.6 表單選擇器 269
[實(shí)例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
[實(shí)例20.1] 對元素內(nèi)容進(jìn)行設(shè)置 274
20.1.2 對元素值操作 275
[實(shí)例20.2] 為多行列表框設(shè)置并獲取值 275
20.2 對DOM節(jié)點(diǎn)進(jìn)行操作 276
20.2.1 創(chuàng)建節(jié)點(diǎn) 276
20.2.2 插入節(jié)點(diǎn) 276
20.2.3 刪除、復(fù)制與替換節(jié)點(diǎn) 278
[實(shí)例20.3] 我的開心小農(nóng)場 279
20.3 對元素屬性進(jìn)行操作 281
[實(shí)例20.4] 改變圖片大小 282
20.4 對元素的CSS樣式進(jìn)行操作 282
20.4.1 通過修改CSS類實(shí)現(xiàn) 283
[實(shí)例20.5] 改變文本樣式 283
20.4.2 通過修改CSS屬性實(shí)現(xiàn) 284
[實(shí)例20.6] 為圖片添加和去除邊框 285
本章知識思維導(dǎo)圖 286

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

第22章 jQuery的動畫效果 297 視頻講解：4節(jié)，26分鐘
22.1 基本的動畫效果 298
22.1.1 隱藏匹配元素 298
22.1.2 顯示匹配元素 298
[實(shí)例22.1] 實(shí)現(xiàn)自動隱藏式菜單 299
22.2 淡入、淡出的動畫效果 300
22.3 滑動效果 301
22.3.1 滑動顯示匹配的元素 302
22.3.2 滑動隱藏匹配的元素 302
22.3.3 通過高度的變化動態(tài)切換元素的可見性 302
[實(shí)例22.2] 實(shí)現(xiàn)伸縮式導(dǎo)航菜單 303
22.4 自定義的動畫效果 305
22.4.1 使用animate()方法創(chuàng)建自定義動畫 305
[實(shí)例22.3] 實(shí)現(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 直接下載并使用