jQuery前端开发之网页特效

领先的实用技能——打造前端开发工程师 科学的训练模式——授人以渔而不只是作品临摹

真实的项目驱动——行业知识与专业设计相呼应 便捷的学习体验——传统教材与二维码革命性携手

随着互联网技术的飞速发展，“互联网+”时代已经悄然到来，这自然催生了互联网行业工种的细分，前端开发工程师这个职业应运而生，各行业、企业对前端设计开发人才的需求也日益增长。与传统网页开发设计人员相比，新“互联网+”时代对前端开发工程师提出了更高的要求，传统网页开发设计人员已无法胜任。在这样的大环境下，这套“前端开发工程师系列”教材应运而生，它旨在帮助读者朋友快速成长为符合“互联网+”时代企业需求的优秀的前端开发工程师。

“前端开发工程师系列”教材是由课工场（kgc.cn）的教研团队研发的。课工场是北京大学下属企业北京课工场教育科技有限公司推出的互联网教育平台，专注于互联网企业各岗位人才的培养。平台汇聚了数百位来自知名培训机构、高校的顶级名师和互联网企业的行业专家，面向大学生以及需要“充电”的在职人员，针对与互联网相关的产品设计、开发、运维、推广和运营等岗位，提供在线的直播和录播课程，并通过遍及全国的几十家线下服务中心提供现场面授以及多种形式的教学服务，并同步研发出版最新的课程教材。参与本书编写的院校老师还有郭峰、周雯、禹波、殷悦等。

课工场为培养互联网前端设计开发人才，特别推出“前端开发工程师系列”教育产品，提供各种学习资源和支持，包括：

 现场面授课程

 在线直播课程

 录播视频课程

 案例素材下载

 学习交流社区

 QQ讨论组（技术，就业，生活）

以上所有资源请访问课工场www.kgc.cn。

本套教材特点

（1）科学的训练模式

 科学的课程体系。

 创新的教学模式。

 技能人脉，实现多方位就业。

 随需而变，支持终身学习。

（2）真实的项目驱动

 覆盖80%的网站效果制作。

 几十个实训项目，涵盖电商、金融、教育、旅游、游戏等行业。

（3）便捷的学习体验

 每章提供二维码扫描，可以直接观看相关视频讲解和案例操作。

 课工场开辟教材配套版块，提供素材下载、学习社区等丰富的在线学习资源。

读者对象

（1）初学者：本套教材将帮助你快速进入互联网前端开发行业，从零开始逐步成长为专业前端开发工程师。

（2）初级前端开发者：本套教材将带你进行全面、系统的互联网前端设计开发学习，帮助你梳理全面、科学的技能理论，提供实用开发技巧和项目经验。

课工场出品（kgc.cn）

第1章 JavaScript基础 1
1 JavaScript概述 2
1.1 JavaScript概念 2
1.2 JavaScript的应用 2
1.2.1 JavaScript的组成 3
1.2.2 JavaScript的执行原理 3
1.2.3 JavaScript的基本结构 4
1.3 在网页中引用JavaScript 5
操作案例1：网页中引用JavaScript代码 7
2 JavaScript基础语法 7
2.1 变量 7
2.2 数据类型 8
2.3 运算符 10
2.4 注释 10
2.5 选择结构 11
2.6 信息提示的使用 12
操作案例2：模拟计算器 13
3 函数 14
3.1 系统函数 14
3.2 自定义函数 15
3.3 变量的作用域 17
操作案例3：模拟QQ登录验证 18
本章总结 19
本章作业 19
第2章 JavaScript对象 23
1 认识BOM 24
2 window对象 25
2.1 常用的属性 25
2.2 常用的方法 25
2.2.1 confirm()方法 26
2.2.2 open()方法 27
2.2.3 close()方法 27
2.3 常用的事件 28
操作案例1：制作简易购物车页面 30
3 history对象 31
4 location对象 32
操作案例2：查看一年四季的变化 33
5 document对象 35
5.1 常用的属性 35
5.2 常用的方法 37
5.3 复选框的全选/全不选效果 40
6 JavaScript内置对象 41
6.1 Array对象 41
6.1.1 创建数组 41
6.1.2 为数组元素赋值 42
6.1.3 访问数组元素 42
6.1.4 数组的常用属性和方法 42
6.2 Date对象 43
6.3 Math对象 45
7 定时函数 45
7.1 setTimeout() 46
7.2 setInterval() 46
7.3 clearTimeout()和clearInterval() 47
操作案例3：变化的时钟 48
本章总结 49
本章作业 49
第3章 jQuery基础 51
1 jQuery简介 52
1.1 为什么选择jQuery 52
1.2 什么是jQuery 54
1.2.1 jQuery简介 54
1.2.2 jQuery的用途 54
1.2.3 jQuery的优势 56
1.3 配置jQuery环境 57
1.3.1 获取jQuery的最新版本 57
1.3.2 jQuery库类型说明 58
1.3.3 jQuery环境配置 58
1.3.4 在页面中引入jQuery 58
2 DOM高级编程 58
2.1 什么是DOM 59
2.2 动态改变HTML文档结构 60
2.2.1 查找HTML节点元素 60
2.2.2 改变HTML内容及属性 63
2.2.3 改变HTML CSS样式 65
2.3 DOM对象 66
3 jQuery语法结构 66
3.1 第一个jQuery程序 67
3.2 jQuery语法结构 68
3.3 读取设置CSS属性值 70
3.4 移除CSS样式 71
操作案例1：使用jQuery变换网页效果 71
4 jQuery对象和DOM对象 72
4.1 jQuery对象 72
4.2 jQuery对象与DOM对象的相互转换 73
4.2.1 jQuery对象转换成DOM对象 73
4.2.2 DOM对象转换成jQuery对象 73
操作案例2：使用jQuery方式弹出消息
对话框 74
5 循环结构 74
5.1 循环结构概述 75
5.2 for循环语句 76
5.3 while循环语句 77
操作案例3：计算100以内的偶数之和 78
操作案例4：制作京东商城首页焦点图
轮播特效 79
本章总结 80
本章作业 80
第4章 jQuery选择器与事件 81
1 jQuery选择器 82
1.1 选择器优势 82
1.2 jQuery选择器分类 82
1.3 基本选择器 83
1.4 层次选择器 87
1.5 属性选择器 91
1.6 过滤选择器 95
操作案例1：制作非缘勿扰页面特效 100
操作案例2：制作美化近期热门栏目特效 101
2 jQuery事件 102
2.1 事件概述 102
2.2 window事件 102
2.3 鼠标事件 103
2.4 键盘事件 104
2.5 表单事件 104
操作案例3：制作左导航特效 105
2.6 绑定事件与移除事件 106
2.7 复合事件 108
操作案例4：制作团购网主导航 109
本章总结 110
本章作业 110
第5章 jQuery遍历和特效动画 113
1 jQuery中的DOM遍历 114
1.1 jQuery中的DOM操作概述 114
1.2 节点操作 115
1.2.1 查找节点 115
1.2.2 创建节点元素 116
1.2.3 插入节点 116
1.2.4 删除节点 117
1.2.5 替换节点 120
1.2.6 复制节点 120
1.3 属性操作 120
1.3.1 获取与设置元素属性 120
1.3.2 删除元素属性 120
操作案例1：制作会员信息模块 121
1.4 节点遍历 122
1.4.1 遍历后代元素 123
1.4.2 遍历同辈元素 123
1.4.3 遍历前辈元素 124
1.4.4 遍历之过滤方法 125
1.5 CSS-DOM操作 125
操作案例2：制作京东商城首页焦点图
轮播特效 126
2 jQuery特效动画 127
2.1 控制元素显示和隐藏 127
2.1.1 控制元素显示 128
2.1.2 控制元素隐藏 129
2.1.3 切换元素可见状态 130
操作案例3：制作京东商城首页左侧菜单 131
2.2 控制元素淡入和淡出 132
2.2.1 控制元素淡入 132
2.2.2 控制元素淡出 133
2.2.3 切换元素出入状态 134
操作案例4：仿京东焦点图轮播淡入
淡出特效 134
2.3 控制元素滑动 135
2.3.1 控制元素下滑 135
2.3.2 控制元素上滑 136
2.3.3 控制元素上下滑动 136
2.4 jQuery自定义动画 137
操作案例5：移动的棍子 138
本章总结 139
本章作业 139
第6章 表单验证 143
1 表单验证概述 144
1.1 表单验证的必要性 144
1.2 表单验证的内容 145
1.3 表单验证的思路 146
2 String对象 146
2.1 常用的属性 146
2.2 常用的方法 147
2.3 电子邮件格式的验证 147
操作案例1：验证电子邮箱 150
2.4 文本内容的验证 151
操作案例2：验证注册信息 154
3 jQuery中的DOM内容操作 154
4 文本提示特效 155
4.1 表单验证事件和方法 156
4.2 文本输入提示特效 158
操作案例3：改进验证注册信息 161
5 表单选择器 161
5.1 表单选择器概述 161
5.2 多行数据的验证 165
本章总结 169
本章作业 169
第7章 jQuery中的Ajax 171
1 认识Ajax 172
1.1 Ajax应用 172
1.2 Ajax工作原理 173
1.3 认识XMLHttpRequest 174
操作案例1：IIS服务器的搭建 175
2 jQuery中的Ajax 175
2.1 get()方法与post()方法 176
2.2 ajax()方法 178
操作案例2：验证注册名是否可用 179
2.3 load()方法 180
操作案例3：刷新最新动态 181
3 认识JSON 182
3.1 JSON简介 182
3.2 使用jQuery处理JSON数据 183
3.3 getJSON()方法 184
操作案例4：制作冬奥会页面轮播
图片效果 186
本章总结 187
本章作业 187
第8章 项目案例：英雄难过棍子关 189
1 项目说明 190
1.1 需求概述 190
1.2 技能点 191
2 项目实现 191
2.1 制作英雄难过棍子关主界面 191
2.2 制作游戏主界面静态页面 193
2.3 制作黑色柱子的动态实现 194
2.4 制作棍子动画 195
2.5 制作英雄过关 196
2.6 制作英雄过关成败的提示框 197
2.7 重新玩本关游戏 198
2.8 继续下一关的实现 198

1. Linux系统管理（openEuler版） [主编 许兴鹍 黄君羡]
2. Web前端开发从学到用完美实践 [阮晓龙 冯顺磊 编著]
3. 用英语讲中国故事（全视频 彩色版）上、下册 [主编　谢亮亮　汪洋]
4. 新时代大学生美育教育 [穆林 刘苍劲 彭圣芳]
5. 电子商务英语 [丁文毅 严慧]
6. 智能可穿戴项目化教程 [曾文波 陈赵云]
7. 视觉设计解析与实战教程 [姜春磊　杨晓]
8. 电子产品制图与制版案例教程 [邹莉莉　苏文斌　贺小艳]
9. 设计新维度：CMF元素与创新产品设计 [彭小鹏]
10. 园林树木识别与应用 [主编 张玉泉]
11. 文本信息处理与应用 [主编　何黎松　姚香秀]
12. 工业机器人编程及应用（第二版） [主编 向艳芳 胡月霞]
13. C语言程序设计（第二版） [主编 刘祖珉 赵仕波]
14. 数据分析与应用 [主编　孙伟　王兰芹]
15. Linux操作系统配置与管理项目化教程（第二版） [主编 白玉羚 刘金明 闫 淼]
16. Ansys SpaceClaim直接建模与仿真指南 [蔡宜时 编著]
17. 基于大数据的智慧农业管理平台关键技术研究与实践 [周永福 著]
18. 健美运动 [戴显岩]
19. Python程序开发基础（AI+微课版） [赵艳莉　曾鑫]
20. 大学生心理困境突围之路 [张珏 著]
21. 机器学习基础与实践 [主编　李晓峰　胥文婷　李云波]
22. 大模型应用实战 DeepSeek＋即梦AI＋剪映重塑创作 [丁红　杨彦彦　丁丁　编著]
23. HarmonyOS从入门到精通 [陈赵云　周永福　杨　浪]
24. 用英语发现世界：欧美文化篇 [李小丽　张薇　编著]
25. 大学体育教程 [戴显岩]
26. 新一代信息技术 [李佼辉 任雪冬]
27. 轨道交通类专门用途英语教程 [李德华主编 商晔副主编]
28. 建设工程项目团队知识异质性对团队绩效的影响研究 [胡可]
29. 新时代元阳梯田 云南现代化高原立体灌区 前世 今生 未来 [云南省水利水电勘测设计研究院 ]
30. 网络工程师章节习题与考点特训（适配第6版考纲） [夏杰 编著]