JavaScript+jQuery開(kāi)發(fā)實(shí)戰(zhàn)

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