• 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);//拖拽的阴影制定,及坐标,图片可以隐藏。

  • 相关阅读:
    【NIO】NIO之浅谈内存映射文件原理与DirectMemory
    【搜索引擎】全文索引数据结构和算法
    【多线程】并发与并行
    【缓存】缓存穿透、缓存雪崩、key重建方案
    布隆过滤器
    多层路由器通信
    【路由】设置二级路由器
    【硬件】集线器,交换机,路由器
    JZOJ100048 【NOIP2017提高A组模拟7.14】紧急撤离
    JZOJ100045 【NOIP2017提高A组模拟7.13】好数
  • 原文地址:https://www.cnblogs.com/intelwisd/p/7788462.html
Copyright © 2020-2023  润新知