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 链接上进行全双工通信的协议