1.HTML5新控制元件

其實新控制元件不難理解，一段程式碼足以說明

HTML部分

<form action="#">
    <input type="email" />     
    //電子郵箱文字框，跟普通的沒什麼區別當輸入不是郵箱的時候，驗證通不過，移動端的鍵盤會有變化
    <input type="tel" />      //電話號碼
    <input type="url" />      //網頁的URL 需要加上http
    //搜尋引擎chrome下輸入文字後，會多出一個關閉的X
    //required：此項必填，不能為空(pc端沒有用，可以通過偵錯程式幹掉)
 

    <input type="range" min="1" max="10" step="0.5"/><span></span>
    //特定範圍內的數值選擇器，有min、max、step( 步數 )這幾個屬性
    <input type="number" autofocus="autofocus">    //只能包含數字的輸入框
    //autofocus  :  指定表單獲取輸入焦點
    <input type="color"><span></span>    //顏色選擇器
    <input type
 
="datetime-local">       //顯示完整日期，不含時區
    <input type="time">     //顯示時間，不含時區
    <input type="date">       //顯示日期
    <input type="week">      //顯示周
    <input type="month">    //顯示月
    <input type="password" placeholder="請輸入密碼">   //輸入框提示資訊
    <input type="submit" formaction="#"
 
 />   
    <input type="submit" formaction="http://www.baidu.com">
    //formaction 在submit裡定義提交地址,並且可以分別提交，每個按鈕的提交地址不一樣
    //autocomplete:是否啟動自動完成（基於使用者之前輸入的值）。預設為on，關閉提示選擇off
    //list屬性和datalist標籤:為輸入框構造一個選擇列表。 list值為datalist標籤的id
    //pattern:正則驗證pattern=“\d{1,5}“，用title顯示規則 (pc端沒有用，可以通過偵錯程式幹掉)
</form>

JS部分

var oRange = document.getElementsByTagName("input")[4];
    var aSpan = document.getElementsByTagName("span");
    var oColor = document.getElementsByTagName("input")[6];
    oRange.value = aSpan[0].innerHTML = 1;
    oRange.onmousedown = function () {
        document.onmousemove = function () {
            aSpan[0].innerHTML = oRange.value;
        };
        document.onmouseup = function () {
            oRange.onmousedown = document.onmousemove = document.onmouseup = null;
        }
    };    ////每次滑動到相應的位置時，span裡顯示數值選擇器的value值
    oColor.onchange = function () {
        aSpan[1].innerHTML = oColor.value;
    }    //每次選中一個顏色之後，span裡顯示該顏色的16進位制

2.表單驗證

validity物件，通過下面的valid可以檢視驗證是否通過，如果八種驗證都通過返回true，一種驗證失敗返回false

1) valueMissing 當輸入值為空的時候返回true

2) typeMismatch 當輸入型別和要求的型別不一致的時候返回true

3) patternMismatch 當用戶輸入的內容和預期的正則要求不匹配 返回true

4) customError 不符合在定義驗證的時候返回true

5) oText.addEventListener("invalid",fn1,false);

6) ev.preventDefault() 阻止預設事件

7) rangeUnderflow: 驗證的range最小值,rangeOverflow：驗證的range最大值

8) stepMismatch: 驗證range 的當前值 是否符合min、max及step的規則

formnovalidate屬性 : 關閉驗證（寫在提交按鈕裡）

舉例如下：

<form>
    <input type="email" id="text"/>
    <input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
    alert(this.validity.valueMissing );
    ev.preventDefault();
}
</script>

3.新的選擇器（類css選擇器）

1) querySelector //類似jq裡的$()方法，但是隻能取到第一個元素

2) querySelectorAll //同上，但是隻能取到一個集合，即使只有一個元素

3) getElementsByClassName //通過class的方式取到一個元素集合

4) 獲取class列表屬性

classList（獲取一個元素的class集合，類陣列的物件），基於classList的方法：

– length : class的長度

– add() : 新增class方法

– remove() : 刪除class方法

– toggle() : 切換class方法

<script>
    var aDiv = document.getElementsByClassName("box")[0];
    aDiv.style.backgroundColor = "blue";
    aDiv.classList.add("box2");
    aDiv.classList.remove("box");
    aDiv.onclick = function () {
        aDiv.classList.toggle("box3");
    }
</script>

4.JSON的新方法

JSON.parse() : 把字串轉成json

!!!字串中的屬性要嚴格的加上引號

JSON.stringify() : 把json轉化成字串

會自動的把雙引號加上

新方法與eval方法的區別

eval()方法可以轉換各種資料格式，json方法只轉換json資料，且eval()方法不安全，可能會被植入木馬

新方法的應用

用於深度克隆新物件（構造器指標引起的問題）

var str1 = [1,2,3,{"a":1,"b":2,"c":3}];
    var newJson = JSON.parse(JSON.stringify(str1));
    str1[2] = 4;
    console.log(str1);
    console.log(newJson);

彈出結果：

5.data自定義資料

dataset

data-name（屬性） : dataset.name（js獲取）

data-name-first : dataset.nameFirst

<div data-color="red"></div>
<script>
    var oDiv = document.querySelector("div");
    oDiv.style.backgroundColor = oDiv.dataset.color;
    alert(decodeURI(window.location.hash.substring(1)));
</script>