跳进html5天坑。。


html5

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后，Web世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

html5是如何起步的

HTML5 是 W3C 与 WHATWG 合作的结果。
编者注：W3C 指 World Wide Web Consortium，万维网联盟。
编者注：WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

为 HTML5 建立的一些规则：

新特性应该基于HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明

新特性

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

对浏览器的支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

获取class列表属性

classList

length : class的长度
add() : 添加class方法
remove() : 删除class方法
toggle() : 切换class方法

1
2
3
4
5
6
var oDiv = document.getElementById('div1');
	//alert( oDiv.classList );  //类似数组的对象
	//alert( oDiv.classList.length );  //3
	//oDiv.classList.add('box4');
	//oDiv.classList.remove('box2');
	oDiv.classList.toggle('box2');

JSON的新方法

parse() : 把字符串转成json（字符串中的属性要严格的加上引号）
stringify() : 把json转化成字符串（会自动的把双引号加上）

新方法与eval的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//eval : 可以解析任何字符串变成JS
//parse : 只能解析JSON形式的字符串变成JS  (安全性要高一些)

/*var str = 'function show(){alert(123)}';
eval(str);
show();*/

/*var str = 'function show(){alert(123)}';
JSON.parse(str);
show();*/

/*var str = '{"name":"hello"}';   //一定是严格的JSON形式
var json = JSON.parse(str);
alert( json.name );*/

var json = {name : "hello"};
var str = JSON.stringify(json);
alert( str );

深度克隆新对象

1
2
3
4
5
6
7
var a = {
	name : { age : 100 }
};
var str = JSON.stringify(a);
var b = JSON.parse(str);
b.name.age = 200;
alert( a.name.age );

兼容其他浏览器：http://www.json.org/下载json2.js

data自定义数据

dataset
data-name : dataset.name
data-name-first : dataset.nameFirst
Data数据在jquery mobile中有着重要作用

1
2
3
4
5
<div id="div1" data-hhardyy="hhardyy" data-hhardyy-all="hhardyy">div</div>

var oDiv = document.getElementById('div1');
alert( oDiv.dataset.hhardyy );
alert( oDiv.dataset.hhardyyAll );

延迟加载JS

JS的加载会影响后面的内容加载
很多浏览器都采用了并行加载JS，但还是会影响其他内容
这就要用到Html5的defer和async或者Labjs库
defer : 延迟加载，会按顺序执行，在onload执行前被触发
async : 异步加载，加载完就触发，有顺序问题

历史管理

onhashchange ：改变hash值来管理
history ：（服务器下运行）
pushState : 三个参数 ：数据 标题 地址(可选)
popstate事件 : 读取数据 event.state
注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面
例子：摇七个号

拖放事件

draggable ：设置为true，元素就可以拖拽了

拖拽元素事件 : 事件对象为被拖拽元素

dragstart , 拖拽前触发
drag ,拖拽前、拖拽结束之间，连续触发
dragend , 拖拽结束触发

目标元素事件 : 事件对象为目标元素

dragenter , 进入目标元素触发，相当于mouseover
dragover ,进入目标、离开目标之间，连续触发
dragleave , 离开目标元素触发，相当于mouseout
drop , 在目标元素上释放鼠标触发

事件执行顺序

事件的执行顺序 ：drop不触发的时候
dragstart > drag > dragenter > dragover > dragleave > dragend

事件的执行顺序 ：drop触发的时候(dragover的时候阻止默认事件)
dragstart > drag > dragenter > dragover > drop > dragend

解决火狐下的问题:必须设置dataTransfer对象才可以拖拽除图片外的其他标签

1
2
var ev = ev || window.event;
ev.dataTransfer.setData('name','hhardyy');

dataTransfer对象:

setData() : 设置数据 key和value(必须是字符串)
getData() : 获取数据，根据key值，获取对应的value

effectAllowed:
设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)=(ev.dataTransfer.effectAllowed = ‘link’);
setDragImage:
三个参数(指定的元素，坐标X，坐标Y):ev.dataTransfer.setDragImage(oImg,0,0);

files:获取外部拖拽的文件，返回一个filesList列表,filesList下有个type属性，返回文件的类型

FileReader(读取文件信息)

readAsDataURL：参数为要读取的文件对象，将文件读取为DataUrl
onload：当读取文件成功完成的时候触发此事件，this. result来获取读取的文件数据，如果是图片，将返回base64格式的图片数据。
拖拽上传预览图片

地理信息与本地存储

地理位置

经度 : 南北极的连接线
纬度 : 东西连接的线

位置信息从何而来

IP地址
GPS全球定位系统
Wi-Fi无线网络
基站

地理位置对象 ：navigator.geolocation

单次定位请求 ：getCurrentPosition(请求成功，请求失败，数据收集方式)
请求成功函数 ：

1
2
3
4
5
6
7
8
经度 :  coords.longitude
纬度 :  coords.latitude
准确度 :  coords.accuracy
海拔 :  coords.altitude
海拔准确度 :  coords.altitudeAcuracy
行进方向 :  coords.heading
地面速度 :  coords.speed
时间戳 : new Date(position.timestamp)

请求失败函数：

1
2
3
4
5
失败编号  ：code
0  :  不包括其他错误编号中的错误
1  :  用户拒绝浏览器获取位置信息
2  :  尝试获取用户信息，但失败了
3  :  设置了timeout值，获取位置超时了

数据收集方式 : json的形式

1
2
3
enableHighAcuracy  :  更精确的查找，默认false
timeout  :  获取位置允许最长时间，默认infinity
maximumAge :  位置可以缓存的最大时间，默认0

多次定位请求 : watchPosition(像setInterval)，移动设备有用，位置改变才会触发，配置参数：frequency 更新的频率
关闭更新请求 : clearWatch(像clearInterval)
Cookie：数据存储到计算机中，通过浏览器控制添加与删除数据，域名100个cookie,每组值大小4KB

Storage

存储量限制 ( 5M )
客户端完成，不会请求服务器处理
sessionStorage数据是不共享、 localStorage共享

sessionStorage

session临时回话，从页面打开到页面关闭的时间段，窗口的临时存储，页面关闭，本地存储消失

localStorage

永久存储（可以手动删除数据）

Storage API

setItem():设置数据，key\value类型，类型都是字符串，可以用获取属性的形式操作
getItem():获取数据，通过key来获取到相应的value
removeItem():删除数据，通过key来删除相应的value
clear():删除全部存储的值

1
window.localStorage.setItem('sel',value);

存储事件

当数据有修改或删除的情况下，就会触发storage事件
在对数据进行改变的窗口对象上是不会触发的
Key : 修改或删除的key值，如果调用clear(),key为null
newValue : 新设置的值，如果调用removeStorage(),key为null
oldValue : 调用改变前的value值
storageArea : 当前的storage对象
url : 触发该脚本变化的文档的url
注：session同窗口才可以,比如iframe操作

例子：

行走日记

应用程序缓存（applicationCache）

离线应用=没网的时候，可以正常访问，快速响应页面，不必用多个HTTP占用资源带宽，缓存的可以是任何文件

搭建离线应用程序

1、服务器设置头信息 :

1
AddType text/cache-manifest .manifest

2、html标签加 :

1
manifest=“xxxxx.manifest”

3、写manifest文件 : 离线的清单列表

1
2
3
先写 :  CACHE MANIFEST
FALLBACK :  第一个网络地址没获取到，就走第二个缓存的
NETWORK ：无论缓存中存在与否，均从网络获取

例如：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML>
<html manifest="cache.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<img src="2.png">
</body>
</html>

什么是worker?

JS的单线程（放入UI队列的个数，利用定时器解决），可以让web应用程序具备后台处理能力，对多线程的支持非常好。

Worker API

new Worker(‘后台处理的JS地址’)
利用postMessage传输数据
importScripts(‘导入其他JS文件’)

Worker运行环境

navgator : appName、appVersion、userAgent、platform
location : 所有属性都是只读的
self : 指向全局 worker 对象
所有的ECMA对象，Object、Array、Date等
XMLHttpRequest构造器
setTimeout和setInterval方法
close()方法，立刻停止worker运行
importScripts方法

1
2
3
4
5
6
7
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

var w1 = new Worker('test.js');
w1.postMessage('hi');
w1.onmessage = function(ev){
	alert( ev.data );
};

h5其他路人

内容编辑：

1
contenteditable="true“

语音输入（可以强制输入框里面的语音的语言种类）

1
<input type="text" x-webkit-speech lang="zh-CN"/>

x-webkit-speech是webkit内核浏览器的私有属性，现在只能在google的chrome 11以上才能使用，支持的标签是input
检测浏览器是否支持

1
2
3
if (document.createElement("input").webkitSpeech === undefined) { 
    console.log("不支持"); 
}

监听输入，用onwebkitspeechchange属性添加处理函数。

1
2
3
4
5
<input type="search" x-webkit-speech onwebkitspeechchange="onChange()"/>

function onChange(){
    console.log("change");
}

注意：如果原input中value不为空，输入会直接添加在原有文字后面。建议使用placeholder

桌面提醒

1
2
3
4
window.webkitNotifications.requestPermission();
statue = window.webkitNotifications.checkPermission();
var notification =window.webkitNotifications.createNotification("[imgurl]","Title","Body");
notification.show();

音频和视频

编解码器

原始的视频容器非常大，添加需编码，播放需解码
音频编解码器
AAC、MPEG-3、Ogg Vorbis
视频编解码器
H.264、VP8、Ogg Theora

媒体元素

controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
currentTime : 开始到播放现在所用的时间
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音
autobuffer : 开始的时候是否缓冲加载，autoplay的时候，忽略此属性

1
2
3
4
5
6
7
8
9
10
11
12
var oA = document.getElementById('a1');
	setInterval(function(){
		console.log(oA.currentTime);
	},1000);
//oA.currentTime = 60;
console.log( oA.duration );
console.log( oA.volume );
console.log( oA.muted );
console.log( oA.paused );
console.log( oA.ended );
console.log( oA.error );
console.log( oA.currentSrc );

paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)

play() : 媒体播放
pause() : 媒体暂停
load() : 重新加载媒体

Video额外特性

poster : 视频播放前的预览图片
width、height : 设置视频的尺寸
videoWidth、 videoHeight : 视频的实际尺寸(只读)

视频播放器