拖放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. IOS 学习日志 2015-3-16

    Objective--C 一 关键字 self 相当于java中的this,但是又有不同 它即可一代替对象,也可以代替类, 也就是说它既可以用在静态方法中又可以用在动态方法中. super 相当于父类 ...

  2. 把传统的基于sql的企业信息中心迁移到spark 架构应该考虑的几点思考...[修改中]

    把传统的基于sql的企业信息中心迁移到spark 架构应该考虑的几点 * 理由: 赶时髦,  这还不够大条么? > 数据都设计为NO-SQL模式, 只有需要search的才建立2级索引. 就可以 ...

  3. 【Android】 Sqlite3 not found

    调试机没有sqlite3命令文件 导入即可 sqlite3 http://pan.baidu.com/s/1bohTMiz //(使用老版sqlite3需要导入libncurses.so文件至/sys ...

  4. js 的基础知识变量

    什么是变量? 变是一个存储和释放我的数据! 我们用var关键字来声名变量,声名多个变量时用逗号来隔开 在变量没有赋值之前,显示是一个未定义的变量! <script> var a; var ...

  5. DataGridView出现大红叉--在使用多线程访问数据源时

    datagridview 的数据源操作在一个方面里面处理 不要多个地方处理 并且处理的时候要加锁 红叉 应该是多线程操作出现的. try catch  只是起到 捕获异常的功能,但是一旦出现了这种错误 ...

  6. nexus3添加第三方jar

    最近在看maven的打包及管理,然後就看到nexus,自己在安裝的時候就下載了最新版的nexus-3.2.0-01-win64,按照文档部署后启动,浏览.之前一致使用的是2.0的,所以还是需要导出点点 ...

  7. JNI/NDK开发指南（二）——JVM查找java native方法的规则

    通过第一篇文章,大家明白了调用native方法之前,首先要调用System.loadLibrary接口加载一个实现了native方法的动态库才能正常访问,否则就会抛出java.lang.Unsatis ...

  8. TiDB：支持 MySQL 协议的分布式数据库解决方案

    [编者按]TiDB 是国内 PingCAP 团队开发的一个分布式 SQL 数据库.其灵感来自于 Google 的 F1,TiDB 支持包括传统 RDBMS 和 NoSQL 的特性.在国内 ITOM 管 ...

  9. Chapter 32：动态规划一 总结

    今天做了四道dp题,分数306. 就从我的做题顺序开始讲.. 首先是第四题,明显的记录模数DP,很快打出来了. 后来做完之后回来拍第四题,也没有什么问题,就AC了. 然后是第三题,我的性子真是太急了, ...

  10. [topcoder]BinaryCards

    现在觉得有空时可以刷一下topcoder的DIV 2的Lvl 3的题目.感觉和刷LeetCode和WikiOi都是不一样的. http://community.topcoder.com/stat?c= ...