jQuery网页特效任务驱动式教程（微课版）

　　本书以任务驱动方式对网页特效相关知识进行讲解，按照特效类别划分为10个项目，根据这些网页特效的实现要求，将HTML、CSS和jQuery完美融合在一起，将网页特效真实再现到本书中。每个特效任务都从任务描述和任务实现两个方面展开详细讲解，帮助读者深入理解使用jQuery实现特效的原理和方法；同时在实现特效的过程中穿插讲解需要的知识点，并在此基础上适当扩充知识点，让读者做到学为所用、学以致用。 本书在任务实现的过程中将容易出现的问题设计为陷阱，帮助读者深刻理解每一行代码在任务实现中的重要性和必要性，将代码学懂、弄通、做实，提升项目开发能力。 本书适合作为应用型本科学校、高等职业院校计算机类学生的专业课教材，也适合培训班使用，还适合前端开发人员学习使用。

　　王爱华，教授，山东商业职业学院教师，有半年企业挂职经历。发表3篇核心期刊、6篇EI检索及普通期刊文章多篇、主持建设两门山东省精品课程、一门精品资源共享课（PHP动态网站开发）、主持山东省教育厅重点课题一项、山东省教学成果一等奖第三位。主要承担网页制作、PHP动态网站开发、javaScript程序设计、jQuery程序设计、计算机网络等多门课程的教学。

项目1 实现表单输入框外围的动态阴影效果 1
【任务描述】 1
【任务实现】 2
【相关知识】 4
一、JavaScript简介及DOM 4
（一）ECMAScript 5
（二）DOM 6
（三）BOM 9
二、jQuery概述 9
（一）下载和安装jQuery 9
（二）使用jQuery 10
（三）jQuery对象与DOM对象的相互
转换 17
三、jQuery中的选择器 18
（一）基本选择器 18
（二）层级选择器 22
（三）过滤器eq()和伪类选择器：eq() 23
四、jQuery中的元素查找操作 23
（一）向下查找后代元素 24
（二）向上查找祖先元素 24
（三）查找兄弟元素 25
（四）查找方法应用举例 26
五、jQuery中操作DOM元素的
基本方法 27
（一）jQuery中操作属性的attr()方法 27
（二）jQuery中的each()方法 28
（三）关于元素的索引的问题 32
（四）为元素添加和移除类 33
六、jQuery中的事件机制 33
（一）注册事件 33
（二）注销事件—— off()方法 36
小结 37
习题 37
项目2 制作页面中的漂浮广告 40
任务2．1 实现不加任何控制的漂浮广告 40
【任务描述】 40
【任务实现】 41
一、漂浮广告的定位及移动方向控制 41
二、使用固定定位方式实现漂浮广告 42
三、使用绝对定位实现漂浮广告 49
任务2．2 实现漂浮广告中的控制功能 50
【任务描述】 50
【任务实现】 51
【相关知识】 53
一、获取窗口及页面的宽度和高度 53
（一）使用JavaScript获取窗口及页面的宽度和高度 53
（二）使用jQuery获取窗口及页面的宽度和高度 60
二、获取滚动条卷入部分的页面宽度和高度 64
（一）在JavaScript中获取 64
（二）在jQuery中获取 66
三、获取元素的宽度和高度 66
（一）使用JavaScript获取元素的宽度和高度 66
（二）使用jQuery获取元素的宽度和高度 69
四、获取和设置页面元素的位置 72
（一）在JavaScript中获取和设置页面元素的位置 72
（二）在jQuery中获取和设置元素的位置 76
五、jQuery中的css()方法 78
（一）使用css()方法返回元素的样式属性取值 78
（二）使用css()方法设置元素的样式属性取值 80
小结 80
习题 80
项目3 在jQuery中实现表单数据验证 83
任务3．1 实现表单数据验证功能 83
【任务描述】 84
【任务实现】 85
【相关知识】 90
一、表单过滤器 90
二、在jQuery中获取或设置表单元素的值 91
三、使用jQuery实现邮箱自动导航 92
任务3．2 判断密码强度 93
【任务描述】 93
【任务实现】 94
任务3．3 使用JavaScript正则表达式完成数据的即时验证 97
【任务描述】 97
【任务实现】 97
小结 98
习题 98
项目4 使用闭包实现级联菜单功能 100
任务4．1 实现年月日级联菜单 101
【任务描述】 101
【任务实现】 101
【相关知识】 107
一、使用JavaScript和jQuery操作select和option 107
二、改变DOM树形结构的常用方法 108
任务4．2 实现省市区级联菜单 109
【任务描述】 109
【任务实现】 111
一、页面元素的结构及样式要求 112
二、JSON数据的定义和访问 114
三、使用闭包实现省市区级联菜单 118
【相关知识】trigger()方法 125
小结 127
习题 127
项目5 实现jQuery动画 129
任务5．1 使用css()制作动画——实现文本动画效果 129
【任务描述】 129
【任务实现】 130
【相关知识】hover()方法 131
任务5．2 显示与隐藏动画制作——实现树形列表动画 132
【任务描述】 132
【任务实现】 133
【相关知识】 135
一、显示和隐藏的动画方法 135
二、显示与隐藏动画的基本应用案例 136
任务5．3 淡入淡出动画 139
【任务描述】 139
【任务实现】 140
【相关知识】淡入淡出的动画方法 141
任务5．4 使用上卷下拉实现折叠框动画 142
【任务描述】 142
【任务实现】 142
【相关知识】上卷下拉动画方法 144
任务5．5 使用上卷下拉实现百叶窗动画 144
【任务描述】 144
【任务实现】 144
任务5．6 阶梯式上卷下拉动画 145
【任务描述】 145
【任务实现】 146
【相关知识】jQuery中的队列控制方法 149
任务5．7 animate()——实现返回页面顶部的滚动动画 150
【任务描述】 150
【任务实现】 150
【相关知识】 152
一、animate()方法 152
二、停止动画——stop()方法 153
三、关闭和延迟动画 154
小结 155
习题 155
项目6 图像轮播 157
任务6．1 索引切换轮播 157
【任务描述】 157
【任务实现】 158
一、实现简单的索引切换轮播功能 158
二、扩展索引切换轮播功能 159
任务6．2 使用animate()实现无缝滚动轮播 164
【任务描述】 164
【任务实现】 165
一、实现简单的无缝滚动轮播功能 165
二、扩展无缝滚动轮播功能 171
任务6．3 使用CSS3动画实现无缝滚动轮播 177
【任务描述】 177
【任务实现】 178
任务6．4 旋转滚动轮播 182
【任务描述】 182
【任务实现】 183
小结 188
习题 188
项目7 图像处理特效 190
任务7．1 购物网站中的放大镜 190
【任务描述】 190
【任务实现】 191
任务7．2 瀑布流布局 198
【任务描述】 198
【任务实现】 199
任务7．3 添加文件类型图标 202
【任务描述】 202
【任务实现】 203
【相关知识】JavaScript读取外部文件 207
任务7．4 超链接背景图的切换 209
【任务描述】 210
【任务实现】 210
任务7．5 使用图片精灵实现星级评价 212
【任务描述】 212
【任务实现】 212
小结 213
习题 214
项目8 使用jQuery实现表格操作特效 215
任务8．1 应用模态框添加和修改表格数据 215
【任务描述】 215
【任务实现】 218
【相关知识】关于模态框 223
任务8．2 应用模态框实现签到和评分功能 224
【任务描述】 224
【任务实现】 226
任务8．3 读取Excel数据表并进行排序操作 237
【任务描述】 237
【任务实现】 238
【相关知识】应用FileReader读取Excel文件 245
小结 246
习题 247
项目9 数组应用特效 249
任务9．1 实现随机点名功能 249
【任务描述】 249
【任务实现】 250
任务9．2 实现随机选图并放大功能 252
【任务描述】 252
【任务实现】 253
任务9．3 制作百度新闻页面的滑块 255
【任务描述】 255
【任务实现】 255
任务9．4 单击时的文字动画 259
【任务描述】 259
【任务实现】 259
小结 261
习题 261
项目10 综合应用——购物车中的商品管理功能 262
【任务描述】 262
【任务实现】 263
一、元素设计及样式定义 263
二、购物车商品管理脚本功能实现 266
小结 272