02、HTML5-新特性

一、新的选择器

• 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);
  }

案例: 上传图片预览功能
案例: 拖拽购物车