H5标准提供哪些新的API

地理定位API

navigator.geolocation 对象

• getCurrentPosition(callback, errCallback, options) 获取当前位置
• watchPosition(callback, errCallback, options) 实时获取位置
• clearWatch() 停止监控位置变化

position对象（获取位置成功后，后调函数中的得到的参数）

• timestamp 获取位置时的时间戳
• coords 包含坐标信息的对象
  • latitude 纬度
  • longitude 经度
  • altitude 海拔
  • heading 前进方向
  • speed 速度

error对象 （获取位置失败，回调函数得到的参数）

• code
• message

选项（getCurrentPosition 和 watchPosition 第三参数）

• timeout
• maximumAge 缓存时间
• enableHighAccuracy 是否最佳

多媒体API

video/audio 的dom对象

track 标签的用法

拖放API

拖拽属性

• draggable （true/false）

拖拽事件

• dragstart 被拖拽元素 开始拖拽
• dragend 被拖拽元素 结束拖拽
• drag 被拖拽元素 拖拽过程不停触发
• dragenter 目标元素 进入目标元素
• dragleave 目标元素 离开目标元素
• dragover 目标元素 在目标元素内 不停触发
• drop 目标元素 在目标元素内结束

dragEvent

• dataTransfer 数据传递
  • setData()
  • getData()

文件API

概述

• H5允许JS有条件的读取客户端文件
• 允许读取的文件：1.待上传的文件 2,拖进浏览器的文件

FileList对象

• 由File对象构成的集合 （类数组对象）

File对象

• name
• size
• type
• lastModified
• lastMOdifiedDate

FileReader对象

• 方法
  • readAsText()
  • readAsDataURL()
• 属性
  • error
  • readyState
  • result
• 事件
  • onload
  • onloadstart
  • onloadend
  • oneror
  • onabort
  • onprogress

XHR2

概述

• XMLHttpRequest 对象， 用于发起http请求
• H5标准新增了更多的属性和方法和事件

FormData

• 用来获取表单数据
• http请求（post方式）， 请求体 编码方式 application/x-www-form-urlencoded ||| multipart/form-data
• XMLHttpRequiest默认的请求体编码方式 multipart/form-data
• 创建FormData对象可以把form元素作为参数，也可以没有参数创建空的formdata
• FormData对象调用append() 在原来内容基础上添加新的内容

XMLHTTPRequst对象 新增的属性、方法、事件

• 方法
  • open()
  • send()
  • abort()
• 属性
  • responseText
  • responseXML
  • readyState
  • status
• 事件
  • onreadystatechange

progressEvent

• loaded
• total
• lengthComputable 长度是否可计算

XMLHttpRequestUpload

• onload
• onloadstart
• onloadend
• onprogress
• onerror
• onabort
• ontimeout

HTML5新增API

canvas

• 可视化数据
• 特效 banner
• 游戏
• 模拟器(在线PS、在线编辑器)
• 地图

SVG

定义

矢量图工具， 绘图
SVG在H5标准之前就有了， IE对SVG的兼容性非常好

svg与canvas区别

• canvas位图， svg是矢量图
• canvas使用JavaScrpt绘图， svg使用XML来绘图
• canvas不支持事件（借助库） svg支持事件

svg的应用领域

• 矢量图标
• 地图

SVG的使用

• <svg>
• <rect>
• <circle>
• <line>
• <path>
• <ellipse>
• <polygon>
• .....

HTML中使用SVG

• 在html中直接写 <svg>
• <embed src="" type="image/svg+xml" width="" height="">
• <object data="" type="image/svg+xml" width="" height="">
• <iframe src="">

地理定位 geolocation

navigator.gentlocation

• getCurrentPosition(successCallback, errorCallback, options) 获取当前的地理位置
• watchPosition(successCallback, errorCallback, options) 监听地理位置变化
• clearWatch() 停止位置监听

position对象

获取位置成功会调用 successCallback回调函数， 自动接收position对象

• coords

  • longitude 维度
  • latitude 精度
  • altitude 海拔
  • handing 前进方向
  • speed 速度
  • altitudeAccuracy 海拔经度
  • accuracy 坐标经度

• timestamp 时间戳

error对象

获取位置失败，调用errorCallback回调，调用 error对象

• code 错误代码
• message 错误信息

选项 options

• timeout 超时时间
• enableHighAccuracy 是否最优
• maxmunAge 最大缓存时间

注意

• chrome浏览器只有在https方式下打开的网页才能获取地理位置
• 手上上的大部分浏览器，微信 也要求https 才能获取位置

多媒体

相关标签

• <video> 视频
• <audio> 音频
• <source>
• <track>

DOM(video/audio)

• 属性
  • volume 音量
  • muted 是否静音
  • ....
• 方法
  • play()
  • pause()
  • .....
• 事件
  • onplay
  • ....

视频插件

• ckplayer
• jplayer
• flowplayer
• video.js
• flv.js

拖拽

属性

• draggable 设置为true 元素就可以被拖拽

事件

• ondrag
• ondragstart
• ondragend
• ondragenter
• ondragleave
• ondragover
• ondrop

dataTransfer

• 获取 是dragEvent的属性
• getData()
• setData()
  拖拽实例