h5

一些标签

  • <header>用在页面头部或板块头部<header>
  • <footer>用在页面尾部或板块尾部</footer>
  • <nav></nav>用于标签导航
<nav>
    <p><a href="">导航栏目1</a></p>
    <p><a href="">导航栏目2</a></p>
</nav>

<nav>
    <h2>标题</h2>
    <ul>
        <li><a href="">js</a></li>
        <li><a href="">html</a></li>
    </ul>
</nav>
  • <hgroup></hgroup>标题组
<hgroup>
    <h1>标题1</h1>
    <h1>标题2</h1>
</hgroup>
  • <section>用来划分区域</section>
  • <article></article>用来在页面中表示一套结构完整且独立的内容部分，比如报纸中的某一篇文章。
  • <aside></aside>和主体相关的附属信息
  • <figure></figure>用来包含多媒体的标签
<figure>
    <img src="img/jzz.jpg" alt=""/>
    <figcaption>多媒体需要的文字内容</figcaption>
</figure>
  • <time></time>
<p>现在是<time>21:00</time></p>
  • <details>用来描述文档或文档的某个细节部分</details>（open属性表示展开）
<input type="text" name="" value="" list="valList"/>
<datalist class="" id="valList">
    <option value="html"></option>
    <option value="css"></option>
    <option value="js"></option>
    <option value="jquery"></option>
    <option value="haha"></option>
</datalist>
// datalist和input元素配合使用，来定义input可能的值

运行结果：

  • <summary>details元素的标题</summary>
<details>
    <summary>这是标题</summary>
    <p>这是正文内容这是正文内容</p>
</details>
// 不写open=”open”，是收起的，设置了open才表示默认展开

运行结果：

  • <address>定义文章或页面作者的详细联系地址</address>
  • <mark>需要标记的词或句子</mark>，mark标签包裹起来的文本浏览器有默认的背景色，如果需要修改其背景色，在css中修改即可
  • <progress>定义进度条</progress>
<progress value="70" max="100">70%</progress>

关于h5在低版本IE中的兼容性

对于IE8及其以下版本的浏览器不兼容h5，两种解决方法：
1、在js中创建标签，eg：document.createElement(“header”);（这时header相当于自定义标签，，记得设置为块状元素）
2、引入插件html5shiv.js

新的输入型控件

  • email —— 限制输入为电子邮箱格式（移动端的键盘会有变化）
<form class="" action="index.html" method="get">
    <input type="email" name="" value="">
    <input type="submit" value="submit">
</form>
// 如果输入的不是电子邮箱格式就提交，会出现相关的错误信息提示
  • tel —— 电话号码
  • url —— 网页url
  • search —— 搜索引擎（Chrome下输入文字后，会多出一个关闭的x）
  • range —— 特定范围内的数值选择器
<input type="range" name="" id="" step="2" min="0" max="10" value="4">
  • 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()：切换class 

<div id="div1" class="box box1 box2" title=“hello"></div>
var 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(); //打印出hello   

eval可以解析任何形式字符串为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- 属性

<div data-slogan="好好学习" id="oDiv"></div>
<div data-slogan-all="天天向上" id="oDiv1"></div>
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对象会将这个属性的历史值依次存放起来

<input type="button" id="oInput" value="点击"/>
<div id="oDiv"></div>
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<arrLength;i++){
        arr.push(i);
    }
    for(i=0;i<times;i++){
        resultArr.push(arr.splice(Math.floor(Math.random()*arr.length),1)[0]);
    }
    return resultArr;
}
  • 使用pushState触发页面的历史管理（需求：生成随机数，并可以翻阅历史进行查看）
<input type="button" id="oInput" value="点击"/>
<div id="oDiv"></div>
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;i<arrLength;i++){
        arr.push(i);
    }
    for(i=0;i<times;i++){
        resultArr.push(arr.splice(Math.floor(Math.random()*arr.length),1)[0]);
    }
    return resultArr;
}

h5拖放事件

  • 拖拽元素事件：事件对象为被拖拽元素
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;
}
<ul>
    <li class="item" draggable="true">a</li>
    <li class="item" draggable="true">b</li>
    <li class="item" draggable="true">c</li>
</ul>
<div id="oDiv"></div>
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获取对应的value

obj.ondragstart = function(ev){
   var ev = ev||window.event;
   ev.dataTransfer.setData('name','hello');
   console.log("开始拖拽");
   //设置了dataTransfer，火狐浏览器才会支持拖拽除图片外的其他元素
}

<ul id="oList">
  <li class="item" draggable="true" data-id="0">a</li>
  <li class="item" draggable="true" data-id="1">b</li>
  <li class="item" draggable="true" data-id="2">c</li>
</ul>
<div id=“oDiv"></div>
.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格式的图片数据

跨文档消息通信

（未完待续...）

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,033评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,725评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,473评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,846评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,848评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,691评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,053评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,700评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,856评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,430评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,034评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2赞 343