一些标签
用在页面头部或板块头部 - 用于标签导航
- 标题组
标题1
标题2
用来划分区域 - 用来在页面中表示一套结构完整且独立的内容部分，比如报纸中的某一篇文章。
- 和主体相关的附属信息
用来包含多媒体的标签
多媒体需要的文字内容
现在是
- 用来描述文档或文档的某个细节部分（open属性表示展开）
// datalist和input元素配合使用，来定义input可能的值
运行结果：
details元素的标题
这是标题
这是正文内容这是正文内容
// 不写open=”open”，是收起的，设置了open才表示默认展开
运行结果：
- 定义文章或页面作者的详细联系地址
- 需要标记的词或句子，mark标签包裹起来的文本浏览器有默认的背景色，如果需要修改其背景色，在css中修改即可
关于h5在低版本IE中的兼容性
对于IE8及其以下版本的浏览器不兼容h5，两种解决方法：
1、在js中创建标签，eg：document.createElement(“header”);（这时header相当于自定义标签，，记得设置为块状元素）
2、引入插件html5shiv.js
新的输入型控件
- email —— 限制输入为电子邮箱格式（移动端的键盘会有变化）
// 如果输入的不是电子邮箱格式就提交，会出现相关的错误信息提示
- tel —— 电话号码
- url —— 网页url
- search —— 搜索引擎（Chrome下输入文字后，会多出一个关闭的x）
- range —— 特定范围内的数值选择器
- number —— 只能包含数字的输入框
- color —— 颜色选择器
- datetime —— 显示完整日期
- datetime-local —— 显示完整日期，不含时区
- time —— 显示时间，不含时区
- date —— 显示日期
- week —— 显示周
- month —— 显示月
- autocomplete —— 是否保存用户输入过的值，默认为on，关闭提示为off
- autofocus —— 指定表单获取输入焦点
- list和datalist —— 为输入框构造一个选择列表
- required —— 此项必填，不能为空
- pattern —— 正则验证pattern=“\d{1-5}”
- formaction —— 在submit里定义提交地址
关于h5新特性浏览器的支持情况： http://www.caniuse.com/#index
新的选择器
- querySelector，获取的就是一组中的第一个元素——获取的是单个元素
document.querySelector(“div”)
document.querySelector(“.box”)
document.querySelector(“[title=hello]”)
- querySelectorAll
document.querySelectorAll(“div”);
- getElementsByClassName
获取class列表属性
- classList
length：class的长度 add()：添加class remove()：删除class toggle()：切换classvar oDiv = document.getElementById("div1"); console.log(oDiv.classList); console.log(oDiv.classList.length); //3 oDiv.classList.add('box4'); //添加类box4 oDiv.classList.remove(‘box2'); //删除类box2 oDiv.classList.toggle(‘box5'); //如果有类box5，则删除；如果没有，则加上
json新方法
- parse() —— 字符串转化为json（字符串中的属性要严格加上引号）
- stringfy() —— json转化为字符串（自动给属性加上引号）
新方法和eval()的区别
var str = "function a(){console.log('a');}" eval(str); a(); //打印出helloeval可以解析任何形式字符串为js parse只能解析json格式字符串为js 由于parse有解析格式限制，所以parse的安全性较eval要高一些（万一eval中有病毒，会被执行）
- 新方法的应用——深度克隆对象
- 其他浏览器如何做到兼容 ——（http://www.json.org/去下载json2.js）
关于克隆
var a = {name: "Alice"};
var b = a;
b.name = "Bob";
console.log(a.name); //Bob 改变了a对象的属性值
var a = {name: "Alice"};
var b = {};
for (var attr in a) {
b[attr] = a[attr];
}
b.name = "Bob";
console.log(a.name); //Alice 然而，如果对象里是复合属性，则需要使用循环和递归的方式进行克隆
var a = {name: "Alice"};
var str = JSON.stringify(a);
var b = JSON.parse(str);
b.name = "Bob";
console.log(a.name); //Alice 不管是不是复合属性，此种方法都可以完成克隆
data- 属性
var oDiv = document.getElementById("oDiv");
console.log(oDiv.dataset.slogan); //好好学习
var oDiv1 = document.getElementById("oDiv1");
console.log(oDiv1.dataset.sloganAll); //天天向上
注：dataset.这种方式获取其属性是只读的，这种方式不能修改属性
延迟加载js
js的加载会影响后面的内容加载
- 很多浏览器都采用了并行方式加载js，但还是会影响其他内容
h5的defer和async
- defer，延迟加载，会按顺序执行，在onload执行前被触发
- async，异步加载，加载完就触发，有顺序问题
labjs库
历史管理
- onhashchange：改变hash值来管理
- history：服务器下运行
pushState：三个参数：数据 标题 地址 popstate事件：读取数据event，state 注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面
- 生成随机数
function randomNum(min,max,times){ //随机生成times个从min到max的随机数
var arr = [], //用于存放从min到max的数
resultArr = []; //用于存放结果
var unitLength = max-min;
var arrLength = unitLength>0?unitLength:(-unitLength);
for (var i = min; i < arrLength; i++) { //生成从min到max的数，放到数组arr中
arr.push(i);
}
for (i = 0; i < times; i++) {
// splice删除元素返回的删除元素后的数组
// floor，向下取整
resultArr.push(arr.splice(Math.floor(Math.random()*arr.length),1)[0]);
}
return resultArr;
}
console.log(randomNum(0,35,7)); //生成7个从0到35不重复的随机数
- 使用hash触发页面的历史管理（需求：生成随机数，并可以翻阅历史进行查看）
window.location.hash，windows对象会将这个属性的历史值依次存放起来
var oInput = document.getElementById("oInput"),
oDiv = document.getElementById("oDiv");
oInput.onclick = function(){
var numString = randomNum(0,35,7);
oDiv.innerHTML = numString;
window.location.hash = numString;
}
window.onhashchange = function(){ //onhashchange，小写，hash值改变触发
//substring(1)表示从第二个字符处开始截取字符
oDiv.innerHTML = window.location.hash.substring(1);
}
function randomNum(min,max,times){
var arr = [],
resultArr = [];
var unitLength = max-min;
var arrLength = unitLength>0?unitLength:(-unitLength);
for(var i=min;i- 使用pushState触发页面的历史管理（需求：生成随机数，并可以翻阅历史进行查看）
var oInput = document.getElementById("oInput"),
oDiv = document.getElementById("oDiv");
oInput.onclick = function(){
var numString = randomNum(0,35,7);
oDiv.innerHTML = numString;
history.pushState(numString,''); //history.state，历史状态
//关于history.pushState，https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
}
window.onpopstate = function(e){ //onpopstate，小写，浏览器的前进和后退触发
if(e.state){
oDiv.innerHTML = e.state;
}
}
function randomNum(min,max,times){
var arr = [],
resultArr = [];
var unitLength = max-min;
var arrLength = unitLength>0?unitLength:(-unitLength);
for(var i=min;ih5拖放事件
- 拖拽元素事件：事件对象为被拖拽元素
dragstart，拖拽前触发 drag，拖拽前、结束之间，连续触发 dragend，拖拽结束触发
- 目标元素事件：事件对象为目标元素
dragenter，进入目标元素触发 dragover，进入目标、离开目标之间，连续触发 dragleave，离开目标元素触发 drop，在目标元素上释放被拖拽元素
- 拖拽示例
.item {
margin: 10px;
width: 100px;
height: 40px;
line-height: 40px;
background-color: #0f0;
}
#oDiv {
margin: 40px 0 0 100px;
width: 200px;
height: 100px;
background-color: #f00;
}
- a
- b
- c
var oLis = document.getElementsByTagName("li"),
oDiv = document.getElementById("oDiv");
for (var i = 0; i < oLis.length; i++) {
oLis[i].ondragstart = function(){
console.log("开始拖拽");
}
oLis[i].ondrag = function(){
console.log("拖拽中");
}
oLis[i].ondragend = function(){
console.log("拖拽结束");
}
}
oDiv.ondragenter = function(){
console.log("进入目标元素");
}
oDiv.ondragover = function(e){
console.log("进入和离开目标元素之间连续触发");
e.preventDefault(); //要使drop事件生效，必须在ondragover中加上这句
}
oDiv.ondragleave = function(){
console.log("离开目标元素");
}
oDiv.ondrop = function(){
console.log("在目标元素上释放拖拽元素");
}
火狐下的拖拽问题
- 在火狐的拖拽中，必须设置dataTransfer对象的setData方法才可以拖拽除图片外的其他标签
dataTransfer对象： setData()：设置数据key和value（必须是字符串） getData()：获取数据，根据key获取对应的valueobj.ondragstart = function(ev){ var ev = ev||window.event; ev.dataTransfer.setData('name','hello'); console.log("开始拖拽"); //设置了dataTransfer，火狐浏览器才会支持拖拽除图片外的其他元素 }
- a
- b
- c
.item {
margin: 10px;
width: 100px;
height: 40px;
line-height: 40px;
background-color: #0f0;
}
#oDiv {
margin: 40px 0 0 100px;
width: 200px;
height: 100px;
background-color: #f00;
}
var oLis = document.getElementsByTagName("li"),
oDiv = document.getElementById("oDiv"),
oList = document.getElementById("oList");
for (var i = 0; i < oLis.length; i++) {
oLis[i].ondragstart = function(ev){
var ev = ev||window.event;
ev.dataTransfer.setData('name',this.dataset.id);
this.style.background = "#f00";
//设置了dataTransfer，火狐浏览器才会支持拖拽除图片外的其他元素
}
}
oDiv.ondragover = function(e){
e.preventDefault(); //要使drop事件生效，必须添加这句话
}
oDiv.ondrop = function(ev){
//拖拽元素，假装实现了拖拽到目标处的“删除”
oLis[ev.dataTransfer.getData("name")].style.display = 'none';
}
dataTransfer对象
- effectAllowed，设置光标样式（none，copy......百度悉知）
- setDragImage，三个参数：指定的元素，坐标x，坐标y
- files，获取外部拖拽的文件，返回一个fileList列表；fileList下有个type属性，返回文件的类型
for (var i = 0; i < oLis.length; i++) {
oLis[i].ondragstart = function(ev){
var ev = ev||window.event;
ev.dataTransfer.setData('name',this.dataset.id);
ev.dataTransfer.effectAllowed = ‘link';
ev.dataTransfer.setDragImage(oDiv,0,0);
this.style.background = "#f00";
}
}
FileReader（读取文件信息）
- readAsDataUrl —— 参数为要读取的文件对象，将文件读取为DataUrl
- onload —— 当文件读取成功完成时触发
——this.result，用来获取读取的文件数据，如果是图片，将返回base64格式的图片数据
- h5实现购物车拖拽：
https://github.com/AnnabelleLing/ShoppingCartDragH5Demo - h5实现图片上传预览：
https://github.com/AnnabelleLing/ImgUploadPreviewH5Demo
跨文档消息通信
（未完待续...）