H5 语义化、基本事件浅析（含file对象、drag拖拽等）

1.语义化标签

帮助搜索引擎，盲人设备等程序，辨识网页内容信息，明确网页区域分布，不体现任何样式，但存在浏览器兼容性问题，如IE8下无<header>标签。

① H5基本语义标签：

<nav> 导航

<header> 页眉

<footer> 页脚

<section> 区块

<article> 文章

<aside> 侧边栏

<progress> 进度条

②兼容性处理

（1）在IE浏览器下进行创建标签处理：

document.createElement(“header”) 即可识别<header>标签

（2）引入JS兼容包

cc: ie6 点击<tab>键自动生成：

< ! -- [ if lte IE 6 ] > （如果小于等于IE6执行）可改成8

< ! [ endif ] -- >

这段代码只会在IE6以下浏览器版本中执行，在Chrome中以注释形式呈现。

2. 微数据（可辅助盲人设备识别网页ARIA：Accessible Rich Internet Application）

微数据是在如 <span>、<div>的标签内添加属性，让程序（如搜索引擎）识别其含义和某些特定类型的信息。如下：

<span itemprop = “reviewer”>developer</span>

3. H5的DOM操作

① 通过document获取元素

（1）document.getElementByClassName(“class”)

通过类名获取元素，获取所有具有该类名的元素

（2） document.querySelector

document.querySelector(“.class”) 类名选择获取，获取第一个具有该类名的元素

document.querySelector(“#id”) id选择获取

document.querySelector(“.class li”) 后代选择获取获取的是第一个后代元素

document.querySelector(“ul>li”) 子代选择获取获取的是第一个代元素

（3） document.querySelectorAll

document.querySelectorAll(“#id li”) 获取#id下的所有li

②其他基本类名操作方法总结

classList.add():添加 classList.remove():移除 classList.toggle():替换 classList.contains():检测

③ 自定义属性

data-：是自定义属性的固定前缀，其后的name、id为自定义属性

获取自定义属性: XXX.getAttribute(“data-name”)

设置自定义属性: XXX.setAttribute(“index” , “abc”)

H5获取自定义属性: XXX.dataset

例如需要获取自定义name: XXX.dataset.name即可

4. H5基本事件分析

① online offline

delay():延迟执行

window.addEventListener(“online” , function(){

$(“.class”).text(“网络已链接”).fadeIn(500).delay(1000).fadeOut();

})

window.addEventListener(“offline” , function(){

$(“.class”).text(“网络已断开”).fadeIn(500).delay(1000).fadeOut();

})

② 全屏显示

webkit 内核浏览器(如：Chrome): webkitRequestFullScreen全屏显示、webkitCancelFullScreen 取消全屏显示

Gecko 内核浏览器(如：火狐): mozRequestFullScreen全屏显示、mozCancelFullScreen 取消全屏显示

（1）点击按钮全屏显示

btn.addEventListener(“click” , function(){

document.documentElement. webkitRequestFullScreen();

div. webkitRequestFullScreen();

})

（2）点击按钮关闭全屏显示无论哪个元素调研全屏，必须给document绑定关闭全屏事件，只能通过document关闭全屏

btn.addEventListener(“click” , function(){

document.webkitCancelFullScreen();

})

（3）document.fullScreen属性（是否全屏判断）

Chrome下为：document.webkitIsFullScreen (全屏返回true,非全屏返回false)

火狐下为：document.mozFullScreen (全屏返回true,非全屏返回false)

（4）:full-screen {}全屏伪类

Chrome下为：webkit-full-screen {} .box: webkit-full-screen {}在全屏下显示样式

火狐下为：moz-full-screen {} .box: moz-full-screen {}在全屏下显示样式

③ onchange 改变事件

</select>

var select = document.querySelecrtor(“select”);

select.onchange = function(){

alert(this.value); (根据选择返回”0” , ”1” , ”2”)

}

④ file对象 fileList对象 fileReader对象

<input type = “file” multiple id = “file”> （这是一个上传多文件的选择按钮）

查看file属性

file.onchange = function (){

for(var key in file ){

console.log(key+ “~~~”+file[key])

}}

上传文件后file下的files具有一个FileList清单

在onchange函数下可以打印file.files，可以获取FileList清单

查看FileList清单可以看到上传文件的具体信息，例如name等

根据FileList来获取上传文件属性

file.onchange = function (){

var fileFirst= this.files[0];

var reader = new FileReader();

}

var reader = new FileReader(); (FileReader为一个内建对象，这一步为实例化内建对象，即：实例化一个文件读取器)

console.log(reader)可以获取读取文件的方式如下：

reader.readAsDataURL(fileFirst)

读取文件列表的第一个文件，将其解读为机器识别的URL值

reader.onload = function(){ （由于读取文件需要时间所以将结果在onload下赋值） console.log(this.result); (可以获取该方法下读取的文件结果)

document. querySelector(“img”).src=this.result;

（给<img id = “img”>的src设置读取的URL值，形成图片预览）

}

全过程完整代码如下：

file.onchange = function (){

var fileFirst= this.files[0];

var reader = new FileReader();

reader.readAsDataURL(fileFirst)

reader.onload = function(){

document. querySelector(“img”).src=this.result;

}

⑤ drag拖拽属性、ondrag事件

（1）被拖拽元素

<div class = “box” draggable = “true”></div> 设置draggable后可以拖拽

<a>、<img>等标签默认的draggable设置为true

<a draggable = “false”></a> 设置draggable为false可以关闭拖拽

·添加拖拽事件：”drag” 改变原div的背景色只要拖拽一直触发事件

box.addEventListener("drag", function () {

this.style.backgroundColor = "blue";

})

·添加拖拽事件：”dragstart” 改变拖拽中div的背景色只在拖拽开始触发一次

box.addEventListener("drag", function () {

this.style.backgroundColor = "red";

})

·添加拖拽事件：”dragleave” 拖拽后，鼠标离开原div触发事件

box.addEventListener("dragleave", function () {

console.log("dragleave");

})

·添加拖拽事件：”dragend” 拖拽后，鼠标松开触发事件，改变原div背景色

box.addEventListener("dragend", function () {

this.style.backgroundColor = "green";

})

（2）目标元素

·添加拖拽事件：”dragenter” 改变目标div的背景色只要鼠标进入目标触发事件，只触发一次

box.addEventListener("dragenter", function () {

this.style.backgroundColor = "blue";

})

·添加拖拽事件：”dragover” 改变目标div的背景色只要鼠标进入目标触发事件，在”dragenter”事件之后，只要拖拽一直触发

box.addEventListener("dragover", function () {

this.style.backgroundColor = "blue";

})

·添加拖拽事件：”drop” 改变目标div的背景色 鼠标进入目标且松开且无论”dragover”事件执行与否，必须阻止其默认行为( event.preventDefault() )后触发事件，只触发一次 ，由于drop本身具有默认行为，即拖拽本地任意文件到目标都会被打开，也须对其进行阻止

box.addEventListener("dragover", function (event) {

event.preventDefault( );

})

box.addEventListener("drop", function (event) {

this.style.backgroundColor = "blue";

event.preventDefault( );

})

“drop”拖拽上传文件预览：

Console.log()拖拽事件对象：

div.addEventListener("drop", function (event) {

console.log(event)

})

可以获得event下dataTransfer属性下的files.FileList，通过这个属性可以获取被拖拽文件：event.dataTransfer.files[0]

通过添加实例化文件读取器，读取拖拽文件的URL值

实例化文件读取器：var reader = new FileReader()

读取拖拽上传文件的URL值：reader.readASDataURL(event.dataTransfer.files[0])

将值赋给目标<img>的src即可完成拖拽预览，由于读取文件过程需要一定时间，赋值过程需放在onload事件下进行。

完整代码如下:

div.addEventListener("dragover", function (event) {

event.preventDefault();

})

div.addEventListener("drop", function (event) {

event.preventDefault();

var reader = new FileReader();

reader.readAsDataURL(event.dataTransfer.files[0])

reader.onload = function () {

document.querySelector("#img").src = this.result;

}

})

·添加拖拽事件：”dragleave” 拖拽后，鼠标离开目标div触发事件

box.addEventListener("dragleave", function () {

console.log("dragleave");

})

⑥ geolocation地理定位(Location Base Service)

（1）隐私

HTML5 Geolocation 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。

（2）API详解

1、获取当前地理信息

navigator. geolocation.getCurrentPosition(successCallback（函数，成功获取返回值）, errorCallback（函数，失败获取返回值）, options（对象，第三参数）)

2、重复获取当前地理信息监视地理信息

navigator. geolocation.watchPosition(successCallback, errorCallback, options)

当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。包含如下信息：

position.coords.latitude纬度

position.coords.longitude经度

position.coords.accuracy精度

position.coords.altitude海拔高度

当获取地理信息失败后，会调用errorCallback，并返回错误信息error

可选参数 options 对象可以调整位置信息数据收集方式

a) enableHighAccuracy 高精度模式

b) timeout 超时设置，单位为ms

c) maximumAge表示浏览器重新获取位置信息的时间间隔，单位为ms

（3）应用

在现实开发中，通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用户位置（经/纬度）当作参数传递，就可以实现相应的功能。

⑦ history历史管理单页面应用

（1）pushState(): 添加一条新的历史记录

input.onclick = function () {

history.pushState({} , "标题" , "/text.html")

}

history.pushState({} , "标题" , "/text.html")要传三个参数：

1. 对象，添加历史时会有一些数据，一般为null

2. 一个标题，一般不生效，没有意义

3. 需要更改的地址，会当做一个新的记录

（2）replaceState(): 替换当前地址，不生成新的记录

input.onclick = function () {

history.replaceState({} , "标题" , "/text.html")

}

（3）window.onpopstate 历史发生改变后，前进或后退时触发

input.onclick = function () {

history.pushState({key:123},"标题","/text.html")

}

window.onpopstate = function (state) {

console.log(state)

}

后退的时候：state为null

前进的时候：state为对象，key:123，是pushState中传入的对象

⑧ web存储

（1）cookie

document.cookie，存储大小只有4096字节，以字符串（”key = value”）形式展现

（2）sessionStorage ①刷新页面数据依然存在，关闭窗口消失，②单窗口打开，无法共享数据

sessionStorage容量约为5M，设置一个存储量：

btn.onclick = function () {

window.sessionStorage.setItem("name", "Tabb")

}

获取设置的属性值：

get.onclick = function () {

var name = window.sessionStorage.getItem("name")

console.log(name)

}

动态设置输入的值： （可以根据输入值的动态改变连续设置该值）

$("#get").on("click", function () {

var key = $("#get").siblings("label").find("#key").val();

var value = $("#get").siblings("label").find("#value").val();

window.sessionStorage.setItem(key,value);

})

动态获取输入的值： （获取的值是sessionStorage.setItem动态设置的键值对的值，所以必须先设置键值对才能获取）

构建html，使用label包裹下的input即可如下：

<label for = “key”>

key: <input type = “text” id = “key”>

</label>

$("#get").on("click", function () {

var key = $("#get").siblings("label").find("#key").val()

var value = $("#get").siblings("label").find("#value").val()

window.sessionStorage.setItem(key, value)

var getValue = window.sessionStorage.getItem(key)

$("#get").siblings("label").find("#getValue").val(getValue);

})

动态移除（removeItem）、清除（clear）添加的sessionStorage.setItem:

$("#remove").on("click", function () {

var key = $("#get").siblings("label").find("#key").val()

window.sessionStorage.removeItem(key)

})

$("#clear").on("click", function () {

var key = $("#get").siblings("label").find("#key").val()

window.sessionStorage.clear(key)

})

（3）localStorage

与sessionStorage相比具有更大的存储空间，大约20M，①刷新依然存在，②关闭浏览器后也存在，只有清除浏览器缓存后才消失，③可以多窗口打开，共享数据

使用方法和sessionStorage一样都具备 setItem,getItem,removeItem,clear方法，

还具备key(n)方法，n为存储数据的索引号，该方法使用不多

代码如下：

$("#get").on("click", function () {

var key = $("#get").siblings("label").find("#key").val()

var value = $("#get").siblings("label").find("#value").val()

window.localStorage.setItem(key, value) 设置的时候传入字符串

var getValue = window.localStorage.getItem(key)

$("#get").siblings("label").find("#getValue").val(getValue);

})

$("#remove").on("click", function () {

var key = $("#get").siblings("label").find("#key").val()

window.localStorage.removeItem(key)

})

$("#clear").on("click", function () {

var key = $("#get").siblings("label").find("#key").val()

window.localStorage.clear(key)

})

⑨ 应用缓存appcache (cache为缓存)：主要缓存静态资源

（1）应用缓存的优势

1、可配置需要缓存的资源

2、网络无连接应用仍可用

3、本地读取缓存资源，提升访问速度，增强用户体验

4、减少请求，缓解服务器负担

（2）缓存清单 （基于不同浏览器本身具有自身的缓存机制导致兼容性差，服务端维护复杂，所以不推荐使用这个方法，这里只做简单介绍）

a). 创建一个缓存清单：

创建一个txt文档，将文件名改为.appcache后缀例如：demo.appcache

MANIFEST文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置，不同的服务器不一样

b). manifest文件格式:

1、顶行写CACHE MANIFEST

2、CACHE: （#需要缓存的列表）指定我们需要缓存的静态资源，如.css、js等

3、NETWORK:（#不需要缓存的资源）指定需要在线访问的资源，可使用通配符

4、FALLBACK:当被缓存的文件找不到时的备用资源，前面书写原文件路径，后面书写备用文件路径

· 加载缓存清单: 在需要缓存的页面html中<html manifest="./demo.appcache">加载manifest的路径。

c). 其他资料

1、CACHE: 可以省略，不推荐使用

2、可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制

3、#表示注释，可以通过改变demo.appcache文件的内容，改变注释内容，让浏览器重新加载缓存清单。

4、chrome 可以通过chrome://appcache-internals/调试工具和离线（offline）模式来调试管理应用缓存