一.H5 新增常用表单标签
<form action="">
邮箱:<input type="email" name="email" id=""><br>
颜色:<input type="color" name="color" id=""><br>
数量: <input type="number" name="number" id="" max="100" min="0"><br>
范围: <input type="range" name="range" id="" max="100" min="20" value="30"><br>
<!-- time 时分秒 -->
时间:<input type="time" name="time" id=""><br>
<!-- date年月日 -->
日期: <input type="date" name="date" id=""><br>
日期+时间 <input type="datetime" name="" id=""><br>
日期+时间 <input type="datetime-local" name="" id=""><br>
月份 : <input type="month" name="" id=""><br>
星期: <input type="week" name="" id="">
</form>
最终效果
二. 新增常用属性
<body>
<form action="" id="idform">
<!-- placeholder :提示文本 autofocus:自动获取焦点 autocomplete:自动完成 on表示打开 off表示关闭 -->
<input type="text" name="text" id="" placeholder="请输入用户名" autofocus autocomplete="on"><br>
<!-- tel:并不会实现验证,仅仅只在移动端可以弹出数字键盘 -->
<!-- required:必须输入,如果不输入,就会阻止数据的提交 -->
<!-- pattern:匹配正则 -->
<input type="tel" name="telPhone" id="" required pattern="^(\+86)?1\d{10}$"><br>
<!-- multiple控制多个文件上传 -->
<input type="file" name="file" id="" multiple>
</form>
<!-- form向指定表单追加表单元素 value值传入form表单的id值-->
地址: <input type="text" name="address" id="" form="idform">
</body>
三.新增表单元素
<form action="">
<!-- < !--建立输入框与datalist的关联 list="datalist的id号"-->
用户: <input type="text" list="userName"><br>
<!-- 通过 datalist来创建下拉列表 -->
<datalist id="userName">
<!--创建选项值：value:具体的值 label:提示信息，辅助值-->
<!-- option可以是单标签也可以是双标签 -->
<option value="吴彦祖" label="身高180的长腿欧巴">
<option value="谢霆锋" label="eee"></option>
</datalist>
网址 : <input type="url" list="urllist">
<datalist id="urllist">
<option value="www.baidu.com" label="百度"></option>
<option value="www.163.cn" label="163">
</datalist>
</form>
最终效果
四 新增事件
<form action="">
用户 : <input type="text" name="userName" id="userName"><br>
电话 : <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<input type="submit" value="提交">
</form>
<script>
// 1. oninput :监听指定元素的内容变化,修改或者删除都会监听
document.querySelector("#userName").oninput = function () {
console.log("oninput" + this.value);
}
// 2. onkeyup :键盘弹起事件
document.querySelector("#userName").onkeyup = function () {
console.log("onkeyup" + this.value);
}
//3 . oninvalid 当验证密码不通过时触发
document.querySelector("#userPhone").oninvalid = function () {
this.setCustomValidity("请输入合法的手机号")
}
</script>
网络接口
<script>
/*1.ononline:网络连通的时候触发这个事件*/
window.addEventListener("online",function(){
alert("网络连通了");
});
/*2.onoffline:网络断开时触发*/
window.addEventListener("offline",function(){
alert("网络断开了");
})
</script>
五 多媒体标签
audio 音频 播放器
video视频 播放器
六 操作类样式
add 为指定元素添加类样式
document.querySelector("li").classList.add("red");
remove 为指定元素移除该样式
document.querySelector("li").classList.remove("red");
toggle 为指定元素切换为该样式
document.querySelector("li").classList.toggle("red");
contains 判断指定元素是否有该样式.bool类型
var a=document.querySelector("li").classList.contains("red");
console.log(a);
七 自定义属性
<body>
<p data-my-name="张三"></p>
<script>
window.onload=function(){
var p=document.querySelector("p");
var value=p.dataset["myNname"]; //驼峰命名
// console.dir(p);
console.log(value);
}
</script>
</body>
八 文件上传
<form action="">
<input type="file" name="file" id="file" value="文件上传">
</form>
<script>
document.querySelector("#file").onchange = function () {
var files = this.files;
for (var i = 0; i < files.length; i++) {
filesData(files[i]);
}
}
function filesData(filesobj) {
var reader = new FileReader();
console.log(reader);
reader.readAsDataURL(filesobj);
reader.onload = function () {
var img = document.createElement("img");
document.body.appendChild(img);
img.src = reader.result;
}
}
</script>
八 sessionStorage 和 localStorage
1.HTML5提供的解决方案：
a)window.sessionStorage
b)window.localStorage
1.sessionStorage特点：
a)设置、读取方便
b)容量较大，sessionStorage约5M、localStorage约20M
c)只能存储字符串，可以将对象JSON.stringify() 编码后存储
1.1.Window.sessionStorage的使用
a)特点：
i.生命周期为关闭浏览器窗口：相当于存储在当前页面的内内存中
ii.在同一个窗口下数据可以共享(在当前页面下可以获取到，换另外一个页面下不能获取到)
b)方法介绍：(两种存储方式的方法一致)
i.SetItem(key,value):设置数据，以键值对的方式
ii.getItem(key):通过指定的键获取对应的值内容
iii.removeItem(key):删除指定的key及对应的值内容
iv.clear():清空所有存储内容
c)使用说明：
<script>
var userData=document.getElementById("userName");
//存储数据
document.getElementById("setData").onclick=function(){
window.sessionStorage.setItem("userName",userData.value);
}
//获取数据
document.getElementById("getData").onclick=function(){
var value=window.sessionStorage.getItem("userName");
alert(value);
}
</script>
2.Window.localStorage的使用
a)特点：
i.永久生效，除非手动删除：存储在硬盘上
ii.可以多窗口共享。但是不能跨浏览器
b)使用说明：
<script>
var userData=document.getElementById("userName");
//存储数据
document.getElementById("setData").onclick=function(){
window.localStorage.setItem("userName",userData.value);
}
//获取数据
document.getElementById("getData").onclick=function(){
var value=window.localStorage.getItem("userName");
alert(value);
}
//删除数据
document.getElementById("removeData").onclick=function(){
window.localStorage.removeItem("userName");
}
</script>