jQuery网页特效设计基础教程(慕课版新一代信息技术十三五系列规划教材)

本书作为jQuery课程的教材，系统全面地介绍了有关jQuery开发所涉及的各类知识。全书共分12章，内容包括JavaScript基础、初识jQuery、使用jQuery选择器、使用jQuery操作DOM、jQuery中的事件处理和动画效果、使用jQuery操作表单和表格、Ajax在jQuery中的应用、使用jQuery UI插件、常用的第三方jQuery插件、jQuery性能优化与技巧、jQuery在HTML5中的应用、综合实战——使用jQuery实现携程网站特效。 本书配套资源包括案例的源代码、制作精良的电子课件PPT、慕课视频等。 本书可作为本科计算机类及相关专业、高职软件及相关专业的教材，同时也适合Web爱好者、初级和中级的Web程序开发人员参考使用。

一线项目研发、设计、管理工程师，高级项目管理师、项目监理师，负责纪检监察廉政监督监管平台、国家邮政局项目、政务大数据等多个国家级项目的设计与开发。 极客学院、北风网金牌讲师 畅销书《微信小程序开发图解案例教程（附精讲视频）》《小程序实战视频课：微信小程序开发全案精讲》《Axure RP8原型设计图解微课视频教程 （Web+App）》作者

第 1章 JavaScript基础 1
1.1 JavaScript概述 2
1.1.1 什么是JavaScript 2
1.1.2 JavaScript的应用领域 2
1.1.3 JavaScript的特点 4
1.2 JavaScript的开发工具 5
1.2.1 使用记事本开发 5
1.2.2 使用Dreamweaver开发 5
1.3 编写第 一个JavaScript程序 8
1.3.1 编写JavaScript程序 8
1.3.2 运行JavaScript程序 10
1.3.3 JavaScript程序的出错类型 11
1.3.4 JavaScript的3种调试方式 12
1.4 JavaScript库 13
1.4.1 什么是JavaScript库 13
1.4.2 常用的JavaScript库 13
知识点提炼 15
习题 15
第 2章 初识jQuery 16
2.1 jQuery概述 17
2.1.1 jQuery的应用 17
2.1.2 jQuery的特点 18
2.1.3 jQuery的版本 19
2.1.4 jQuery版本的选择 21
2.2 jQuery下载与配置 21
2.2.1 下载jQuery 21
2.2.2 配置jQuery 22
2.2.3 我的第 一个jQuery脚本 22
2.3 jQuery对象和DOM对象 23
2.3.1 jQuery对象和DOM对象简介 23
2.3.2 jQuery对象和DOM对象的相互转换 24
2.4 解决jQuery和其他库的冲突 26
2.4.1 jQuery库在其他库之前导入 26
2.4.2 jQuery库在其他库之后导入 27
2.5 jQuery插件简介 28
2.5.1 插件的使用 28
2.5.2 流行的插件 28
知识点提炼 30
习题 31
第3章 使用jQuery选择器 32
3.1 jQuery的工厂函数 33
3.2 什么是jQuery选择器 33
3.3 jQuery选择器的优势 33
3.3.1 代码更简单 33
3.3.2 支持CSS1到CSS3选择器 33
3.3.3 完善的检测机制 33
3.4 基本选择器 35
3.4.1 ID选择器（#id） 35
3.4.2 元素选择器（element） 36
3.4.3 类名选择器（.class） 37
3.4.4 复合选择器（selector1，selector2，selectorN） 38
3.4.5 通配符选择器（*） 39
3.4.6 使用选择器获取超链接地址 39
3.5 层次选择器 41
3.5.1 ancestor descendant选择器 41
3.5.2 parent>child选择器 43
3.5.3 prev+next选择器 44
3.5.4 prev～siblings选择器 45
3.6 过滤选择器 46
3.6.1 简单过滤器 46
3.6.2 内容过滤器 48
3.6.3 可见性过滤器 49
3.6.4 表单对象的属性过滤器 50
3.6.5 子元素过滤器 51
3.7 属性选择器 52
3.8 表单选择器 53
3.9 混淆选择器 54
3.10 选择器中的一些注意事项 55
3.10.1 选择器中含有特殊符号的注意事项 55
3.10.2 选择器中含有空格的注意事项 55
3.11 综合实例：表格隔行换色及鼠标指针指向行变色 56
知识点提炼 57
习题 58
第4章 使用jQuery操作DOM 59
4.1 DOM操作的分类 60
4.2 对元素内容和值进行操作 60
4.2.1 对元素内容进行操作 60
4.2.2 对元素值进行操作 63
4.3 对DOM文档节点进行操作 64
4.3.1 创建节点 64
4.3.2 查找节点 65
4.3.3 插入节点 65
4.3.4 删除、复制与替换节点 67
4.3.5 包裹节点 70
4.3.6 遍历节点 73
4.4 对元素属性进行操作 74
4.5 对元素的CSS样式进行操作 75
4.5.1 通过修改CSS类实现 75
4.5.2 通过修改CSS属性实现 75
4.6 综合实例：实现我的开心小农场 76
知识点提炼 77
习题 78
第5章 jQuery中的事件处理和动画效果 79
5.1 jQuery中的事件处理 80
5.1.1 页面加载响应事件 80
5.1.2 jQuery中的事件 80
5.1.3 事件绑定 82
5.1.4 模拟用户操作 85
5.1.5 事件捕获与事件冒泡 87
5.2 jQuery中的动画效果 91
5.2.1 隐藏匹配元素 91
5.2.2 显示匹配元素 91
5.2.3 切换元素的可见状态 93
5.2.4 淡入淡出的动画效果 93
5.2.5 滑动效果 94
5.2.6 自定义的动画效果 97
5.3 综合实例：实现图片传送带 99
知识点提炼 101
习题 102
第6章 使用jQuery操作表单和表格 103
6.1 HTML表单概述 104
6.1.1 表单标记

104
6.1.2 输入标记 105
6.1.3 文本域标记 109<br> 6.1.4 菜单和列表标记<select>、<option> 110<br> 6.2 使用jQuery操作表单元素 111<br> 6.2.1 操作文本框 111<br> 6.2.2 操作文本域 112<br> 6.2.3 操作单选按钮和复选框 115<br> 6.2.4 操作下拉框 117<br> 6.2.5 表单验证 118<br> 6.3 使用jQuery操作表格 120<br> 6.3.1 控制表格颜色显示 120<br> 6.3.2 表格的展开与关闭 122<br> 6.3.3 表格内容的筛选 124<br> 6.4 综合实例：删除记录时的提示效果 125<br> 知识点提炼 126<br> 习题 127<br> 第7章 Ajax在jQuery中的应用 128<br> 7.1 Ajax技术简介 129<br> 7.1.1 Ajax概述 129<br> 7.1.2 Ajax技术的优点 129<br> 7.1.3 Ajax技术的缺点 130<br> 7.2 安装Web运行环境——AppServ 130<br> 7.3 通过JavaScript应用Ajax 133<br> 7.4 jQuery中的Ajax应用 134<br> 7.4.1 load()方法 135<br> 7.4.2 使用$.get()方法请求数据 136<br> 7.4.3 使用$.post()方法请求数据 137<br> 7.4.4 使用$.getScript()方法加载JS文件 138<br> 7.4.5 使用$.getJSON()方法加载JSON文件 139<br> 7.4.6 使用$.ajax()方法请求数据 140<br> 7.4.7 使用serialize()方法序列化表单 141<br> 7.5 Ajax的全局事件 143<br> 7.5.1 Ajax全局事件的参数及功能 143<br> 7.5.2 ajaxStart与ajaxStop全局事件 143<br> 7.6 综合实例：使用Ajax实现留言板即时更新 144<br> 知识点提炼 146<br> 习题 146<br> 第8章 使用jQuery UI插件 147<br> 8.1 初识jQuery UI插件 148<br> 8.1.1 jQuery UI概述 148<br> 8.1.2 jQuery UI的下载 148<br> 8.1.3 jQuery UI的使用 149<br> 8.1.4 jQuery UI的工作原理 150<br> 8.1.5 jQuery UI中的插件 152<br> 8.2 jQuery UI的常用插件 152<br> 8.2.1 折叠面板（Accordion）的使用 152<br> 8.2.2 自动完成（Autocomplete）插件的使用 155<br> 8.2.3 按钮（Button）的使用 158<br> 8.2.4 日期选择器（Datepicker）的使用 160<br> 8.2.5 对话框（Dialog）的使用 163<br> 8.2.6 菜单（Menu）的使用 166<br> 8.2.7 进度条（Progressbar）的使用 168<br> 8.2.8 滑块（Slider）的使用 170<br> 8.2.9 旋转器（Spinner）的使用 172<br> 8.2.10 标签页（Tabs）的使用 173<br> 8.2.11 工具提示框（Tooltip）的使用 175<br> 8.3 jQuery UI的特效 177<br> 8.3.1 拖动特效（Draggable）的使用 177<br> 8.3.2 放置特效（Droppable）的使用 178<br> 8.3.3 缩放特效（Resizable）的使用 179<br> 8.3.4 选择特效（Selectable）的使用 180<br> 8.3.5 排序特效（Sortable）的使用 181<br> 8.3.6 显示特效（show）的使用 182<br> 8.3.7 隐藏特效（hide）的使用 184<br> 8.3.8 切换特效（toggle）的使用 186<br> 8.4 综合实例：使用jQuery实现许愿墙 188<br> 知识点提炼 190<br> 习题 191<br> 第9章 常用的第三方jQuery插件 192<br> 9.1 jQuery插件概述 193<br> 9.1.1 什么是jQuery插件 193<br> 9.1.2 常用的第三方jQuery插件 193<br> 9.1.3 如何调用第三方jQuery插件 193<br> 9.2 常用jQuery插件的使用 194<br> 9.2.1 uploadify插件（文件上传） 194<br> 9.2.2 zTree插件（树菜单） 198<br> 9.2.3 Nivo Slider插件（图片切换） 202<br> 9.2.4 Pagination插件（数据分页） 205<br> 9.2.5 jQZoom插件（图片放大镜） 207<br> 9.3 综合实例：使用ColorPicker插件制作颜色选择器 209<br> 知识点提炼 210<br> 习题 210<br> 第 10章 jQuery性能优化与技巧 211<br> 10.1 jQuery性能优化 212<br> 10.2 jQuery常用技巧 216<br> 知识点提炼 221<br> 习题 222<br> 第 11章 jQuery在HTML5中的应用 223<br> 11.1 HTML5基础 224<br> 11.1.1 HTML5的新特性 224<br> 11.1.2 浏览器对HTML5的支持 224<br> 11.2 jQuery与HTML5编程 226<br> 11.2.1 显示文件上传的进度条 226<br> 11.2.2 Canvas绘图 228<br> 11.2.3 jQuery+HTML5实现图片旋转效果 230<br> 11.2.4 基于HTML5播放声音的jQuery插件audioPlay 232<br> 11.2.5 Web Storage编程 233<br> 11.3 综合实例：旅游信息网前台页面设计 236<br> 11.3.1 网站预览 236<br> 11.3.2 网站主体结构设计 239<br> 11.3.3 HTML5结构元素的使用 239<br> 11.3.4 网站公共部分设计 240<br> 11.3.5 网站主页设计 244<br> 11.3.6 留下足迹页面设计 246<br> 知识点提炼 248<br> 习题 248<br> 第 12章 综合实战——使用jQuery实现携程网站特效 249<br> 12.1 网站特效 250<br> 12.2 特效需求 250<br> 12.2.1 网站注册表单布局设计 250<br> 12.2.2 倒计时交互设计 250<br> 12.2.3 网站登录布局与交互设计 250<br> 12.2.4 导航菜单设计 251<br> 12.2.5 海报轮播效果设计 251<br> 12.2.6 页签切换效果设计 251<br> 12.2.7 左右滑动效果设计 252<br> 12.2.8 手风琴效果设计 252<br> 12.2.9 图片放大缩小效果制作 253<br> 12.3 关键知识点 253<br> 12.4 模块设计实现 254<br> 12.4.1 网站注册表单布局设计 254<br> 12.4.2 倒计时交互设计 260<br> 12.4.3 网站登录布局与交互设计 262<br> 12.4.4 导航菜单设计 266<br> 12.4.5 海报轮播效果制作 269<br> 12.4.6 页签切换效果设计 272<br> 12.4.7 左右滑动切换效果设计 276<br> 12.4.8 手风琴效果菜单设计 278<br> 12.4.9 图片放大缩小效果制作 281<br> 12.5 本章总结 284<br></div></div> </div> </div> </div> </div> </div> <script src="/static/js/lib/jquery/blowup.min.js" type="text/javascript"></script> <script type="application/javascript"> $(document).ready(function () { /** * 图片放大器 */ $("#img_zoom").blowup({ background : "#FCEBB6" }); }); </script> <!-- 添加到书单弹出框 --> <div class="modal fade bs-example-modal-lg" id="modal_add_to_list" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">添加到书单</h4> </div> <div class="modal-body"> <!-- 书单列表模板 --> <script id="tpl_my_list" type="text/template"> {@each records as i} <li class="list-group-item"> <label style="width:100%;cursor: pointer;"> <input type="radio" name="listId" value="@{i.id}" id="list@{i.id}"> @{i.name} </label> </li> {@/each} </script> <!-- 书单列表模板结束 --> <ul class="list-group" id="tbl_my_list"> <li class="list-group-item"> <label for="list2" >加载中...</label> </li> </ul> <div class="pager"></div> <a href="javascript:void(0);" id="a_add_list">点此新建书单</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="btn_add_to_list_save">确定</button> </div> </div> </div> </div> <!-- 添加到书单弹出框结束 --> <!-- 新建书单弹出框 --> <div class="modal fade bs-example-modal-lg" id="modal_add_list" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form id="form_create_list"> <button type="reset" style="display:none;"></button> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">新建书单</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="recipient-name" class="control-label">标题：</label> <input type="text" class="form-control" name="name"> </div> <div class="form-group"> <label for="recipient-name" class="control-label">简介：</label> <textarea style="height:200px" class="form-control" name="memo" placeholder="书单描述...">