地理定位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()
拖拽实例