html5學習筆記（-），html5新特性介紹教程

一、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.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)

 -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.οnlοad=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].οnclick=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