本書作為JavaScript+jQuery程序設(shè)計(jì)的教程, 系統(tǒng)全面地介紹了有關(guān)JavaScript+jQuery網(wǎng)站開發(fā)所涉及的各類知識(shí)。全書共分17章, 內(nèi)容包括JavaScript簡(jiǎn)介、JavaScript語言基礎(chǔ)、JavaScript自定義對(duì)象、常用內(nèi)部對(duì)象、JavaScript事件處理、JavaScript常用文檔對(duì)象、文檔對(duì)象模型、Window對(duì)象、AJAX技術(shù)、jQuery簡(jiǎn)介、jQuery選擇器、jQuery控制頁面、jQuery的事件處理、jQuery的動(dòng)畫效果、React簡(jiǎn)介、綜合開發(fā)實(shí)例--365影視網(wǎng)站設(shè)計(jì)、課程設(shè)計(jì)--購物車設(shè)計(jì)。全書每章內(nèi)容都與實(shí)例緊密結(jié)合, 有助于學(xué)生理解知識(shí)、應(yīng)用知識(shí), 達(dá)到學(xué)以致用的目的。
《JavaScript+jQuery程序設(shè)計(jì)(慕課版)》是一本JavaScript程序設(shè)計(jì)互聯(lián)網(wǎng)教材,買書送名師,明日科技資深講師面對(duì)面授課。本課程依托人民郵電出版社自主開發(fā)的在線教育慕課平臺(tái)——人郵學(xué)院(www.rymooc.com),該平臺(tái)具有完備的在線“教、學(xué)、測(cè)”功能。人郵學(xué)院提供體系完整的100學(xué)時(shí)慕課教學(xué)視頻同步講解,即學(xué)即練的在線測(cè)試。書中附有188個(gè)微課視頻,掃一掃書中二維碼,便可隨時(shí)隨地學(xué)習(xí)。附贈(zèng)300余道習(xí)題和自測(cè)題, PPT 課件、案例源代碼、自測(cè)試卷、拓展案例等豐富的配套資源。
第1章 JavaScript簡(jiǎn)介 1
1.1 JavaScript簡(jiǎn)述 2
1.1.1 JavaScript的起源 2
1.1.2 JavaScript的主要特點(diǎn) 2
1.1.3 JavaScript的應(yīng)用 3
1.2 編寫JavaScript的工具 4
1.3 JavaScript在HTML中的使用 5
1.3.1 在頁面中直接嵌入JavaScript代碼 5
實(shí)例:編寫第一個(gè)JavaScript程序
1.3.2 鏈接外部JavaScript文件 8
實(shí)例:調(diào)用外部JavaScript文件
1.3.3 作為標(biāo)簽的屬性值使用 10
1.4 JavaScript基本語法 10
1.4.1 執(zhí)行順序 10
1.4.2 大小寫敏感 10
1.4.3 空格與換行 11
1.4.4 每行結(jié)尾的分號(hào) 11
1.4.5 注釋 11
小結(jié) 11
上機(jī)指導(dǎo) 12
習(xí)題 12
第2章 JavaScript語言基礎(chǔ) 13
2.1 數(shù)據(jù)類型 14
2.1.1 數(shù)值型 14
實(shí)例:數(shù)字123不同進(jìn)制的輸出結(jié)果
2.1.2 字符串型 16
實(shí)例:定義四個(gè)字符串并輸出
2.1.3 布爾型 17
2.1.4 特殊數(shù)據(jù)類型 18
2.2 常量和變量 18
2.2.1 常量 18
2.2.2 變量 18
實(shí)例:輸出兩個(gè)變量的值
2.3 運(yùn)算符和表達(dá)式 20
2.3.1 什么是運(yùn)算符和表達(dá)式 20
2.3.2 運(yùn)算符的應(yīng)用 21
實(shí)例:應(yīng)用算術(shù)運(yùn)算符對(duì)兩個(gè)變量進(jìn)行運(yùn)算
2.3.3 表達(dá)式中的類型轉(zhuǎn)換 29
實(shí)例:輸出表達(dá)式的結(jié)果
2.4 JavaScript基本語句 30
2.4.1 條件判斷語句 30
實(shí)例:獲取3個(gè)數(shù)中的最大值
2.4.2 循環(huán)控制語句 38
實(shí)例:計(jì)算100以內(nèi)所有奇數(shù)的和
2.4.3 跳轉(zhuǎn)語句 43
實(shí)例:計(jì)算1~100的所有5的倍數(shù)的和
2.4.4 異常處理語句 45
實(shí)例:使用try…catch…finally語句處理異常
2.5 函數(shù) 47
2.5.1 函數(shù)的定義 47
2.5.2 函數(shù)的調(diào)用 48
2.5.3 函數(shù)的參數(shù) 49
實(shí)例:函數(shù)參數(shù)的使用
2.5.4 函數(shù)的返回值 50
實(shí)例:函數(shù)返回值的簡(jiǎn)單應(yīng)用
2.5.5 嵌套函數(shù) 51
實(shí)例:函數(shù)嵌套調(diào)用的應(yīng)用
2.5.6 遞歸函數(shù) 53
實(shí)例:遞歸函數(shù)的應(yīng)用
2.5.7 變量的作用域 54
2.5.8 內(nèi)置函數(shù) 55
2.5.9 定義函數(shù)的其他方法 60
實(shí)例:獲取從1到給定參數(shù)之間的所有3的倍數(shù)
小結(jié) 61
上機(jī)指導(dǎo) 61
習(xí)題 62
第3章 JavaScript自定義對(duì)象 63
3.1 對(duì)象簡(jiǎn)介 64
3.1.1 什么是對(duì)象 64
3.1.2 對(duì)象的屬性和方法 64
3.1.3 JavaScript對(duì)象的種類 64
3.2 自定義對(duì)象的創(chuàng)建 65
3.2.1 直接創(chuàng)建自定義對(duì)象 65
3.2.2 通過自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象 66
實(shí)例:創(chuàng)建一個(gè)球員對(duì)象Player
3.2.3 通過系統(tǒng)內(nèi)置的Object對(duì)象創(chuàng)建自定義對(duì)象 69
實(shí)例:創(chuàng)建一個(gè)圖書對(duì)象book
3.3 對(duì)象訪問語句 71
3.3.1 for…in循環(huán)語句 71
實(shí)例:輸出對(duì)象中的所有屬性和值
3.3.2 with語句 72
小結(jié) 73
上機(jī)指導(dǎo) 73
習(xí)題 74
第4章 常用內(nèi)部對(duì)象 75
4.1 Math對(duì)象 76
4.1.1 Math對(duì)象的屬性 76
實(shí)例:計(jì)算圓的周長和面積
4.1.2 Math對(duì)象的方法 76
實(shí)例:生成指定位數(shù)的隨機(jī)數(shù)
4.2 Number對(duì)象 78
4.2.1 創(chuàng)建Number對(duì)象 78
4.2.2 Number對(duì)象的屬性 79
4.2.3 Number對(duì)象的方法 80
4.3 Date對(duì)象 83
4.3.1 創(chuàng)建Date對(duì)象 83
4.3.2 Date對(duì)象的屬性 85
4.3.3 Date對(duì)象的方法 86
實(shí)例:輸出當(dāng)前的日期和時(shí)間
4.4 數(shù)組對(duì)象 89
4.4.1 數(shù)組介紹 89
4.4.2 定義數(shù)組 90
4.4.3 操作數(shù)組元素 91
實(shí)例:創(chuàng)建數(shù)組并輸出數(shù)組元素
4.4.4 數(shù)組的屬性 94
實(shí)例:在365影視網(wǎng)中循環(huán)輸出影片信息
4.4.5 數(shù)組的方法 97
實(shí)例:將數(shù)組中的元素順序顛倒后顯示
4.5 String對(duì)象 105
4.5.1 String對(duì)象的創(chuàng)建 105
4.5.2 String對(duì)象的屬性 105
實(shí)例:獲取字符串變量和字符串對(duì)象的長度
4.5.3 String對(duì)象的方法 107
實(shí)例:獲取指定字符在字符串中的出現(xiàn)次數(shù)
小結(jié) 116
上機(jī)指導(dǎo) 116
習(xí)題 118
第5章 JavaScript事件處理 119
5.1 事件與事件處理概述 120
5.1.1 什么是事件 120
5.1.2 JavaScript的常用事件 120
5.1.3 事件的調(diào)用 122
5.1.4 事件對(duì)象 123
5.2 表單相關(guān)事件 123
5.2.1 獲得焦點(diǎn)事件與失去焦點(diǎn)事件 123
實(shí)例:改變文本框的背景顏色
5.2.2 失去焦點(diǎn)內(nèi)容改變事件 125
實(shí)例:改變文本框的字體顏色
5.2.3 表單提交與重置事件 126
實(shí)例:判斷提交的表單中是否有空文本框
5.3 鼠標(biāo)鍵盤事件 128
5.3.1 鼠標(biāo)單擊事件 128
實(shí)例:動(dòng)態(tài)改變頁面的背景顏色
5.3.2 鼠標(biāo)按下和松開事件 129
實(shí)例:按下鼠標(biāo)時(shí)改變字體顏色
5.3.3 鼠標(biāo)移入移出事件 130
實(shí)例:動(dòng)態(tài)改變圖片的焦點(diǎn)
5.3.4 鼠標(biāo)移動(dòng)事件 131
實(shí)例:在狀態(tài)欄中顯示當(dāng)前鼠標(biāo)的位置
5.3.5 鍵盤事件 131
實(shí)例:利用鍵盤中的A鍵對(duì)頁面進(jìn)行刷新
5.4 頁面事件 134
5.4.1 加載與卸載事件 134
實(shí)例:網(wǎng)頁加載時(shí)縮小圖片
5.4.2 頁面大小事件 135
實(shí)例:鼠標(biāo)拖動(dòng)瀏覽器邊框使其恢復(fù)原始大小
小結(jié) 136
上機(jī)指導(dǎo) 136
習(xí)題 137
第6章 JavaScript常用文檔對(duì)象 138
6.1 Document對(duì)象 139
6.1.1 文檔對(duì)象概述 139
6.1.2 文檔對(duì)象的常用屬性、方法與事件 139
6.1.3 Document對(duì)象的應(yīng)用 141
實(shí)例:設(shè)置超鏈接的文字顏色
6.1.4 JavaScript中的cookie設(shè)置 146
實(shí)例:將表單注冊(cè)信息寫入Cookie
6.2 表單對(duì)象 153
6.2.1 訪問表單與表單元素 153
6.2.2 表單對(duì)象的常用屬性、方法與
事件 154
6.2.3 表單對(duì)象的應(yīng)用 155
實(shí)例:驗(yàn)證表單內(nèi)容是否為空
6.3 圖像對(duì)象 157
6.3.1 圖像對(duì)象概述 157
6.3.2 圖像對(duì)象的應(yīng)用 157
實(shí)例:圖片置頂
小結(jié) 163
上機(jī)指導(dǎo) 163
習(xí)題 165
第7章 文檔對(duì)象模型 166
7.1 DOM概述 167
7.1.1 DOM分層 167
7.1.2 DOM級(jí)別 168
7.2 DOM對(duì)象節(jié)點(diǎn)屬性 168
7.2.1 訪問指定節(jié)點(diǎn) 169
實(shí)例:訪問指定節(jié)點(diǎn)
7.2.2 遍歷文檔樹 170
實(shí)例:遍歷文檔樹
7.3 節(jié)點(diǎn) 173
7.3.1 創(chuàng)建節(jié)點(diǎn) 173
實(shí)例:創(chuàng)建新的節(jié)點(diǎn)
7.3.2 插入節(jié)點(diǎn) 175
實(shí)例:插入節(jié)點(diǎn)
7.3.3 復(fù)制節(jié)點(diǎn) 176
實(shí)例:復(fù)制節(jié)點(diǎn)
7.3.4 刪除與替換節(jié)點(diǎn) 178
實(shí)例:刪除節(jié)點(diǎn)
7.4 獲取文檔中的指定元素 180
7.4.1 通過元素的ID屬性獲取元素 180
實(shí)例:在365影視網(wǎng)中實(shí)現(xiàn)導(dǎo)航菜單功能
7.4.2 通過元素的name屬性獲取元素 183
實(shí)例:在365影視網(wǎng)中實(shí)現(xiàn)電影圖片輪換效果
7.5 與DHTML相對(duì)應(yīng)的DOM 184
7.5.1 innerHTML和innerText屬性 184
7.5.2 outerHTML和outerText屬性 185
實(shí)例:顯示分時(shí)問候
小結(jié) 187
上機(jī)指導(dǎo) 187
習(xí)題 188
第8章 Window對(duì)象 189
8.1 Window對(duì)象概述 190
8.1.1 Window對(duì)象的屬性 190
8.1.2 Window對(duì)象的方法 190
8.1.3 Window對(duì)象的使用 191
8.2 對(duì)話框 191
8.2.1 警告對(duì)話框 191
實(shí)例:彈出警告對(duì)話框
8.2.2 確認(rèn)對(duì)話框 192
實(shí)例:彈出確認(rèn)對(duì)話框
8.2.3 提示對(duì)話框 193
實(shí)例:彈出提示對(duì)話框并返回相應(yīng)數(shù)據(jù)
8.3 打開與關(guān)閉窗口 193
8.3.1 打開窗口 194
實(shí)例:在365影視網(wǎng)中實(shí)現(xiàn)在新窗口中打開影片詳情頁面
8.3.2 關(guān)閉窗口 196
實(shí)例:關(guān)閉子窗口同時(shí)刷新父窗口
8.4 控制窗口 198
8.4.1 移動(dòng)窗口 198
實(shí)例:實(shí)現(xiàn)窗口的反彈效果
8.4.2 窗口滾動(dòng) 200
實(shí)例:頁面自動(dòng)滾動(dòng)
8.4.3 改變窗口大小 202
實(shí)例:彈出自動(dòng)改變大小的窗口
8.4.4 控制窗口狀態(tài)欄 203
實(shí)例:狀態(tài)欄中文字從右向左依次彈出的效果
8.4.5 訪問窗口歷史 205
8.4.6 設(shè)置超時(shí) 206
8.5 窗口事件 206
8.5.1 通用窗口事件 206
8.5.2 擴(kuò)展窗口事件 206
小結(jié) 207
上機(jī)指導(dǎo) 207
習(xí)題 208
第9章 AJAX技術(shù) 209
9.1 AJAX概述 210
9.1.1 什么是AJAX 210
9.1.2 AJAX應(yīng)用案例 210
9.1.3 AJAX的開發(fā)模式 211
9.1.4 AJAX的優(yōu)點(diǎn) 212
9.2 AJAX的技術(shù)組成 213
9.2.1 XMLHttpRequest對(duì)象 213
9.2.2 XML語言 213
9.2.3 JavaScript腳本語言 215
9.2.4 DOM 215
9.2.5 CSS 215
9.3 XMLHttpRequest對(duì)象 215
9.3.1 XMLHttpRequest對(duì)象的初始化 216
9.3.2 XMLHttpRequest對(duì)象的常用屬性 216
9.3.3 XMLHttpRequest對(duì)象的常用方法 218
實(shí)例:讀取HTML文件并輸出結(jié)果
小結(jié) 221
上機(jī)指導(dǎo) 221
習(xí)題 222
第10章 jQuery簡(jiǎn)介 223
10.1 jQuery概述 224
10.1.1 jQuery能做什么 224
10.1.2 jQuery的特點(diǎn) 225
10.2 jQuery下載與配置 226
10.2.1 下載jQuery 226
10.2.2 配置jQuery 227
10.3 jQuery的插件 227
10.3.1 插件的使用 227
10.3.2 流行的插件 228
小結(jié) 230
習(xí)題 230
第11章 jQuery選擇器 231
11.1 jQuery的工廠函數(shù) 232
11.2 基本選擇器 232
11.2.1 ID選擇器 232
實(shí)例:獲取文本框中輸入的值
11.2.2 元素選擇器 233
實(shí)例:?jiǎn)螕舭粹o修改元素內(nèi)容
11.2.3 類名選擇器 235
實(shí)例:設(shè)置元素的CSS樣式
11.2.4 復(fù)合選擇器 236
實(shí)例:為元素添加新的樣式
11.2.5 通配符選擇器 237
11.3 層級(jí)選擇器 237
11.3.1 ancestor descendan選擇器 238
實(shí)例:為版權(quán)列表設(shè)置樣式
11.3.2 parent > child選擇器 239
實(shí)例:獲取表單中文本框的值
11.3.3 prev + next選擇器 240
實(shí)例:改變匹配元素的背景顏色
11.3.4 prev ~ siblings選擇器 241
實(shí)例:篩選頁面中div元素的同輩元素
11.4 過濾選擇器 242
11.4.1 簡(jiǎn)單過濾器 242
實(shí)例:實(shí)現(xiàn)一個(gè)帶表頭的雙色表格
11.4.2 內(nèi)容過濾器 245
實(shí)例:應(yīng)用內(nèi)容過濾器匹配單元格
11.4.3 可見性過濾器 247
實(shí)例:獲取隱藏和顯示的input元素的值
11.4.4 表單對(duì)象的屬性過濾器 247
實(shí)例:匹配表單中相應(yīng)的元素
11.4.5 子元素選擇器 249
11.5 屬性選擇器 249
11.6 表單選擇器 250
實(shí)例:匹配表單中相應(yīng)元素并實(shí)現(xiàn)不同的操作
小結(jié) 251
上機(jī)指導(dǎo) 252
習(xí)題 253
第12章 jQuery控制頁面 254
12.1 對(duì)元素內(nèi)容和值進(jìn)行操作 255
12.1.1 對(duì)元素內(nèi)容操作 255
實(shí)例:獲取和設(shè)置元素的文本內(nèi)容與HTML內(nèi)容
12.1.2 對(duì)元素值操作 257
實(shí)例:為多行列表框設(shè)置并獲取值
12.2 對(duì)DOM節(jié)點(diǎn)進(jìn)行操作 258
12.2.1 查找節(jié)點(diǎn) 259
12.2.2 創(chuàng)建節(jié)點(diǎn) 259
12.2.3 插入節(jié)點(diǎn) 259
12.2.4 刪除、復(fù)制與替換節(jié)點(diǎn) 260
實(shí)例:實(shí)現(xiàn)我的開心小農(nóng)場(chǎng)
12.3 對(duì)元素屬性進(jìn)行操作 264
實(shí)例:復(fù)選框的全選、反選與全不選
12.4 對(duì)元素的CSS樣式操作 268
12.4.1 通過修改CSS類實(shí)現(xiàn)樣式操作 268
實(shí)例:修改表單元素的CSS樣式
12.4.2 通過修改CSS屬性實(shí)現(xiàn)樣式操作 270
實(shí)例:生成一個(gè)可以編輯的表格
小結(jié) 272
上機(jī)指導(dǎo) 272
習(xí)題 275
第13章 jQuery的事件處理 276
13.1 頁面加載響應(yīng)事件 277
13.2 jQuery中的事件 277
實(shí)例:實(shí)現(xiàn)橫向?qū)Ш讲藛喂δ?br />
13.3 事件綁定 281
13.3.1 為元素綁定事件 281
實(shí)例:實(shí)現(xiàn)表格的動(dòng)態(tài)換膚
13.3.2 移除綁定 282
13.3.3 綁定一次性事件處理 282
13.4 模擬用戶操作 283
13.4.1 模擬用戶的操作觸發(fā)事件 283
實(shí)例:自動(dòng)執(zhí)行按鈕的click事件
13.4.2 模仿懸停事件 284
實(shí)例:鼠標(biāo)指向圖片時(shí)為圖片加邊框
13.4.3 模擬鼠標(biāo)連續(xù)單擊事件 284
實(shí)例:實(shí)現(xiàn)圖片的放大與縮小
小結(jié) 286
上機(jī)指導(dǎo) 286
習(xí)題 289
第14章 jQuery的動(dòng)畫效果 290
14.1 基本的動(dòng)畫效果 291
14.1.1 隱藏匹配元素 291
14.1.2 顯示匹配元素 291
實(shí)例:自動(dòng)隱藏式菜單
14.1.3 切換元素的可見狀態(tài) 293
實(shí)例:全部資源與精簡(jiǎn)資源的切換
14.2 淡入淡出的動(dòng)畫效果 296
實(shí)例:具有淡入淡出動(dòng)畫效果的自動(dòng)隱藏式菜單
14.3 滑動(dòng)效果 297
14.3.1 滑動(dòng)顯示匹配的元素 297
14.3.2 滑動(dòng)隱藏匹配的元素 298
實(shí)例:伸縮式導(dǎo)航菜單
14.3.3 通過高度的變化動(dòng)態(tài)切換元素的可見性 300
14.4 自定義的動(dòng)畫效果 301
14.4.1 使用animate()方法創(chuàng)建自定義動(dòng)畫 301
實(shí)例:在365影視網(wǎng)中實(shí)現(xiàn)即將上線影片信息向上滾動(dòng)的效果
14.4.2 使用stop()方法停止動(dòng)畫 303
小結(jié) 304
上機(jī)指導(dǎo) 304
習(xí)題 306
第15章 React簡(jiǎn)介 307
15.1 React概述 308
15.1.1 什么是React 308
15.1.2 React的常用術(shù)語 308
15.2 創(chuàng)建React元素 309
15.2.1 安裝React 309
15.2.2 使用JavaScript創(chuàng)建React元素 309
15.2.3 使用JSX創(chuàng)建React元素 310
實(shí)例:在模板中定義一個(gè)數(shù)組并輸出
15.3 創(chuàng)建組件 312
15.3.1 創(chuàng)建無狀態(tài)React組件 312
15.3.2 創(chuàng)建有狀態(tài)React組件 313
實(shí)例:控制按鈕可用狀態(tài)
小結(jié) 315
上機(jī)指導(dǎo) 315
習(xí)題 316
第16章 綜合開發(fā)實(shí)例——365影視網(wǎng)站設(shè)計(jì) 317
16.1 系統(tǒng)分析 318
16.2 系統(tǒng)設(shè)計(jì) 318
16.2.1 系統(tǒng)目標(biāo) 318
16.2.2 系統(tǒng)功能結(jié)構(gòu) 318
16.2.3 開發(fā)環(huán)境 319
16.2.4 文件夾組織結(jié)構(gòu) 320
16.3 網(wǎng)頁預(yù)覽 320
16.4 關(guān)鍵技術(shù) 322
16.4.1 JavaScript腳本技術(shù) 322
16.4.2 AJAX無刷新技術(shù) 324
16.4.3 jQuery技術(shù) 328
16.5 首頁技術(shù)實(shí)現(xiàn) 329
16.5.1 JavaScript實(shí)現(xiàn)導(dǎo)航菜單 329
16.5.2 JavaScript實(shí)現(xiàn)圖片的輪換效果 332
16.5.3 AJAX實(shí)現(xiàn)熱門專題頁面 333
16.5.4 JavaScript實(shí)現(xiàn)電影圖片不間斷滾動(dòng) 335
16.5.5 JavaScript實(shí)現(xiàn)浮動(dòng)窗口 336
16.5.6 jQuery實(shí)現(xiàn)滑動(dòng)門效果 338
16.5.7 jQuery實(shí)現(xiàn)向上間斷滾動(dòng)效果 340
16.6 查看影片詳情頁面 342
小結(jié) 343
第17章 課程設(shè)計(jì)——購物車設(shè)計(jì) 344
17.1 購物車概述 345
17.1.1 功能概述 345
17.1.2 購物車操作流程 345
17.1.3 程序預(yù)覽 346
17.2 系統(tǒng)設(shè)計(jì) 347
17.2.1 系統(tǒng)目標(biāo) 347
17.2.2 開發(fā)環(huán)境 347
17.2.3 文件夾組織結(jié)構(gòu) 347
17.3 熱點(diǎn)關(guān)鍵技術(shù) 348
17.3.1 JavaScript中的cookie 348
17.3.2 應(yīng)用AJAX技術(shù)實(shí)現(xiàn)用戶登錄 348
17.3.3 判斷用戶訪問權(quán)限 349
17.4 用戶登錄設(shè)計(jì) 349
17.4.1 用戶登錄功能概述 349
17.4.2 自動(dòng)生成驗(yàn)證碼 350
17.4.3 用戶登錄功能的實(shí)現(xiàn) 350
17.5 購物車操作 352
17.5.1 添加至購物車 352
17.5.2 查看購物車 355
17.5.3 修改商品購買數(shù)量 356
17.5.4 移除購物車中指定商品 357
17.5.5 清空購物車 359
小結(jié) 360