JavaScript與jQuery項(xiàng)目化教程（活頁(yè)式）

編排新穎：采用活頁(yè)式裝訂，突出項(xiàng)目與任務(wù)。

思政融合：課程內(nèi)容巧妙結(jié)合思政相關(guān)元素。

內(nèi)容實(shí)用：以任務(wù)為驅(qū)動(dòng)，培養(yǎng)讀者的職業(yè)能力。

在信息技術(shù)迅猛發(fā)展的背景下，產(chǎn)生了對(duì)Web應(yīng)用的大量需求，而良好的Web前端交互設(shè)計(jì)在吸引用戶(hù)方面起著至關(guān)重要的作用。JavaScript腳本語(yǔ)言是目前Web應(yīng)用開(kāi)發(fā)的主流腳本語(yǔ)言，由于其開(kāi)源編輯的特性，目前幾乎所有的主流瀏覽器都支持，且絕大部分的網(wǎng)站都采用了JavaScript腳本技術(shù)。隨著JavaScript在Web應(yīng)用開(kāi)發(fā)領(lǐng)域的廣泛使用，基于JavaScript的框架和插件也層出不窮。其中jQuery就是JavaScript框架中的優(yōu)秀代表，也是目前Web應(yīng)用中使用范圍最廣泛的JavaScript函數(shù)庫(kù)之一。它的出現(xiàn)讓需要大量JavaScript代碼才能完成的功能和特效，僅通過(guò)簡(jiǎn)單的語(yǔ)句就能輕松完成，實(shí)現(xiàn)了“寫(xiě)得少，做得多”的語(yǔ)法理念；同時(shí)，對(duì)操作CSS、DOM、Ajax等各種標(biāo)準(zhǔn)Web技術(shù)提供了許多實(shí)用且簡(jiǎn)便的方法，很好地解決了瀏覽器之間的兼容性問(wèn)題。

本書(shū)采用“項(xiàng)目—任務(wù)—實(shí)訓(xùn)”的方式，從基礎(chǔ)開(kāi)始講解JavaScript與jQuery技術(shù)，然后進(jìn)行強(qiáng)化。全書(shū)以任務(wù)為驅(qū)動(dòng)，內(nèi)容循序漸進(jìn)，案例豐富實(shí)用，既可作為JavaScript和jQuery初學(xué)者的入門(mén)教程，也可為具有一定Web前端基礎(chǔ)的讀者進(jìn)一步學(xué)習(xí)提供參考。本書(shū)對(duì)“Web前端工程師”所需技能進(jìn)行了梳理，結(jié)合了常見(jiàn)的Web前端開(kāi)發(fā)中所涉及的一些工作任務(wù)，以工作任務(wù)為核心重新選擇和組織專(zhuān)業(yè)知識(shí)體系，按工作過(guò)程設(shè)計(jì)學(xué)習(xí)情景，強(qiáng)化Web前端工程師所需技能，提升動(dòng)手能力，是一本應(yīng)用當(dāng)前流行的前端技術(shù)實(shí)現(xiàn)客戶(hù)端交互效果的實(shí)用教程。本書(shū)具有以下特點(diǎn)：

（1）編排新穎。采用了新形態(tài)活頁(yè)式教材的方式編寫(xiě)，突出了項(xiàng)目和任務(wù)，并在每個(gè)任務(wù)前加入任務(wù)實(shí)施單，對(duì)所完成的任務(wù)進(jìn)行設(shè)計(jì)、分工、實(shí)施、評(píng)價(jià)，突出了對(duì)讀者的工作能力的培養(yǎng)。

（2）能力培養(yǎng)。突出了對(duì)網(wǎng)頁(yè)交互效果制作能力的培養(yǎng)，按照工學(xué)結(jié)合的編寫(xiě)思

路，充分考慮學(xué)生的認(rèn)知規(guī)律，化解知識(shí)難點(diǎn)。精心設(shè)計(jì)了3個(gè)教學(xué)環(huán)節(jié)：任務(wù)、課后練習(xí)和實(shí)訓(xùn)。讓讀者在實(shí)踐中，學(xué)會(huì)應(yīng)用所學(xué)知識(shí)解決實(shí)際問(wèn)題。

（3）思政融合。在教學(xué)內(nèi)容中融合了思政元素，從時(shí)政熱點(diǎn)、家國(guó)情懷、個(gè)人理想等方面出發(fā)，將思政育人與教學(xué)相結(jié)合，將社會(huì)主義核心價(jià)值觀、職業(yè)基本素養(yǎng)等融入課堂。

本書(shū)為校企合作開(kāi)發(fā)教材，由廣西機(jī)電職業(yè)技術(shù)學(xué)院與東軟教育科技集團(tuán)共同編寫(xiě)，是廣西“雙高”專(zhuān)業(yè)建設(shè)—焊接自動(dòng)化專(zhuān)業(yè)群建設(shè)成果之一，作者團(tuán)隊(duì)高校教學(xué)經(jīng)驗(yàn)豐富，具備“雙師型”教師素質(zhì)。本書(shū)由林灃、藍(lán)雪燕、宋家慧任主編，韋波、李敏、劉春霞、鄧谞嬋任副主編。此外，韋善周、農(nóng)丹華、梁瑾、盤(pán)曉瑩、玉楊陽(yáng)參與了教材的編寫(xiě)工作。人員分工如下：宋家慧編寫(xiě)了項(xiàng)目1，鄧谞嬋編寫(xiě)了項(xiàng)目2，劉春霞編寫(xiě)了項(xiàng)目3，藍(lán)雪燕編寫(xiě)了項(xiàng)目4，韋善周編寫(xiě)了項(xiàng)目5，農(nóng)丹華編寫(xiě)了項(xiàng)目6，梁瑾編寫(xiě)了項(xiàng)目7，盤(pán)曉瑩編寫(xiě)了項(xiàng)目8，林灃編寫(xiě)了項(xiàng)目9和項(xiàng)目10，任務(wù)案例由

李敏、韋波、宋家慧和林灃共同完成，“思政目標(biāo)”部分由玉楊陽(yáng)完成。

由于編者水平有限，書(shū)中難免存在疏漏之處，敬請(qǐng)各位專(zhuān)家和讀者批評(píng)指正。

編 者

2022年8月

前言
項(xiàng)目1　初識(shí)JavaScript 001
任務(wù)1.1　JavaScript入門(mén) 003
1.1.1　JavaScript的起源和發(fā)展 003
1.1.2　JavaScript的作用 004
1.1.3　JavaScript的組成 005
1.1.4　JavaScript的特點(diǎn) 006
任務(wù)1.2　JavaScript的開(kāi)發(fā)流程 008
1.2.1　HBulider X簡(jiǎn)介 008
1.2.2　使用HBuilder X 008
1.2.3　JavaScript的基本結(jié)構(gòu) 011
1.2.4　引入JavaScript腳本 011
任務(wù)1.3　運(yùn)行和調(diào)試JavaScript腳本 015
1.3.1　運(yùn)行JavaScript腳本 015
1.3.2　調(diào)試JavaScript腳本 016
任務(wù)1.4　常用的輸出語(yǔ)句和對(duì)話(huà)框 019
1.4.1　頁(yè)面輸出語(yǔ)句 019
1.4.2　控制臺(tái)輸出語(yǔ)句 020
1.4.3　警告對(duì)話(huà)框 020
1.4.4　提示對(duì)話(huà)框 021
1.4.5　消息對(duì)話(huà)框 022
小結(jié) 023
課后練習(xí) 023
實(shí)訓(xùn)1　輸出頁(yè)面元素和彈窗 026
項(xiàng)目2　JavaScript基礎(chǔ)語(yǔ)法 027
任務(wù)2.1　變量 029
2.1.1　標(biāo)識(shí)符 029
2.1.2　變量的使用 030
任務(wù)2.2　數(shù)據(jù)類(lèi)型 032
任務(wù)2.3　運(yùn)算符 035
任務(wù)2.4　數(shù)據(jù)類(lèi)型的轉(zhuǎn)換與獲取 039
2.4.1　數(shù)據(jù)的轉(zhuǎn)換 039
2.4.2　typeof操作符 041
任務(wù)2.5　分支結(jié)構(gòu) 043
2.5.1　單分支語(yǔ)句 043
2.5.2　雙分支語(yǔ)句 043
2.5.3　多分支語(yǔ)句 044
任務(wù)2.6　循環(huán)結(jié)構(gòu) 049
2.6.1　while循環(huán)語(yǔ)句 049
2.6.2　do...while循環(huán)語(yǔ)句 050
2.6.3　for循環(huán)語(yǔ)句 050
2.6.4　嵌套循環(huán) 051
任務(wù)2.7　跳轉(zhuǎn)語(yǔ)句 054
2.7.1　break語(yǔ)句 054
2.7.2　continue語(yǔ)句 054
小結(jié) 055
課后練習(xí) 055
實(shí)訓(xùn)2　猜數(shù)字游戲 058
項(xiàng)目3　JavaScript函數(shù) 060
任務(wù)3.1　函數(shù) 062
3.1.1　函數(shù)的聲明 062
3.1.2　函數(shù)的參數(shù) 062
3.1.3　函數(shù)的調(diào)用 063
3.1.4　函數(shù)的返回值 065
3.1.5　變量的作用域 065
任務(wù)3.2　匿名函數(shù) 068
任務(wù)3.3　閉包函數(shù) 070
小結(jié) 070
課后練習(xí) 071
實(shí)訓(xùn)3　制作簡(jiǎn)易四則運(yùn)算計(jì)算器 074
項(xiàng)目4　JavaScript對(duì)象 076
任務(wù)4.1　對(duì)象 078
4.1.1　初識(shí)對(duì)象 078
4.1.2　自定義對(duì)象的聲明 078
4.1.3　訪(fǎng)問(wèn)對(duì)象的屬性和方法 079
任務(wù)4.2　內(nèi)置對(duì)象 082
4.2.1　Math對(duì)象 082
4.2.2　定時(shí)器 083
4.2.3　Date對(duì)象 084
4.2.4　Array對(duì)象 087
4.2.5　String對(duì)象 089
小結(jié) 091
課后練習(xí) 091
實(shí)訓(xùn)4　輪播圖和扶貧日活動(dòng)倒計(jì)時(shí)的
　　　 制作 094
項(xiàng)目5　DOM基礎(chǔ) 096
任務(wù)5.1　DOM簡(jiǎn)介 098
5.1.1　DOM的含義 098
5.1.2　DOM樹(shù) 098
任務(wù)5.2　獲取元素 101
5.2.1　通過(guò)Id獲取 101
5.2.2　通過(guò)TagName獲取 102
5.2.3　通過(guò)Name獲取 103
5.2.4　通過(guò)ClassName獲取 104
任務(wù)5.3　事件 106
5.3.1　事件的分類(lèi) 106
5.3.2　事件的綁定方式 107
5.3.3　事件的對(duì)象 107
任務(wù)5.4　操作元素 110
5.4.1　獲取和設(shè)置元素內(nèi)容 110
5.4.2　獲取和設(shè)置元素屬性 112
小結(jié) 113
課后練習(xí) 113
實(shí)訓(xùn)5　鼠標(biāo)拖拽div 116
項(xiàng)目6　DOM進(jìn)階操作 118
任務(wù)6.1　節(jié)點(diǎn)操作 120
6.1.1　按層次關(guān)系訪(fǎng)問(wèn)節(jié)點(diǎn) 120
6.1.2　創(chuàng)建和添加節(jié)點(diǎn) 121
6.1.3　刪除和復(fù)制節(jié)點(diǎn) 123
6.1.4　替換節(jié)點(diǎn) 124
任務(wù)6.2　JavaScript與CSS交互 127
6.2.1　操作元素樣式 127
6.2.2　Tab欄目切換 128
6.2.3　鼠標(biāo)指針進(jìn)入縮略圖切換大圖 130
6.2.4　首頁(yè)滾動(dòng)顯示對(duì)聯(lián)宣傳圖標(biāo) 131
6.2.5　圖片放大特效 133
小結(jié) 136
課后練習(xí) 137
實(shí)訓(xùn)6　購(gòu)物車(chē)操作 140
項(xiàng)目7　BOM 145
任務(wù)7.1　BOM概述 147
任務(wù)7.2　window對(duì)象 149
7.2.1　打開(kāi)和關(guān)閉窗口 150
7.2.2　操作窗口 153
任務(wù)7.3　location對(duì)象、history對(duì)象
　　　　 和navigator對(duì)象的使用 157
7.3.1　location對(duì)象 157
7.3.2　history對(duì)象 158
7.3.3　navigator對(duì)象 160
小結(jié) 161
課后練習(xí) 162
實(shí)訓(xùn)7　制作網(wǎng)站登錄效果 164
項(xiàng)目8　jQuery基礎(chǔ) 167
任務(wù)8.1　初識(shí)jQuery 169
8.1.1　jQuery概述 169
8.1.2　獲取jQuery 169
8.1.3　使用jQuery 171
任務(wù)8.2　jQuery對(duì)象與選擇器 174
8.2.1　jQuery對(duì)象 174
8.2.2　基本選擇器 175
8.2.3　層級(jí)選擇器 178
8.2.4　篩選選擇器 180
8.2.5　表單選擇器 187
小結(jié) 189
課后練習(xí) 190
實(shí)訓(xùn)8　暢銷(xiāo)書(shū)簡(jiǎn)介 193
項(xiàng)目9　jQuery的DOM操作 196
任務(wù)9.1　元素樣式的操作 198
9.1.1　css()方法 198
9.1.2　類(lèi)樣式方法 198
任務(wù)9.2　元素屬性的操作 202
9.2.1　prop()方法 202
9.2.2　attr()方法 202
任務(wù)9.3　元素內(nèi)容的操作 209
任務(wù)9.4　節(jié)點(diǎn)元素的操作 213
9.4.1　遍歷元素 213
9.4.2　創(chuàng)建元素 214
9.4.3　插入元素 215
9.4.4　移除元素 216
小結(jié) 218
課后練習(xí) 218
實(shí)訓(xùn)9　購(gòu)物車(chē)添加商品 222
項(xiàng)目10　jQuery的事件與動(dòng)畫(huà) 224
任務(wù)10.1　jQuery事件 226
10.1.1　事件綁定 226
10.1.2　事件解綁 229
10.1.3　事件對(duì)象 229
10.1.4　切換事件 232
任務(wù)10.2　jQuery動(dòng)畫(huà) 237
10.2.1　隱藏與顯示動(dòng)畫(huà) 237
10.2.2　滑動(dòng)動(dòng)畫(huà) 238
10.2.3　淡入淡出動(dòng)畫(huà) 240
小結(jié) 242
課后練習(xí) 243
實(shí)訓(xùn)10　設(shè)計(jì)地址管理頁(yè)面 246
參考文獻(xiàn) 248

1. 信息技術(shù)基礎(chǔ)（麒麟操作系統(tǒng)+WPS Office） [主編　芮雪　蔣莉　王亮亮]
2. Office高級(jí)應(yīng)用項(xiàng)目式教程（第2版） [主編 李觀金 張倩文 黎夏克 ]
3. 巧用翻譯學(xué)英語(yǔ)：英漢互譯500例 [王學(xué)文 著]
4. 高等教育多維評(píng)價(jià)體系構(gòu)建與高質(zhì)量發(fā)展研究 [張妍 著]
5. 系統(tǒng)規(guī)劃與管理師章節(jié)習(xí)題與考點(diǎn)特訓(xùn)（第二版） [主編 薛大龍]
6. 計(jì)算機(jī)操作系統(tǒng)實(shí)踐指導(dǎo)（openEuler版） [主編 秦光 曾陳萍 岳付強(qiáng)]
7. 信息系統(tǒng)管理工程師真題及模考卷精析（適用機(jī)考） [主 編 薛大龍 程 剛 上官緒]
8. 航海類(lèi)院校體育教育教學(xué)研究 [張利超 李寧 著]
9. 新時(shí)代背景下我國(guó)職業(yè)教育產(chǎn)教融合長(zhǎng)效機(jī)制建設(shè)研究 [王玉賢 著]
10. 電路分析 [主編 李飛 毛先柏]
11. 信息系統(tǒng)管理工程師（適用第2版大綱）一站通關(guān) [指尖瘋　編著]
12. 傳統(tǒng)山水畫(huà)論解讀與實(shí)踐 [陳鈉 著]
13. 網(wǎng)絡(luò)工程師備考一本通（適配第6版考綱） [夏杰 編著]
14. 陳孝云的職教理想與情懷 [祝吉太 江傳瑞 張義廷 著]
15. 地方本科院校電子信息學(xué)科課程思政案例集 [王甫]
16. Excel數(shù)據(jù)處理與分析（第二版） [主編 張志明 鄒 蕾]
17. 網(wǎng)絡(luò)工程師5天修煉（適配第6版考綱） [主編　朱小平 施游]
18. 倉(cāng)儲(chǔ)管理實(shí)務(wù)（第二版） [周寧武 編著]
19. 基于AE與C#的地理信息系統(tǒng)二次開(kāi)發(fā) [李小根 賈艷昌 喬翠平 姜彤 ]
20. 2023年長(zhǎng)沙市文化和旅游業(yè)發(fā)展報(bào)告 [主編 陳莉]
21. 舞臺(tái)化妝造型設(shè)計(jì) [主編 劉思彤 張 濤 張憶雨]
22. 產(chǎn)教融合視角高校體育專(zhuān)業(yè)實(shí)踐教學(xué)體系構(gòu)建研究 [楊柳青 葉華兵 著]
23. 知識(shí)圖譜及應(yīng)用案例 [張善文 黃文準(zhǔn) 于長(zhǎng)青 陳明淑]
24. Python程序設(shè)計(jì)案例教程（微課版） [主編　石利平　田輝平　余以勝]
25. 皓月繁星：青少年兒童心理成長(zhǎng)手冊(cè) [主　編　林贊歌 副主編　杜志南]
26. 材料力學(xué) [章寶華 趙新勝 徐斌]
27. 系統(tǒng)集成項(xiàng)目管理工程師考試32小時(shí)通關(guān)（第3版） [主編　薛大龍 副主編　上官緒陽(yáng)]
28. 軟考論文高分特訓(xùn)與范文10篇——系統(tǒng)分析師（第二版） [薛大龍 鄒月平 施游]
29. 黃河海勃灣水利樞紐防凌安全運(yùn)行 [王戰(zhàn)領(lǐng) 王叢發(fā) 范瑜彬 著]
30. 大學(xué)生心理健康教育 [方雄 著]