7.25 HTML5 / JSON

xxxcc
331 阅读4分钟

1. html5新增标签

<header> <footer> <nav> <section> <aside> <article> <video> <audio> <canvas>

2. 表单

  1. email
    <input type="email">
  1. url
    <input type="url">

  1. number

    number类型

    max 最大值

    min 最小值

    step 步数

    <input type="number" max="10" min="1" step="3" value="5">
  1. range 滑动条
    <input type="range" min="1" max="10" step="3">

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

    date - 选取日、月、年

    month - 选取月、年

    week - 选取周和年

    time - 选取时间（小时和分钟）

    datetime - 选取时间、日、月、年（UTC 时间）

    datetime-local - 选取时间、日、月、年（本地时间）

    <input type="datetime-local">
  1. search
<input type="search">
  1. color
    <input type="color">
  1. tel
    <input type="tel">
  1. 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:

  1. multiple 规定输入域中可选择多个值。

  2. file 上传文件

<input type="file" multiple="multiple" accept="image/png">

3. 音频、视频

  1. 音频

    格式 mp3 ogg wav

    controls 播放空间

    autoplay 自动播放 (safari支持)

    <audio controls src="./music.mp3" autoplay></audio>

  1. 视频

    格式 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';
  1. 封装方法
    //深度拷贝 
    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 连接上进行全双工通讯的协议
avatar
文章
阅读
粉丝