領先的實用技能——打造前端開發工程師 科學的訓練模式——授人以漁而不只是作品臨摹

真實的項目驅動——行業知識與專業設計相呼應 便捷的學習體驗——傳統教材與二維碼革命性攜手

隨著互聯網技術的飛速發展，“互聯網+”時代已經悄然到來，這自然催生了互聯網行業工種的細分，前端開發工程師這個職業應運而生，各行業、企業對前端設計開發人才的需求也日益增長。與傳統網頁開發設計人員相比，新“互聯網+”時代對前端開發工程師提出了更高的要求，傳統網頁開發設計人員已無法勝任。在這樣的大環境下，這套“前端開發工程師系列”教材應運而生，它旨在幫助讀者朋友快速成長為符合“互聯網+”時代企業需求的優秀的前端開發工程師。

“前端開發工程師系列”教材是由課工場（kgc.cn）的教研團隊研發的。課工場是北京大學下屬企業北京課工場教育科技有限公司推出的互聯網教育平臺，專注于互聯網企業各崗位人才的培養。平臺匯聚了數百位來自知名培訓機構、高校的頂級名師和互聯網企業的行業專家，面向大學生以及需要“充電”的在職人員，針對與互聯網相關的產品設計、開發、運維、推廣和運營等崗位，提供在線的直播和錄播課程，并通過遍及全國的幾十家線下服務中心提供現場面授以及多種形式的教學服務，并同步研發出版最新的課程教材。參與本書編寫的院校老師還有郭峰、周雯、禹波、殷悅等。

課工場為培養互聯網前端設計開發人才，特別推出“前端開發工程師系列”教育產品，提供各種學習資源和支持，包括：

 現場面授課程

 在線直播課程

 錄播視頻課程

 案例素材下載

 學習交流社區

 QQ討論組（技術，就業，生活）

以上所有資源請訪問課工場www.kgc.cn。

本套教材特點

（1）科學的訓練模式

 科學的課程體系。

 創新的教學模式。

 技能人脈，實現多方位就業。

 隨需而變，支持終身學習。

（2）真實的項目驅動

 覆蓋80%的網站效果制作。

 幾十個實訓項目，涵蓋電商、金融、教育、旅游、游戲等行業。

（3）便捷的學習體驗

 每章提供二維碼掃描，可以直接觀看相關視頻講解和案例操作。

 課工場開辟教材配套版塊，提供素材下載、學習社區等豐富的在線學習資源。

讀者對象

（1）初學者：本套教材將幫助你快速進入互聯網前端開發行業，從零開始逐步成長為專業前端開發工程師。

（2）初級前端開發者：本套教材將帶你進行全面、系統的互聯網前端設計開發學習，幫助你梳理全面、科學的技能理論，提供實用開發技巧和項目經驗。

課工場出品（kgc.cn）

第1章 JavaScript基礎 1
1 JavaScript概述 2
1.1 JavaScript概念 2
1.2 JavaScript的應用 2
1.2.1 JavaScript的組成 3
1.2.2 JavaScript的執行原理 3
1.2.3 JavaScript的基本結構 4
1.3 在網頁中引用JavaScript 5
操作案例1：網頁中引用JavaScript代碼 7
2 JavaScript基礎語法 7
2.1 變量 7
2.2 數據類型 8
2.3 運算符 10
2.4 注釋 10
2.5 選擇結構 11
2.6 信息提示的使用 12
操作案例2：模擬計算器 13
3 函數 14
3.1 系統函數 14
3.2 自定義函數 15
3.3 變量的作用域 17
操作案例3：模擬QQ登錄驗證 18
本章總結 19
本章作業 19
第2章 JavaScript對象 23
1 認識BOM 24
2 window對象 25
2.1 常用的屬性 25
2.2 常用的方法 25
2.2.1 confirm()方法 26
2.2.2 open()方法 27
2.2.3 close()方法 27
2.3 常用的事件 28
操作案例1：制作簡易購物車頁面 30
3 history對象 31
4 location對象 32
操作案例2：查看一年四季的變化 33
5 document對象 35
5.1 常用的屬性 35
5.2 常用的方法 37
5.3 復選框的全選/全不選效果 40
6 JavaScript內置對象 41
6.1 Array對象 41
6.1.1 創建數組 41
6.1.2 為數組元素賦值 42
6.1.3 訪問數組元素 42
6.1.4 數組的常用屬性和方法 42
6.2 Date對象 43
6.3 Math對象 45
7 定時函數 45
7.1 setTimeout() 46
7.2 setInterval() 46
7.3 clearTimeout()和clearInterval() 47
操作案例3：變化的時鐘 48
本章總結 49
本章作業 49
第3章 jQuery基礎 51
1 jQuery簡介 52
1.1 為什么選擇jQuery 52
1.2 什么是jQuery 54
1.2.1 jQuery簡介 54
1.2.2 jQuery的用途 54
1.2.3 jQuery的優勢 56
1.3 配置jQuery環境 57
1.3.1 獲取jQuery的最新版本 57
1.3.2 jQuery庫類型說明 58
1.3.3 jQuery環境配置 58
1.3.4 在頁面中引入jQuery 58
2 DOM高級編程 58
2.1 什么是DOM 59
2.2 動態改變HTML文檔結構 60
2.2.1 查找HTML節點元素 60
2.2.2 改變HTML內容及屬性 63
2.2.3 改變HTML CSS樣式 65
2.3 DOM對象 66
3 jQuery語法結構 66
3.1 第一個jQuery程序 67
3.2 jQuery語法結構 68
3.3 讀取設置CSS屬性值 70
3.4 移除CSS樣式 71
操作案例1：使用jQuery變換網頁效果 71
4 jQuery對象和DOM對象 72
4.1 jQuery對象 72
4.2 jQuery對象與DOM對象的相互轉換 73
4.2.1 jQuery對象轉換成DOM對象 73
4.2.2 DOM對象轉換成jQuery對象 73
操作案例2：使用jQuery方式彈出消息
對話框 74
5 循環結構 74
5.1 循環結構概述 75
5.2 for循環語句 76
5.3 while循環語句 77
操作案例3：計算100以內的偶數之和 78
操作案例4：制作京東商城首頁焦點圖
輪播特效 79
本章總結 80
本章作業 80
第4章 jQuery選擇器與事件 81
1 jQuery選擇器 82
1.1 選擇器優勢 82
1.2 jQuery選擇器分類 82
1.3 基本選擇器 83
1.4 層次選擇器 87
1.5 屬性選擇器 91
1.6 過濾選擇器 95
操作案例1：制作非緣勿擾頁面特效 100
操作案例2：制作美化近期熱門欄目特效 101
2 jQuery事件 102
2.1 事件概述 102
2.2 window事件 102
2.3 鼠標事件 103
2.4 鍵盤事件 104
2.5 表單事件 104
操作案例3：制作左導航特效 105
2.6 綁定事件與移除事件 106
2.7 復合事件 108
操作案例4：制作團購網主導航 109
本章總結 110
本章作業 110
第5章 jQuery遍歷和特效動畫 113
1 jQuery中的DOM遍歷 114
1.1 jQuery中的DOM操作概述 114
1.2 節點操作 115
1.2.1 查找節點 115
1.2.2 創建節點元素 116
1.2.3 插入節點 116
1.2.4 刪除節點 117
1.2.5 替換節點 120
1.2.6 復制節點 120
1.3 屬性操作 120
1.3.1 獲取與設置元素屬性 120
1.3.2 刪除元素屬性 120
操作案例1：制作會員信息模塊 121
1.4 節點遍歷 122
1.4.1 遍歷后代元素 123
1.4.2 遍歷同輩元素 123
1.4.3 遍歷前輩元素 124
1.4.4 遍歷之過濾方法 125
1.5 CSS-DOM操作 125
操作案例2：制作京東商城首頁焦點圖
輪播特效 126
2 jQuery特效動畫 127
2.1 控制元素顯示和隱藏 127
2.1.1 控制元素顯示 128
2.1.2 控制元素隱藏 129
2.1.3 切換元素可見狀態 130
操作案例3：制作京東商城首頁左側菜單 131
2.2 控制元素淡入和淡出 132
2.2.1 控制元素淡入 132
2.2.2 控制元素淡出 133
2.2.3 切換元素出入狀態 134
操作案例4：仿京東焦點圖輪播淡入
淡出特效 134
2.3 控制元素滑動 135
2.3.1 控制元素下滑 135
2.3.2 控制元素上滑 136
2.3.3 控制元素上下滑動 136
2.4 jQuery自定義動畫 137
操作案例5：移動的棍子 138
本章總結 139
本章作業 139
第6章 表單驗證 143
1 表單驗證概述 144
1.1 表單驗證的必要性 144
1.2 表單驗證的內容 145
1.3 表單驗證的思路 146
2 String對象 146
2.1 常用的屬性 146
2.2 常用的方法 147
2.3 電子郵件格式的驗證 147
操作案例1：驗證電子郵箱 150
2.4 文本內容的驗證 151
操作案例2：驗證注冊信息 154
3 jQuery中的DOM內容操作 154
4 文本提示特效 155
4.1 表單驗證事件和方法 156
4.2 文本輸入提示特效 158
操作案例3：改進驗證注冊信息 161
5 表單選擇器 161
5.1 表單選擇器概述 161
5.2 多行數據的驗證 165
本章總結 169
本章作業 169
第7章 jQuery中的Ajax 171
1 認識Ajax 172
1.1 Ajax應用 172
1.2 Ajax工作原理 173
1.3 認識XMLHttpRequest 174
操作案例1：IIS服務器的搭建 175
2 jQuery中的Ajax 175
2.1 get()方法與post()方法 176
2.2 ajax()方法 178
操作案例2：驗證注冊名是否可用 179
2.3 load()方法 180
操作案例3：刷新最新動態 181
3 認識JSON 182
3.1 JSON簡介 182
3.2 使用jQuery處理JSON數據 183
3.3 getJSON()方法 184
操作案例4：制作冬奧會頁面輪播
圖片效果 186
本章總結 187
本章作業 187
第8章 項目案例：英雄難過棍子關 189
1 項目說明 190
1.1 需求概述 190
1.2 技能點 191
2 項目實現 191
2.1 制作英雄難過棍子關主界面 191
2.2 制作游戲主界面靜態頁面 193
2.3 制作黑色柱子的動態實現 194
2.4 制作棍子動畫 195
2.5 制作英雄過關 196
2.6 制作英雄過關成敗的提示框 197
2.7 重新玩本關游戲 198
2.8 繼續下一關的實現 198

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年長沙市會展業發展報告 [主編 周棟良]