网页特效设计基础第11章-jQuery在HTML5中的应用

1、jQuery网页特效设计基础教程（慕课版）刘刚 主编新一代信息技术“十三五”系列规划教材 第11章 jQuery在HTML5中的应用 本章要点： HTML5的基础知识 使用HTML5+jQuery实现文件上传进度条的显示 使用HTML5+jQuery实现图片旋转效果 使用jQuery插件在HTML5中实现声音的播放 Web Storage编程应用 旅游信息网前台页面的实现 随着互联网的不断发展，新的技术不断涌现，HTML5 是其中突出的一项，它无疑会成为未来 10 年最热门的互联网技术之一。jQuery可以很好地支持HTML5的新特性，从而使我们设计出的网页更加美观、新颖。 本章我们将介绍 H

2、TML5的基础知识以及如何在网站开发中综合使用 jQuery +HTML5。11.1 HTML5 基础 11.1.1 HTML5 的新特性 HTML5 是基于各种各样的理念进行设计的，这些设计理念体现了对可能性和可行性的新认识。1兼容性 HTML5 的一个核心理念就是保持一切新特性平滑过渡。2实用性和用户优先 HTML5 规范是基于用户优先准则编写的，其主要宗旨是“用户即上帝”，这意味着在遇到无法解决的冲突时，规范会把用户放到第一位，其次是页面的作者，再次是实现者（或浏览器），接着是规范制定者，最后才考虑理论的纯粹实现。3化繁为简 HTML5要的就是简单、避免不必要的复杂性。HTML5 的口号

3、是“简单至上，尽可能简化”。因此，HTML5做了以下改进。以浏览器原生能力替代复杂的 JavaScript 代码。新的简化的 DOCTYPE。 新的简化的字符集声明。简单而强大的 HTML5 API。11.1.2 浏览器对 HTML5 的支持 目前绝大多数的主流浏览器都支持 HTML5，只是支持的程度不同。要测试浏览器对 HTML5 的支持程度，只需要访问 html5test 网站即可。例如，使用 Google Chrome 68.0.3440.106 版本测试HTML5的支持程度，得分为 515 分（满分为 550 分），如图 11-1 所示。图 11-1 使用 Google Chrome

4、68.0.3440.106 版本测试 HTML5 的支持程度 目前我们使用国外厂商的主流浏览器进行测试的结果如表 11-1 所示。表 11-1 国外厂商的主流浏览器对 HTML5 的支持程度 从表 11-1 中可以看到，目前对 HTML5 支持最好的国外厂商主流浏览器是 Google 公司的 Chrome 浏览器。目前我们使用国内厂商的主流浏览器进行测试的结果如表 11-2 所示。表 11-2 国内厂商的主流浏览器对 HTML5 的支持程度11.2 jQuery 与 HTML5 编程11.2.1 显示文件上传的进度条1HTML5 File API HTML5 File API 的设计初衷，是改

5、善基于浏览器的 Web 应用程序处理文件的上传方式，使文件直接拖放上传成为可能。HTML5 File API 用于对文件进行操作，使程序员可以对选择文件的表单控件进行操作，更好地通过程序对访问文件和文件上传等功能进行控制。在HTML5 File API中定义了一组对象，包括 FileList 对象、File 对象、Blob 对象、FileReader 对象等。（1）FileList：File 对象的一个类似数组的序列。（2）File：表示 FileList 中的一个单独的文件，File 对象的主要属性如下。name：返回文件名，不包含路径信息。lastModifiedDate：返回文件的最后修

6、改日期。size：返回 File 对象的大小，单位是字节。type：返回 File 对象媒体类型的字符串。2向服务器端发送 FormData 对象 使用 XMLHttpRequest 对象的 send()方法可以使用 FormData 对象模拟表单向服务器发送数据，语法如下：xmlhttp.send(formData); 其中创建 FormData 对象有如下两种方法。（1）使用 new 关键字：var formData = new FormData();（2）调用表单对象的 getFormData()方法获取表单对象中的数据：FormData = formElement.getFormDat

7、a(document.getElementById(form_id); 向 FormData 对象中添加数据可以使用 append()方法，语法如下：formData.append(key,value); 如图 11-2 所示，选择要上传的文件，之后单击“上传”按钮，可以看到图 11-3 所示的进度条，文件上传完毕后会出现图 11-4 所示的提示信息。图 11-2 选择上传文件 图 11-3 显示进度条图 11-4 显示上传文件信息11.2.2 Canvas 绘图 Canvas 元素是 HTML5 中新增的一个重要元素，专门用来绘制图形。在页面上放置一个 Canvas 元素，就相当于在页面上放

8、置了一块“画布”，可以在其中进行图形的描绘。 但是，在 Canvas 元素里进行绘画，并不是指用鼠标来作画。在网页上使用 Canvas 元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为 300 像素，高为 150 像素，用户可以自定义具体的大小或者设置 Canvas元素的其他特性。 在页面中加入了 Canvas 元素后，便可以通过 JavaScript 来自由地控制它。可以在其中添加图片、线条以及文字，也可以在里面进行绘图设置，还可以加入高级动画。可放到 HTML 页面中的最基本的 Canvas元素代码如下所示： Canvas 的元素的常用属性如下。id：Canvas 元素的标识 id。

9、 height：Canvas 画布的高度，单位为像素。width：Canvas 画布的宽度，单位为像素。 之间的字符串指定当前浏览器不支持 Canvas 时显示的字符。 jCanvas插件的脚本文件为 jcanvas.min.js，其中 jCanvas 插件中的主要绘图方法如表 11-3 所示。表 11-3 jCanvas 插件中的主要绘图方法说明 Canvas 采用 HTML 颜色表示法，可以使用下面 4 种方式表示。1颜色关键字 可以使用颜色关键字来表示颜色，例如，“red”表示红色，“blue”表示蓝色，“green”表示绿色等。2十六进制字符串 可以使用一个十六进制字符串表示颜色，格式

10、为#RGB。其中，R 表示红色集合，G 表示绿色集合，B 表示蓝色集合。例如：#FFF 表示白色，#000 表示黑色。3RGB 颜色值 也可以使用 rgb(r,g,b)格式表示颜色。其中 r 表示红色集合，g 表示绿色集合，b 表示蓝色集合。其中 r、g、 b 都是十进制数，取值范围是 0255。常用的 RGB 如表 11-4 所示。表 11-4 常用颜色的 RGB 表示4RGBA 颜色值 指定颜色也可以使用 rgba()的方法定义透明颜色，格式如下：rgba(r,g,b,a,alpha) 其中 r 表示红色集合，g 表示绿色集合，b 表示蓝色集合。r、g、b 都是十进制数，取值范围为 025

11、5。 Alpha 的取值范围为 01，用来设置透明度，0 表示完全透明，1 表示不透明。11.2.3 jQuery+HTML5 实现图片旋转效果 在 HTML4 中要实现图片的旋转效果需要编写大量的代码，而在HTML5 中，只需要在页面中创建新增的元素，通过导入jQuery 库调用该元素加载图片的方法就可以轻松实现图片的旋转效果了。 如图 11-6 所示，单击“逆时针旋转 90 度”，效果如图 11-7 所示，之后再单击“旋转 270 度”，效果如图11-8 所示。图 11-6 原始图像 图 11-7 逆时针旋转 90 度图 11-8 旋转 270 度11.2.4 基于 HTML5 播放声音的

12、 jQuery 插件 audioPlay 在 HTML5 出现以前，要在网页中播放多媒体是需要借助 Flash 插件的，因此浏览器需要安装 Flash 插件。HTML5 提供了新的标签，可以很方便地在网页中播放音频文件，而不需要安装插件。本节介绍一个基于 HTML5 播放声音的 jQuery 插件 audioPlay，使用它可以非常方便地在网页中播放音频。 可以使用 audioPlay 插件的 audioPlay()方法在鼠标指针经过一个 HTML 元素时自动播放指定的音频文件，这个音频文件可以是 mp3 文件或者 ogg 文件，方法的具体参数以及相关说明请参见表 11-5。表 11-5 au

13、dioPlay()方法的参数说明11.2.5 Web Storage 编程 随着 Web 应用的发展，客户端存储的使用也越来越多，而实现客户端存储的方式则是多种多样的。最简单而且兼容性最佳的方案是 Cookies，但是作为真正的客户端存储，Cookies 还是有以下这些不足。大小：Cookies 的大小被限制在 4KB。带宽：Cookies 是随 HTTP 事物一起发送的，因此会浪费一部分发送 Cookies 时使用的带宽。复杂性：Cookies 操作起来比较麻烦，所有的信息要被拼到一个长字符串里面。对 Cookies 来说，在相同的站点与多事务处理保持联系不是很容易。 在这种情况下，在 HT

14、ML5 中提供了一种在客户端本地保存数据的功能，它就是 Web Storage 功能。 Web Storage 功能，顾名思义，就是在 Web 上存储数据的功能，而这里的存储，是针对客户端本地而言的。 它包含两种不同的存储类型：sessionStorage 和 localStorage。不管是sessionStorage还是localStorage，它们都能支持在同域下存储 5MB 数据，这相比 Cookies 有着明显的优势。1sessionStorage 将数据保存在 session 对象中。所谓 session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户

15、浏览这个网站所花费的时间。session 对象可以用来保存在这段时间内所要求保存的任何数据。2localStorage 将数据保存在客户端本地的硬件设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。 这两种不同的存储类型区别在于，sessionStorage 为临时保存，而 localStorage 为永久保存。 目前 WebStorage 的 API 有以下这些。length：获得当前 WebStorage 中的数目。key(n)：返回 WebStorage 中的第 n 个存储条目。getItem(key)：返回指定 key 的存储内容，如果不存在则返回

16、null。注意，返回的类型是 String 字符串类型。setItem(key, value)：设置指定 key 的内容的值为 value。 removeItem(key)：根据指定的 key，删除键值为 key 的内容。clear：清空 WebStorage 的内容。11.3 综合实例：旅游信息网前台页面设计 旅游信息网是介绍关于长春旅游信息的网站，该网站主要包括主页、自然风光页、人文气息页、美食页、旅游景点页、名校简介页及留下足迹页等页面。11.3.1 网站预览 首页主要显示旅游信息网的介绍及相关图片，其运行效果如图 11-11 所示。图 11-11 旅游信息网首页 自然风光页面主要介绍长

17、春的一些自然风光，例如地理位置、气候等，运行效果如图 11-12 所示。图 11-12 自然风光页面 人文气息页面主要是对长春的体育事业和科学教育事业进行介绍，其运行效果如图 11-13 所示。图 11-13 人文气息页面 美食页面主要介绍长春的一些特色美食，其运行效果如图 11-14 所示。图 11-14 美食页面 旅游景点页面主要介绍长春的一些旅游景点，其运行效果如图 11-15 所示。图 11-15 旅游景点页面 名校简介页面主要介绍长春的知名高等院校，其运行效果如图 11-16 所示。图 11-16 名校简介页面 留下足迹页面主要是添加了一张 gif 格式的图片，并在其下方载入一段音频

18、文件，当打开本页面时，音频文件会自动播放；另外，在该页的右侧栏添加了一张留言的表单，访客可以在此留言，其运行效果如图 11-17所示。图 11-17 留下足迹页面11.3.2 网站主体结构设计 旅游信息网网页的主体结构如图 11-18 所示。 这些网页中有几个主要的 HTML5 结构，分别是 header元素、aside元素、section元素及footer元素。图 11-18 旅游信息网所有页面主体结构图11.3.3 HTML5 结构元素的使用 在设计旅游信息网前台页面时，主要用到了 HTML5 的一些主体结构元素，分别是 header 结构元素、aside 结构元素、section 结构元

19、素和 footer 结构元素，在大型的网站中，一个网页通常都由这几个结构元素组成。header 结构元素：通常用来展示网站的标题、企业或公司的 logo 图片、广告（Flash 等格式）、网站导航条等。aside 结构元素：通常用来展示与当前网页或整个网站相关的一些辅助信息。例如，在博客网站中，可以用来显示博主的文章列表和浏览者的评论信息等；在购物网站中，可以用来显示商品清单、用户信息、用户购买历史等；在企业网站中，可以用来显示产品信息、企业联系方式、友情链接等。Aside 结构元素可以有很多种形式，其中最常见的形式是侧边栏。section 结构元素：一个网页中要显示的主体内容通常被放置在 s

20、ection 结构元素中，每个 section 结构元素都应该有一个标题来显示当前展示的主要内容的标题信息。每个 section 结构元素中通常还应该包括一个或多个 section 元素或 article 元素，用来显示网页主体内容中每一个相对独立的部分。footer 结构元素：通常，每一个网页中都具有footer 结构元素，用来放置网站的版权声明和备案信息等，也可以放置企业的联系电话和传真等联系信息。11.3.4 网站公共部分设计 在本网站的网页中，有两个公共的部分，分别是header 元素中的内容和 footer 元素中的内容。这两部分是本站每个网页中都包含的内容。1设计网站 header

21、 header 元素是一个具有引导和导航作用的结构元素，很多企业网站中都有一个非常重要的 header 元素，一般位于网页的开头，用来显示企业名称、企业 logo 图片、整个网站的导航条以及 Flash 形式的广告条等。 在本网站中，header 元素中的内容包括：网站的 logo 图片、网站的导航以及通过 jQuery 技术来循环显示的特色图片，同时还为这些图片添加了说明性关键字。 header 元素中的内容在浏览器中的显示结果如图11-19 所示。图 11-19 旅游信息网 header 元素在浏览器中的显示 网站公共部分的 header 元素的结构如图 11-20 所示。图 11-20

22、公共部分 header 元素的结构header 元素中显示网站名称的代码分析。 在div中存放网站的名称及 logo 图片，它在浏览器中的页面显示如图 11-21 所示。图 11-21 网站名称及 logo 的显示 DIV 元素主要是显示页面左边的 logo 图片，同时通过显示网站的名称“我爱长春”，并通过属性对“长春”两个字进行了加粗。其实现的代码如下： 我爱长春 header 元素中 nav 元素的代码分析。 nav 元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。nav元素可以被放置在 header 元素中，作为整个网站的导航条来使用。nav 元素中

23、可以存放列表或导航地图，或其他任何可以放置一组超链接的元素。在本网站中，网站标题部分的 nav 元素中放置了一个导航地图，如图 11-22所示。图 11-22 应用 nav 元素实现的网站导航条header 元素中显示宣传图片代码分析。 接下来我们来看一下在 header 元素中显示宣传图片，这些宣传图片被放置在 DIV 元素中，该元素中放置 3张图片，并通过 jQuery 技术循环播放这 3 张图片；同时，在宣传图片的右侧显示对应的说明性文字，这些文字在显示时是以列表形式出现的。宣传图片在浏览器中显示的结果如图 11-23 所示。图 11-23 通过 jQuery 技术在 header 元素

24、中实现图片的循环播放2设计网站 footer footer 元素专门用来显示网站、网页或内容区块的脚注信息，在企业网站中的 footer 结构元素通常用来显示版权声明、备案信息、企业联系电话及网站制作单位等内容。 本实例中，网站页面的 footer 元素在浏览器中的显示结果如图 11-24 所示。图 11-24 通过 footer 元素实现的网站版权说明11.3.5 网站主页设计1网站介绍及相关图片 在 HTML5 网站中，每个网页所展示的主体内容通常都存放在 section 结构元素中，而且通常带有一个标题元素 header。在主页中，网站介绍及相关图片的显示结果如图 11-25 所示。图 11-25 网站介绍及相关图片的显示结果2左侧导航的实现 aside 元素用来显示当前网页主体内容之外的、与当前网页显示内容相关的一些辅助信息。例如，可以是一些关于网站的宣传语，或者是网站管理者认为比较重要的信息。aside 元素的显示形式可以是多种多样的，其中最常用的形式是侧边栏的形式。 在主页中的 aside 元素内应用到两个 article 元素，一个 article 元素用以显示对长春一些特点的概述，当单击这些概述的文字时，将以定义列表的形式对这些概述的文字进行解释；另外一个 article 元素显示一张长春区域的地图，并在图片的下方对各区的名称进行链接。主页左侧导航在浏览器中的效