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()
拖拽实例
转载于:https://www.cnblogs.com/mengshi-web/p/9780007.html
H5标准提供哪些新的API相关推荐
- android 5.0 sd卡读写,如何使用为Android 5.0(Lollipop)提供的新SD卡存取API?
很多好的问题,让我们深入.:) 你如何使用它? 这是一个伟大的教程与KitKat中的存储访问框架交互: 在Lollipop中与新的API交互非常相似.要提示用户选择目录树,您可以启动这样的意图: In ...
- h5是什么 www.php.cn,20分钟看懂html5 看看H5都有啥新特性
什么是HTML? HTML(Hyper Text Mark-up Language).超文本标记语言.HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字.图形.动画.声音.表格.链 ...
- 利用新浪API实现数据的抓取\微博数据爬取\微博爬虫 1
PS:(本人长期出售超大量微博数据.旅游网站评论数据,并提供各种指定数据爬取服务,Message to YuboonaZhang@Yahoo.com.由于微博接口更新后限制增大,这个代码已经不能用来爬 ...
- html5在哪编译,HTML5_提供的 新功能_less 编译_
HTML5_提供的 新功能 class 操作 ele.classList(注意: 高版本的 IE 都不支持) 获取 ele.classList.add("current"); el ...
- Windows Mobile 5.0 中为开发人员提供的新功能(3)
Windows Mobile 5.0 中为开发人员提供的新功能(3) Pocket Outlook 增强功能 Pocket Outlook 向用户和应用程序开发人员提供了易于使用的 PIM.将 Poc ...
- Windows Mobile 6 中为开发人员提供的新功能(1)
Windows Mobile 6 中为开发人员提供的新功能(1) 2007年06月10日 星期日 10:29 Jim Wilson,JW Hedgehog, Inc. 摘要 Windows Mobil ...
- React 新 Context API 在前端状态管理的实践
2019独角兽企业重金招聘Python工程师标准>>> 本文转载至:今日头条技术博客 众所周知,React的单向数据流模式导致状态只能一级一级的由父组件传递到子组件,在大中型应用中较 ...
- odoo10参考系列--ORM API 二(新旧API兼容性、模型参考和方法修饰符)
新API与旧API的兼容性 现在的Odoo是从就的(不规律的)API过渡来的,它可能需要从一个手动桥接到另一个手动桥接: RPC层(XML-RPC和RPC)是在旧的API的形式表达,表达的纯粹的方法在 ...
- H5新增了哪些新特性
目录 前言 1.语义化标签 2.form表单增强 3.视频和音频 4.Canvas绘图 5.SVG绘图 6.地理位置定位(Geolocation API ) 7.拖放API 8.Web Worker ...
最新文章
- 巨杉数据库通过“Mpp数据库基础能力认证”,权威技术认证金融级数据库
- 有关identity的小技巧
- JSON在JS和JAVA的处理
- pyecharts第十节、地图(二、中国地图)
- mysql pt_MySQL慢查询之pt-query-digest分析慢查询日志
- 大数据2019年的三大趋势你看了吗?
- android中handler简单用法
- Luogu4402 机械排序
- 公寓式楼房宜南北走向
- Spring框架中的核心思想包括什么
- 杨志便嗔道 瑞星杀毒软件序列号
- 精曲的竖曲线4800计算程序,可以计算直线与竖曲线通杀
- 每日一词20190306——经纬度(longitude and latitude)
- Html模拟鼠标移动,原生js及H5模拟鼠标点击拖拽
- 【Nginx之轨迹】Nginx + Lua 实现 waf Web 应用防火墙(解决 nignx 加载失败问题:LuaJIT version which is not OpenResty‘s)
- robots.txt文件信息泄漏
- vue-quill-editor 上传视频
- 微信小程序:经典语录大全微信小程序源码
- Bug 20186278 - crfclust.bdb Becomes Huge Size Due to Sudden Retention Change (文档 ID 20186278.8)
- CF1143F/1142C U2
热门文章
- 2016年3月9日作业
- PHPExcel开发者文档[中文版]
- vagrant学习记录
- 双机热备+Win2003下集群案例
- java.sql.SQLException: Zero date value prohibited 报错分析
- vuepress 跑不起来?报错?空白页? res.getHeader is not a function?
- burpsuite配置指南
- java难点解析(七)-抽象类
- Node.js 快速了解
- Mybatis批量添加对象List