HTML5移动前端开发基础与实战（第2版）（微课版）-PPT 模块7

模块7

jQuery框架及Bootstrap演练本模块先讲解jQuery框架的作用及常用功能、AJAX的用途。在此基础上，继续讲解如何使用jQueryAjax读取JSON格式数据文件。最后通过一个翻牌游戏进一步熟悉jQuery的常用语法和具体使用方法。HTML5移动前端开发基础与实战（微课版）熟练掌握jQuery、Bootstrap框架的使用方法。知识目标1通过对jQuery、Bootstrap框架的学习，提高自学能力，能根据项目或企业的需要学习并使用其他框架。职业目标2熟练掌握jQueryAJAX。培养团队协同工作能力。培养持之以恒的精神。素质目标前端框架通常基于HTML、CSS、JavaScript，简洁灵活，可加速前端开发。常用的前端框架有jQuery、Bootstrap、Vue.js、Angular等。对于开发人员，掌握HTML、CSS、JavaScript的相关知识是基础，在此基础上熟悉一些框架可极大地提高开发效率。目前网络上有大量开源的JavaScript框架，jQuery是最流行的JavaScript框架之一，市面上的很多其他框架也借鉴了jQuery的优点、模式。7.1

jQueryjQuery是一个JavaScript函数库，jQuery库常用功能如下。

HTML元素选取、操作。

CSS操作。

HTML事件函数。

HTMLDOM遍历和修改。

AJAX。除此之外，jQuery还提供了大量的常用插件进行快速开发。7.1.1jQuery简介5G7.1.2使用jQueryjQuery库是一个JavaScript文件，使用<script>标签引用，如：<scriptsrc="jquery/jquery-3.3.1.min.js"></script>使用jQuery选择元素和添加事件。演练7.17.1.3常用jQuery操作设置或获取HTML元素内容。演练7.2添加、删除、遍历HTML内容。演练7.3jQuery操作CSS。演练7.4使用链式语法把方法连在一起。演练7.57.1.4jQueryAJAX读取JSON数据文件新建一个JSON文件，文件中内容是常用的通讯录。然后通过jQueryAjax读取JSON文件并显示在网页中。演练7.6在客服页面中读取聊天记录文件内容并显示。演练7.7通过jQueryAJAX方法，可以从服务器上请求TXT、XML或JSON等格式的数据，然后将这些外部数据载入网页适当的元素中。为教学方便，本书中和AJAX请求有关的测试在HBuilderX中进行。7.1.5jQuery演练：翻牌游戏黑色J、Q、K各两张，共6张。红色J、Q、K各两张，共6张。以上共12张牌，先全部显示背面。单击第一张翻牌，单击第二张翻牌，并与第一张比较，如果相同，则得分并去掉这两张牌。如果不相同，则这两张牌回到背面模式。全部牌匹配成功，则游戏结束。翻牌游戏功能简介

分步骤实战演练步骤1：设置游戏的背景、桌面、牌面大小及位置，并显示一张牌的正面。演练7.8步骤2：生成12张牌，显示牌背面。演练7.9步骤3：顺序显示12张牌正面。演练7.10步骤4：显示12张牌背面，单击可翻牌。演练7.11步骤5：随机放置12张牌，添加计分板。演练7.12步骤6：翻牌逻辑、统计得分。演练7.13Bootstrap是非常受欢迎的前端组件库，用于开发响应式布局、移动设备优先的Web项目。7.2

BootstrapBootstrap是一套用于HTML、CSS和JavaScript开发的开源工具集，利用Sass变量和大量mixin、响应式网格系统、可扩展的预制组件，基于jQuery的强大的插件系统，能够快速开发出原型或者构建整个项目。本节基于Bootstrap4进行讲解。7.2.1Bootstrap简介5G本小节将创建一个基于Bootstrap响应式布局的前端项目，相关网页能够在PC端和移动端自适应显示。

页头：包括网页标题和导航栏，导航栏中使用下拉插件，屏幕较宽时显示为菜单，较窄时显示为折叠导航栏。

轮播图：实现轮播效果，且呈现图片由大缩小的动画。

网站介绍：

采用网格系统布局，以图片和标题的形式展示，鼠标指针移入时图片放大。

表单提交：利用弹性盒子实现表单左侧的介绍相对于表单的高度垂直对齐。项目在PC端、移动端的效果如图所示。7.2.2Bootstrap项目演练

分步骤实战演练设计页头：包括网页标题和导航栏设计，导航栏中使用下拉插件，屏幕较宽时显示为菜单，较窄时显示为折叠导航栏。演练7.14设计轮播图：实现轮播效果，且呈现图片由大缩小的动画。演练7.15设计网站介绍：采用网格系统布局，以图片和标题的形式展示网站介绍，鼠标指针移入时图片放大。演练7.16设计表单提交：利用弹性盒子实现表单左侧的介绍，相对于表单的高度垂直对齐。演练7.17思考掌握使用