jquery 前端开发实战教程

jQuery是一个JavaScript库，是当下非常流行的Web前端开发工具。通过jQuery可以非常便捷地实现网页交互、制作动态效果以及服务器通信等功能。近几年来，互联网行业日益繁荣，市场需求对网页制作提出更高要求，Web前端开发职能重要性愈加凸显。jQuery作为一款非常强大的网页制作工具，逐渐成为Web前端从业者的技能。

为什么要学习本书

本书面向具有JavaScript编程基础的人群，讲解了jQuery在网页制作过程中的功能和使用方式。

本书从浅到深，依照开发者对网页操作实际需求开展知识的讲解。书中采用“知识讲解 案例实践”的方式，在知识可视化展示的同时，配备贴切可读性极强的案例，从原理出发，由案例落地，让读者在理解书中知识的同时，也得到一定的实践训练。这种方式可以帮助读者建立开发者思维，有利于培养读者的自学能力。

如何使用本书

本书讲解的内容主要包括jQuery的基本使用、选择器、DOM操作、事件机制、动画方法、Ajax交互、第三方工具使用等。在后的章节，通过综合性项目——“在线商城”来对全书知识进行总结和实践运用。

全书分为9章，具体如下。

第1章主要讲解jQuery的基本使用方式，包括jQuery的设计理念、引入方式，jQuery对象与DOM对象的转换等。为了帮助读者快速理解jQuery的开发方式，本章详细讲解了jQuery的本质以及其具体使用优势，同时比较JavaScript和jQuery两种编程方式的区别。

第2、3章分别讲解围绕jQuery的获取元素和操作元素方法。通过jQuery强大的选择器获取元素之后，再调用相关方法对元素进行操作，包括对元素样式、内容和节点的操作。书中对这一部分的讲解细致入微、层层深入，同时配备“精品展示”“留言板”等案例，提高读者的阅读兴趣，加深对知识理解，为后面的学习打好基础。

第4章主要讲解jQuery的事件处理机制，包括事件绑定、事件解绑、事件触发、事件代理、事件对象等操作，以及事件冒泡的运行和阻止方式。通过“动态添加和删除表格数据”案例，让读者体会jQuery对事件机制处理优化带来的方便。

第5章主要讲解jQuery动画效果的实现。读者可以使用jQuery的预定义动画方法，非常便捷地实现元素的动画效果；或使用jQuery自定义动画方法，按照自定义方式驱动元素执行动画行为。

第6章主要讲解jQuery的Ajax方法，这些方法可实现按照GET或POST方式与服务器异步通信，获取HTML、JSON、JavaScript等规定格式的数据。通过Ajax的相关事件，可以更灵活地操作Ajax请求。该章后提供了综合案例——“图书管理系统”，模拟实现了网页前后端通信的整体流程。

第7、8章主要讲解jQuery的插件和界面库。jQuery具有数量庞大的插件，可供开发人员快捷、高效地完成工作；jQuery界面库则提供了风格统一、功能齐全的用户界面组件，从而快速地搭建项目。

第9章主要讲解“在线商城”项目，该项目是对本书中所有知识的综合运用。在项目开发中，不仅用到了jQuery的基本功能，还使用了大量的第三方组件，其中包括jQuery EasyUI（tree、treegrid和datagrid组件）、WebUploader上传组件、UEditor编辑器和art-template模板引擎。从宏观上展示了jQuery在网页制作开发工作中的使用方式。

上述9章中，第1~3章是基础课程，主要帮助初学者认识jQuery，利用jQuery完成基本的网页搭建工作；第4、5章是jQuery的进阶课程，涉及事件操作的部分会稍显复杂，希望初学者多加思考，认真完成书中所讲的每个案例；第6章是学习的重点，建议读者主要理解Ajax与服务器通信的方式；第7~9章是扩展知识，当前开发市场上插件和组件库种类较多，使用方式也多种多样，读者按照对应文档使用即可。

学习编程过程中，养成编程思维很重要。读者在学习中遇到疑惑时，可以试着从基础知识着手分析、解决问题，这样不但可以加深对新知识的理解，而且可以锻炼思考能力。同时还要养成举一反三的习惯，对同类知识多做比较剖析。这样利于快速掌握知识，也利于增强学习能力。

致谢

本书的编写和整理工作由传智播客教育科技股份有限公司完成，主要参与人员有吕春林、陈欢、韩冬、乔治铭、冯鹏、高美云、李东超、王金涛、刘晓强、韩振国等，全体人员在这近一年的编写过程中付出了很多心血，在此表示衷心的感谢。

意见反馈

尽管我们付出了大的努力，但教材中难免会有不妥之处，欢迎各界专家和读者朋友来信给予宝贵意见，我们将不胜感激。您在阅读本书时，如发现任何问题或有不认同之处，可以通过电子邮件与我们取得联系。

请发送电子邮件至：itcast_book@vip.sina.com

 黑马程序员

2018年5月于北京

第1章

　 初识jQuery ...........1

1.1　jQuery简介 ...........................1

1.1.1　什么是jQuery .............1

1.1.2　jQuery的版本 .............2

1.2　如何使用jQuery ...................3

1.2.1　 jQuery的下载和

引入 ............................3

1.2.2　*个jQuery程序 .....4

1.2.3　jQuery的语法特点 .....5

1.3　DOM对象与jQuery对象 ......6

1.3.1　什么是DOM对象 .......6

1.3.2　什么是jQuery对象 .....8

1.3.3　 jQuery对象与DOM

对象的转换 ................9

1.4　开发和调试工具的使用 .....10

1.4.1　 开发工具——

HBuilder ...................10

1.4.2　 调试工具——

Chrome开发者工具 ....13

本章小结 ......................................15

课后习题 ......................................16

第2章

　 jQuery选择器 .......18

2.1　jQuery选择器简介 .............18

2.1.1　 什么是jQuery

选择器 ......................19

2.1.2　 jQuery选择器的

优势 ..........................19

2.2　基本选择器 .........................20

2.3　层次选择器 .........................22

2.4　【案例】折叠式菜单 .........26

2.5　过滤选择器 .........................29

2.5.1 基本过滤选择器 ......30

2.5.2 可见性过滤选择器 ...31

2.5.3 内容过滤选择器 ......33

2.5.4 属性过滤选择器 ......35

2.5.5 子元素过滤选择器 ...36

2.5.6 表单过滤选择器 ......38

2.5.7 表单对象属性过滤选

 择器 ..........................41

2.6 【案例】精品展示 .............41

本章小结 ......................................45

课后习题 ......................................45

第3章

　 jQuery操作

DOM .................47

3.1　操作元素样式 .....................47

3.1.1　操作样式属性 ..........48

3.1.2　操作元素类 ..............52

3.1.3　操作元素的尺寸 ......55

3.1.4　操作元素的位置 ......59

3.1.5 【案例】高亮显示

 图片 ..........................62

3.2　操作元素属性 .....................64

3.2.1　 获取和设置元素

属性值 ......................64

3.2.2　 设置元素的状态

属性 ..........................66

3.3　操作元素内容 .....................66

3.3.1　 获取和设置元素

HTML内容和文本 ...67

3.3.2　 获取和设置表单

的值 ..........................67

3.3.3　【案例】留言板 ......69

3.4　操作DOM节点 ...................71

3.4.1 创建节点 ..................71

3.4.2 插入节点 ..................73

3.4.3 删除节点 ..................76

3.4.4 复制节点 ..................79

3.4.5 替换节点 ..................80

3.4.6 包裹节点 ..................81

3.4.7 遍历节点 ..................83

3.4.8 【案例】权限选择 ...85

本章小结 ......................................89

课后习题 ......................................89

第4章

　 jQuery事件

处理机制 ..............92

4.1　常用事件 .............................92

4.1.1 jQuery事件方法 .......93

4.1.2 页面加载事件 ..........94

4.1.3 鼠标事件 ..................95

4.1.4 焦点事件 ..................98

4.1.5 改变事件 ..................99

4.1.6 【案例】星级评价 ...99

4.2 事件绑定与事件解绑 .......102

4.2.1 事件绑定 ................102

4.2.2 事件解绑 ................105

4.2.3 【案例】动态添加和

 删除表格数据 .......108

4.3 事件触发 ...........................113

4.4 事件冒泡 ...........................115

4.4.1 什么是事件冒泡 ....115

4.4.2 如何实现事件

 冒泡 ........................116

4.4.3 如何阻止事件

 冒泡 ........................117

4.5 事件对象 ...........................118

本章小结 ....................................121

课后习题 ....................................122

第5章

　 jQuery动画 .......124

5.1　常用动画 ...........................124

5.1.1 元素的显示和

 隐藏 ........................124

5.1.2 元素的淡入和

 淡出 ........................127

5.1.3 元素的上滑和

 下滑 ........................129

5.1.4 【案例】星空

 闪烁 .......................130

5.2 自定义动画 .......................133

5.2.1 简单自定义动画 ....133

5.2.2 加入表达式的

 动画 ........................136

5.3 停止动画 ...........................138

5.3.1 停止元素动画的

 方法 ........................138

5.3.2 判断元素是否处于

 动画状态 ................140

5.3.3 【案例】导航下拉

 列表 .......................141

本章小结 ....................................144

课后习题 ....................................145

第6章

　 jQuery的Ajax

操作 .................147

6.1　Ajax简介 ...........................147

6.1.1　什么是Ajax .............147

6.1.2　 搭建WampServer

服务器 ....................148

6.1.3　 在HBuilder中配置WampServer服务器 ...152

6.2　jQuery的Ajax操作 ............153

6.2.1　加载HTML内容 .....153

6.2.2　 发送GET和

POST请求 ...............156

6.2.3　数据格式处理 ........159

6.2.4　获取JSON数据 .......164

6.2.5　 获取JavaScript

代码并执行 ............166

6.3　Ajax底层操作 ...................167

6.3.1　 $.ajax()的基本

使用 ........................167

6.3.2　Ajax相关事件 .........170

6.3.3　Ajax全局配置 .........174

6.4　序列化表单 .......................177

6.4.1　 表单序列化为

字符串 ....................177

6.4.2　 表单序列化为

对象 ........................178

6.5　【案例】图书管理系统 ...179

6.5.1　功能介绍 ................179

6.5.2　系统设计 ................180

6.5.3　用户界面 ................181

6.5.4　查询图书 ................183

6.5.5　新增和修改图书 ....185

6.5.6　删除图书 ................188

本章小结 ....................................188

课后习题 ....................................188

第7章

　 jQuery插件和前端常用组件 .................191

7.1　jQuery插件的概述 ...........191

7.2　开发自定义插件 ...............192

7.2.1　 封装jQuery对象

方法的插件 ............192

7.2.2　封装静态方法插件 ...196

7.2.3 【案例】自定义

 焦点图插件 ............199

7.3　模板引擎 ...........................204

7.3.1　 art-template快速

入门 ........................204

7.3.2　 标准语法和常用

方法 ........................206

7.4　数据可视化图表 ...............208

7.4.1　快速体验ECharts ...208

7.4.2　 EChars的常用配

置项 ........................211

7.5　文件上传 ...........................217

7.5.1　 快速体验

WebUploader ..........217

7.5.2　显示上传进度 ........220

7.5.3　图片上传操作 ........222

7.6　编辑器 ...............................223

7.6.1　快速体验UEditor ...224

7.6.2　定制工具栏图标 ....226

7.6.3　UEditor常用方法 ...227

本章小结 ....................................229

课后习题 ....................................229

第8章

　 用户界面库 .........232

8.1　jQuery UI ..........................232

8.1.1　下载jQuery UI ........233

8.1.2　交互组件 ................234

8.1.3　扩展组件 ................237

8.1.4　动画特效 ................240

8.2　jQuery EasyUI ..................243

8.2.1　下载jQuery EasyUI ...244

8.2.2　EasyUI的使用规则 ...244

8.2.3　界面布局 ................246

8.2.4　界面组件 ................253

8.3　jQuery Mobile ...................264

8.3.1　下载jQuery Mobile ...264

8.3.2　移动导航 ................266

8.3.3　列表视图 ................267

8.3.4　选择菜单 ................269

本章小结 ....................................270

课后习题 ....................................271

第9章

　 项目实战——在线

商城 .................273

9.1　项目简介 ...........................273

9.1.1　项目展示 ................274

9.1.2　技术方案 ................274

9.2　项目开发说明