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

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

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

“前端開發工程師系列”教材是由課工場（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. 機械制圖 [許淑珍 于利民]
2. 微積分（經管類）導學篇（下冊） [王海棠 曹海軍 周玲麗]
3. 大學生創新創業基礎 [主編 姜國權 姜福佳]
4. 農產品云倉模式研究—以北京農產品流通物流供應鏈重構為例 [武曉釗 王成林 王春娟 等著]
5. 信息技術（微課版） [王云　徐江鴻　李清霞　羅學鋒　]
6. 管理基礎與實務 [主編 王鳳基 顏漢軍]
7. 高等數學導學篇（下冊） [主編 李文婧 胡雷 尹金生]
8. 高等數學導學篇（上冊） [主編 李文婧 胡雷 尹金生]
9. 高等數學（下冊） [主編 李愛芹 胡雷 尹金生]
10. 高等數學（上冊） [主編 李愛芹 胡雷 尹金生]
11. 庭院風骨—樹、灌、籬 [創意房主 著]
12. Python語言程序設計教程 [郭其標 房宜汕]
13. 微積分（經管類）教程篇（下冊） [曹海軍 王海棠 周玲麗]
14. 微積分（經管類）教程篇（上冊） [曹海軍 王海棠 周玲麗]
15. 微積分（經管類）導學篇（上冊） [王海棠 曹海軍 周玲麗]
16. 網站前端技術案例教程（HTML+CSS+JavaScript）（第二版） [黃華升]
17. 線性代數 [主編 史昱 陳鳳欣]
18. 電力電子技術課程學習及實驗指導 [主編 陳榮]
19. 成長對話：青春的榜樣 [主編　施端銀　黃武剛　應巨林]
20. 人工智能應用基礎 [主編 楊纓 李佳]
21. 中華水文化（慕課版）（第二版） [畢雪燕 楊華軻 羅玲誼 等編著]
22. 電路與電子技術Ⅱ——電路分析基礎 [主編 陳曉 金哲]
23. 飛機維修專業英語——飛機系統（第二版） [趙迎春]
24. 英語大爆炸：跟趣味情景劇學口語（微課版） [秦然　編著]
25. 機械工程制圖任務跟蹤訓練 [主編 王瑞清 趙金考 周彥云 ]
26. 機械工程制圖 [主編 覃國萍 劉百順 禹晨]
27. 平面設計與制作項目化教程 [主編　李晨]
28. 后期影像剪輯技術 [主編　郭建偉]
29. 人工智能概論（第二版） [主編　任云暉　丁紅　徐迎春 ]
30. 信息時代美育之道 [主編　劉宏宇　黎婭]