HTML5新特性1(新表单控件/选择器/JSON/data)

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>