7.25 HTML5 / JSON

1. html5新增標籤

<header> <footer> <nav> <section> <aside> <article> <video> <audio> <canvas>
複製代碼

2. 表單

1. email

<input type="email">
複製代碼

2. url

<input type="url">
複製代碼

3. number

   number類型

   max 最大值

   min 最小值

   step 步數

<input type="number" max="10" min="1" step="3" value="5">
複製代碼

4. range 滑動條

<input type="range" min="1" max="10" step="3">
複製代碼

5. Date pickers (date, month, week, time, datetime, datetime-local)

   date - 選取日、月、年

   month - 選取月、年

   week - 選取周和年

   time - 選取時間（小時和分鐘）

   datetime - 選取時間、日、月、年（UTC 時間）

   datetime-local - 選取時間、日、月、年（本地時間）

<input type="datetime-local">
複製代碼

6. search

<input type="search">
複製代碼

7. color

<input type="color">
複製代碼

8. tel

<input type="tel">
複製代碼

9. datalist 規定輸入域的選項列表

<input type="url" list="url_list" name="link" />
    <datalist id="url_list">
        <option label="W3School" value="http://www.W3School.com.cn" />
        <option label="Google" value="http://www.google.com" />
        <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>
複製代碼

Webpage:

10. multiple 規定輸入域中可選擇多個值。

11. file 上傳文件

<input type="file" multiple="multiple" accept="image/png">
複製代碼

3. 音頻、視頻

1. 音頻

   格式 mp3 ogg wav

   controls 播放空間

   autoplay 自動播放 (safari支持)

<audio controls src="./music.mp3" autoplay></audio>
複製代碼

2. 視頻

   格式 mp4 ogg webm

   loop 循環播放

   autoplay 自動播放

<audio controls="controls" autoplay>
  <source src="http://file.52lishi.com/file/yinxiao/f-18-8-10-18.mp3" type="audio/mpeg">
</audio>
複製代碼

4. 異步加載

defer 先加載dom 同時加載js dom加載完成後執行js

<script src="../jquery/jquery-1.11.3.js" defer></script>
複製代碼

async 先加載dom 同時加載js 加載完成後執行js 加載剩餘的dom

<script src="../jquery/jquery-1.11.3.js" async></script>
複製代碼

5. 選擇器

1. querySelector

   查找知足條件的第一個元素 返回一個dom對象

2. querySelectorAll

   查找全部符合條件的元素 返回一個類數組

6. data-* 屬性

1. dataset 設置一個屬性

   data-xxx data-src

   在js裏經過 oDiv.dataset.xxx = xxx

2. 獲取 dataset設置的屬性

   oDiv.dataset.xxx

   oDiv.dataset 返回的是一個對象

   在js裏獲取屬性 oP.dataset.item-key => itemKey

3. dataset 應用個實例 - 圖片懶加載

   src 存放一個質量較小的圖片

   data-src 存放真正的圖片

   當元素進入到可視區域的時候 獲取data-src裏內容賦值給src

<img src="" data-src="" alt="">
複製代碼

7. JSON

JSON.parse //字符串轉對象
    
    JSON.stringify //對象轉字符串
複製代碼

8. 深克隆

1. JSON 方法

var p = {
        name: 'xw',
        weight: '123kg'
        }
    var person = '{name: "xw", weight: "123kg"}'
    var p1 = JSON.stringify(p)
    var p2 = JSON.parse(p1);
    var p3 = JSON.stringify(p);
    p3 = JSON.parse(p3);
    //改變p 其餘不會改變
    p.name = 'wxc';
複製代碼

2. 封裝方法

//深度拷貝 
    function deepClone(obj){
      // 判斷數組仍是對象
      var objClone = Array.isArray(obj) ? [] : {};
      // 對象
      if(obj && typeof obj === "object"){
        // 遍歷
        for(key in obj){
          // 遞歸
          if(obj[key] && typeof obj[key] === "object"){
            objClone [key] = deepClone(obj[key]);
          }else{
            //簡單複製
            objClone[key] = obj[key];
          }
        }
      }else{
        //是基本數據類型時
        objClone = obj;
      }
      return objClone;
    }
複製代碼

9. 本地存儲

• cookie 存儲大小爲4K 能夠設置過時時間，若是不設置關閉瀏覽器窗口就沒了
• sessionStorage 可存儲的大小爲5M 瀏覽器窗口關閉以後就沒了

1. localStorage

可存數據大小爲5M 會永久的存儲在瀏覽器中 除非手動刪除

• 設置

  localStorage.key = value

  localStorage.setItem(key, value)

• 獲取

  localStorage.key

  localStorage.getItem(key)

localStorage.name = 'zs';
    localStorage.setItem('age', 18)

    console.log(localStorage.name)
    console.log(localStorage.getItem('name'));
複製代碼

2. sessionStorage

可存儲的大小爲5M 瀏覽器窗口關閉以後就沒了，sessionStorage 返回一個對象

• 設置

sessionStorage.weight = '123kg';
    sessionStorage.setItem('height', '170cm');
複製代碼

• 獲取

console.log(sessionStorage);
    console.log(sessionStorage.weight);
    console.log(sessionStorage.getItem('height'))

複製代碼

• isNew 判斷session是不是新建立的，與設備和瀏覽器及其緩存有關

if(getCookie(isNew)){

    } else {
      setCookie('isNew', 'true', '300');
    }
複製代碼

3. cookie

cookie 存儲大小爲4K 能夠設置過時時間，若是不設置關閉瀏覽器窗口就沒了，cookie設置是一個字符

• 設置cookie

document.cookie = 'name=wxc';
    var date = new Date();
    date.setDate(date.getDate()+ 1);
    //toUTCString 日期對象轉字符串
    //expires 過時時間
    document.cookie = 'text=111;expires=' + date.toUTCString();

複製代碼

• 封裝方法

// 設置cookie
    function setCookie(key, value, expires ) {
      var date = new Date();
      date.setDate(date.getDate() + expires*1);
      document.cookie = key + '=' + value + ';expires=' + date.toUTCString();
    }
複製代碼

• 獲取cookie

// 獲取cookie 
    function getCookie(key) {
      var tmp = document.cookie; //'name=wxc; text=111'
      tmp = tmp.split(';'); // ["name=wxc", " text=111"]
      for(var i=0; i<tmp.length; i++) {
        var arr =  tmp[i].split('=')  // [' name','wxc']
        // trim() 刪除字符串前面或後面的空格
        if (arr[0].trim() == key ) {
          return arr[1];
        }
      }
    }
複製代碼

• 刪除cookie

// 刪除cookie
    function deleteCookie(key){
      var date =  new Date();
      //過時日期爲前一天
      date.setDate(date.getDate() - 1);
      document.cookie = key + '=null;expires=' + date.toUTCString();
    }
    setCookie('text2', 'aaa', '3');
    deleteCookie('text2');
複製代碼

10. h5特性

• 語義化標籤：header、footer、section、nav、aside、article
• 加強型表單：input 的多個 type
• 新增表單元素：datalist、keygen、output
• 新增表單屬性：placehoder、required、min 和 max
• 音頻視頻：audio、video
• canvas
• 本地存儲：localStorage - 沒有時間限制的數據存儲；sessionStorage - 針對一個 session 的數據存儲，當用戶關閉瀏覽器窗口後，數據會被刪除
• 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause WebSocket：單個 TCP 鏈接上進行全雙工通信的協議