TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

H5&C3之新特性

zyz
2018-06-13
/
0 评论
/
821 阅读
/
正在检测是否收录...
06/13

一、新的选择器

  • getElementByClassName

    var oDiv = document.getElementsByClassName('box')[0];
    var oDiv = document.getElementsByClassName('box view')[0];
  • querySelector

    var oDiv = document.querySelector('#div1');
    // 只能选择一组中的第一个元素
    var oDiv = document.querySelector('.box');
    var oDiv = document.querySelector("[title=hello]");
  • querySelectorAll

    var aLi = document.querySelectorAll("li");
    var aDiv = document.querySelectorAll(".box");

二、class列表属性操作

  • classList: 获取元素中类名类似与数组的对象

      alert( oDiv.classList );
  • length: class的长度

    alert( oDiv.classList.length );
  • add(): 添加class方法

      oDiv.classList.add('box3');
  • remove(): 删除class方法

      oDiv.classList.remove('box4');
  • toggle(): 切换class方法

      oDiv.classList.toggle('view2');

三、拖拽操作

  • 拖拽使能draggable

    // draggable设置为true,元素就可以拖拽
    <div id="box" draggable="true"></div>
  • 拖拽元素事件(被拖拽的元素)

     - dragstart: 拖拽前触发 
     - drag: 拖拽前、拖拽结束之间,连续触发
     - dragend: 拖拽结束触发
  • 目标元素事件

    - dragenter: 进入目标元素触发,相当于mouseover
    - dragover: 进入目标、离开目标之间,连续触发
    - dragleave: 离开目标元素触发,相当于mouseout
    - drop: 在目标元素上释放鼠标触发(如果要触发该事件,需要在dragover中阻止其默认事件)
  • 火狐下拖拽问题
    必须设置dataTransfer对象才可以拖拽除图片外的其他标签(图片默认就是可以拖拽的);

    // 不是固定的,只要有设置值即可
    ev.dataTransfer.setData('name', 'hello');
  • dataTransfer对象

    - setData() : 设置数据 key和value(必须是字符串)
       ev.dataTransfer.setData('name', 'hello');
    - getData() : 获取数据,根据key值,获取对应的value
       ev.dataTransfer.getData('name');
    - setDragImage(): 三个参数:指定的元素,坐标X,坐标Y
      ev.dataTransfer.setDragImage(oBt, 0, 0);
    - files
       获取外部拖拽的文件,返回一个filesList列表
      filesList下有个type属性,返回文件的类型

四、FileReader读取文件信息

  • readAsDataURL: 参数为要读取的文件对象,将文件读取为DataUrl

    // 获取外部文件列表
    var files = ev.dataTransfer.files;
    var fileRead = new FileReader();
    fileRead.readAsDataURL(files[0]);
  • onload: 当读取文件完成的时候触发此事件

    this.result , 来获取读取的文件数据,如果是图片,将返回base64格式的图片数据
    fileRead.onload = function(){
    alert(this.result);
    }
    > 案例: 上传图片预览功能 
    
    > 案例: 拖拽购物车
赞(0)
评论 (0)