jQuery网页特效设计基础教程（慕课版）（第2版）

本书系统、全面地介绍了jQuery开发所涉及的各类知识。全书共11个单元，内容包括JavaScript基础、初识jQuery、使用jQuery选择器、使用jQuery操作DOM、jQuery中的事件处理和动画效果、使用jQuery操作表单和表格、AJAX在jQuery中的应用、使用jQuery UI插件、常用的第三方jQuery插件、jQuery性能优化与技巧、jQuery在HTML5中的应用。本书将理论知识和实例有机结合，满足读者全方位发展的需求。 本书可作为高等院校计算机相关专业的教材，同时也可供网页开发人员参考。

马静媛，女，副教授，石家庄财经职业学院教务处处长，河北省职业教育信息化创新应用专家。在计算机技术、数据库技术、软件开发等方面具有扎实的专业知识，为“双师型”教师。曾获得学校“十佳教职工”“优秀共产党员”“优秀党务工作者”等荣誉。独立发表核心期刊论文及其他各级论文十余篇，主持及参与厅级及以上课题十余项；担任“十三五”国家规划教材副主编，撰写案例入选“全国职业院校教学工作诊断与改进制度建设优秀案例”。

目录 CONTENTS 第 1单元 JavaScript基础 1 情景引入 1 学习目标 1 思维导图 1 1.1　JavaScript概述 2 1.1.1　什么是JavaScript 2 1.1.2　JavaScript的应用 2 1.1.3　JavaScript的特点 4 1.2　JavaScript的开发工具 4 1.2.1　使用记事本开发 4 1.2.2　使用VS Code开发 5 1.3　编写和运行第 一个JavaScript 程序 7 1.3.1　编写JavaScript程序 7 1.3.2　运行JavaScript程序 8 1.3.3　JavaScript程序的出错 类型 8 1.3.4　JavaScript的3种调试 方式 9 1.4　JavaScript库 11 1.4.1　什么是JavaScript库 11 1.4.2　常用的JavaScript库 11 1.5　项目实战：设计简单倒计时器 13 1.6　小结 13 1.7　习题 14 第 2单元 初识jQuery 15 情景引入 15 学习目标 15 思维导图 16 2.1　jQuery概述 16 2.1.1　jQuery的应用 16 2.1.2　jQuery的特点 18 2.1.3　jQuery的版本 19 2.1.4　jQuery版本的选择 19 2.2　jQuery下载与配置 19 2.2.1　下载jQuery 19 2.2.2　配置jQuery 20 2.2.3　我的第 一个jQuery脚本 20 2.3　jQuery对象和DOM对象 21 2.3.1　jQuery对象和DOM 对象简介 21 2.3.2　jQuery对象和DOM 对象的相互转换 23 2.4　解决jQuery库和其他库的冲突 25 2.4.1　jQuery库在其他库之前 导入 25 2.4.2　jQuery库在其他库之后 导入 25 2.5　jQuery插件简介 26 2.5.1　插件的使用 27 2.5.2　流行的插件 27 2.6　项目实战：显示、隐藏下拉菜单 效果 28 2.7　小结 28 2.8　习题 29 第3单元 使用jQuery选择器 30 情景引入 30 学习目标 30 思维导图 31 3.1　jQuery的工厂函数 31 3.2　什么是jQuery选择器 32 3.3　jQuery选择器的优势 32 3.3.1　代码更简单 32 3.3.2　支持CSS1～CSS3 选择器 32 3.3.3　完善的检测机制 32 3.4　基本选择器 33 3.4.1　ID选择器 33 3.4.2　元素选择器 35 3.4.3　类名选择器 36 3.4.4　复合选择器 37 3.4.5　通配符选择器 38 3.4.6　使用选择器获取超链接 地址 38 3.5　层次选择器 40 3.5.1　ancestor descendant 选择器 40 3.5.2　parent>child选择器 42 3.5.3　prev+next选择器 43 3.5.4　prev～siblings选择器 44 3.6　过滤选择器 45 3.6.1　简单过滤器 45 3.6.2　内容过滤器 47 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 3.12　小结 57 3.13　习题 58 第4单元 使用jQuery操作DOM 59 情景引入 59 学习目标 59 思维导图 60 4.1　DOM操作的分类 60 4.2　对元素内容和值进行操作 61 4.2.1　对元素内容进行操作 61 4.2.2　对元素值进行操作 64 4.3　对DOM文档节点进行操作 65 4.3.1　创建节点 65 4.3.2　查找节点 66 4.3.3　插入节点 66 4.3.4　删除、复制与替换节点 68 4.3.5　包裹节点 71 4.3.6　遍历节点 74 4.4　对元素属性进行操作 75 4.5　对元素的CSS样式进行操作 75 4.5.1　通过修改CSS类实现 75 4.5.2　通过修改CSS属性实现 76 4.5.3　判断是否包含指定样式 76 4.6　项目实战：实现我的开心小农场 77 4.7　小结 78 4.8　习题 78 第5单元 jQuery中的事件处理和动画 效果 80 情景引入 80 学习目标 80 思维导图 81 5.1　jQuery中的事件处理 81 5.1.1　页面加载响应事件 81 5.1.2　jQuery中的事件 82 5.1.3　事件绑定 84 5.1.4　模拟用户操作 87 5.1.5　事件捕获与事件冒泡 88 5.2　jQuery中的动画效果 92 5.2.1　隐藏匹配元素 93 5.2.2　显示匹配元素 93 5.2.3　切换元素的可见状态 94 5.2.4　淡入淡出的动画效果 95 5.2.5　滑动的动画效果 96 5.2.6　自定义的动画效果 99 5.3　项目实战：实现图片传送带 101 5.4　小结 103 5.5　习题 104 第6单元 使用jQuery操作表单和 表格 105 情景引入 105 学习目标 105 思维导图 105 6.1　表单概述 106 6.1.1　表单标记

106 6.1.2　输入标记 108 6.1.3　文本域标记 111 6.1.4　菜单和列表标记 <select>、<option> 112 6.2　使用jQuery操作表单元素 113 6.2.1　操作文本框 113 6.2.2　操作文本域 114 6.2.3　操作单选按钮和复选框 116 6.2.4　操作下拉框 118 6.2.5　表单验证 120 6.3　使用jQuery操作表格 121 6.3.1　控制表格颜色显示 121 6.3.2　表格的展开与关闭 123 6.3.3　表格内容的筛选 124 6.4　项目实战：删除记录时的提示 效果 126 6.5　项目实战：京东登录注册表单 127 6.5.1　登录表单设计 128 6.5.2　手机号注册表单设计 130 6.5.3　企业用户注册表单设计 132 6.6　小结 135 6.7　习题 136 第7单元 AJAX在jQuery中的 应用 137 情景引入 137 学习目标 137 思维导图 138 7.1　AJAX技术简介 138 7.1.1　AJAX概述 138 7.1.2　AJAX技术的优点 139 7.1.3　AJAX技术的缺点 139 7.2　安装Web运行环境—— AppServ 140 7.3　通过JavaScript应用AJAX 142 7.4　jQuery中的AJAX应用 144 7.4.1　使用load()方法获取异步 数据 144 7.4.2　使用$.get()方法请求 数据 146 7.4.3　使用$.post()方法请求 数据 147 7.4.4　使用$.getScript()方法 加载JavaScript文件 147 7.4.5　使用$.getJSON()方法 加载JSON文件 148 7.4.6　使用$.ajax()方法请求 数据 149 7.4.7　使用serialize()方法 序列化表单 151 7.5　AJAX的全局事件 152 7.5.1　AJAX的全局事件参数 152 7.5.2　ajaxStart与ajaxStop 全局事件 152 7.6　项目实战：使用AJAX实现 留言板即时更新 153 7.7　小结 155 7.8　习题 155 第8单元 使用jQuery UI插件 157 情景引入 157 学习目标 157 思维导图 157 8.1　初识jQuery UI插件 158 8.1.1　jQuery UI概述 158 8.1.2　jQuery UI的下载 158 8.1.3　jQuery UI的使用 159 8.1.4　jQuery UI插件的工作 原理 160 8.1.5　jQuery UI中的插件 161 8.2　jQuery UI的常用插件 162 8.2.1　折叠面板的使用 162 8.2.2　自动完成插件的使用 165 8.2.3　按钮的使用 168 8.2.4　日期选择器的使用 169 8.2.5　对话框的使用 172 8.2.6　菜单的使用 175 8.2.7　进度条的使用 177 8.2.8　滑块的使用 179 8.2.9　旋转器的使用 181 8.2.10　标签页的使用 182 8.2.11　工具提示框的使用 184 8.3　jQuery UI的常用特效 186 8.3.1　拖动特效的使用 186 8.3.2　放置特效的使用 187 8.3.3　缩放特效的使用 188 8.3.4　选择特效的使用 188 8.3.5　排序特效的使用 189 8.3.6　显示特效的使用 190 8.3.7　隐藏特效的使用 192 8.3.8　切换特效的使用 194 8.4　项目实战：使用jQuery实现 许愿墙 196 8.5　小结 198 8.6　习题 199 第9单元 常用的第三方jQuery 插件 200 情景引入 200 学习目标 200 思维导图 200 9.1　第三方jQuery插件概述 201 9.1.1　什么是第三方jQuery 插件 201 9.1.2　常用的第三方jQuery 插件 201 9.1.3　如何调用第三方jQuery 插件 201 9.2　常用第三方jQuery插件的使用 202 9.2.1　uploadify插件 （文件上传） 202 9.2.2　zTree插件（树菜单） 206 9.2.3　Nivo Slider插件 （图片切换） 211 9.2.4　Pagination插件 （数据分页） 213 9.2.5　jQZoom插件 （图片放大镜） 215 9.3　项目实战：使用ColorPicker 插件制作颜色选择器 217 9.4　小结 218 9.5　习题 219 第 10单元 jQuery性能优化与技巧 220 情景引入 220 学习目标 220 思维导图 220 10.1　jQuery性能优化 221 10.2　jQuery常用技巧 225 103　项目实战：动态搜索过滤 230 10.4　小结 231 10.5　习题 232 第 11单元 jQuery在HTML5中的 应用 233 情景引入 233 学习目标 233 思维导图 233 11.1　HTML5基础 234 11.1.1　HTML5的新特性 234 11.1.2　浏览器对HTML5的 支持 236 11.2　jQuery与HTML5编程 237 11.2.1　显示文件上传的 进度条 237 11.2.2　Canvas绘图 240 11.2.3　jQuery+HTML5实现 图片旋转效果 242 11.2.4　基于HTML5播放 音频的jQuery插件 audioPlay 244 11.2.5　Web Storage编程 245 11.3　项目实战：旅游信息网前台页面 设计 248 11.3.1　网站预览 248 11.3.2　网站主体结构设计 249 11.3.3　HTML5结构元素的 使用 249 11.3.4　网站公共部分设计 250 11.3.5　网站主页设计 253 11.3.6　留下足迹页面设计 254 11.4　小结 255 11.5　习题 256</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="书单描述...">