編排新穎：采用活頁式裝訂，突出項目與任務。

思政融合：課程內容巧妙結合思政相關元素。

內容實用：以任務為驅動，培養讀者的職業能力。

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

本書采用“項目—任務—實訓”的方式，從基礎開始講解JavaScript與jQuery技術，然后進行強化。全書以任務為驅動，內容循序漸進，案例豐富實用，既可作為JavaScript和jQuery初學者的入門教程，也可為具有一定Web前端基礎的讀者進一步學習提供參考。本書對“Web前端工程師”所需技能進行了梳理，結合了常見的Web前端開發中所涉及的一些工作任務，以工作任務為核心重新選擇和組織專業知識體系，按工作過程設計學習情景，強化Web前端工程師所需技能，提升動手能力，是一本應用當前流行的前端技術實現客戶端交互效果的實用教程。本書具有以下特點：

（1）編排新穎。采用了新形態活頁式教材的方式編寫，突出了項目和任務，并在每個任務前加入任務實施單，對所完成的任務進行設計、分工、實施、評價，突出了對讀者的工作能力的培養。

（2）能力培養。突出了對網頁交互效果制作能力的培養，按照工學結合的編寫思

路，充分考慮學生的認知規律，化解知識難點。精心設計了3個教學環節：任務、課后練習和實訓。讓讀者在實踐中，學會應用所學知識解決實際問題。

（3）思政融合。在教學內容中融合了思政元素，從時政熱點、家國情懷、個人理想等方面出發，將思政育人與教學相結合，將社會主義核心價值觀、職業基本素養等融入課堂。

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

李敏、韋波、宋家慧和林灃共同完成，“思政目標”部分由玉楊陽完成。

由于編者水平有限，書中難免存在疏漏之處，敬請各位專家和讀者批評指正。

編 者

2022年8月

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

1. 零基礎玩轉國產大模型DeepSeek [徐永冰 張帥 編著]
2. 網絡工程師5天修煉（適配第6版考綱） [主編　朱小平 施游]
3. 信息系統項目管理師考試32小時通關（適用第4版考綱） [薛大龍]
4. 信息系統管理工程師考試32小時通關（適配第2版考綱） [薛大龍　劉偉]
5. 土木工程材料檢測實訓 [洪曉江 達則曉麗 錢波]
6. 科技信息檢索與論文寫作實用教程 [李振華]
7. 傳統山水畫論解讀與實踐 [陳鈉 著]
8. Python數據庫編程 [主編 殷樹友 邢 翀]
9. 計算機基礎實訓指導 [主編 袁春萍 朱妮]
10. 嵌入式人工智能技術應用（數字教材） [主編 胡娜 楊國勇 晏廷榮]
11. Vienna整流器技術 [桂存兵 著]
12. 變頻器與伺服應用 [陳剛 葉云飛]
13. 物聯網工程設計與實踐 [湯琳 李敏]
14. 爐邊夜話——深入淺出話AI [汪建　著]
15. 電商運營與管理 [鐘肖英 陳瀟]
16. Java面向對象程序設計 [主編 姜春磊 陳虹潔]
17. 信息技術基礎（Windows 10+WPS Office）（微課版） [主編　石利平　田輝平　謝盛嘉]
18. 人工智能應用 [主編　陳　萍　劉培培　陳孟軍]
19. 大學生職業發展與就業指導 [主編　劉志堅]
20. 高級辦公應用項目教程 [主編 屈晶 趙成麗]
21. 微信小程序開發項目實戰（微課版） [主編 黃龍泉 郭峰 朱倩]
22. 企業檔案工作實戰寶典百問百答 [華俊 盧秀英 邵甜甜 著]
23. 計算機網絡原理及應用 [主編 唐繼勇 葉坤 孫夢娜]
24. 大學生創業基礎 [主編 王麗莉 王 楊]
25. 船舶輔機 [主編 王連海 于洋 姜淑翠]
26. 大學生就業指導 [主編 王麗莉 董宴廷]
27. 系統架構設計師章節習題與考點特訓 [主編 薛大龍 鄒月平]
28. 高校學生工作探索與實踐 [郭亮 著]
29. 大學生情商管理 [方雄 著]
30. 2023年長沙市會展業發展報告 [主編 周棟良]