4.6日 js call css classList js 拖拽 十个心得

1.js比较有趣的一个我发现了

直接这么写：
var divs = document.querySelectorAll('div');

[].forEach.call(divs, function(div) {
  // do whatever
  div.style.color = "red";
});

感觉非常有意思，官方的解释，[] = Array.prototype 即为简写：详情参考 该链接

2.此外这里引申出一个点，

call方法，默认是把第一个参数代替

[1,2,3].forEach(function (num) { console.log(num); });

第一个参数，即用新的数组替代[1,2,3]

3.classList

每个元素都一个classList属性，默认访问时得到全部的clas集合

4.给元素添加拖拽效果思路：

首先得到全部的元素 boxs集合 使用document.querySelectorAll('#columns .box');

通过添加监听事件 dragstart dragenter dragover dragleave四个事件

通过在四个监听事件中加入this.classList.add('xxxx') 来加入元素的不同类 从而获取新的效果

5.阻止父元素监听到当前事件，阻止冒泡

e.stopPropagation()

6.拖拽时候的数据传递

e.dataTransfer.setData('text/html',this.innerHTML);  第一个参数类型 第二个参数必须为字符串

e.dataTransfer.getData('text/html');

此外dragenter允许通过e.dataTransfer.effectAllowed设置鼠标效果 和dragover  允许通过e.dataTransfer.dropEffect设置鼠标效果

7.阻止本身默认事件

e.preventDefualt()

8.四舍五入

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

9.获取文件的方法

9.1.  在拖拽的过程中通过e.dataTransfer.files获取

9.2.  通过type='file'  得到它之后var files = document.getelementbyId("fileInput").files