HTML5新特性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/StubbornAccepted/article/details/76423513

一.新增语义化标签

1.新的特殊内容元素：

  article、footer、header、nav、section、aside、progress、embed、time、audio、video...

2.新的表单元素
datalist

<input list="cars"/>//可编辑,可过滤
  <datalist id="cars">
          <option value="car1">
      <option value="car2">
      <option value="car3">
  </datalist>

details,summary

  <details>
  <summary>some topic</summary>
  <p>
  Something that's been hidden，somedetails
  </p>
  </details>

二.新增表单控件属性

Input输入类型:

<form>
      <input type="email" name=""/> 自动验证邮箱格式
      <input type="url" name=""/> 自动验证网址格式
      <input type="number" name="" min="1" max="10"/>自动验证数字格式，带增减
      <input type="range" name="" />
      <input type="step" name="" />
      <input type="date" name="" /> 日期日历格式 type="month,week..."
      <input type="search" name="" />
      <input type="submit" value="提交"/>
</form>

Input表单属性:

 autofocus="autofocus" 自动获取焦点
 form="formid" 找到自己的form
 list 获取列表
 mutiple 一次上传多个文件
 novalidate 表单不验证
 pattern 正则 pattern="[A-z]{3}"
 placeholder 默认值占位，输入消失
 required="required" 控制需要输入
 autocomplete 记录以前的信息 ="on" ="off"
 formaction 重写action
 formnovalidate

三.新增的选择器（jquery选择器建立在它之上）

 1.getElementsByClassName 返回的是数组
 2.querySelector
    document.querySelector("#div1");返回原生对象
 3.querySelectorAll
 4.classList 返回class列表
   <div id="div1" class="aa bb cc"><div/>
   var oDiv=document.getSelector("#div1");
   console.log(oDiv.classList) // aa bb cc
               oDiv.classList.length
               oDiv.classList.add('dd')
               oDiv.classList.remove('aa')
               oDiv.classList.toggle('dd')

四.JSON的新方法

1.eval 记录字符串,当成脚本来执行
eval缺点：不能检测是否是恶意代码,不安全

   var str="function aa(){ alert('haha'); }"; 
   eval(str);//解析执行字符串
   aa();

   var str1='({name:"lisi",age:12})';//转化成json对象,解析更强大
   var obj=eval(str1);
   console.log(obj);

2.parse

   var str2='({"name":"lisi","age":12})';
   var obj1=JSON.parse(str2);//转化成json对象
    console.log(obj1);
   var d=Date.parse('2016-02-11');
    console.log(new Date(d));

3.stringify

  var str3=JSON.stringify(obj1);//转成字符串  
   console.log(str3);

parse与stringify合作可以达到对象克隆的效果

     var obj1={name:'lisi',age:34,brother:{name:'xixi'}};
     克隆方法一:
     var otmp=JSON.stringify(obj1);
     var obj3=JSON.parse(otmp);
     克隆方法二:
     var obj2={};
     for(var p in obj1){
         obj2[p]=obj1[p];
     }
     但区别于：
     obj3.brother.name='wangwu';
     console.log(obj1.brother.name);//xixi--浅克隆
     obj2.brother.name='zhangsan';
     console.log(obj1.brother.name);//zhangsan--深克隆

4.递归方法深克隆 factorial

 **啥是递归来？**
 function fact(n){
    if(n<=1){
       return 1;
    }
    //return n*fact(n-1);
    return n*arguments.callee(n-1); 在函数内部指代刚刚被调用的函数
 }
 alert( fact(4 );
 返回正题：
 function clone(o1){
    var o2={};
    for(var p in o1){
       if(typeof o1[p]==='object'){
          o2[p]=clone(o1[p])
       }else{
          o2[p]=o1[p];
       }
    }
    return o2;
 }
  或
 function clone(o1){
    var o2={};
    for(var p in o1){
      o2[p]= typeof o1[p]==='object'？arguments.callee(o1[p]) : o1[p];
    }
    return o2;
 }

5.如何做到浏览器兼容
www.json的网站上下载json2.js并引入，解决浏览器是否支持的问题

五.自定义数据与JS加载

1.自定义数据

 传统方法：
  <div id="div1" aa="bb">hahahah</div>
  <script>
    var oDiv =document.querySelector('#div1');
    alert(oDiv.getAttribute('aa'))//所有浏览器获取自定义属性的方法
  </script>
  h5方法：data-xx="yy"
  <div id="div1" data-aa="bb" data-cc-dd="ee">hahahah</div>
    <script>
    var oDiv =document.querySelector('#div1');
    alert( oDiv.dataset);
    alert( oDiv.dataset.aa );
    alert( oDiv.dataset.cc );//ccDd:"ee"
  </script>

2.JS延迟加载
解决延迟加载,加载文件时不阻塞页面渲染

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="defer.js" defer></script>//defer延迟加载,按顺序执行,在DOMContentLoad执行前被触发
        <script src="defer.js" async></script>//async异步加载,加载完就触发，有顺序问题
    </head>
    <body>
       <div id="div1">hello html5!</div>   
    </body>
    </html>

文件加载器：Labjs库
异步加载js方案函数：
这里写图片描述

六.历史管理

1.跳转页面

  #锚点 hash
  组织浏览器默认行为：
  <a href="javascript:;" ></a>
   <a href="javascript;void(0);" ></a>
   <script>
      //e.preventDefault();
      //window.scrollTo(0,200);
      var alink=document.querySelectorAll('.link');
       for(var i=0;i<alink.length;i++){
         aLink.onclick=function(e){
            var hash=this.href.substr(this.href.indexof('#')+1);
            var oDiv = document.querySelector('#'+hash);
            var target=oDiv.offsetTop;
            var current=0;
            var timer=setInterval(function(){
             current+=10;
             if(current>=target){
             current = target;
              clearInterval(timer);
             }
             window.scrollTo(0,current);
            },100);
            e.preventDefault();
         }
       }   

   </script>

2.实例：生成随机数：
方案一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">生成随机数</button>
<div id="result"></div>
<script>
    var oBtn=document.querySelector('#btn');
    var oResult=document.querySelector('#result');
    var obj=[];
    oBtn.onclick=function () {
        location.hash=Math.random(   );
        var arr=[];
        console.log(typeof arr);
        for(var i=0;i<7;i++){
            var rand=Math.ceil(Math.random()*31)+1;
            arr.push(rand);
        }
        obj[location.hash] = arr;
        oResult.innerHTML=arr;
    }
    window.onhashchange = function () {
        oResult.innerHTML = obj[location.hash];
    }
</script>
</body>
</html>

方案二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">点击获取随机数</button>
<div id="result"></div>
</body>
<script>
    var oBtn=document.querySelector('#btn');
    var oResult=document.querySelector('#result');
    oBtn.onclick=function () {
        var arr=[];
        for(var i=0;i<7;i++){
            var rand=Math.ceil((Math.random()*31))+1;
            arr.push(rand);
        }
        history.pushState(arr,'');
        oResult.innerHTML=arr;
    }
    window.onpopstate=function (e) {
        oResult.innerHTML=e.state;
    }
</script>
</html>

七.本地存储

1.cookie

<script>
    var dd="lyf";
    document.cookie='name='+dd;
    document.cookie='age=20';
    console.log(document.cookie);
    function setCookie(key,value,expireDate) {
        var str=key+'='+value;
        if(expireDate){
            var now=new Date();
            now.setDate(now.getDate()+expireDate);
            str+=';expires='+now;
        }
        document.cookie=str;
    }
    setCookie('sex','nv',5);
    function  removeCookie(key) {
        setCookie(key,'',-1);
    }
    removeCookie('sex');
    function getCookie(key) {
        var arr1=document.cookie.split(';')
        console.log(arr1);
        for(var i=0;i<arr1.length;i++){
            var k=arr1[i].split('=');
            if(k[0]==key){
                return k[1];
            }
        }
    }
    console.log(getCookie('name'));
</script>

这里写图片描述
2.SessionStorage,localStorage

    sessionStorage.username='liyafang';
    console.log(sessionStorage.username);
    localStorage.password='hahaha';
    console.log(localStorage.password);
    localStorage.setItem('address1',"内蒙古");
    localStorage.setItem('address2',"黑龙江");
    localStorage.setItem('address3',"哈尔滨");
    console.log(localStorage);
    console.log(localStorage.getItem('address1'));
    console.log(localStorage.getItem('address2'));
    console.log(localStorage.getItem('address3'));
//    localStorage.removeItem('address2');
//    localStorage.clear();
//    console.log(localStorage);