jQuery是一個(gè)被廣泛使用的JavaScript庫(kù),實(shí)現(xiàn)了對(duì)JavaScript常用功能的封裝和對(duì)瀏覽器兼容問(wèn)題的處理。jQuery的設(shè)計(jì)宗旨是write less,do more,以簡(jiǎn)潔的代碼實(shí)現(xiàn)較為豐富的功能。jQuery代碼簡(jiǎn)潔,提高了開(kāi)發(fā)效率,對(duì)瀏覽器兼容性問(wèn)題的處理使得開(kāi)發(fā)人員能更集中精力處理業(yè)務(wù)邏輯。以上優(yōu)點(diǎn)讓掌握jQuery成為前端從業(yè)人員必備的開(kāi)發(fā)技能。本書(shū)分為9章,內(nèi)容主要包括jQuery的基本使用方式、jQuery的選擇器、DOM元素操作、事件處理機(jī)制、動(dòng)畫(huà)方法、Ajax交互、插件和用戶界面庫(kù)。為了加深讀者對(duì)jQuery的認(rèn)識(shí),書(shū)中配有生動(dòng)的案例,讓讀者可以快速理解吸收jQuery知識(shí)。本書(shū)還提供了圖書(shū)管理系統(tǒng)、在線商城等綜合項(xiàng)目,讀者可以依照項(xiàng)目進(jìn)行相應(yīng)訓(xùn)練,以增強(qiáng)實(shí)踐能力。本書(shū)適合作為高等院校本、專(zhuān)科計(jì)算機(jī)相關(guān)專(zhuān)業(yè)的教材使用,也可作為網(wǎng)頁(yè)制作愛(ài)好者的參考書(shū)自學(xué)使用,是一本適合廣大計(jì)算機(jī)編程愛(ài)好者的優(yōu)秀讀物。
本書(shū)提供豐富的實(shí)戰(zhàn)案例,同時(shí)還提供了圖書(shū)管理系統(tǒng)、在線商城等綜合項(xiàng)目,方便讀者進(jìn)行訓(xùn)練,以增強(qiáng)實(shí)踐能力。
黑馬程序員:江蘇傳智播客教育科技股份有限公司(簡(jiǎn)稱(chēng)傳智播客)是一家專(zhuān)門(mén)致力于高素質(zhì)軟件開(kāi)發(fā)人才培養(yǎng)的高科技公司。傳智播客致力于為企業(yè)優(yōu)選一流的人才的培訓(xùn)理念,經(jīng)過(guò)多年的教學(xué)探索及戰(zhàn)略布局,已向著綜合型職業(yè)教育集團(tuán)發(fā)展。黑馬程序員是傳智播客旗下高端IT教育品牌。
第1章
初識(shí)jQuery ...........1
1.1 jQuery簡(jiǎn)介
...........................1
1.1.1 什么是jQuery
.............1
1.1.2 jQuery的版本
.............2
1.2 如何使用jQuery
...................3
1.2.1 jQuery的下載和
引入 ............................3
1.2.2 第一個(gè)jQuery程序 .....4
1.2.3 jQuery的語(yǔ)法特點(diǎn) .....5
1.3 DOM對(duì)象與jQuery對(duì)象 ......6
1.3.1 什么是DOM對(duì)象 .......6
1.3.2 什么是jQuery對(duì)象 .....8
1.3.3 jQuery對(duì)象與DOM
對(duì)象的轉(zhuǎn)換 ................9
1.4 開(kāi)發(fā)和調(diào)試工具的使用 .....10
1.4.1 開(kāi)發(fā)工具
HBuilder ...................10
1.4.2 調(diào)試工具
Chrome開(kāi)發(fā)者工具 ....13
本章小結(jié) ......................................15
課后習(xí)題 ......................................16
第2章
jQuery選擇器 .......18
2.1 jQuery選擇器簡(jiǎn)介
.............18
2.1.1 什么是jQuery
選擇器 ......................19
2.1.2 jQuery選擇器的
優(yōu)勢(shì) ..........................19
2.2 基本選擇器
.........................20
2.3 層次選擇器
.........................22
2.4 【案例】折疊式菜單
.........26
2.5 過(guò)濾選擇器
.........................29
2.5.1 基本過(guò)濾選擇器 ......30
2.5.2 可見(jiàn)性過(guò)濾選擇器 ...31
2.5.3 內(nèi)容過(guò)濾選擇器 ......33
2.5.4 屬性過(guò)濾選擇器 ......35
2.5.5 子元素過(guò)濾選擇器 ...36
2.5.6 表單過(guò)濾選擇器 ......38
2.5.7 表單對(duì)象屬性過(guò)濾選
擇器 ..........................41
2.6 【案例】精品展示
.............41
本章小結(jié) ......................................45
課后習(xí)題 ......................................45
第3章
jQuery操作
DOM .................47
3.1 操作元素樣式 .....................47
3.1.1 操作樣式屬性 ..........48
3.1.2 操作元素類(lèi)
..............52
3.1.3 操作元素的尺寸 ......55
3.1.4 操作元素的位置 ......59
3.1.5
【案例】高亮顯示
圖片
..........................62
3.2 操作元素屬性
.....................64
3.2.1 獲取和設(shè)置元素
屬性值 ......................64
3.2.2 設(shè)置元素的狀態(tài)
屬性 ..........................66
3.3 操作元素內(nèi)容
.....................66
3.3.1 獲取和設(shè)置元素
HTML內(nèi)容和文本 ...67
3.3.2 獲取和設(shè)置表單
的值 ..........................67
3.3.3 【案例】留言板 ......69
3.4 操作DOM節(jié)點(diǎn)
...................71
3.4.1 創(chuàng)建節(jié)點(diǎn)
..................71
3.4.2 插入節(jié)點(diǎn)
..................73
3.4.3 刪除節(jié)點(diǎn)
..................76
3.4.4 復(fù)制節(jié)點(diǎn)
..................79
3.4.5 替換節(jié)點(diǎn)
..................80
3.4.6 包裹節(jié)點(diǎn)
..................81
3.4.7 遍歷節(jié)點(diǎn)
..................83
3.4.8 【案例】權(quán)限選擇 ...85
本章小結(jié) ......................................89
課后習(xí)題 ......................................89
第4章
jQuery事件
處理機(jī)制 ..............92
4.1 常用事件
.............................92
4.1.1 jQuery事件方法 .......93
4.1.2 頁(yè)面加載事件 ..........94
4.1.3 鼠標(biāo)事件
..................95
4.1.4 焦點(diǎn)事件
..................98
4.1.5 改變事件
..................99
4.1.6 【案例】星級(jí)評(píng)價(jià) ...99
4.2 事件綁定與事件解綁 .......102
4.2.1 事件綁定
................102
4.2.2 事件解綁
................105
4.2.3 【案例】動(dòng)態(tài)添加和
刪除表格數(shù)據(jù)
.......108
4.3 事件觸發(fā)
...........................113
4.4 事件冒泡
...........................115
4.4.1 什么是事件冒泡 ....115
4.4.2 如何實(shí)現(xiàn)事件
冒泡
........................116
4.4.3 如何阻止事件
冒泡
........................117
4.5 事件對(duì)象
...........................118
本章小結(jié) ....................................121
課后習(xí)題 ....................................122
第5章
jQuery動(dòng)畫(huà) .......124
5.1 常用動(dòng)畫(huà)
...........................124
5.1.1 元素的顯示和
隱藏
........................124
5.1.2 元素的淡入和
淡出
........................127
5.1.3 元素的上滑和
下滑
........................129
5.1.4
【案例】星空
閃爍
.......................130
5.2 自定義動(dòng)畫(huà) .......................133
5.2.1 簡(jiǎn)單自定義動(dòng)畫(huà) ....133
5.2.2 加入表達(dá)式的
動(dòng)畫(huà)
........................136
5.3 停止動(dòng)畫(huà)
...........................138
5.3.1 停止元素動(dòng)畫(huà)的
方法 ........................138
5.3.2 判斷元素是否處于
動(dòng)畫(huà)狀態(tài)
................140
5.3.3 【案例】導(dǎo)航下拉
列表 .......................141
本章小結(jié) ....................................144
課后習(xí)題 ....................................145
第6章
jQuery的Ajax
操作 .................147
6.1 Ajax簡(jiǎn)介
...........................147
6.1.1 什么是Ajax
.............147
6.1.2 搭建WampServer
服務(wù)器 ....................148
6.1.3 在HBuilder中配置WampServer服務(wù)器 ...152
6.2 jQuery的Ajax操作
............153
6.2.1 加載HTML內(nèi)容 .....153
6.2.2 發(fā)送GET和
POST請(qǐng)求 ...............156
6.2.3 數(shù)據(jù)格式處理 ........159
6.2.4 獲取JSON數(shù)據(jù) .......164
6.2.5 獲取JavaScript
代碼并執(zhí)行 ............166
6.3 Ajax底層操作
...................167
6.3.1 $.ajax()的基本
使用 ........................167
6.3.2 Ajax相關(guān)事件
.........170
6.3.3 Ajax全局配置
.........174
6.4 序列化表單
.......................177
6.4.1 表單序列化為
字符串 ....................177
6.4.2 表單序列化為
對(duì)象 ........................178
6.5 【案例】圖書(shū)管理系統(tǒng) ...179
6.5.1 功能介紹
................179
6.5.2 系統(tǒng)設(shè)計(jì)
................180
6.5.3 用戶界面
................181
6.5.4 查詢圖書(shū)
................183
6.5.5 新增和修改圖書(shū) ....185
6.5.6 刪除圖書(shū)
................188
本章小結(jié) ....................................188
課后習(xí)題 ....................................188
第7章
jQuery插件和前端常用組件 .................191
7.1 jQuery插件的概述
...........191
7.2 開(kāi)發(fā)自定義插件
...............192
7.2.1 封裝jQuery對(duì)象
方法的插件 ............192
7.2.2 封裝靜態(tài)方法插件 ...196
7.2.3
【案例】自定義
焦點(diǎn)圖插件 ............199
7.3 模板引擎
...........................204
7.3.1 art-template快速
入門(mén) ........................204
7.3.2 標(biāo)準(zhǔn)語(yǔ)法和常用
方法 ........................206
7.4 數(shù)據(jù)可視化圖表
...............208
7.4.1 快速體驗(yàn)ECharts ...208
7.4.2 EChars的常用配
置項(xiàng) ........................211
7.5 文件上傳
...........................217
7.5.1 快速體驗(yàn)
WebUploader ..........217
7.5.2 顯示上傳進(jìn)度 ........220
7.5.3 圖片上傳操作 ........222
7.6 編輯器
...............................223
7.6.1 快速體驗(yàn)UEditor ...224
7.6.2 定制工具欄圖標(biāo) ....226
7.6.3 UEditor常用方法 ...227
本章小結(jié) ....................................229
課后習(xí)題 ....................................229
第8章
用戶界面庫(kù) .........232
8.1 jQuery UI
..........................232
8.1.1 下載jQuery UI
........233
8.1.2 交互組件
................234
8.1.3 擴(kuò)展組件 ................237
8.1.4 動(dòng)畫(huà)特效
................240
8.2 jQuery EasyUI
..................243
8.2.1 下載jQuery EasyUI
...244
8.2.2 EasyUI的使用規(guī)則 ...244
8.2.3 界面布局
................246
8.2.4 界面組件
................253
8.3 jQuery Mobile
...................264
8.3.1 下載jQuery Mobile
...264
8.3.2 移動(dòng)導(dǎo)航
................266
8.3.3 列表視圖
................267
8.3.4 選擇菜單
................269
本章小結(jié) ....................................270
課后習(xí)題 ....................................271
第9章
項(xiàng)目實(shí)戰(zhàn)在線
商城 .................273
9.1 項(xiàng)目簡(jiǎn)介
...........................273
9.1.1 項(xiàng)目展示
................274
9.1.2 技術(shù)方案
................274
9.2 項(xiàng)目開(kāi)發(fā)說(shuō)明
...................276
本章小結(jié) ....................................277
課后習(xí)題 ....................................278