jQuery网页特效设计基础教程（慕课版）（第2版）课件 第11单元 jQuery 在HTML5 中的应用.pptx

第11单元jQuery在HTML5中的应用jQuery网页特效设计基础教程（慕课版）（第2版）

了解HTML5的新特性。了解浏览器对HTML5的支持。掌握jQuery与HTML5编程的常用功能。教学目标pedagogicalobjectives能够熟练使用HTML5。能够熟练使用jQuery与HTML5进行编程。增强对现代技术趋势的敏感性与适应力，掌握HTML5与jQuery的协同应用，综合运用所学设计现代化网页，培养创新能力与团队项目合作精神。

目录导航11.1HTML5基础11.3项目实战：旅游信息网前台页面设计11.2jQuery与HTML5编程

11.1.1HTML5的新特性兼容性化繁为简视频和音频用户优先和实用性语义化标记Canvas绘图

11.1.1HTML5的新特性表单控件WebWorkersWebStorage本地存储地理位置APIWebSocket多任务处理响应式设计

11.1.2浏览器对HTML5的支持01OPTION国外厂商的主流浏览器对HTML5的支持程度02OPTION国内厂商的主流浏览器对HTML5的支持程度浏览器版本得分Chrome68528Opera（欧朋浏览器）45518Firefox59491InternetExplorer（IE浏览器）11369InternetExplorer（Edge浏览器）18496Safari（苹果浏览器）11.2477浏览器版本得分傲游浏览器5.2518猎豹安全浏览器6.5519360安全浏览器9.1507百度浏览器8.7483QQ浏览器10.2302搜狗高速浏览器8.0516

目录导航11.1HTML5基础11.3项目实战：旅游信息网前台页面设计11.2jQuery与HTML5编程

11.2.1显示文件上传的进度条01OPTIONHTML5FileAPIHTML5FileAPI用于对文件进行操作，使程序员可以对选择文件的表单控件进行操作，更好地通过程序对访问文件和上传文件等功能进行控制。HTML5FileAPI中定义了一组对象，包括FileList对象、File对象等。document.getElementById(file类型的input元素id).files;FileList对象：File对象的一个类似数组的序列。File对象：表示FileList数组中的一个单独的文件。File对象的主要属性如下。在JavaScript中，获取file类型的input元素的FileList数组的方法如下：document.getElementById(file类型的input元素id).files[index];获取FileList数组中的File对象的方法如下：

11.2.1显示文件上传的进度条02OPTION向服务器端发送FormData对象varformData=newFormData();（1）使用new关键字：（2）调用表单对象的getFormData()方法获取表单对象中的数据：向FormData对象中添加数据可以使用append()方法，语法如下：FormData=formElement.getFormData(document.getElementById(form_id));formData.append(key,value);

11.2.1显示文件上传的进度条02OPTION向服务器端发送FormData对象【例11-1】显示文件上传的进度条。（1）创建index.html文件，构建上传文件的表单以及进度条。主要代码如下：（2）给按钮添加click事件，创建FormData对象并将文件数据添加至其中，创建XMLHttpRequest对象向服务器端发送FormData对象，实现无刷新上传，并在progress元素中显示上传进度。代码如下：

11.2.1显示文件上传的进度条02OPTION向服务器端发送FormData对象【例11-1】显示文件上传的进度条。

11.2.1显示文件上传的进度条02OPTION向服务器端发送FormData对象【例11-1】显示文件上传的进度条。（3）编写处理上传文件的服务器端脚本upfile.php文件，首先定义上传文件路径，然后进行判断，如果指定上传目录存在，进行上传操作；如果上传文件成功，返回文件路径、文件名称、文件类型、文件大小以及临时文件组成的字符串。内容如下：运行结果

11.2.2Canvas绘图canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面中放置一个canvas元素，就相当于在页面中放置了一块“画布”，可以在其上进行图形的绘制。可放在