menu
more_vert

HTML5笔记-加强版

作者:dayu

<datalistmethod="get">
用户: <input type="text" name="usr_name" />
公钥: <keygen name="security" />
<input type="submit" />
</form>

<progress><progress>定义进度条
<progress max="100" value="76">
<span>76</span>%
</progress>

3、IE下的兼容

1)标签

针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript创建标签来解决他们
方法如下:
在页面的头部加下:
<script>
document.createElement(“header”);
document.createElement(“nav”);
document.createElement(“footer”);
……
</script>

2)样式

HTML5语义化标签在IE6-8下,我们用js创建出来之后,他是不会有任何默认样式的甚至是 display,所以在样式表里要对这些标签定义一下它默认的display,一般为display:block

3)直接引入兼容插件

4、表单forms

1)新的输入型控件:type=" "

email : 电子邮箱文本框,跟普通的没什么区别。当输入不是邮箱的时候,验证通不过。移动端的键盘会有变化。
tel : 电话号码
url : 网页的URL
search : 搜索引擎。chrome下输入文字后,会多出一个关闭的X
range : 特定范围内的数值选择器。属性:min、max、step( 步数 )
number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期(UTC)
datetime-local : 显示完整日期,不含时区
time : 显示时间,不含时区
date : 显示日期
week : 显示周
month : 显示月

2)新的表单属性

placeholder : 输入框提示信息
autocomplete : 是否保存用户输入值,下次输入显示历史输入内容。默认为on,关闭提示选择off
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id
required : 此项必填,不能为空
pattern : 正则验证 pattern="\d{1,5}"
formaction 在submit里定义提交地址。
保存到草稿:
<input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" />



5、表单验证

表单验证
Invalid事件 : 验证反馈 input.addEventListener(‘invalid‘,fn,false)
阻止默认验证:ev.preventDefault()
formnovalidate属性 : 关闭验证

validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true,一种验证失败返回false

oText.addEventListener("invalid",fn1,false);
ev.preventDefault()

valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow:验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError 不符合自定义验证
setCustomValidity(); 自定义验证

eg:
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
alert(this.validity.patternMismatch);// 八种验证不匹配不一致的时候返回true
ev.preventDefault();
}



HTML5新特性

1、新的选择器:

querySelector 只能选择一组中的第一个元素:
var oDiv = document.querySelector(‘#box‘); //也可通.class和[title=box]选择

querySelectorAll 获取一组元素:
var aDiv = document.querySelectorAll(‘.box‘);

getElementsByClassName:通过class获取元素
var aDiv = document.getElementsByClassName(‘box‘); //可以获取一组元素

获取class列表属性:classList:
length : class的长度
add() : 添加class方法
remove() : 删除class方法
toggle() : 切换class方法

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‘);//当box2存在时则删除,当box2不存在时则添加


2、JSON的新方法

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

新方法与eval的区别:
eval : 可以解析任何字符串变成JS
parse : 只能解析JSON形式的字符串变成JS (安全性要高一些)

新方法的应用:可以深度克隆新对象,为了防止对象的引用造成互相的影响可以进行:

浅拷贝:for in
var a = {
name : ‘hello‘
};

var b = {};

for(var attr in a){
b[attr] = a[attr];
}

b.name = ‘hi‘;

alert( a.name ); //hello

深拷贝:

var a = {
name : { age : 100 }
};

var str = JSON.stringify(a);

var b = JSON.parse(str);

b.name.age = 200;

alert( a.name.age ); //100


如何其他浏览器做到兼容:(IE8以下不支持)
http://www.json.org/去下载json2.js

3、data自定义数据

很多库都采用自定义数据,使得JS与HTML进行分离,比如jQuery mobile

dataset:

data-name : dataset.name
data-name-first : dataset.nameFirst

eg:

<divdata-miao="喵" data-miao-all="喵">div</div>

var oDiv = document.getElementById(‘div1‘);

//JS获取自定义属性:
oDiv.dataset.miao

oDiv.dataset.miaoAll


4、延迟加载JS

JS的加载会影响后面的内容加载。很多浏览器都采用了并行加载JS,但还是会影响其他内容。

defer : 延迟加载,会按顺序执行,在onload执行前被触发:

<script src="a.js" defer="defer"></script>
<script src="b.js" defer="defer"></script>

async : 异步加载,加载完就触发,有顺序问题,有依赖关系的JS不要异步

<script src="a.js" async ="async"></script>
<script src="b.js" async ="async"></script>

Labjs库:可以处理是否有依赖关系的JS,来控制谁应该异步加载。



5、历史管理 :

触发历史管理:

1)通过跳转页面

2)onhashchange :改变hash值来管理

eg : 点击按钮随机产生数字,多次点击,可以点击浏览器后退按钮进行后退

var json = {};

function randomNum(){ .. .. }//随机获取数字的函数

oInput.onclick = function(){

var num = Math.random();

var arr = randomNum(35,7);

json[num] = arr;

oDiv.innerHTML = arr;

window.location.hash = num;

};

window.onhashchange = function(){

oDiv.innerHTML = json[window.location.hash.substring(1)];

};


3)history :

服务器下运行

pushState : 三个参数 :数据 标题(都没实现) 地址(可选)

popstate事件 : 读取数据 event.state

注意:网址是虚假的,需在服务器指定对应页面,不然刷新找不到页面

eg : 点击按钮随机产生数字,多次点击,可以点击浏览器后退按钮进行后退

function randomNum(){ .. .. }//随机获取数字的函数

Input.onclick = function(){

var arr = randomNum(35,7);

history.pushState(arr,‘‘,arr);

oDiv.innerHTML = arr;

};

window.onpopstate = function(ev){

oDiv.innerHTML = ev.state;

};




拖放:


拖放事件 :

1)draggable :设置为true,元素就可以拖拽了
<li draggable="true">a</li>

2)拖拽元素事件 : 事件对象为被拖拽元素
dragstart , 拖拽前触发
drag ,拖拽前、拖拽结束之间,连续触发
dragend , 拖拽结束触发

3)目标元素事件 : 事件对象为目标元素
dragenter , 进入目标元素触发,相当于mouseover
dragover ,进入目标、离开目标之间,连续触发
dragleave , 离开目标元素触发,相当于mouseout
drop , 在目标元素上释放鼠标触发

eg:

oDiv.ondragenter = function(){
this.style.background = ‘blue‘;
};

oDiv.ondragover = function(ev){

//enter和leave之间连续触发
//要想触发drop事件,就 必须在dragover当中阻止默认事件
var ev = ev || window.event;
ev.preventDefault();

};

oDiv.ondragleave = function(){
this.style.background = ‘red‘;
};

oDiv.ondrop = function(){
alert(123);
};


eg:拖放网页上子图片资源:

img1.ondragstart = function(e){
e.dataTransfer.setData("imgId","img1");//设置被拖数据的数据类型和值
}

boxDiv.ondragover = function(e){//ondragover 事件规定在何处放置被拖动的数据。
e.preventDefault();//阻止系统默认的事件
}

boxDiv.ondrop = function (e){//处理drop事件接受释放的元素
showObj(e.dataTransfer);////显示事件详细信息
e.preventDefault();
var img = document.getElementById(e.dataTransfer.getData("imgId"));
e.target.appendChild(img);//把被拖元素追加到放置元素(目标元素)中

}


4)事件的执行顺序
事件的执行顺序 :drop不触发的时候
dragstart > drag > dragenter > dragover > dragleave > dragend
事件的执行顺序 :drop触发的时候(dragover的时候阻止默认事件)
dragstart > drag > dragenter > dragover > drop > dragend
不能释放的光标和能释放的光标不一样


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

dataTransfer对象:

setData() : 设置数据 key和value(必须是字符串)
getData() : 获取数据,根据key值,获取对应的value
effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
setDragImage 设置拖拽过程中的背景图。三个参数:指定的元素,坐标X,坐标Y。
files 获取外部拖拽的文件,返回一个filesList列表。filesList下有个type属性,返回文件的类型。

aLi[i].ondragstart = function(ev){

var ev = ev || window.event;

ev.dataTransfer.setData(‘name‘,‘hello‘);

ev.dataTransfer.effectAllowed = ‘link‘;

ev.dataTransfer.setDragImage(oImg,0,0);


};

···

oDiv.ondrop = function(ev){
oUl.removeChild( aLi[ev.dataTransfer.getData(‘name‘)] );
}



6)FileReader对象(读取文件信息)

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


拖放外部图片资源:

window.onload = function(){
var imgContainer = document.getElementById("imgContainer");
var msgDiv=document.getElementById("msg");

imgContainer.ondragover = function(e){
e.preventDefault();
}
imgContainer.ondrop = function(e){
e.preventDefault();
var f = e.dataTransfer.files[0];
var fileReader = new FileReader();
fileReader.readAsDataURL(f);

fileReader.onload = function(e){
imgContainer.innerHTML=" <img src=\" "+fileReader.result+" \">" // \"为转义字符
}
}

}




音频视频:

<audio controls src="johann_sebastian_bach_air.mp3"></audio>
<video controls src="Intermission-Walk-in.ogv"></video>

controls控件必须写上

1)为了兼容浏览器添加多个视频格式:

<video controls>

<source src="Intermission-Walk-in.ogv"></source>
<source src="Intermission-Walk-in.mp4"></source>

</video>

2)媒体元素 :

controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放

<audio controls autoplay loop src="johann_sebastian_bach_air.mp3"></audio>

3)JS设置和只读元素:

currentTime : 开始到播放现在所用的时间
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音 静音为false 有声为true
autobuffer : 开始的时候是否缓冲加载,autoplay的时候,忽略此属性
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候,返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)

var oA = document.getElementById(‘a1‘);
oA.currentTime = 60;
console.log( oA.duration );
console.log( oA.volume );

4)控制函数:

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

var oV = document.getElementById(‘v1‘);
var oInput = document.getElementById(‘input1‘);
var aS = document.getElementsByTagName(‘source‘);
oV.onmouseover = function(){

this.play();
this.mozRequestFullScreen();

};

oV.onmouseout = function(){

this.pause();
};

oInput.onclick = function(){

aS[0].src = ‘xxxx.mp4‘;
aS[1].src = ‘yyyy.mp4‘;
oV.load(); //动态修改播放地址的后要重新加载,执行load()函数,否则修改不生效。

};

5)事件:


loadstart progress suspend emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange

oV.addEventListener(‘ended‘,function(){ //播放结束后的事件

alert(123);

},false);


6)Video额外特性

poster : 视频播放前的预览图片
width、height : 设置视频的尺寸
videoWidth、 videoHeight : 视频的实际尺寸,无论是否修改,显示默认的尺寸(只读)

oV.poster = ‘2.png‘;

oV.width = 500;
oV.height = 500;

alert( oV.videoWidth );



跨文档消息通信、地理信息、本地存储、离线存储

1、跨文档消息通信

1)同域下的窗口通信:

iframe方法:

如果我们要操作一个iframe里面的dom元素,首先要获取到iframe引入的页面的window

var Iframe= document.getElementById(‘myframe‘);

Iframe.contentWindow -> 被iframe包含的页面的window对象

Iframe.contentWindow.document.body.style.background = ‘red‘;

当本页面和包含页面不在同一个域名下的时候,这样操作就会有跨域操作安全限制问题。

如果我们要在iframe中操作父级页面:

parent => window 如果当前页面是顶级,没有被其他页面所包含,那么parent就是当前页面的window对象,那么如果被包含了,则parent就是包含当前页面的父级页面的window对象

window : 当前窗口
parent : 父级窗口
top : 顶级窗口(最外面的父级)

parent.document.body.style.background = ‘green‘;



window.open方法:

window.open 返回被打开窗口的window对象

打开之后并改变背景颜色:

window.open(‘4.window.open.html‘, ‘_blank‘).document.body.style.background = ‘red‘;


window.opener : 返回通过window.open方法打开当前页面的窗口window

该方法适用在一个页面(A)用window.open方法打开的新页面(B)中,来操作之前的页面(A)

window.opener.document.body.style.background = ‘green‘;


2)跨文档消息通信(不同域下的窗口通信)

假设发送消息的域名为a.com,接收域为b.com

a.com下:

postMessage对象,可以通过这个方法给另外一个窗口发送信息。

接收消息的window对象.postMessage()

第一个参数:发送的数据
第二个参数:接收数据的域名{带上协议(http://)}



var oMyIframe = document.getElementById(‘myframe‘);
oMyIframe.contentWindow.postMessage(‘1‘, ‘http://www.b.com‘);


b.com下:


message : 当窗口接收到通过postMessage发送过来的数据的时候触发

message事件的事件对象下保存了发送过来的内容

ev.data : 发送过来的数据

ev.origin:发送数据的来源

window.addEventListener(‘message‘, function(ev) {


alert(ev.data); // 1

alert(ev.origin);//http://www.a.com

alert(‘我接收到了a.com页面发送过来的数据,内容是:‘ + ev.data);

if (ev.data == ‘1‘) { // a.com相当于发送指令给b.com,然后b.com确认后作出相应的改变

document.body.style.background = ‘red‘;
}

}, false);




2、ajax新增特性:

同域下的:



var oBtn = document.getElementById(‘btn‘);



oBtn.onclick = function() {



var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {

if (xhr.status == 200) {

alert(xhr.responseText);

}

}

}


xhr.open(‘get‘, ‘ajax.php‘, true);


xhr.send();


}




跨域下的:




在标准浏览器下,XMLHttpRequest对象已经是升级版本,支持了更多的特性,可以跨域了。但是,如果想实现跨域请求,还需要后端的相关配合,后端要设置响应头信息:



<?php


header(‘Access-Control-Allow-Origin:http://www.a.com‘); //这是允许访问该资源的域





XMLHttpRequest : 增加很多功能,它也不推荐使用onreadystatechange这个事件来监听,推荐使用新事件onload



XDomainRequest : IE如果想实现跨域请求,则需要使用另外一个对象XDomainRequest 去实现



var oXDomainRequest = new XDomainRequest();


oXDomainRequest.onload = function() {


alert(this.responseText);


}


oXDomainRequest.open(‘get‘, ‘http://www.b.com/ajax.php‘, true);


oXDomainRequest.send();




ajax实现无刷新页面上传(带进度条):



进度事件:



upload.onprogress :上传过程中的事件


FormData对象,通过FormData来构建二进制,提交数据


ev.total(发送的总量)


ev.loaded(已发送的数量)




<!DOCTYPE HTML>


<html>


<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<title>无标题文档</title>


<style>


#div1 {width: 300px; height: 30px; border: 1px solid #000; position: relative;}


#div2 {width: 0; height: 30px; background: #CCC;}


#div3 {width: 300px; height: 30px; line-height: 30px; text-align: center; position: absolute; left: 0; top: 0;}


</style>


<script>


window.onload = function() {



var oBtn = document.getElementById(‘btn‘);
var oMyFile = document.getElementById(‘myFile‘);
var oDiv1 = document.getElementById(‘div1‘);
var oDiv2 = document.getElementById(‘div2‘);
var oDiv3 = document.getElementById(‘div3‘);

oBtn.onclick = function() {

//alert(oMyFile.value); //获取到的是file控件的value值,这个内容是显示给你看的文字,不是我们选择的文件


//oMyFile.files :file控件中选择的文件列表对象

//alert(oMyFile.files);


//我们是要通过ajax把oMyFile.files[0]数据发送给后端



var xhr = new XMLHttpRequest();



xhr.onload = function() {


//var d = JSON.parse(this.responseText);


//alert(d.msg + ‘ : ‘ + d.url);


alert(‘OK,上传完成‘);

oDiv2.style.background = "green";

}


var oUpload = xhr.upload;


oUpload.onprogress = function(ev) {


//console.log(ev.total + ‘ : ‘ + ev.loaded);


var iScale = ev.loaded / ev.total;


oDiv2.style.width = 300 * iScale + ‘px‘;


oDiv3.innerHTML = iScale * 100 + ‘%‘;


}


xhr.open(‘post‘, ‘post_file.php‘, true); // 大数据量的用post

xhr.setRequestHeader(‘X-Request-With‘, ‘XMLHttpRequest‘); //设置请求头信息


var oFormData = new FormData(); //通过FormData来构建二进制,提交数据

oFormData.append(‘file‘, oMyFile.files[0]); //file为后端要接收文件设置的值



xhr.send(oFormData);




}
}

</script>
</head>

<body>

<input type="file"/><input type="button"value="上传" />


<divx-webkit-speech />

桌面提醒:
window.webkitNotifications.requestPermission();
statue = window.webkitNotifications.checkPermission();
var notification =window.webkitNotifications.createNotification("[imgurl]","Title","Body");
notification.show();


HTML5笔记-加强版

原文地址:http://www.cnblogs.com/hello-web/p/7221438.html