一、新增事件
文件拖拽：
ondragover： 拖在上面
ondragenter： 拖進(jìn)去
ondragleave： 拖出來(lái)
ondrop： 鼠標(biāo)釋放（如果想讓ondrop事件觸發(fā)就必須要先阻止ondragover的默認(rèn)行為）
獲取文件信息：
oEle.ondrop = function(ev){
ev.dataTransfer.files 所有的文件列表
var oFile = ev.dataTransfer.files[0]; 獲取文件列表中的第一個(gè)文件
}
文件信息：
oFile.name 文件的名字
oFiles.size 文件的大小
oFiles.type 文件類型
電腦識(shí)別的文件類型是MIME-type
而不是：text/plain image/gif、jpeg、png video/avi mp4
文件內(nèi)容：
借助文件讀取對(duì)象：
var reader = new FileReader();
reader.readAsText(oFile); 通過(guò)文本讀取，只能讀取文本內(nèi)容
reader.readAsDataURL(oFile); 通過(guò)Base64讀取，一般來(lái)讀取小的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 控制臺(tái)
autoplay 自動(dòng)播放
loop 環(huán)路播放、循環(huán)播放
自定義video的方法：
play() 播放
pause() 暫停
自定義video的屬性：
currentTime 當(dāng)前播放時(shí)間
音頻audio：
音頻格式：mp3，ogg 其中的mp3格式各種瀏覽器都兼容
三、新增其他騷操作
選擇器
document.querySelectorAll()[0];
document.querySelector();
自定義屬性
data-自定義屬性（W3C里面規(guī)定了data-永遠(yuǎn)不會(huì)被用為官方屬性）
獲取屬性：oEle.dataset.自定義的屬性
class操作
oEle.classList（里面新增了許多新的方法，常用的如下：）
.length 長(zhǎng)度
.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)陰影
可以加多個(gè)陰影：
box-shadow: x y opacity color, x y opacity color...;
⑶text-shadow(文字陰影)：同上
⑷transition(運(yùn)動(dòng))：
duration：運(yùn)動(dòng)的時(shí)間 1s
style-type：過(guò)渡效果 all
timing-function：運(yùn)動(dòng)類型 linear勻速運(yùn)動(dòng)
貝塞爾曲線：cubic-bezier(x1,y1,x2,y2)在百度上搜索點(diǎn)第一個(gè)進(jìn)去就可以測(cè)試各種0到1的曲線
delay：延時(shí)(必須寫(xiě)在duration的后面) 1s
簡(jiǎn)寫(xiě)：transition:1s all ease 1s;
***運(yùn)動(dòng)結(jié)束事件（transitionend）：
運(yùn)動(dòng)結(jié)束后觸發(fā)該事件，但添加必須用來(lái)事件監(jiān)聽(tīng)來(lái)添加（addEventListener）
⑸transform(變形)：
注意點(diǎn)：
1.執(zhí)行有先后順序（后面的先執(zhí)行）
2.行元素不能進(jìn)行操作（需要塊級(jí)化）
a).translate(x,y) 平移(x,y軸)
translateZ() Z軸平移
想要用translateZ:
1.父級(jí)必須變成3D：-webkit-transform-style:preserve-3d;
2.父級(jí)必須透視：
(1)如果父級(jí)有旋轉(zhuǎn)效果之類的：-webkit-transform:perspective(透視值) rotateX/Y();
(2)如果父級(jí)什么效果都沒(méi)有：perspective: 透視值;
b).rotate(deg)默認(rèn)z軸 旋轉(zhuǎn)
rotateX(); 延X(jué)軸旋轉(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);可以多個(gè)顏色
改變方向漸變：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(高級(jí)動(dòng)畫(huà))
定義一個(gè)動(dòng)畫(huà)：
@keyframes name{
from{}
to{}
}
調(diào)用一個(gè)動(dòng)畫(huà)：
animation: name duration ...;
名字：
-webkit-animation-name: toBig;
運(yùn)動(dòng)時(shí)長(zhǎng)：
-webkit-animation-duration: 1s;
運(yùn)動(dòng)類型：
-webkit-animation-timing-function: ease;
迭代次數(shù)： infinite 無(wú)限
-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(畫(huà)布)
定義：是一個(gè)用來(lái)繪制圖形的容器
用法：它本身是沒(méi)有繪制圖形的能力的，只不過(guò)需要借助getContext()方法來(lái)獲取canvas對(duì)象，來(lái)獲取繪圖的上下文(這里的上下文可以理解為畫(huà)筆和紙):
var gd = oEle.getContext('2d');
每次在重新再一個(gè)畫(huà)布上繪制圖形的開(kāi)始之前先寫(xiě)上：
gd.beginPath(); //重新開(kāi)始路徑
初始位置：
gd.moveTo(x,y); //所有x y的值都沒(méi)有單位
目標(biāo)位置：
gd.lineTo(x,y);
設(shè)置線寬：
gd.lineWidth = 10; //寬度的數(shù)字 沒(méi)有單位
描邊顏色：
gd.strokeStyle = 'color';
描邊：
gd.stroke();
填充顏色：
gd.fillStyle = 'color';
填充：
gd.fill();
閉合路徑：
gd.closePath(); //畫(huà)圖的時(shí)候用來(lái)執(zhí)行最后一步，回到起點(diǎn)
現(xiàn)有圖形簡(jiǎn)寫(xiě)：
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í)行順序 清屏=>改變值=>重新畫(huà)另一個(gè)
做動(dòng)畫(huà)的計(jì)時(shí)器的幀頻(1s內(nèi)繪制圖形的個(gè)數(shù)，個(gè)數(shù)越多越清楚，開(kāi)過(guò)多的話計(jì)時(shí)器會(huì)影響性能)一般分為兩種：
高幀頻：16ms
低幀頻：30ms
