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
当输入值为空的时候返回true2)
typeMismatch
当输入类型和要求的类型不一致的时候返回true3)
patternMismatch
当用户输入的内容和预期的正则要求不匹配 返回true4)
customError
不符合在定义验证的时候返回true5)
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>