细说AJAX与jQuery

为了让前端初学者少走弯路，快速而轻松地学习HTML5和JavaScript编程，我们结合新技术和兄弟连多年的教学经验积累，再通过对企业实际应用的调研，编写了一整套HTML5系列图书，共5本，包括《细说网页制作》、《细说JavaScript》、《细说DOM编程》、《细说AJAX与jQuery》和《细说HTML5高级API》，每一本书都是不同层次的完整内容，不仅给初学者安排了循序渐进的学习过程，也便于不同层次的读者选择；既适合没有编程基础的前端初学者作为入门教程，也适合正在从事前端开发的人员作为技术提升参考资料。本套图书编写的初衷是为了紧跟新技术和兄弟连IT教育HTML5学科的教学发展，作为本校培训教程使用，也可作为大、中专院校和其他培训学校的教材。同时，对于前端开发爱好者，本书也有较高的参考价值。 

本书主要学习JavaScript中两个的知识点：*个为AJAX，它是客户端JavaScript与后端服务器进行交流的一种技术；第二个为jQuery，它是JavaScript目前的一个主流库文件。附加学习Node.js知识，以此来搭建后台服务器，辅助读者更全面、更系统地完成AJAX学习。AJAX是一项非常重要的技术，几乎所有页面要实现更好的体验都逃不过AJAX技术，而且近年来逐渐流行的Web APP几乎都是以AJAX为基础来实现的。因此，本书的AJAX部分结合目前实际开发进行详细讲解，首先结合学习Node.js，使用express框架搭建Node.js服务器；然后着重讲解AJAX技术原理，带领读者进行实际运用和封装；*后详细讲解AJAX跨域和同步、异步等常见问题的处理方式。而jQuery是一个重要的前端框架，大量的前端特效插件也是基于此实现的。因此，本书jQuery部分主要深入学习原理知识，对jQuery的DOM操作、事件处理、动画效果及jQuery的AJAX应用等方面进行详细讲解，并通过大量实例贯穿整个jQuery知识体系。本书是“跟兄弟连学HTML5系列教程”的第四本书，需要了解JavaScript的基础语法和DOM部分。所以本书以实例为主，不再过多地讲解语法等基础知识点，让读者可以从具体实例中吸取实战经验。

    高洛峰，兄弟连教育教研总监，十几年软件开发和IT教学工作经验，曾任多家上市公司技术总监、项目经理、高级软件工程师等职位，具有扎实的技术功底。国内资深技术讲师，从事IT培训以来累计授课长达一万课时以上，培养百余名IT名师，培训上万名学员成功走向IT岗位，荣获腾讯“2016年度网络人气名人讲师”。
熟悉掌握多种IT技能，对当前主流应用的编程语言、数据库以及软件架构设计都很擅长。对Web系统软件开发深有研究，近年来致力于推广开源的PHP语言和前端HTML5技术，出版的《细说PHP》系列书籍，获得电子工业出版社“2013年年度畅销IT技术图书奖”，《跟兄弟连学PHP》获得电子工业出版社“2016年年度好书”。
兄弟连教育，成立于2006年，专注于IT技术培训，中国PHP培训领导者，以“优秀的教学、严格的管理、职业素质课贯穿始终”闻名业界，现已开设PHP、Java、HTML5、UI、Linux、Python等众多课程，在国内开设有四十余所分校，于2016年9月在国内新三板挂牌上市（股票代码：839467），每年有数十万名学生受益于兄弟连的职业培训、出版书籍、教学视频、网络直播课、院校讲座。

“我们不仅仅是老师，更是学生的梦想守护者与职场引路人。”做一所认认真真的学校，帮助更多的年轻人实现人生价值，是我们的光荣与骄傲。

目录

第1章 AJAX与jQuery概述 1
1.1 AJAX概述 1
1.2 AJAX的发展史 2
1.3 AJAX的应用场景 2
1.4 Node.js概述 4
1.5 jQuery概述 5
1.6 jQuery的发展史 5
1.7 jQuery的应用 6
1.8 本章小结 9
练习题 9
第2章 搭建Node.js服务器 11
2.1 HTTP原理 11
2.1.1 网络通信 12
2.1.2 HTTP协议及其工作流程 17
2.1.3 请求和响应 20
2.2 安装Node.js 21
2.2.1 下载并安装 21
2.2.2 检查安装结果 22
2.2.3 使用Node.js 24
2.3 搭建原生HTTP服务器 25
2.4 使用express框架 26
2.4.1 express框架简介 27
2.4.2 express框架安装 27
2.4.3 express框架应用 30
2.4.4 模板数据渲染 34
2.4.5 路由分离 35
2.5 本章小结 36
第3章 揭开AJAX的神秘面纱 37
3.1 AJAX的个实例程序 37
3.2 同步和异步 39
3.2.1 同步 39
3.2.2 异步 39
3.2.3 同步和异步的适用场景 41
3.3 XMLHttpRequest对象 43
3.3.1 XMLHttpRequest对象的方法 44
3.3.2 XMLHttpRequest对象的属性和事件 47
3.4 原生AJAX的例子 51
3.4.1 POST请求实例 51
3.4.2 GET请求实例 53
3.5 封装AJAX对象 54
3.5.1 需求分析 55
3.5.2 封装get()方法 55
3.5.3 封装post()方法 58
3.6 跨域请求 60
3.6.1 什么是跨域请求 60
3.6.2 如何处理跨域请求 62
3.7 AJAX的优缺点 80
3.7.1 AJAX的优点 80
3.7.2 AJAX的缺点 81
3.8 本章小结 81
练习题 81
第4章 AJAX在项目中的应用 84
4.1 瀑布流无限加载 84

4.2 表单验证 87
4.2.1 表单常用的事件 87
4.2.2 网页表单验证实例 88
第5章 jQuery快速入门 97
5.1 jQuery概述及其功能 97
5.1.1 访问和操作DOM节点 98
5.1.2 对页面的CSS动态控制 98
5.1.3 对页面的事件处理 98
5.1.4 对页面的动画效果的支持 99
5.1.5 对AJAX技术的封装 99
5.1.6 可以支持大量的插件 100
5.2 配置jQuery环境 100
5.2.1 jQuery的库类型 101
5.2.2 引入jQuery库文件 101
5.3 个jQuery程序 101
5.3.1 JavaScript代码的加载顺序 102
5.3.2 JavaScript代码的注意事项 104
5.4 jQuery的代码风格 106
5.4.1 “$”美元符号的作用 106
5.4.2 链式操作书写代码 107
5.5 六大功能的简单应用 109
5.5.1 jQuery访问DOM节点 109
5.5.2 jQuery对页面的事件处理 112
5.5.3 jQuery动态控制页面CSS 113
5.5.4 jQuery处理页面动画效果 116
5.5.5 jQuery的AJAX技术应用 118
5.6 本章小结 119
练习题 120
第6章 jQuery选择器和过滤 122
6.1 jQuery选择器介绍 122
6.1.1 CSS选择器 122
6.1.2 jQuery选择器 123
6.2 jQuery选择器的特点 124
6.2.1 简便而又灵活的写法 124
6.2.2 完善的检测机制 124
6.3 细谈jQuery选择器 127
6.3.1 基本选择器 127
6.3.2 层次选择器 129
6.3.3 过滤选择器 132
6.3.4 表单选择器 145
6.4 本章小结 148
练习题 148
第7章 jQuery的DOM操作 151
7.1 什么是DOM 151
7.1.1 DOM概述 151
7.1.2 DOM树操作的分类 153
7.2 元素节点的操作 153
7.2.1 获取元素节点 154
7.2.2 创建元素节点 154
7.2.3 插入元素节点 156
7.2.4 包裹元素节点 165
7.2.5 替换元素节点 167
7.2.6 删除元素节点 168
7.2.7 复制元素节点 170
7.3 属性节点的操作 171
7.3.1 普通的属性节点操作 171
7.3.2 元素的样式操作——操作class属性 172
7.3.3 元素的样式操作——操作CSS属性 174
7.4 文本节点的操作 176
7.5 遍历元素节点 178
7.6 本章小结 180
练习题 181
第8章 jQuery的事件处理 183
8.1 jQuery事件介绍 183
8.2 浏览器载入文档事件 184
8.2.1 执行时机 184
8.2.2 执行次数 185
8.2.3 简写方式 186
8.3 jQuery的事件绑定 186
8.4 jQuery的事件冒泡 189
8.4.1 产生冒泡的现象 189
8.4.2 处理冒泡问题 190
8.5 jQuery事件对象的属性和方法 192
8.6 jQuery的事件委派 193
8.6.1 delegate()方法：实现事件委派 193
8.6.2 undelegate()方法：取消事件委派 194
8.7 jQuery的事件模拟操作 195
8.8 jQuery的on()和off()方法 197
8.9 jQuery中事件处理的实战讲解 197
8.9.1 鼠标跟随实例 197
8.9.2 轮播图实例 200
8.9.3 轮播图的其他实例 211
8.10 本章小结 211
练习题 212
第9章 jQuery的动画效果 214
9.1 show()和hide()方法 214
9.2 slideUp()和slideDown()方法 216
9.3 fadeIn()和fadeOut()方法 218
9.4 animate()方法——自定义动画 219
9.4.1 自定义简单动画实例 219
9.4.2 动画队列 221
9.4.3 处理动画队列操作方法 222
9.5 其他动画操作方法 226
9.5.1 toggle()方法 226
9.5.2 slideToggle()和fadeToggle()方法 227
9.5.3 fadeTo()方法 227

9.6 本章小结 228
练习题 228
第10章 jQuery的AJAX应用 230
10.1 jQuery的AJAX应用介绍 230
10.2 jQuery的load()方法 231
10.3 jQuery的$.get()和$.post()方法 234
10.3.1 $.get()方法 234
10.3.2 $.post()方法 237
10.4 jQuery的$.getScript()方法 239
10.5 jQuery的$.getJSON()方法 240
10.6 jQuery的$.ajax()方法 242
10.7 jQuery的AJAX全局事件 245
10.8 jQuery的其他常用方法介绍 247
10.8.1 serialize()和serializeArray()方法 247
10.8.2 $.ajaxSetup()方法全局设置AJAX配置属性 249
10.9 综合实例——使用jQuery的AJAX实现广播效果 249
10.10 本章小结 253
练习题 253
附录A jQuery速查表 255

前言

随着HTML5标准化逐渐成熟，以及互联网的飞速发展和移动端的应用不断创新，再加上微信公众号、小程序的应用飙升，原生APP向Web APP和混合APP的转变，用户对视觉效果和操作体验的要求越来越高，HTML5成为移动互联网的主要技术，也是目前的主流技术之一。HTML5是超文本标记语言（HTML）的第5次修订，是近年来Web标准的巨大飞跃。Web是一个内涵极为丰富的平台，和以前版本不同的是，HTML5并非仅仅用来表示Web内容，在这个平台上还能非常方便地加入视频、音频、图像、动画，以及与计算机的交互。HTML5的意义在于它带来了一个无缝的网络，无论是PC、平板电脑，还是智能手机，都能非常方便地浏览基于HTML5的各类网站。对用户来说，手机上的APP会越来越少，用HTML5实现的一些应用不需要下载安装，就能立即在手机界面中生成一个APP图标，使用手机中的浏览器来运行，新增的导航标签也能更好地帮助小屏幕设备和有视力障碍人士使用。HTML5拥有服务器推送技术，给用户带来了更便捷的实时聊天功能和更快的网游体验。
HTML5对于开发者来说更是福音。HTML5本身是由W3C推荐的，也就意味着每一个浏览器或每一个平台都可以实现，这样可以节省开发者花在浏览器页面展现兼容性上的时间。另外，HTML5是Web前端技术的一个代名词，其核心技术点还是JavaScript。如HTML5的服务器推送技术再结合JavaScript编程，能够帮助我们实现服务器将数据“推送”到客户端的功能，客户端与服务器之间的数据传输将更加高效。基于SVG、Canvas、WebGL及CSS3的3D功能，会让用户惊叹在浏览器中所呈现的各种炫酷的视觉效果。以往在iPhone iPad上不支持的Flash将来都有可能通过HTML5华丽地呈现在用户的iOS设备上。

本套图书介绍
为了让前端初学者少走弯路，快速而轻松地学习HTML5和JavaScript编程，我们结合新技术和兄弟连多年的教学经验积累，再通过对企业实际应用的调研，编写了一整套HTML5系列图书，共5本，包括《细说网页制作》、《细说JavaScript》、《细说DOM编程》、《细说AJAX与jQuery》和《细说HTML5高级API》，每一本书都是不同层次的完整内容，不仅给初学者安排了循序渐进的学习过程，也便于不同层次的读者选择；既适合没有编程基础的前端初学者作为入门教程，也适合正在从事前端开发的人员作为技术提升参考资料。本套图书编写的初衷是为了紧跟新技术和兄弟连IT教育HTML5学科的教学发展，作为本校培训教程使用，也可作为大、中专院校和其他培训学校的教材。同时，对于前端开发爱好者，本书也有较高的参考价值。
《细说网页制作》
作为“跟兄弟连学HTML5系列教程”的本书，主要带领HTML5初学者一步步完成精美的页面制作。本书内容包括HTML应用、CSS应用、HTML5的新技术、各种主流的页面布局方法和一整套页面开发实战技能，让读者可以使用多种方法完成PC端的页面制作、移动端的页面制作，以及响应式布局页面的制作，不仅能做出页面，还能掌握如何做好页面。
《细说JavaScript语言》
这是“跟兄弟连学HTML5系列教程”的第二本书，在学习本书之前需要简单了解一下本书中的HTML和CSS内容。本书内容是纯JavaScript语言部分，和浏览器无关，包括JavaScript基本语法、数据类型、流程控制、函数、对象、数组和内置对象，所有知识点都是为了学习DOM编程、Node.js、JS框架等JavaScript高级部分做准备。本书虽然是JavaScript的基础部分，但全书内容都需要牢牢掌握，才能更好地晋级学习。
《细说DOM编程》
这是“跟兄弟连学HTML5系列教程”的第三本书，全书内容都和浏览器相关，在学习本书之前需要掌握前两本书的技术。本书内容包括BOM和DOM两个关键技术点，并且全部以PC端和移动端的Web特效为主线，以实例贯穿全部知识点进行讲解。学完本书的内容，不仅可以用JavaScript原生的语法完成页面的特效编写，也为学习后面的JavaScript框架课程做好了准备。本书内容是Web前端课程的核心，需要读者按书中的实例多加练习，能熟练地进行浏览器中各种特效程序的开发。
《细说AJAX与jQuery》
这是“跟兄弟连学HTML5系列教程”的第四本书，其内容是建立在第三本书之上的，包括服务器端开发语言Node.js、异步传输AJAX和jQuery框架三部分。其中，Node.js部分是为了配合AJAX完成客户端向服务器端的异步请求；jQuery是目前主流的前端开发框架，其目的是让开发者用尽量少的代码完成尽可能多的功能。AJAX和jQuery是目前前端开发的技术，本书从基本应用开始学起，用实例分解方式讲解技术点，让读者完全掌握这些的技能。
《细说HTML5高级API》
这是“跟兄弟连学HTML5系列教程”的第五本书，是前端开发的应用部分，主要讲解HTML5高级API的相关内容，包括画布、Web存储、应用缓存、服务器发送事件等，可以用来开发移动端的Web APP项目。本书重点讲解了Cordova技术，它提供了一组与设备相关的API，通过这组API，移动应用就能够通过JavaScript访问原生的设备功能，如摄像头、麦克风等。Cordova还提供了一组统一的JavaScript类库，以及与这些类库所用的设备相关的原生后台代码。通过编写HTML5程序，再用Cordova打包出混合APP的项目，可以安装在Android和iOS等设备上。

本套图书的特点
1．内容丰富，由浅入深
本套图书在内容组织上本着“起点低，重点高”的原则，内容几乎涵盖前端开发的所有核心技能，对于某一方面的介绍再从多角度进行延伸。为了让读者更加方便地学习本套图书的内容，在每本书的每个章节中都提供了一些实际的项目案例，便于读者在实践中学习。
2．结构清晰，讲解到位
每个章节都环环相扣，为了让初学者更快地上手，本套图书精心设计了学习方式。对于概念的讲解，都是先用准确的语言总结概括，再用直观的图示演示过程，接着以详细的注释解释代码，后用形象的比喻帮助记忆。对于框架部分，先提取核心功能快速掌握框架的应用，再用多个对应的实例分别讲解每个模块，后逐一讲解框架的每个功能。对于代码部分，先演示程序效果，再根据需求总结涉及的知识点逐一讲解，然后组合成实例，后总结分析重点功能的逻辑实现。
3．完整案例，代码实用
为了便于读者学习，本套图书的全部案例都可以在商业项目中直接运用，丰富的案例几乎涵盖前端应用的各个方面。所有的案例都可以通过对应的二维码扫描，直接在手机上查看运行结果，读者可以通过仔细研究其效果，限度地掌握开发技术。另外，扫描每个章节中的资源下载二维码，可以获得下载链接，点击链接即可获取所有案例的完整源代码。
4．视频精致，立体学习
字不如表，表不如图，图不如视频，每本书都配有详细讲解的教学视频，由兄弟连名师精心录制，不仅能覆盖书中的全部知识点，而且远远超出书中的内容。通过参考本套图书，再结合教学视频学习，可以加快对知识点的掌握，加快学习进度。读者可以扫描每个章节中提供的教学视频二维码，获取视频列表直接在手机上观看，也可以直接登录“猿代码（www.ydma.cn）”平台在PC端观看，逐步掌握每个技术点。
5．电子教案，学教通用
每本书都提供了和章节配套的电子教案（PPT）。对于学生来说，可以作为学习笔记使用，是知识点的浓缩和重点内容的记录。由于本套图书可以作为高校相关课程的教材或课外辅导书，所以可以方便教师教学使用。读者可以通过扫描对应章节的二维码，下载或在线观看电子教案。本书也为部分章节提供了一些扩展文章，也可以通过扫描二维码的方式下载或在线观看。
6．实时测试，寓学于练
每章后都提供了专门的测试习题，供读者检验所学知识是否牢固掌握。通过扫描测试习题对应的二维码，可以查看答案和详细的讲解。
7．技术支持，服务到位
为了帮助读者学到更多的HTML5技术，在兄弟连论坛（bbs.itxdl.cn）中还可以下载常用的技术手册和所需的软件。笔者及兄弟连IT教育（新三板上市公司，股票代码：839467）的全体讲师和技术人员也会及时回答读者的提问，与读者进行在线技术交流，并为读者提供各类技术文章，帮助读者提高开发水平，解决读者在开发中遇到的疑难问题。

本套图书的读者群
有审美，喜欢编程，并且怀揣梦想的有志青年。
打算进入前端编程大门的新手，阶梯递进，由浅入深。
专业培训机构前端课程授课教材，有体系地掌握全部前端技能。
各大院校的在校学生和相关的授课老师，课件、试题、代码丰富实用。
前端页面、Web APP、网页游戏、微信公众号等开发的前沿程序员，是专业人员的开发工具。
其他方向的编程爱好者，需要前端技术配合，或转向前端开发的程序员。

高洛峰
2017年8月