JavaScript+jQuery開發(fā)實戰(zhàn)

第 1章　初識JavaScript 1
任務(wù)1　了解JavaScript能做什么　2
任務(wù)2　掌握什么是JavaScript　3
1．2．1　JavaScript的結(jié)構(gòu)組成　4
1．2．2　JavaScript的基本結(jié)構(gòu)　4
1．2．3　JavaScript的執(zhí)行原理　6
1．2．4　JavaScript頁面的引用　6
任務(wù)3　掌握J(rèn)avaScript的基礎(chǔ)語法　8
1．3．1　變量的聲明和賦值　8
1．3．2　數(shù)據(jù)類型　9
1．3．3　數(shù)組　12
1．3．4　運算符　13
1．3．5　邏輯控制語句　16
1．3．6　注釋　22
1．3．7　常用的輸入/輸出　23
1．3．8　上機訓(xùn)練　24
上機練習(xí)1—統(tǒng)計包含“a”或“A”的字符串的個數(shù)　24
任務(wù)4　掌握調(diào)試工具的用法　25
1．4．1　Chrome開發(fā)者工具　26
1．4．2　上機訓(xùn)練　29
上機練習(xí)2—調(diào)試程序　29
任務(wù)5　掌握J(rèn)avaScript中函數(shù)的應(yīng)用　31
1．5．1　系統(tǒng)函數(shù)　31
1．5．2　定義函數(shù)　32
1．5．3　上機訓(xùn)練　34
上機練習(xí)3—編寫一個帶兩個變量和一個運算符的四則運算函數(shù)　34
1．5．4　變量作用域　35
1．5．5　頁面中的事件　36
1．5．6　上機訓(xùn)練　37
上機練習(xí)4—統(tǒng)計考試科目的成績　37
第　2章 JavaScript中的BOM對象操作　41
任務(wù)1　了解BOM及構(gòu)成　42
2．1．1　認(rèn)識BOM　42
2．1．2　瀏覽器對象　43
2．1．3　上機訓(xùn)練　48
上機練習(xí)1—制作簡易的購物車頁面　48
任務(wù)2　掌握history對象和location對象的使用　50
2．2．1　history對象　50
2．2．2　location對象　51
2．2．3　上機訓(xùn)練　52
上機練習(xí)2—查看一年四季的變化　52
任務(wù)3　掌握document對象的使用　53
2．3．1　document對象　53
2．3．2　上機訓(xùn)練　58
上機練習(xí)3—完善購物車頁面　58
任務(wù)4　掌握系統(tǒng)函數(shù)的應(yīng)用　60
2．4．1　Date對象　60
2．4．2　Math對象　61
2．4．3　定時函數(shù)　63
2．4．4　上機訓(xùn)練　65
上機練習(xí)4—制作二十四進(jìn)制的時鐘特效　65
第3章　JavaScript操作文檔對象模型　69
任務(wù)1　使用JavaScript操作DOM　70
3．1．1　DOM操作分類　70
3．1．2　節(jié)點間的關(guān)系　71
3．1．3　JavaScript訪問節(jié)點　72
3．1．4　上機訓(xùn)練　76
上機練習(xí)1—訪問購物車頁面節(jié)點　76
3．1．5　節(jié)點屬性　77
任務(wù)2　使用JavaScript操作節(jié)點　78
3．2．1　獲取和設(shè)置節(jié)點屬性　78
3．2．2　新增和插入節(jié)點　80
3．2．3　刪除和修改節(jié)點　83
3．2．4　修改節(jié)點樣式　84
3．2．5　上機訓(xùn)練　87
上機練習(xí)2—制作課工場論壇發(fā)帖頁面　87
任務(wù)3　使用JavaScript獲取元素位置　89
3．3．1　獲取樣式　89
3．3．2　屬性應(yīng)用　91
3．3．3　上機訓(xùn)練　93
上機練習(xí)3—制作帶關(guān)閉按鈕的廣告　93
第4章　認(rèn)識jQuery　97
任務(wù)1　了解jQuery并搭建開發(fā)環(huán)境　98
4．1．1　選擇jQuery的原因　98
4．1．2　什么是jQuery　100
4．1．3　搭建環(huán)境　104
任務(wù)2　掌握jQuery基礎(chǔ)語法及結(jié)構(gòu)　105
4．2．1　jQuery程序　105
4．2．2　jQuery語法　106
4．2．3　設(shè)置CSS屬性值　108
4．2．4　移除CSS樣式　110
4．2．5　上機訓(xùn)練　110
上機練習(xí)1—使用jQuery變換網(wǎng)頁效果　110
任務(wù)3　掌握jQuery對象與DOM對象的轉(zhuǎn)換　111
4．3．1　jQuery中的對象　112
4．3．2　對象間的相互轉(zhuǎn)換　112
4．3．3　上機訓(xùn)練　113
上機練習(xí)2—制作廣告立體輪播切換效果　113
第5章　認(rèn)識jQuery選擇器　117
任務(wù)1　了解jQuery選擇器及其分類　118
5．1．1　jQuery選擇器概述　118
5．1．2　選擇器分類　119
任務(wù)2　使用CSS選擇器選取元素　119
5．2．1　基本選擇器　119
5．2．2　層次選擇器　123
5．2．3　上機訓(xùn)練　126
上機練習(xí)1—制作圖書簡介頁面　126
5．2．4　屬性選擇器　127
5．2．5　上機訓(xùn)練　130
上機練習(xí)2—制作非緣勿擾頁面特效　130
任務(wù)3　通過過濾選擇器選取元素　131
5．3．1　過濾選擇器　131
5．3．2　選擇器使用注意事項　136
5．3．3　上機訓(xùn)練　137
上機練習(xí)3—制作全網(wǎng)熱播視頻頁面　137
第6章　jQuery中的事件與動畫特效　141
任務(wù)1　jQuery中的事件機制　142
6．1．1　jQuery事件的分類　143
6．1．2　上機訓(xùn)練　147
上機練習(xí)1—制作京東首頁右側(cè)固定層　147
任務(wù)2　jQuery事件的綁定、移除與復(fù)合事件　148
6．2．1　事件綁定　149
6．2．2　事件移除　150
6．2．3　jQuery復(fù)合事件　150
6．2．4　上機訓(xùn)練　153
上機練習(xí)2—仿京東左側(cè)菜單　153
任務(wù)3　jQuery中的動畫操作　153
6．3．1　元素的顯示與隱藏　154
6．3．2　元素的淡入淡出特效　155
6．3．3　元素的滑動特效　156
6．3．4　自定義動畫特效　158
6．3．5　上機訓(xùn)練　163
上機練習(xí)3—制作京東常見問題分類頁面　163
第7章　jQuery中的DOM操作　167
任務(wù)1　jQuery中的DOM操作　168
7．1．1　DOM操作的分類　168
7．1．2　jQuery中的DOM操作　169
任務(wù)2　使用jQuery操作樣式　170
7．2．1　設(shè)置、獲取樣式值　170
7．2．2　追加、移除樣式　170
7．2．3　樣式的切換與判斷　172
任務(wù)3　使用jQuery操作元素內(nèi)容　173
7．3．1　操作HTML代碼　173
7．3．2　操作標(biāo)簽內(nèi)容　174
7．3．3　操作屬性值　175
7．3．4　上機訓(xùn)練　177
上機練習(xí)1—制作QQ簡易聊天框　177
任務(wù)4　jQuery中的節(jié)點操作與遍歷　178
7．4．1　操作節(jié)點　178
7．4．2　操作屬性　184
7．4．3　上機訓(xùn)練　185
上機練習(xí)2—制作京東問答頁面　185
7．4．4　遍歷節(jié)點　187
7．4．5　CSS-DOM操作　191
7．4．6　上機訓(xùn)練　193
上機練習(xí)3—制作凡客誠品幫助中心頁面　193
第8章　表單驗證　197
任務(wù)1　表單驗證概述　199
8．1．1　為什么要驗證表單　199
8．1．2　驗證哪些表單內(nèi)容　200
8．1．3　表單的驗證步驟　201
任務(wù)2　表單驗證　201
8．2．1　表單選擇器語法　201
8．2．2　表單內(nèi)容驗證　202
8．2．3　上機訓(xùn)練　208
上機練習(xí)1—驗證注冊頁面中的電子郵箱　208
8．2．4　驗證提示特效　208
8．2．5　上機訓(xùn)練　214
上機練習(xí)2—驗證貴美網(wǎng)站的注冊頁面　214
任務(wù)3　使用正則表達(dá)式驗證數(shù)據(jù)　215
8．3．1　使用正則表達(dá)式驗證背景　215
8．3．2　正則表達(dá)式概述　216
8．3．3　正則表達(dá)式的實際應(yīng)用　221
8．3．4　上機訓(xùn)練　223
上機練習(xí)3—驗證博客園用戶注冊頁面　223
任務(wù)4　HTML5驗證新特性　224
8．4．1　HTML5新屬性　224
8．4．2　validity屬性　224
8．4．3　上機訓(xùn)練　227
上機練習(xí)4—使用HTML5方式驗證博客園用戶注冊頁面　227
第9章　jQuery中的AJAX　231
任務(wù)1　使用JavaScript發(fā)送AJAX請求　233
9．1．1　AJAX應(yīng)用　233
9．1．2　AJAX工作原理　234
9．1．3　認(rèn)識XMLHttpRequest　235
9．1．4　AJAX請求、響應(yīng)原理　237
9．1．5　上機訓(xùn)練　239
上機練習(xí)1—檢查用戶的注冊郵箱是否存在　239
任務(wù)2　使用jQuery發(fā)送AJAX請求　239
9．2．1　$．get()方法與$．post()方法　240
9．2．2　$．a(chǎn)jax()方法　241
9．2．3　上機訓(xùn)練　243
上機練習(xí)2—驗證注冊郵箱是否可用　243
9．2．4　jQuery中的load()方法　243
9．2．5　上機訓(xùn)練　244
上機練習(xí)3—刷新最新動態(tài)　244
任務(wù)3　使用JSON格式構(gòu)建響應(yīng)數(shù)據(jù)　245
9．3．1　JSON簡介　245
9．3．2　使用jQuery處理JSON數(shù)據(jù)　246
9．3．3　$．getJSON()方法　247
9．3．4　$．getScript ()方法　249
9．3．5　上機訓(xùn)練　250
上機練習(xí)4—制作京東頁面輪播圖片效果　250
第　10章 項目案例：制作1號店網(wǎng)站網(wǎng)頁特效　253
任務(wù)1　項目概述　254
任務(wù)2　項目技能點及問題分析　258
10．2．1　案例覆蓋的技能點　258
10．2．2　問題分析　259
10．2．3　進(jìn)度記錄　259
任務(wù)3　項目實現(xiàn)　260
10．3．1　用例1：首頁特效　260
10．3．2　用例2：搜索列表頁特效　263
10．3．3　用例3：商品詳情頁特效　265
10．3．4　用例4：注冊頁特效　266
10．3．5　用例5：登錄頁特效　268