拖放API

HTML5实现了直接拖放操作API，简化HTML4利用mousedown、mousemove等事件实现的操作

实现拖放的步骤

1要将被拖动元素的draggable属性设置为true，img元素与a元素（必须指定href）默认允许拖放

2编写有关拖放的事件处理代码

DataTransfer对象的属性与方法

设定拖放时的视觉效果

dropEffect属性（目标元素）与effectAllowed属性（源元素）结合起来可以设定拖放时的视觉效果，

1如果effectAllowed属性设定为none，则不允许拖放元素

2如果dropEffect属性设定为none，则不允许被拖放到目标元素

3如果effectAllowed属性设定为all或不设定，则dropEffect元素允许被设定为任何值

4如果effectAllowed属性设定为具体效果（不为none、all），则dropEffect属性必须设定为完全相等的效果，否则不允许拖放

自定义拖放图标，指得是拖动元素过程中，位于鼠标指针下方的小图标，上面提到的setDragImage方法，需要3个参数：图标元素、拖放图标离鼠标指针x轴的偏移量、离y轴的偏移量

第5章 绘制图形

略

第6章 多媒体播放

略

第7章 本地存储

Web Storage：与cookie相比，具有存储容量大，简单等优点

Web Storage分为两种：

sessionStorage，理解为临时数据，关闭浏览器后失效

localStorage，保存在本地中

保存时不允许重复相同的键名，保存后可以修改键值，但不允许修改键名

sessionStorage

保存数据sessionStorage.setItem(key,value);

读取数据变量=sessionStorage.getItem(key);

localStorage

保存数据localStorage.setItem(key,value);

读取数据变量=localStorage.getItem(key);

本地数据库

HTML5中有一种“SQLLite”文件型SQL数据库，存储在本地

有两个步骤1）创建访问数据库的对象2）使用事务处理

var db=openDatabase('mydb','1.0','Test DB',2*1024*1024);

需要4个参数，参数依次为数据库名称、版本号、描述以及大小，该方法返回创建后的数据库访问对象，如果数据库不存在，则创建该数据库

第8章 离线应用程序

Web应用程序的本地缓存是通过每个页面的manifest文件来管理的，它是一个简单的文本文件，以清单形式列举了需要被缓存或不需要被缓存的资源文件的文件名称，以及这些资源文件的访问路径

可以为每个页面/整个Web应用程序指定manifest文件，示例

在manifest文件中，第一行必须是“CACHE MANIFEST”文字，告诉浏览器本文件的作用，即对本地缓存中的资源文件进行具体设置，同时对服务器进行配置（让服务器支持text/cache-manifest）

在微软的IIS服务器中步骤：1）右键选择默认网站或需要添加类型的网站，弹出属性对话框2）选择“HTTP头”标签3）在MIME映射下，单击文件类型按钮4）在打开的MIME类型对话框中单击新建按钮5）在关联扩展名文本框输入“manifest”，在内容类型文本框中输入“text/cache-manifest”，点击确定

在manifest中，注释以#开头最好加上版本号

接下来指定资源文件，路径可以是相对路径，也可以是绝对路径，每个资源一行

指定资源文件时，可以把资源文件分为三类：CACHE NETWORK FALLBACK

在CACHE类别中指定需要被缓存在本地的资源文件，如果一个页面中有manifest文件，浏览器会自动缓存（如果未指定，默认为CACHE，直到发现其他类型）

NETWORK类别显式指定不进行本地缓存，这些这些资源只有在客户端与服务器建立连接时才可以访问，本例中为*

FALLBACK类别中每行指定两个资源文件，第一个资源文件为能够在线访问时使用的文件，第二个资源文件为不能在线访问时使用的备用资源文件

<html manifest="hello.manifest">

　　...

</html>

要对本地缓存区进行修改时直接更改manifest文件即可，浏览器会自动检测manifest文件，自动更新

浏览器与服务器的交互过程

举例：

一个http://Lulingniu网站，以index.html为主页，该页使用index.manifest文件，该文件请求本地缓存index.html hello.js hello1.jpg hello2.jpg这几个资源文件

首次访问Lulingniu网站时：1）浏览器请求访问http://Lulingniu 2）服务器返回index.html 3）浏览器解析页面，请求所有资源文件，CSS文件JS文件图像文件等 4）服务器返回所有资源 5）浏览器处理manifest文件，请求manifest文件所有被要求缓存的文件 6）服务器返回文件 7）浏览器对缓存进行更新，触发一个事件

再次打开http://Lulingniu时：1）浏览器请求 2）浏览器发现页面被本地缓存，使用缓存页面 3）解析缓存中的资源 4）浏览器向服务器请求manifest文件 5）服务器返回304代码，通知浏览器没发生变化

manifest文件如果发生变化，浏览器重新请求manifest文件中被要求的资源，之后再触发一个事件

applicationCache对象

这个对象代表了本地缓存，当浏览器对本地缓存进行更新时，会触发applicationCache对象的updateready事件，通知本地缓存资源文件已下载完毕

applicationCache.onUpdateReady=function(){...}

它还有一个方法：applicationCache.update检查manifest文件是否有更新，有的话立即请求manifest文件之后再下载资源，可以手工调用

setInterval(function(){applicationCache.update();},5000);

swapCache方法

它用来手工执行缓存的更新，只能在UpdateReady事件发生后调用，applicationCache的UpdateReady事件表示待更新内容已下载完毕

applicationCache.onUpdateReady=function(){

　　alert("正在更新本地缓存...")

applicationCache.swapCache();

　　alert("本地缓存已被更新，请刷新页面");

};

如果不调用swapCache方法，下载的资源不会马上更新，下一次打开本页面才会更新，另外swapCache方法更新了本地缓存，并不意味着页面上的图片和脚本也被立即更新，还是要重新打开页面

applicationCache对象的事件

除了update方法和swapCache方法以外，还有一系列事件

首次请求网页过程中（上面的例子），发现该网页具有manifest属性，触发checking事件，检查manifest文件是否存在，不存在触发error事件，表示未找到，不执行之后的处理manifest文件的过程；服务器返回所有要求本地缓存的文件，浏览器触发downloading事件，开始下载这些资源，周期性触发progress事件，开发人员可以通过编程手段获取进度；下载结束触发cache事件，表示首次缓存成功

再次请求过程中，manifest文件是否更新过，未更新则触发noupdate事件，不执行后续下载操作，若更新了，下载完成了不是触发cache事件，而是触发updateready事件

在访问缓存名单时返回HTTP404错误（页面未找到）或者410错误（永久消失）触发obsolete事件

整个过程中，发生任何与本地缓存有关的错误，触发error事件

HTML5与CSS3权威指南.pdf4的更多相关文章

  1. Html5与CSS3权威指南 百度云下载

    Html5与CSS3权威指南 百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3

  2. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  3. 【HTML5 4】《HTML5与CSS3权威指南》 step1 导读

    一.教程重点:以 HTML5和CSS3的新功能和新特性 为导向,辅之以 实战型实例页面 二.内容概况: 第1部分:详细讲解HTML5相关知识,包括 各主流浏览器对HTML5的支持情况. HTML5与H ...

  4. HTML5与CSS3权威指南.pdf6

    第11章 获取地理位置信息 HTML5为window.navigator对象新增了一个geolocation属性 取得当前地理位置 void getCurrentPosition(onSuccess, ...

  5. HTML5与CSS3权威指南笔记案例1

    第1章 <!DOCTYPE html> <meta charset = "UTF-8"> <title> Search </title&g ...

  6. HTML5与CSS3权威指南

    第一章:Web时代的变迁 HTML5放心使用的理由: 兼容性:HTML5在老板本的浏览器上也可以正常运行: 实用性:HTML5内部并没有封装什么很复杂的,不切实际的功能,而只是封装了简单实用的功能: ...

  7. 读《HTML5与CSS3权威指南（上册）》笔记

    第二章 1.内容类型:“text/html”.DOCTYPE声明:<!DOCTYPE html>.指定字符编码:<meta charset="utf-8"> ...

  8. HTML5与CSS3权威指南.pdf9

    第21章 Media Queries相关样式 该模块中允许添加媒体查询(media query)表达式,用以指定媒体类型,根据媒体类型来选择使用的样式(显示器.便携设备.电视机) 使用方法@media ...

  9. HTML5与CSS3权威指南.pdf8

    第17章 与背景和边框相关的样式 与背景相关的新增属性 background-clip指定背景的显示范围 background-origin指定绘制背景图像时的起点 background-size指定 ...

随机推荐

  1. ubuntu mint 开机启动项管理

    使用工具 sysv-rc-conf,需要安装. 点击打开链接http://blog.chinaunix.net/uid-21516619-id-1825027.html

  2. PL/SQL学习（二）条件和循环语句

      原文参考:http://plsql-tutorial.com/   PLSQL条件语句 IF THEN ELSE STATEMENT 1) IF condition THEN  statement ...

  3. React组件三

    <script> <!-- getDefalutPros 设置组件的默认值--> <!--var Mytitle=React.createClass({ getDefau ...

  4. 字符串匹配的python实现

    所有字符串匹配算法的核心问题是,当出现不匹配时,如何向后移动模式串 一.暴力匹配算法 如果要匹配一个字符串s 和一个模式串p,则从i=0开始依次匹配s[i:(i+len(p))],简单粗暴,代码如下: ...

  5. EntityFramework动态组合多排序字段

    前言:在使用EF当中,肯定会遇到动态查询的需求,建立一个公共调用的动态组合表达式查询也是必不可少的,以下是建立动态组合多排序字段做个记录,供以后调用 1.建立一个结构,用于多个排序字段组合,这个结构体 ...

  6. Dynamips做CCNA的实验，说是找不到telnet的解决方案

    01.如果你的系统是32位的系统. 控制面板-程序与功能-启动或关闭windows功能-开启telnet(重启计算机就可以用telnet了) 02.如果你的系统是64位的系统. (1)控制面板-程序与 ...

  7. 移动应用产品开发-android开发（三）

    历时一个多月的时间,这款APP算是开发完成了,最近在测试完善中,比较空闲好好总结下. 之前两次已经提到开发过程中的主要的知识点,这次主要总结下解决问题方法,http请求和安全. 首先讲下解决问题的方法 ...

  8. [wikioi]奇怪的梦境

    http://wikioi.com/problem/2833/ 拓扑排序,居然1A,哈哈. #include <cstdio> #include <iostream> #inc ...

  9. [转贴]C++开源库

    C++在“商业应用”方面,曾经是天下第一的开发语言,但这一 桂冠已经被java抢走多年.因为当今商业应用程序类型,已经从桌面应用迅速转移成Web应 用.当Java横行天下之后,MS又突然发力,搞出C# ...

  10. SPRING IN ACTION 第4版笔记-第二章-004-Bean是否单例

    spring的bean默认是单例,加载容器是会被化,spring会拦截其他再次请求bean的操作,返回spring已经创建好的bean. It appears that the CompactDisc ...