Web前端開(kāi)發(fā)：交互式設(shè)計(jì)（JavaScript+jQuery）

單元1　JavaScript概述 1
1.1 認(rèn)識(shí)JavaScript 1
1.1.1 什么是JavaScript 1
1.1.2 JavaScript的發(fā)展歷程 2
1.1.3 JavaScript的用途 3
1.1.4 JavaScript的組成 4
1.2 搭建JavaScript開(kāi)發(fā)環(huán)境 5
1.2.1 選擇JavaScript腳本編輯器 5
1.2.2 安裝與配置Visual Studio Code 6
1.2.3 安裝并使用Node.js 9
1.2.4 安裝與配置http-server 10
1.3 在HTML中使用JavaScript 10
1.3.1 嵌入HTML文檔中的腳本 11
1.3.2 引入外部JavaScript文件的腳本 11
1.3.3 嵌入HTML標(biāo)簽事件中的腳本 12
單元2　JavaScript基礎(chǔ) 14
2.1 JavaScript詞法符號(hào) 14
2.1.1 字符集 14
2.1.2 字母大小寫(xiě)敏感性 14
2.1.3 空白符和換行符 15
2.1.4 可選擇的分號(hào) 15
2.1.5 注釋與文本換行符 15
2.1.6 標(biāo)識(shí)符 15
2.1.7 關(guān)鍵字與保留字 15
2.2 數(shù)據(jù)類(lèi)型 16
2.2.1 Boolean 16
2.2.2 Null 17
2.2.3 Undefined 17
2.2.4 Number 17
2.2.5 BigInt 18
2.2.6 String 18
2.2.7 Symbol 19
2.2.8 Object 20
2.3 變量 21
2.3.1 什么是變量 21
2.3.2 使用var定義變量 21
2.3.3 使用let定義變量 22
2.3.4 變量的賦值 23
2.3.5 變量的作用域 23
2.4 常量 24
2.4.1 符號(hào)常量 24
2.4.2 字面量 25
2.5 運(yùn)算符和表達(dá)式 28
2.5.1 算術(shù)運(yùn)算符 28
2.5.2 賦值運(yùn)算符 29
2.5.3 關(guān)系運(yùn)算符 29
2.5.4 邏輯運(yùn)算符 29
2.5.5 相加運(yùn)算符 30
2.5.6 其他運(yùn)算符 30
2.5.7 運(yùn)算符優(yōu)先級(jí) 31
2.5.8 JavaScript表達(dá)式 31
2.5.9 數(shù)據(jù)類(lèi)型轉(zhuǎn)換 33
2.6 語(yǔ)句 34
2.6.1 if語(yǔ)句 34
2.6.2 if...else語(yǔ)句 35
2.6.3 switch語(yǔ)句 35
2.6.4 for語(yǔ)句 37
2.6.5 while語(yǔ)句 38
2.6.6 do...while語(yǔ)句 40
2.6.7 for...in語(yǔ)句 40
2.6.8 for...of語(yǔ)句 41
2.6.9 label語(yǔ)句 41
2.6.10 break語(yǔ)句 41
2.6.11 continue語(yǔ)句 41
2.6.12 throw語(yǔ)句 42
2.6.13 try...catch語(yǔ)句 42
2.6.14 try...catch...finally語(yǔ)句 43
2.6.15 空語(yǔ)句 44
2.6.16 定義語(yǔ)句 44
2.6.17 return語(yǔ)句 44
單元3　JavaScript函數(shù) 45
3.1 認(rèn)識(shí)函數(shù) 45
3.1.1 什么是函數(shù) 45
3.1.2 函數(shù)聲明 46
3.1.3 函數(shù)調(diào)用 47
3.1.4 函數(shù)作用域 49
3.1.5 函數(shù)提升 50
3.2 函數(shù)參數(shù)與返回值 50
3.2.1 函數(shù)參數(shù) 50
3.2.2 函數(shù)返回值 53
3.3 箭頭函數(shù) 54
3.3.1 使用箭頭函數(shù)聲明函數(shù) 54
3.3.2 箭頭函數(shù)的特征 54
3.4 閉包函數(shù) 55
3.4.1 理解閉包 55
3.4.2 閉包函數(shù)的實(shí)現(xiàn) 55
3.5 遞歸函數(shù) 56
3.5.1 理解遞歸函數(shù) 56
3.5.2 尾調(diào)用優(yōu)化 56
3.6 系統(tǒng)函數(shù) 57
3.6.1 encodeURI()函數(shù) 57
3.6.2 decodeURI()函數(shù) 57
3.6.3 parseInt函數(shù) 57
3.6.4 parseFloat()函數(shù) 58
3.6.5 isNaN()函數(shù) 58
3.6.6 eval()函數(shù) 58
單元4　面向?qū)ο缶幊?62
4.1 理解對(duì)象 62
4.1.1 對(duì)象的基本概念 62
4.1.2 屬性類(lèi)型 63
4.1.3 定義多個(gè)屬性 65
4.1.4 讀取屬性的特征 66
4.2 創(chuàng)建對(duì)象 67
4.2.1 構(gòu)造函數(shù)模式 67
4.2.2 原型模式 67
4.2.3 對(duì)象迭代 68
4.3 繼承 69
4.3.1 認(rèn)識(shí)原型鏈 69
4.3.2 原型式繼承 71
4.3.3 寄生式繼承 71
4.3.4 寄生式組合繼承 72
4.4 類(lèi) 73
4.4.1 類(lèi)定義 73
4.4.2 類(lèi)構(gòu)造函數(shù) 73
4.4.3 類(lèi)成員 74
4.4.4 繼承 76
單元5　JavaScript內(nèi)置對(duì)象 80
5.1 Object對(duì)象 80
5.1.1 創(chuàng)建Object對(duì)象 80
5.1.2 Object對(duì)象常用屬性 82
5.1.3 Object對(duì)象常用方法 82
5.2 Function對(duì)象 83
5.2.1 創(chuàng)建Function對(duì)象 84
5.2.2 Function對(duì)象常用屬性 84
5.2.3 Function對(duì)象常用方法 84
5.3 Array對(duì)象 84
5.3.1 創(chuàng)建Array對(duì)象 85
5.3.2 Array對(duì)象常用屬性 85
5.3.3 Array對(duì)象常用方法 86
5.4 String對(duì)象 94
5.4.1 創(chuàng)建String對(duì)象 95
5.4.2 String對(duì)象常用屬性 95
5.4.3 String對(duì)象常用方法 95
5.5 Boolean對(duì)象 97
5.5.1 創(chuàng)建Boolean對(duì)象 97
5.5.2 Boolean對(duì)象常用屬性 97
5.5.3 Boolean對(duì)象常用方法 97
5.6 Number對(duì)象 98
5.6.1 創(chuàng)建Number對(duì)象 98
5.6.2 Number對(duì)象常用屬性 98
5.6.3 Number對(duì)象常用方法 99
5.7 Date對(duì)象 100
5.7.1 創(chuàng)建Date對(duì)象 100
5.7.2 Date對(duì)象常用屬性 100
5.7.3 Date對(duì)象常用方法 100
5.8 RegExp對(duì)象 103
5.8.1 認(rèn)識(shí)正則表達(dá)式 104
5.8.2 創(chuàng)建RegExp對(duì)象 104
5.8.3 正則表達(dá)式中的特殊字符 104
5.8.4 RegExp對(duì)象常用屬性 106
5.8.5 RegExp對(duì)象常用方法 106
5.9 Math對(duì)象 113
5.9.1 Math對(duì)象常用屬性 114
5.9.2 Math對(duì)象常用方法 114
單元6　BOM編程 117
6.1 認(rèn)識(shí)BOM 117
6.1.1 什么是BOM 117
6.1.2 BOM的層次結(jié)構(gòu) 118
6.2 window對(duì)象 118
6.2.1 window對(duì)象常用屬性 118
6.2.2 window對(duì)象常用方法 119
6.3 document對(duì)象 124
6.3.1 document對(duì)象常用屬性 124
6.3.2 document對(duì)象常用方法 125
6.4 history對(duì)象 127
6.4.1 history對(duì)象常用屬性 127
6.4.2 history對(duì)象常用方法 127
6.5 location對(duì)象 129
6.5.1 location對(duì)象常用屬性 129
6.5.2 location對(duì)象常用方法 131
6.6 navigator對(duì)象 132
6.6.1 navigator對(duì)象常用屬性 132
6.6.2 navigator對(duì)象常用方法 132
單元7　DOM編程 134
7.1 認(rèn)識(shí)DOM 134
7.1.1 什么是DOM 134
7.1.2 DOM類(lèi)型 135
7.1.3 DOM節(jié)點(diǎn) 136
7.2 DOM節(jié)點(diǎn)操作 137
7.2.1 訪問(wèn)節(jié)點(diǎn) 137
7.2.2 創(chuàng)建節(jié)點(diǎn) 140
7.2.3 添加節(jié)點(diǎn) 140
7.2.4 插入節(jié)點(diǎn) 141
7.2.5 刪除節(jié)點(diǎn) 142
7.3 DOM樣式操作 145
7.3.1 存取元素樣式 145
7.3.2 存取元素尺寸 147
7.3.3 存取元素位置 148
7.3.4 操作className屬性 150
單元8　DOM事件 155
8.1 認(rèn)識(shí)DOM事件 155
8.1.1 什么是事件 155
8.1.2 事件的組成 156
8.1.3 事件的傳播 156
8.2 事件處理程序 158
8.2.1 HTML事件處理程序 159
8.2.2 DOM0級(jí)事件處理程序 159
8.2.3 DOM2級(jí)事件處理程序 161
8.3 事件對(duì)象 162
8.3.1 DOM事件對(duì)象常用屬性 162
8.3.2 DOM事件對(duì)象常用方法 162
8.4 事件類(lèi)型 163
8.4.1 UI事件 164
8.4.2 焦點(diǎn)事件 166
8.4.3 鼠標(biāo)事件 168
8.4.4 滾輪事件 169
8.4.5 輸入事件 170
8.4.6 鍵盤(pán)事件 171
單元9　利用jQuery編程 185
9.1 認(rèn)識(shí)jQuery 185
9.1.1 jQuery簡(jiǎn)介 185
9.1.2 jQuery的特點(diǎn) 186
9.1.3 jQuery代碼編寫(xiě)方法 186
9.1.4 jQuery對(duì)象與DOM對(duì)象的轉(zhuǎn)換 187
9.2 jQuery選擇器 187
9.2.1 認(rèn)識(shí)jQuery選擇器 187
9.2.2 jQuery選擇器分類(lèi) 188
9.2.3 jQuery中元素屬性的操作 191
9.2.4 jQuery中樣式類(lèi)的操作 192
9.2.5 jQuery中樣式屬性的操作 193
9.2.6 jQuery中元素內(nèi)容的操作 193
9.2.7 在jQuery中查找元素集合中的元素 194
9.3 jQuery中的DOM操作 196
9.3.1 創(chuàng)建元素 196
9.3.2 插入元素 196
9.3.3 復(fù)制元素 197
9.3.4 替換元素 198
9.3.5 包裹元素 198
9.3.6 刪除元素 198
9.4 jQuery中的事件處理 201
9.4.1 jQuery中的事件處理機(jī)制 201
9.4.2 jQuery中的頁(yè)面載入事件 201
9.4.3 jQuery中的事件綁定 201
9.4.4 jQuery中的事件冒泡 203
9.4.5 jQuery中的合成事件 204
9.4.6 jQuery中的模擬事件觸發(fā)操作 205
9.5 jQuery中的動(dòng)畫(huà) 209
9.5.1 顯示和隱藏效果 209
9.5.2 滑動(dòng)效果 210
9.5.3 淡入淡出效果 211
9.5.4 自定義動(dòng)畫(huà) 212
9.6 jQuery中的AJAX 214
9.6.1 認(rèn)識(shí)AJAX 214
9.6.2 jQuery中的AJAX方法 215
9.6.3 jQuery中的AJAX事件 216
單元10　利用JavaScript/jQuery設(shè)計(jì)個(gè)性化網(wǎng)站 218
10.1 建設(shè)目標(biāo) 218
10.1.1 展示公司形象 218
10.1.2 獲得更多目標(biāo)用戶(hù) 218
10.1.3 開(kāi)拓市場(chǎng) 219
10.2 網(wǎng)站規(guī)劃 219
10.2.1 市場(chǎng)分析 219
10.2.2 網(wǎng)站建設(shè)目標(biāo)和功能 219
10.2.3 網(wǎng)站建設(shè)中所使用的技術(shù) 219
10.2.4 網(wǎng)站建設(shè)內(nèi)容 220
10.3 網(wǎng)站設(shè)計(jì) 220
10.3.1 設(shè)計(jì)目標(biāo) 220
10.3.2 網(wǎng)站結(jié)構(gòu)設(shè)計(jì) 220
10.3.3 網(wǎng)頁(yè)效果設(shè)計(jì) 221
10.4 網(wǎng)頁(yè)制作 224
10.4.1 制作首頁(yè) 224
10.4.2 制作“聯(lián)系我們”網(wǎng)頁(yè) 235