html5新特性

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自定義數(shù)據(jù)###

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

1.6、延遲加載JS

  • defer : 延遲加載，會按順序執(zhí)行，在onload執(zhí)行前被觸發(fā)（或者簡單理解為是在頁面加載完時執(zhí)行,會按順序）
  • async : 異步加載，加載完就觸發(fā)，有順序問題（并行加載，而且不會按照順序加載）
    ** defer和async的區(qū)別：**
  • defer：用于開啟新的線程下載腳本文件，并使腳本在文檔解析完成后執(zhí)行。
  • async：HTML5新增屬性，用于異步下載腳本文件，下載完畢立即解釋執(zhí)行代碼。
    注意：Labjs庫:(第三方插件：最大化提高性能，即能異步，也能延遲)

1.7 歷史管理###

**onhashchange ： **改變hash值來管理 如：改變hash方法window.location.hash=”cont”;
監(jiān)聽hash根據(jù)hash改變現(xiàn)實內容：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的監(jiān)聽事件
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(){//根據(jù)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 : 三個參數(shù) ：數(shù)據(jù) 標題(都沒實現(xiàn)) 地址(可選)
  • popstate事件 : 讀取數(shù)據(jù) 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++);//第二個參數(shù)是標題很多瀏覽器沒實現(xiàn)便可不寫，加上第三個參數(shù)便可以改變網(wǎng)址，但是是虛假的網(wǎng)址刷新就沒有了，所以得配合后端使用
            changeCont(hash);
        }
    };
    function changeCont(hash){//根據(jù)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 , 拖拽前觸發(fā)
  • drag ,拖拽前、拖拽結束之間，連續(xù)觸發(fā)
  • dragend , 拖拽結束觸發(fā)
<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 , 進入目標元素觸發(fā)，相當于mouseover (元素進入不會觸發(fā)，一定是鼠標進入才觸發(fā))
  • dragover ,進入目標、離開目標之間，連續(xù)觸發(fā)
  • dragleave , 離開目標元素觸發(fā)，相當于mouseout
  • drop , 在目標元素上釋放鼠標觸發(fā) （需要在dragover事件中設置阻止默認事件，不然拖動的時候鼠標移至都是禁止的狀態(tài)，就無法釋放，也就不能觸發(fā)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>

注意：
事件的執(zhí)行順序 ：drop不觸發(fā)的時候
dragstart > drag > dragenter > dragover > dragleave > dragend
事件的執(zhí)行順序 ：drop觸發(fā)的時候(dragover的時候阻止默認事件)
dragstart > drag > dragenter > dragover > drop > dragend
不能釋放的光標和能釋放的光標不一樣,需要觸發(fā)drop釋放事件，在上例中

問題：（火狐不設置的話只支持dragstart事件其他都不支持）
必須設置dataTransfer對象才可以拖拽除圖片外的其他標簽
案例：如在dragstart的event對象中設置dataTransfer.setData 設置一個參數(shù)

dataTransfer對象（屬于event事件對象）

  • setData() : 設置數(shù)據(jù) key和value(必須是字符串)
  • getData() : 獲取數(shù)據(jù)，根據(jù)key值，獲取對應的value
  • effectAllowed : 設置光標樣式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
  • setDragImage (設置鼠標的位置)
    - 三個參數(shù)：指定的元素，坐標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>
![](http://upload-images.jianshu.io/upload_images/2906565-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:參數(shù)為要讀取的文件對象，將文件讀取為DataUrl
onload:當讀取文件成功完成的時候觸發(fā)此事件this. result , 來獲取讀取的文件數(shù)據(jù)，如果是圖片，將返回base64格式的圖片數(shù)據(jù)
實例

  • 拖拽刪除列表
  • 拖拽購物車
  • 上傳圖片預覽功能
<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 = '請在此區(qū)域釋放鼠標';
        }
        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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容