html5新特性

2017-04-06 本文已影响0人 believedream

1.htm5新特性

1.语义化标签

1.1.htm5新特性

Paste_Image.png
注意：这里只列出主要标签，还有许多其他的语音花标签

1.2.新选着器###

Paste_Image.png

1.3 获取class列表属性 : 获取对象的className的集合###

classList

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

<div class="a b"></div> alert(document.querySelector('#div').classList)

1.4 data自定义数据###

-dataset :是data-的集合

data-name : dataset.name
data-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)

1.5 JSON的新方法###

parse() : 把字符串转成json, 类似eval()方法
stringify() : 把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

1.6、延迟加载JS

defer : 延迟加载，会按顺序执行，在onload执行前被触发（或者简单理解为是在页面加载完时执行,会按顺序）
async : 异步加载，加载完就触发，有顺序问题（并行加载，而且不会按照顺序加载）
** defer和async的区别：**
defer：用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。
async：HTML5新增属性，用于异步下载脚本文件，下载完毕立即解释执行代码。
注意：Labjs库:(第三方插件：最大化提高性能，即能异步，也能延迟)

1.7 历史管理###

**onhashchange ： **改变hash值来管理如：改变hash方法window.location.hash=”cont”;
监听hash根据hash改变现实内容：html事件 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>

1.8 .拖放事件##

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 : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
setDragImage (设置鼠标的位置)
- 三个参数：指定的元素，坐标X，坐标Y
files
- 获取外部拖拽的文件，返回一个filesList列表
- filesList下有个type属性，返回文件的类型

<style>
    #box,#mubiao{height:100px;width:100px;border:1px solid #999;}
</style>
<div id="box" draggable="true"></div>
<div id="mubiao"></div>
![](https://img.haomeiwen.com/i2906565/d35812825c905a64.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<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>

1.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>