html5学习笔记(-),html5新特性介绍教程
2016-09-06 22:08
423 查看
一、html5语义化
二、HTML5新特性
1、HTML5新特性的浏览器支持情况
http://www.caniuse.com/#index
2、新的选择器
querySelector 获取单个元素 如:
var obj=document.querySelector('.box');var obj1=document.querySelector('#box');
var obj2=document.querySelector('[name="username"]);
querySelectorAll 获取多个元素集合 如:
var obj=document.querySelectorAll('.box');
getElementsByClassName 获取class的元素集合
3、获取class列表属性 : 获取对象的className的集合
classList
length : class的长度add() : 添加class方法
remove() : 删除class方法
toggle() : 切换class方法
如:
<div class="a b"></div> alert(document.querySelector('#div').classList) //输出a b
4、data自定义数据
-dataset :是data-的集合
data-name : dataset.namedata-name-first : dataset.nameFirst
如:
<div id="box" data-name="zhangsan" data-user-sex="nan"></div>
var obj=document.querySelector('#box');
console.log(obj.dataset.name)
console.log(obj.dataset.userSex)
-Data数据在jquery mobile中有着重要作用
5、JSON的新方法
-parse() : 把字符串转成json, 类似eval()方法字符串中的属性要严格的加上引号
-stringify() : 把json转化成字符串
会自动的把双引号加上
-新方法与eval的区别:eval都能转换,是JSON.parse()只能转换json
-新方法的应用
深度克隆新对象 如:
//以往的方法
var a={"name":"zhangsan"};
var b=a;
b.name="lisi";
alert(a.name); //lisi
//html5 -json新方法
var a={"name":"zhangsan"};
var str=JSON.stringify(a); //转换成字符串
var b=JSON.parse(str); //转换成对象
b.name="lisi";
alert(a.name); //zhangsan
-如何其他浏览器做到兼容
http://www.json.org/去下载json2.js
6、延迟加载JS
JS的加载会影响后面的内容加载(js是单线程)很多浏览器都采用了并行加载JS,但还是会影响其他内容
Html5的defer和async
defer : 延迟加载,会按顺序执行,在onload执行前被触发(或者简单理解为是在页面加载完时执行,会按顺序)
async : 异步加载,加载完就触发,有顺序问题(并行加载,而且不会按照顺序加载)
如:
<script src="a.js" defer></script>
Labjs库:(第三方插件:最大化提高性能,即能异步,也能延迟)
如:labjs.com/documentation.php
labjs中wait()等待前面的加载完才执行
<script>
$LSB
.script('a.js')
.script('b.js')
.script('c.js').wait()
.script('d.js').wait();
</script>
seaJs,requireJs框架集成了延迟和异步加载
7、历史管理
onhashchange
:改变hash值来管理 如:改变hash方法 window.location.hash=”cont”;监听hash根据hash改变现实内容: html5事件 onhashchange 案例:
<ul class="nav">
<li data-hash="index">首页</li>
<li data-hash="news">新闻</li>
<li data-hash="sports">体育</li>
</ul>
<div class="cont">
<div data-content="index">首页内容</div>
<div data-content="news">新闻内容</div>
<div data-content="sports">体育内容</div>
</div>
<script>
//知识点 querySelector querySelectorAll选择器
//substring截取字符串
//onhashchange html5的监听事件
window.onload=function(){
var oLi=document.querySelectorAll('li');
var oCont=document.querySelector('.cont').querySelectorAll('div');
for (var i = 0; i < oLi.length; i++) {
oLi[i].onclick=function(){
window.location.hash=this.dataset.hash;
}
};
function changeCont(){//根据hash改变内容
var hash=window.location.hash.substring(1);
for(var i=0;i<oCont.length;i++){
if(hash==oCont[i].dataset.content){
oCont[i].style.display="block";
}else{
oCont[i].style.display="none";
}
}
}
changeCont();
window.onhashchange=function(){
changeCont();
}
}
history :
服务器下运行pushState : 三个参数 :数据 标题(都没实现) 地址(可选)
popstate事件 : 读取数据 event.state
注意:网址是虚假的,需在服务器指定对应页面,不然刷新找不到页面
案例:
<ul class="nav">
<li data-hash="index">首页</li>
<li data-hash="news">新闻</li>
<li data-hash="sports">体育</li>
</ul>
<div class="cont">
<div data-content="index">首页内容</div>
<div data-content="news">新闻内容</div>
<div data-content="sports">体育内容</div>
</div>
<script>
window.onload=function(){
var oLi=document.querySelectorAll('li');
var oCont=document.querySelector('.cont').querySelectorAll('div');
var iNow=0;
for (var i = 0; i < oLi.length; i++) {
oLi[i].onclick=function(){
var hash=this.dataset.hash;
history.pushState(hash,'',iNow++);//第二个参数是标题很多浏览器没实现便可不写,加上第三个参数便可以改变网址,但是是虚假的网址刷新就没有了,所以得配合后端使用
changeCont(hash);
}
};
function changeCont(hash){//根据hash改变内容
for(var i=0;i<oCont.length;i++){
if(hash==oCont[i].dataset.content){
oCont[i].style.display="block";
}else{
oCont[i].style.display="none";
}
}
}
window.onpopstate=function(ev){
console.log(1);
changeCont(event.state);
}
}
</script>
8、拖放事件
draggable :
设置为true,元素就可以拖拽了 (如单独设置draggable为true,前台拖拽的时候只是有拖拽的拖影,而不是整个元素都能拖动)
拖拽元素事件 :
事件对象为被拖拽元素(在给元素绑定拖拽事件时,必须得给元素设置draggable=”true”属性)dragstart , 拖拽前触发
drag ,拖拽前、拖拽结束之间,连续触发
dragend , 拖拽结束触发
案例:
<style>
#box{height:100px;width:100px;border:1px solid #999;}
</style>
<div id="box" draggable="true"></div>
<script>
window.onload=function(){
var oDrag =document.querySelector('#box');
oDrag.ondragstart=function(){
console.log("拖拽前");
}
oDrag.ondrag=function(){
console.log("拖拽进行中");
}
oDrag.ondragend=function(){
console.log("结束");
}
}
</script>
目标元素事件 :
事件对象为目标元素(目标元素通常是被拖拽元素,碰撞到最终的元素,如拖拽上传,上传框就是目标元素)dragenter , 进入目标元素触发,相当于mouseover (元素进入不会触发,一定是鼠标进入才触发)
dragover ,进入目标、离开目标之间,连续触发
dragleave , 离开目标元素触发,相当于mouseout
drop , 在目标元素上释放鼠标触发 (需要在dragover事件中设置阻止默认事件,不然拖动的时候鼠标移至都是禁止的状态,就无法释放,也就不能触发drop事件)
案例:
<style>
#box,#mubiao{height:100px;width:100px;border:1px solid #999;}
</style>
<div id="box" draggable="true"></div>
<div id="mubiao"></div>
<script>
window.onload=function(){
var index=0;
var oMubiao =document.querySelector('#mubiao');
oMubiao.ondragenter=function(){
this.style.background="#000";
}
oMubiao.ondragleave=function(){
this.style.background="#999";
}
oMubiao.ondragover=function(ev){
ev.preventDefault();
console.log(index++);
}
oMubiao.ondrop=function(){
alert("鼠标放开了");
}
}
</script>
事件的执行顺序 :drop不触发的时候
dragstart > drag > dragenter > dragover > dragleave > dragend
事件的执行顺序 :drop触发的时候(dragover的时候阻止默认事件)
dragstart > drag > dragenter > dragover > drop > dragend
不能释放的光标和能释放的光标不一样,需要触发drop释放事件,在上例中
解决火狐下的问题
(火狐不设置的话只支持dragstart事件其他都不支持)必须设置dataTransfer对象才可以拖拽除图片外的其他标签
案例:如在dragstart的event对象中设置dataTransfer.setData 设置一个参数
dataTransfer对象(属于event事件对象)
setData() : 设置数据 key和value(必须是字符串)
getData() : 获取数据,根据key值,获取对应的value
effectAllowed
effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
etDragImage (设置鼠标的位置)
三个参数:指定的元素,坐标X,坐标Y
files
获取外部拖拽的文件,返回一个filesList列表
filesList下有个type属性,返回文件的类型
关于:setDate,getDate,effectAllowed,setDragImage的案例
<style>
#box,#mubiao{height:100px;width:100px;border:1px solid #999;}
</style>
<div id="box" draggable="true"></div>
<div id="mubiao"></div>
<img id="img" src="http://www.baidu.com/img/bd_logo1.png" alt="">
<script>
window.onload=function(){
var index=0;
var oDrag =document.querySelector('#box');
var oMubiao =document.querySelector('#mubiao');
oDrag.ondragstart=function(ev){
var oImg=document.querySelector('#img');
console.log("拖拽前");
ev.dataTransfer.setData('name','demo');
ev.dataTransfer.effectAllowed="link";
ev.dataTransfer.setDragImage(this,50,50);
//此处this可以是其他对象,也可以试图片对象比如换
//ev.dataTransfer.setDragImage(oImg,50,50);
// 扩展拖拽排序,百度音乐播放器,拖拽排列歌曲列表
}
oDrag.ondrag=function(){
console.log("拖拽进行中");
}
oDrag.ondragend=function(){
console.log("结束");
}
oMubiao.ondragenter=function(){
this.style.background="#000";
}
oMubiao.ondragleave=function(){
this.style.background="#999";
}
oMubiao.ondragover=function(ev){
ev.preventDefault();
console.log(index++);
}
oMubiao.ondrop=function(ev){
alert(ev.dataTransfer.getData('name'));
}
}
</script>
关于:files的案例
<style>
#mubiao{height:200px;width:200px;border:1px solid #999;}
</style>
<div id="mubiao"></div>
<script>
window.onload=function(){
var oMubiao =document.querySelector('#mubiao');
oMubiao.ondragenter=function(){
this.innerHTML = '可以释放啦';
}
oMubiao.ondragleave=function(ev){
this.innerHTML = '请在此区域释放鼠标';
}
oMubiao.ondragover=function(ev){
ev.preventDefault();
}
oMubiao.ondrop=function(ev){
ev.preventDefault();
console.log(ev.dataTransfer.files[0].type)
}
}
</script>
9、FileReader(读取文件信息)
readAsDataURL
参数为要读取的文件对象,将文件读取为DataUrl
onload
当读取文件成功完成的时候触发此事件this. result , 来获取读取的文件数据,如果是图片,将返回base64格式的图片数据
实例
拖拽删除列表
拖拽购物车
上传图片预览功能
简单案例:
<style>
#mubiao{height:200px;width:200px;border:1px solid #999;}
</style>
<div id="mubiao"></div>
<img src="" id="img" alt="">
<script>
window.onload=function(){
var oImg=document.querySelector('#img');
var oMubiao =document.querySelector('#mubiao');
oMubiao.ondragenter=function(){
this.innerHTML = '可以释放啦';
}
oMubiao.ondragleave=function(ev){
this.innerHTML = '请在此区域释放鼠标';
}
oMubiao.ondragover=function(ev){
ev.preventDefault();
}
oMubiao.ondrop=function(ev){
ev.preventDefault();
var fs=ev.dataTransfer.files; //获取文件对象
console.dir(fs[0]);
var fr=new FileReader(); //实例化读取文件信息对象
fr.readAsDataURL(fs[0]); //将文件读取为dataUrl格式
fr.onload=function(){ //读取文件成功后事件
//alert(this.result);
oImg.src=this.result; //假如上传的是图片可以复制给一个图片对象
}
}
}
</script>
10、可做练习:
理解新的选择器获取class列表属性
Json的新方法
data自定义数据
延迟加载JS
历史管理
拖放事件
一些可能感兴趣的资源:
http://ued.baidu.com/?p=894 http://www.caniuse.com
相关文章推荐
- html5学习笔记---01.HTML5介绍,02.HTML5的新特性
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
- 简明pyton教程学习笔记 1-5 介绍+安装python+最初的步骤+基本概念+运算符与表达式
- 【HTML5+css3】学习笔记之html5介绍
- <学习html>第八天笔记-HTML5文档类型和字符集、HTML5新标签与特性(常用新标签、新增input type属性值、常用新属性、多媒体标签)
- HTML5学习笔记 HTML5基础教程
- 【HTML5】学习笔记1(基础介绍)
- HTML5学习笔记(1):HTML5介绍与语法
- 【学习笔记】HTML5视频的属性、方法、事件介绍 详解
- Objective-C基础教程学习笔记(十一)特性
- HTML学习笔记(HTML5新特性)NO.5
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
- HTML5学习笔记简明版(1):HTML5介绍与语法
- HTML5学习笔记简明版(1):HTML5介绍与语法
- 韩顺平_php从入门到精通_视频教程_第1讲_html介绍_html运行原理①_学习笔记_源代码图解_PPT文档整理
- 简明python教程学习笔记之九-str类方法简单介绍
- HTML5新特性基础学习笔记上
- html5学习笔记3——高级特性
- 工作流调度系统介绍,常见工作流调度系统对比,azkaban与Oozie对比,Azkaban介绍与特性(来自学习笔记)
- 【HTML5】HTML5 高级程序设计 学习笔记1 HTML5新特性简介