拖放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. Morgan Stanley telephone interview

    Today is Monday, April 28. I get a telephone call from Morgan Stanley in Shanghai. My examiner is a ...

  2. Struts2配置文件_常量属性_独立测试分析

    <constant name="struts.devMode" value="true" /> 设置开发模式,可以了解详细信息,该属性指定视图标签默 ...

  3. Hack--兼容性测试

    CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效 ...

  4. foreach的一点理解

    首先什么样的数据才能实现foreach 1 实现IEnumerable这个接口 2 有GetEnumerable()这个方法 然后为啥实现这个接口或者有这个方法就可以实现foreach遍历 首先我先用 ...

  5. thinkPHP add、save无法添加、修改不起作用

    案例:数据库新添加一字段,修改值不成功.解决方案:将Runtime/Data/_fields/下面的字段缓存删除,或者直接删除整个Runtime文件也是可以的分析:由于Thinkphp,采用字段缓存机 ...

  6. 操作系统和Python的发展历程

    一:操作系统的发展历史: 操作系统:什么是操作系统?我们首先想到的是电脑,,也就是所谓的Windows8,Windows7,或者XP系统和Windows10,当然也包括我们手机的安卓系统或者IPhon ...

  7. 列表页url参数格式分析【求指教】

    运营对列表页url制定静态化模式,与区区观点相悖.遂请大家指教点解. 动态参数包含6个,分别是: 1认证(有机),2品类(水果),3地区(丰台),4状态(众筹中),5排序(评分),6分页 使用状态非常 ...

  8. 解决treeview的同一节点单击多次的执行问题

    在使用treeview的AfterSelect函数的时候,单击同一节点多次无响应. 解决方法: 将首次单击的节点信息保存到selectTreeNode: 然后使用click函数,判断单击的节点是否和s ...

  9. 服务器慢 mysql-bin.000001文件占满磁盘的原因与解决

    发现 VPS 服务器上的网站反应超级慢,简单的重启.重启各主要服务,发现mysql 的反应极其不正常. 一方面是问题,这与站点访问量有关.开始时从mysql 的配置文件 my.cnf 考虑,但志文工作 ...

  10. hdu 4764 && 2013长春网赛题解

    一个组合游戏题. 解答: 从后面往前面推,首先n-1是必胜位,然后前面的k位是必败位,如此循环下去.所以题目就容易了! 代码: #include<cstdio> using namespa ...