html5 杂记

HTMl:
参考网站:http://www.caniuse.com/#index
新的选择器:
js原生:
  document.getElementById();
  document.getElementByTagName();
jQuery:
  $();
html5:
  1)document.querySelector();//与jQuery的选择方法相似。IE6、7不支持。
  eg:document.querySelector("[title=box]");
  //只能选择一组中的第一个元素。
  2)document.querySelectorAll();//获取一组元素。
  3)document.getElementsByClassName();//获取类名的元素。括号里不带点。
  4)获取class列表的属性
 .classList
  length:class的长度
  add():添加class方法
  remove():删除class方法
  toggle():切换class方法
  <div id="div1" class="box box1 box2"></div>
  var oDiv = document.getElementById("div1");
  alert(oDiv.classList);//box box1 box2
JSON的新方法:
  原先的eval();把字符串转换成js语句。可以解析字符串。
  JSON.parse():把字符串转化成json,只能解析JSON格式(严格形式)的字符串。安全性比较高。
  JSON.stringify();把JSON格式转换成字符串
对象的深拷贝:
  var a = {
    name : "hello"
  }  
  var str = JSON.stringify(a);//解析成一个字符串。
  var b = JSON.parse(str);//再解析成一个对象,这时是一个新的对象。在进行修改不会改变原先对象的值。
  b.name = "hi";//IE67不支持 zaiJSON官网上下载JSON2.js
  alert(a.name);
  对象是引用类型,其拷贝时与变量不同,浅层的拷贝(只有一层对象)时用for in 循环把一个的属性给另外一个。如果有深的拷贝时(对象里套对象)的要用递归,或者  jQuery$.extend()地方法进行拷贝。
  data自定义数据:
    <div id="div1" data-hello="hhhh"></div>
    var oDiv = document.getElementById("#div1");
    alert(oDiv.dataset.hello);
  延迟加载:
    defer和async
    在script中 defer = "defer"//延迟js最后执行,针对于外部的js文件。
    async: 异步加载。并行执行,加载速度快,但有顺序关系,依赖关系的不能加。
    Labjs: 异步加载js库。
  历史管理:控制网站的浏览记录,跳转页面的时候才进行管理。
    历史:浏览器的前进后退。
    hash值:出发历史管理,1、通过跳转页面。2、hash值(onhashchange事件)。
    var json = {};//先做一个映射
    oInput.onclick = function() {
      var num = Math.random();
      var arr = randomNum(35,7);//调用函数
      json[num] = arr;
      oDiv.innerHTML = arr;
      window.location.hash = num;
    }
    window.onhashchange = function() {
      oDiv.innerHTML = json[window.location.hash.substring(1)];
    }


    3、pushState(html5)
      history:pushState;需要在服务器下执行。三个参数,history.pushState(数组,title,地址);
      window.onpopstate = function(ev) {
        oDiv.innerHTML = ev.state;
      }
    //不要刷新,要在服务器上做映射。
    oInput.onclick = function() {
      var arr = randomNum(35,7);
      history.pushState(arr,'','网址');
      oDiv.innerHTML = arr;//赋值页面
    }//存
       window.onpopstate = function(ev) {
      oDiv.innerHTML = ev.state;
    }//取
  拖放:
    draggable="true"
  拖放事件:
  拖拽元素事件:
    ondragstart:拖拽前触发
    ondragend:拖拽结束触发
    ondrag:拖拽开始与结束连续触发
  拖拽的目标元素事件:
    ondragenter:进入目标元素触发
    ondragleave:
    ondragover:进入目标元素在enterhe levar触发
    onendrop:进入目标元素是释放鼠标触发,但必须在dragover中阻止默认事件即可。
  在火狐下的设置:dataTransfer对象:
    ev.dataTransfer.setData("name","hello");//必须是字符串
    setData:设置数据键值对。
    getData: 获取键值对
  eg:拖拽删除。
    effectAllowed:设置光标样式。
    ev.dataTransfer.effectAllowed = "copy";"link","..."
    setDragImage:拖拽的图片
    ev.dataTransfer.setDragImage(oDiv,0,0);//拖拽的阴影制定,及坐标,图片可以隐藏。

原文地址:https://www.cnblogs.com/intelwisd/p/7788462.html