一、新增事件

文件拖拽：
    ondragover：    拖在上面
    ondragenter：    拖進去
    ondragleave：    拖出來
    ondrop：          鼠標釋放（如果想讓ondrop事件觸發(fā)就必須要先阻止ondragover的默認行為）
獲取文件信息：
    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
    文件內容：
        借助文件讀取對象：
        var reader = new FileReader();
        reader.readAsText(oFile);    通過文本讀取，只能讀取文本內容
        reader.readAsDataURL(oFile);  通過Base64讀取，一般來讀取小的logo，icon圖片，大的圖片視頻的數(shù)據(jù)太多
        進度更改事件：
        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        當前播放時間

音頻audio：
    音頻格式：mp3，ogg    其中的mp3格式各種瀏覽器都兼容

三、新增其他騷操作

選擇器
    document.querySelectorAll()[0];
    document.querySelector();
自定義屬性
    data-自定義屬性（W3C里面規(guī)定了data-永遠不會被用為官方屬性）
    獲取屬性：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：內陰影
        可以加多個陰影：
            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)在百度上搜索點第一個進去就可以測試各種0到1的曲線
        delay：延時(必須寫在duration的后面)    1s
        簡寫：transition:1s all ease 1s;
        ***運動結束事件（transitionend）：
            運動結束后觸發(fā)該事件，但添加必須用來事件監(jiān)聽來添加（addEventListener）
    ⑸transform(變形)：
        注意點：
            1.執(zhí)行有先后順序（后面的先執(zhí)行）
            2.行元素不能進行操作（需要塊級化）
        a).translate(x,y)                   平移(x,y軸)
            translateZ()                 Z軸平移
            想要用translateZ:
                1.父級必須變成3D：-webkit-transform-style:preserve-3d;
                2.父級必須透視：
                    (1)如果父級有旋轉效果之類的：-webkit-transform:perspective(透視值) rotateX/Y();
                    (2)如果父級什么效果都沒有：perspective: 透視值;
        b).rotate(deg)默認z軸               旋轉
            rotateX();                   延X軸旋轉
            rotateY();                   延Y軸旋轉
        c).scale(x的倍數(shù),y的倍數(shù))           縮放
        d).skew(xdeg,ydeg)                  拉伸、扭曲(不常用)
    ⑹transform-origin(x,y)設置原心位置
    ⑺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(文本切片)（給文字設置隨意不同的顏色）
        1.給元素設置背景漸變
        2.設置文本切片(必須加在背景下面)：-webkit-background-clip: text;
        3.文字顏色透明
    ⑽perspective(透視)（方便看3D效果）
        transform：perspective(透視值);
        透視值：推薦800-1200  值越小看著越明顯
    ⑾animation(高級動畫)
        定義一個動畫：
        @keyframes name{
            from{}
            to{}
        }
        調用一個動畫：
        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的值都沒有單位
    目標位置：
        gd.lineTo(x,y);
    設置線寬：
        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內繪制圖形的個數(shù)，個數(shù)越多越清楚，開過多的話計時器會影響性能)一般分為兩種：
    高幀頻：16ms
    低幀頻：30ms