本书在以“特种旅游”为背景的项目引导下，以Web前端项目开发的工作领域为依据，进行模块划分，模块中的“任务”设计兼顾Web前端开发岗位工作任务的“典型性”和“1+X”证书的知识点覆盖面。本书是一部“活页式、立体化”教材，在教学形式组织、内容拓展、学习时间地点等方面具有较强的灵活性。限于篇幅及资料形式的最佳效果等方面的考量，知识点的案例代码以配套立体电子资源的形式提供，本书还提供了教案、任务工单模板、课件、微课视频、答案等电子立体资源。每个步骤的微课视频以“二维码”形式印刷在书中步骤标题旁，扫码后，即可观看B站上的视频教程。其他电子资源可以通过出版社获取。本书可作为高职高专院校、应用型本科院校在校大学生、IT培训机构学员、Web前端开发工程师、网站开发爱好者的教材。

前 言 Web 前端开发工程师等职位的需求量大、薪酬较高，本教材的教学内容 Bootstrap 和 jQuery 技术是 Web 前端开发的主流技术，也是“1+X”Web 前端开发职业技能证书考试的重要知识点。 教材在以“特种旅游”为背景的项目引导下，以 Web 前端项目开发的工作领域为依据，进行模块划分，模块中的“任务”设计兼顾 Web 前端开发岗位工作任务的“典型性”和“1+X”证书的知识点覆盖面。 本教材是一部“活页式、立体化”教材，在教学形式组织、内容拓展、学习时间和地点等方面具有较强的灵活性。出于教材篇幅限制以及资料形式的最佳效果展示等方面的考量，知识点的案例代码以配套立体电子资源的形式提供，本教材还提供了教案、任务工单模板、课件、微课视频、答案等电子立体资源。每个步骤的微课视频“二维码”印刷在教材中步骤标题旁，微信扫码后，即可观看 B 站（www.bilibili.com）上的视频教程。其他电子资源可以通过出版社获取。 1. 教材内容结构 模块 1 项目准备阶段 第 1 章 技术简介 第 2 章 Bootstrap 技术资料 第 3 章 jQuery 技术资料 模块 2 Bootstrap 静态网站制作 第 4 章 客户界面响应式页面制作 第 5 章 管理员界面响应式页面制作 模块 3 jQuery 交互效果优化 第 6 章 导航的完善与优化 第 7 章 用户数据交互的完善与优化 模块 4 动态网站搭建 第 8 章 Ajax 前后端数据异步交互 2. 教材使用建议 建议基础扎实的学习者在完成了“模块 1”中的开发环境准备工作后，直接进入“模块 2”开始项目开发，在“行动”导向下，有目的地查阅“模块 1”中的相关资料，完成任务相关知识点学习的同时，训练独立分析和解决问题的综合能力。任务以“工单”的形式发布，“任务工单”明确任务目标与步骤，并要求学习者完成任务后，在工单中做好过程性记录，教师可以根据完成情况辅助评估学生的学习成效。 “模块 1”中的资料卡将 Bootstrap 和 jQuery 知识图表化，便于理解记忆，可作为“1+X”证书理论考试的备考资料。“模块 2”至“模块 4”任务实现的源代码部分以程序填空的方式呈现，一方面启发、鼓励学习者主动思考，另一方面可作为“1+X”证书实操考试的训练。 任务工单列出了“1+X”证书知识点，每个步骤的“引导问题”标明了需要查阅的资料和针对性的学习内容。学习组织者可以根据教学计划学时，将相关的任务工单、资料卡、步骤指导、高保真图从活页册中抽取出来组织为一个“教学单元”。 起点较低的学习者可以根据自身情况在活页式教材中补充学习资料；在完成教材任务后，可进行拓展训练，以检验知识掌握的熟练度。教学组织者可根据学情自行设计冗余、拓展任务训练，添加进活页册中。 3. 教材适用对象 高职高专院校、应用型本科院校在校大学生、IT 培训机构学员、Web 前端开发工程师、网站开发爱好者。 4. 致谢 本教材的副主编侯仕平，任职于“1+X”Web 前端开发职业技能等级证书技术合作单位中慧云启科技集团有限公司。在此，对为本教程的编写做出贡献的师生和企业专家一并致谢。 因水平有限，本教材难免有不当之处，我们期待各位读者能够提出宝贵的意见和建议来敦促我们不断提高专业技能和教学水平，感谢本教材的每一位使用者。 编　者 2021年9月

目 录 模块1 项目准备阶段 第1章 技术简介 1.1 jQuery简介 1.2 Bootstrap简介 1.3 集成开发环境 第2章 Bootstrap技术资料 2.1 Bootstrap布局（Layout） 2.1.1 容器（Container） 2.1.2 栅格（Grid） 2.2 公共样式（Utilities） 2.2.1 边框（Border） 2.2.2 浮动清除（Clearfix） 2.2.3 关闭图标（Close icon） 2.2.4 颜色（Colors） 2.2.5 Display 属性（Display） 2.2.6 内嵌（Embed） 2.2.7 弹性盒（Flex） 2.2.8 浮动（Float） 2.2.9 图片替换（Image replacement） 2.2.10 交互（Interactions） 2.2.11 溢出（Overflow） 2.2.12 定位（Position） 2.2.13 读屏器（Screen readers） 2.2.14 阴影（Shadows） 2.2.15 尺寸（Sizing） 2.2.16 间距（Spacing） 2.2.17 延展链接（Stretched link） 2.2.18 文本（Text） 2.2.19 纵向对齐（Vertical alignment） 2.2.20 可见性（Visibility） 2.3 内容（Content） 2.3.1 图片（Image） 2.3.2 表格（Table） 2.3.3 插图（Figure） 2.4 Bootstrap组件（Components） 2.4.1 警告框（Alerts） 2.4.2 徽章（Badge） 2.4.3 面包屑导航（Breadcrumb） 2.4.4 按钮（Button） 2.4.5 按钮组（Button group） 2.4.6 卡片（Card） 2.4.7 轮播器（Carousel） 2.4.8 折叠面板（Collapse） 2.4.9 下拉菜单（Dropdowns） 2.4.10 表单（Form） 2.4.11 输入组（Input group） 2.4.12 巨幕（Jumbotron） 2.4.13 列表组（List group） 2.4.14 媒体对象（Media object） 2.4.15 模态框（Modal） 2.4.16 导航（Navs） 2.4.17 导航栏（Navbar） 2.4.18 分页（Pagination） 2.4.19 弹出框（Popover） 2.4.20 进度条（Progress） 2.4.21 加载动画（Spinners） 2.4.22 信息提示框（Toasts） 2.4.23 工具提示框（Tooltip） 2.5 图标（icon） 2.5.1 方式 1：＜img＞标签使用 2.5.2 方式 2：Web 字体使用 2.5.3 方式 3：SVG 文档片段使用 第3章 jQuery技术资料 3.1 jQuery核心方法 3.2 jQuery选择器 3.2.1 基本选择器 3.2.2 层次选择器 3.2.3 过滤选择器 3.2.4 属性选择器 3.2.5 表单选择器 3.3 jQuery操作DOM 3.3.1 读取和设置 HTML 元素 3.3.2 向 HTML 元素添加内容 3.3.3 删除 HTML 元素及其属性 3.3.4 复制和替换 HTML 元素 3.3.5 遍历 HTML 元素 3.3.6 操作 DOM 样式 3.4 jQuery 事件处理 3.4.1 事件管理方法 3.4.2 事件处理方法 3.5 jQuery动画 3.5.1 显示和隐藏 3.5.2 自定义动画 3.6 jQuery 对 Ajax 的支持 3.6.1 底层接口 3.6.2 快捷方法 3.6.3 辅助方法 3.6.4 事件方法 3.7 杂项 模块2 Bootstrap静态网站制作 第4章 客户界面响应式页面制作 4.1 任务1：Bootstrap4的安装与配置 4.1.1 步骤 1：下载 Bootstrap4.6 库 4.1.2 步骤 2：引用 Bootstrap 并测试 4.1.3 步骤 3：下载引用 jQuery 库 4.2 任务2：实现页面结构 4.2.1 步骤 1：页面头部设置 4.2.2 步骤 2：配置响应式容器和页脚 4.2.3 步骤 3：页眉导航栏的实现 4.2.4 步骤 4：站内搜索框的实现 4.2.5 步骤 5：导航内容的实现 4.2.6 步骤 6：实现导航内容的响应式折叠展开效果 4.3 任务3：实现首页主体部分 4.3.1 步骤 1：添加首页第一屏广告 4.3.2 步骤 2：添加首页“观鸟召集”中的图文单元 4.3.3 步骤 3：首页“观鸟召集”版块响应式布局 4.3.4 步骤 4：“观鸟召集”版块美化 4.3.5 步骤 5：添加“热门线路”版块中的图文单元 4.3.6 步骤 6：为“热门线路”添加“瀑布流”效果 4.3.7 步骤 7：为首页第一屏广告添加轮播器 4.4 任务4：实现“线路展示”页面 4.4.1 步骤 1：实现页面主体部分响应式布局 4.4.2 步骤 2：实现“线路区划导航栏”的响应式布局 4.4.3 步骤 3：实现“线路区划导航栏”页内导航功能 4.4.4 步骤 4：为“线路展示”版块添加标题 4.5 任务5：实现“线路详情”页面 4.5.1 步骤 1：实现页面中的“面包屑”导航 4.5.2 步骤 2：实现页面“线路详情”版块 4.5.3 步骤 3：实现页面“选项卡”版块导航功能 4.5.4 步骤 4：实现“行程”时间线 4.5.5 步骤 5：实现“评价”内容 任务延展 本章高保真图 第5章 管理员界面响应式页面制作 5.1 任务 1：实现“线路维护”页面导航部分 5.1.1 步骤 1：实现页面结构 5.1.2 步骤 2：实现页眉导航 5.1.3 步骤 3：实现侧边栏导航 5.2 任务2：实现“线路维护”页面内容部分 5.2.1 步骤 1：添加内容部分顶部 5.2.2 步骤 2：添加内容部分底部 5.2.3 步骤 3：实现数据表格 5.2.4 步骤 4：实现删除确认 5.3 任务3：“定制线路”页面实现 5.3.1 步骤 1：实现“基本信息”内容窗第一行控件 5.3.2 步骤 2：实现“基本信息”内容窗第二行控件 5.3.3 步骤 3：实现添加“行程”内容窗 5.3.4 步骤 4：实现添加“团费”内容窗 5.3.5 步骤 5：实现上传“图片”内容窗 任务延展 本章高保真图 模块3 jQuery交互效果优化 第6章 导航的完善与优化 6.1 任务1：用户界面导航栏“联系我们”处弹出二维码 6.1.1 步骤 1：jQuery 编程起步 6.1.2 步骤 2：为“联系我们”添加二维码图片弹出框 6.2 任务2：用户界面菜单活跃状态跟踪 6.2.1 步骤 1：设置导航目标 6.2.2 步骤 2：确定当前页面 6.2.3 步骤 3：动态设置导航条目“活跃”状态 6.3 任务3：管理系统“侧边栏导航”中横向展开子菜单 6.3.1 步骤 1：添加侧边栏“资源管理”导航模块 6.3.2 步骤 2：横向展开的子菜单内容制作 6.3.3 步骤 3：采用弹出框实现横向展开子菜单 6.4 任务4：管理系统侧边导航栏活跃状态跟踪 6.4.1 步骤 1：获取当前打开的文件所在的子目录 6.4.2 步骤 2：设置活跃状态的侧边栏导航子模块为“展开” 6.4.3 步骤 3：网页加载时动态设置“活跃”导航子模块图标 6.4.4 步骤 4：用户切换导航子模块时切换图标 任务延展 本章高保真图 第7章 用户数据交互的完善与优化 7.1 任务一：“定制线路”选项卡的动态启用 7.1.1 步骤 1：“行程”选项的动态启用 7.1.2 步骤 2：任意选项内容的动态启用 7.2 任务 2：“行程”编辑条目数的动态生成 7.2.1 步骤 1：获取行程天数 7.2.2 步骤 2：动态添加日程编辑卡片 7.2.3 步骤 3：动态设置日程编辑卡片的标题和 id 属性值（方法 1） 7.2.4 步骤 4：动态设置日程编辑卡片的标题和 id 属性值（方法 2） 7.2.5 步骤 5：设置折叠面板的状态，添加图标 7.3 任务3：“基本信息”用户输入合法性检查 7.3.1 步骤 1：设置表单控件验证模式 7.3.2 步骤 2：“交通方式”验证的实现 7.3.3 步骤 3：单击“下一步”按钮需通过验证才启用下一个选项 7.4 任务 4：添加、删除、撤销删除“团次”编辑条目的实现 7.4.1 步骤 1：添加“团次”编辑条目 7.4.2 步骤 2：全选与取消全选的实现 7.4.3 步骤 3：删除编辑条目与撤销删除 7.5 任务 5：团费编辑条目恢复及警告框动画效果制作 7.5.1 步骤 1：记录删除前被删除条目的位置 7.5.2 步骤 2：以淡出的动画效果原位恢复被删除的条目 7.5.3 步骤 3：警告框“飞入”动画的实现 7.5.4 步骤 4：自定义警告框的关闭 任务延展 本章高保真图 模块4 动态网站搭建 第8章 Ajax前后端数据异步交互 8.1 任务 1：管理员界面侧边栏导航的异步加载 8.1.1 步骤 1：将侧边栏导航单独形成一个文件 8.1.2 步骤 2：异步加载侧边栏导航文件 8.2 任务 2：酒店信息的异步读取 8.2.1 步骤 1：使用 mock.js 生成模拟酒店数据 8.2.2 步骤 2：编写异步获取酒店信息的 Ajax 请求 8.2.3 步骤 3：配置模拟后台路由，成功加载酒店数据 8.2.4 步骤 4：显示提示信息 8.3 任务 3：酒店信息的分页显示 8.3.1 步骤 1：实现酒店信息分页页码的动态添加 8.3.2 步骤 2：获取指定页码的数据 8.3.3 步骤 3：实现分页显示功能 8.4 任务 4：修改酒店信息 8.4.1 步骤 1：实现修改信息模态框 8.4.2 步骤 2：将指定记录的信息填写到表单控件中 8.4.3 步骤 3：发送异步请求，完成信息的修改 8.4.4 步骤 4：防止重复提交 Ajax 请求 任务延展 本章高保真图 参考文献