一笋籽、新增事件
文件拖拽：
ondragover： 拖在上面
ondragenter： 拖進(jìn)去
ondragleave： 拖出來
ondrop： 鼠標(biāo)釋放（如果想讓ondrop事件觸發(fā)就必須要先阻止ondragover的默認(rèn)行為）
獲取文件信息：
oEle.ondrop = function(ev){
ev.dataTransfer.files 所有的文件列表
var oFile = ev.dataTransfer.files[0]; 獲取文件列表中的第一個文件
}
文件信息：
oFile.name 文件的名字
oFiles.size 文件的大小
oFiles.type 文件類型
電腦識別的文件類型是MIME-type
而不是：text/plain image/gif柿菩、jpeg、png video/avi mp4
文件內(nèi)容：
借助文件讀取對象：
var reader = new FileReader();
reader.readAsText(oFile); 通過文本讀取蹭睡，只能讀取文本內(nèi)容
reader.readAsDataURL(oFile); 通過Base64讀取衍菱，一般來讀取小的logo，icon圖片肩豁，大的圖片視頻的數(shù)據(jù)太多
進(jìn)度更改事件：
reader.onprogress = function(ev){
ev.loaded 已經(jīng)加載的
ev.total 總數(shù)
}
toFixed(2); 顯示幾位小數(shù)脊串，2就是2位小數(shù)
二、視頻音頻
視頻video：
視頻格式：mp4清钥，ogg琼锋，avi，webb 其中的mp4格式各種瀏覽器都兼容
屬性：
controls 控制臺
autoplay 自動播放
loop 環(huán)路播放祟昭、循環(huán)播放
自定義video的方法：
play() 播放
pause() 暫停
自定義video的屬性：
currentTime 當(dāng)前播放時間
音頻audio：
音頻格式：mp3缕坎，ogg 其中的mp3格式各種瀏覽器都兼容
三就缆、新增其他騷操作
選擇器
document.querySelectorAll()[0];
document.querySelector();
自定義屬性
data-自定義屬性（W3C里面規(guī)定了data-永遠(yuǎn)不會被用為官方屬性）
獲取屬性：oEle.dataset.自定義的屬性
class操作
oEle.classList（里面新增了許多新的方法柳譬，常用的如下：）
.length 長度
.value 所有class
.add() 添加class
.remove() 刪除class
.contains() 包含
.toggle() 切換
四、CSS3
1.瀏覽器前綴：
-webkit- Chrome/Safari/opear/firefox(49+)
-moz- Firefox
-ms- IE
-o- Opear(old)
不加前綴 W3C要求
2.新屬性：
⑴border-radius(圓角)：
border-radius: 左上右下,右上左下;
border-radius: 左上,右上左下,右下;
border-radius: 左上,右上,右下,左下;
⑵box-shadow(盒子陰影)：
box-shadow：x偏移 y偏移 陰影范圍 顏色;
box-shadow：x偏移 y偏移 陰影范圍 顏色;
box-shadow：[inset(可加可不加)] x偏移 y偏移 陰影范圍 顏色;
inset：內(nèi)陰影
可以加多個陰影：
box-shadow: x y opacity color, x y opacity color...;
⑶text-shadow(文字陰影)：同上
⑷transition(運動)：
duration：運動的時間 1s
style-type：過渡效果 all
timing-function：運動類型 linear勻速運動
貝塞爾曲線：cubic-bezier(x1,y1,x2,y2)在百度上搜索點第一個進(jìn)去就可以測試各種0到1的曲線
delay：延時(必須寫在duration的后面) 1s
簡寫：transition:1s all ease 1s;
***運動結(jié)束事件（transitionend）：
運動結(jié)束后觸發(fā)該事件，但添加必須用來事件監(jiān)聽來添加（addEventListener）
⑸transform(變形)：
注意點：
1.執(zhí)行有先后順序（后面的先執(zhí)行）
2.行元素不能進(jìn)行操作（需要塊級化）
a).translate(x,y) 平移(x,y軸)
translateZ() Z軸平移
想要用translateZ:
1.父級必須變成3D：-webkit-transform-style:preserve-3d;
2.父級必須透視：
(1)如果父級有旋轉(zhuǎn)效果之類的：-webkit-transform:perspective(透視值) rotateX/Y();
(2)如果父級什么效果都沒有：perspective: 透視值;
b).rotate(deg)默認(rèn)z軸 旋轉(zhuǎn)
rotateX(); 延X軸旋轉(zhuǎn)
rotateY(); 延Y軸旋轉(zhuǎn)
c).scale(x的倍數(shù),y的倍數(shù)) 縮放
d).skew(xdeg,ydeg) 拉伸哼审、扭曲(不常用)
⑹transform-origin(x,y)設(shè)置原心位置
⑺gradient(漸變)
線性漸變
linear-gradient(顏色1,顏色2);可以多個顏色
改變方向漸變：linear-gradient(方向,顏色1,顏色2);
范圍漸變：linear-gradient(color1 start, color1 end, color2 start, color2 end, color3 start, color3 end...);
跳變（平鋪）：repeating-linear-gradient(color1 start, color1 end, color2 start, color2 end...);
徑向漸變
radial-gradient(顏色1,顏色2);
⑻background-size(背景)抹估，改變背景的大小
⑼background-clip(文本切片)（給文字設(shè)置隨意不同的顏色）
1.給元素設(shè)置背景漸變
2.設(shè)置文本切片(必須加在背景下面)：-webkit-background-clip: text;
3.文字顏色透明
⑽perspective(透視)（方便看3D效果）
transform：perspective(透視值);
透視值：推薦800-1200 值越小看著越明顯
⑾animation(高級動畫)
定義一個動畫：
@keyframes name{
from{}
to{}
}
調(diào)用一個動畫：
animation: name duration ...;
名字：
-webkit-animation-name: toBig;
運動時長：
-webkit-animation-duration: 1s;
運動類型：
-webkit-animation-timing-function: ease;
迭代次數(shù)： infinite 無限
-webkit-animation-iteration-count: infinite;
方向： alternate
-webkit-animation-direction: alternate;
播放狀態(tài)：
-webkit-animation-play-state: paused|running;
延遲：
-webkit-animation-delay:;
停在那：
-webkit-animation-fill-mode: forwards;
五素征、Canvas(畫布)
定義：是一個用來繪制圖形的容器
用法：它本身是沒有繪制圖形的能力的悄窃，只不過需要借助getContext()方法來獲取canvas對象，來獲取繪圖的上下文(這里的上下文可以理解為畫筆和紙):
var gd = oEle.getContext('2d');
每次在重新再一個畫布上繪制圖形的開始之前先寫上：
gd.beginPath(); //重新開始路徑
初始位置：
gd.moveTo(x,y); //所有x y的值都沒有單位
目標(biāo)位置：
gd.lineTo(x,y);
設(shè)置線寬：
gd.lineWidth = 10; //寬度的數(shù)字 沒有單位
描邊顏色：
gd.strokeStyle = 'color';
描邊：
gd.stroke();
填充顏色：
gd.fillStyle = 'color';
填充：
gd.fill();
閉合路徑：
gd.closePath(); //畫圖的時候用來執(zhí)行最后一步女仰，回到起點
現(xiàn)有圖形簡寫：
rect 矩形
a) gd.rect(x,y,width,height); 或 gd.stroke(); 或 gd.fill();
b) gd.strokeRect(x,y,width,height); 或 gd.fillRect(x,y,width,height);
清屏：
gd.clearRect(x,y,width,height); //執(zhí)行順序 清屏=>改變值=>重新畫另一個
做動畫的計時器的幀頻(1s內(nèi)繪制圖形的個數(shù)猜年，個數(shù)越多越清楚，開過多的話計時器會影響性能)一般分為兩種：
高幀頻：16ms
低幀頻：30ms
