html5中api有什么,HTML5中的API概览
HTML5中的API概览
整理一下HTML5中的常见API。
前言
HTML5中提供了一些功能强大的API,在不考虑兼容性的情况下,比起原生js实现更加简单,比起jQuery可以少引入包,这里整理几个常用的。
一、获取页面元素及类名操作和自定义属性
1. 获取页面元素
● document.querySelector(“选择器”);
选择器:可以是css中的任意一种选择器
通过该选择器只能选中第一个元素。
● document.querySelectorAll(“选择器”);
与document.querySelector区别:querySelectorAll 可以选中所有符合选择器规则的元素,返回的是一个列表。querySelector返回的只是单独的一个元素。
Document
第一个
第二个
2. 类名操作
● Dom.classList.add(“类名”);
给当前dom元素添加类样式。
● Dom.classList.remove(“类名”);
给当前dom元素移除类样式。
● classList.contains(“类名”);
检测是否包含类样式。
● classList.toggle(“active”);
切换类样式(有就删除,没有就添加)。
3. 自定义属性
HTML5规范,自定义属性在标签中的名称为:data-自定义属性名
● Dom.dataset.属性名 或者 Dom.dataset[属性名]
获取自定义属性 Dom.dataset 返回的是一个对象
注意:此处属性名不包含data-
● Dom.dataset.自定义属性名=值 或 Dom.dataset[自定义属性名]=值
设置自定义属性
4. 小案例
二、文件读取
使用HTML5的File接口需要先新建文件读取对象:
var reader = new FileReader();
1. FileReader方法
FileReader有3个用来读取文件的方法:
● .readAsText(file) — 将文件读取为文本
● .readAsDataURL(file) — 将文件读取为DataURL(二进制流形式)
● .readAsBinaryString(file) — 将文件读取为二进制编码
2. FileReader事件
● .onload — 资源读取完毕 reader.result
● .onprogress — 读取进度更新时触发
● .onloadstart — 加载开始时触发
● .onloadend — 加载结束时触发
● .onerror — 出现错误时触发
● .onabort — 加载过程中中止时触发
● .abort — 手动中止加载
3. 代码实现
文件读取
4. 小案例
三、获取网络状态
1. 获取网络状态方法
// 获取当前网络状态
var state = window.navigator.onLine;
if (state) {
alert("您好,当前处于联网状态");
} else {
alert("当前处于断网状态");
}
2. 网络状态事件
// 当联网的时候触发该事件
window.ononline = function () {
alert("在线");
}
// 当断网的时候触发该事件
window.onoffline = function () {
alert("断网");
}
四、获取地理位置
1. 获取一次当前位置
// 只能获取一次当前地理位置信息
window.navigator.geolocation.getCurrentPosition(success, error);
function success (msg) {
console.log(msg);
}
function error (msg) {
console.log(msg);
}
2. 实时获取当前位置
window.navigator.geolocation.watchPosition(success,error);
// 实时获取地理位置:
window.navigator.geolocation.watchPosition(success, error);
function success (msg, position) {
console.log(msg);
console.dir(position);
}
function error (msg) {
console.log(msg);
}
3. 小案例
五、本地存储
传统方式我们以document.cookie来进行存储,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便,HTML5规范则提出解决方案,使用sessionStorage和localStorage存储数据。
1. localStorage
localStorage特点:
① 永久生效
② 多窗口共享
③ 容量大约为20M
用法:
● window.localStorage.setItem(key,value) — 设置存储内容
● window.localStorage.getItem(key) — 获取内容
● window.localStorage.removeItem(key) — 删除内容
● window.localStorage.clear() — 清空内容
2. sessionStorage
sessionStorage特点:
① 生命周期为关闭当前浏览器窗口
② 可以在同一个窗口下访问
③ 数据大小为5M左右
用法:
● window.sessionStorage.setItem(key,value) — 设置存储内容
● window.sessionStorage.getItem(key) — 获取内容
● window.sessionStorage.removeItem(key) — 删除内容
● window.sessionStorage.clear() — 清空内容
六、操作多媒体
七、Canvas画布
先不整理,用到的时候再进行学习
html5中api有什么,HTML5中的API概览相关推荐
- 网站开发中很实用的 HTML5 jQuery 插件
这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网 ...
- 崛起中的九大HTML5开发工具
摘要:HTML5正在以惊人的速度崛起,虽然HTML5标准尚未开发完成,但是随着开发者对HTML5的兴趣日渐浓厚,开发工具提供商也开始跟进.本文总结了5个当今最流行而且未来会成为主流HTML5的开发工具 ...
- Windows 8 HTML5/JS评论引发开发者群中的慌乱
为什么80%的码农都做不了架构师?>>> Windows 8 HTML5/JS Comment Causes Panic Among Developers Windows 8 HTM ...
- html5 js选择器,使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 2 3 4 5 使用HTML5的JS选择器操作页面中的元素 6 7 8 9 10 兴趣爱好: 11 12 ...
- .net html5页面缓存,详解HTML5中的manifest缓存使用
起源html5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在 ...
- HTML5中微数据在搜索引擎中的使用举例
做网站优化已经快一个月了,对于seo的一般技术也有了一些了解,前些天开始使用谷歌的网站站长工具,在里面发现很多百度站长工具里面不曾有的内容,其中"结构化数据"这一项是出现在 &qu ...
- html中第一行代码,HTML5 CSS3初学者指南(1) – 编写第一行代码
介绍 网络时代已经到来.现在对人们来说,每天上网冲浪已经成为一种最为常见的行为. 在网页浏览器中输入一段文本地址,就像http://www.codeproject.com,等待一下,网页就加载到浏览器 ...
- 【直播间】移动互联网产品中如何用好HTML5?
开发者福利来袭! 51CTO携手APICloud为正在做移动开发.即将转型做移动开发的小伙伴们分享移动开发最前沿技术,我们特此邀请到许志锋老师做直播分享课. 小板凳已备好,开始学习啦~ 分享主题 移动 ...
- html5设置页面标题,单选(4分) 下面选项中,可以将HTML5页面的标题设置为“我的第一个网页”的是()。...
问题:单选(4分) 下面选项中,可以将HTML5页面的标题设置为"我的第一个网页"的是(). 更多相关问题 根据世界银行咨询服务合同标准文本,()的采购有两种计价方式:复杂的采用基 ...
最新文章
- Android中去掉标题的方法总结
- 实例解析linux内核I2C体系结构
- javascript初学
- linux查找nginx目录,Linux下查看nginx安装目录
- 关于VS AddIn的注册
- c# mvc5 view 多层_MVC5+EF6 入门完整教程13 -- 动态生成多级菜单
- m5310模组数据上传至onenet_硬核干货!基于M5310-A的NB-IoT水表通信模块软件业务逻辑分享...
- 2021华宁三五班高考成绩查询,2021娄底市地区高考成绩排名查询
- Mac Apache WebDav 服务器配置
- Android开发之播放量点赞量打赏量收藏量单位格式化工具类
- Unity3D研究院之Android同步方法读取streamingAssets
- 数据库:MySQL、HBase、ElasticSearch三者对比
- oracle使用with as提高查询效率
- JavaScript中document.getElementById和document.write
- Android页面传值b,android数据传递(一)之activityA传递到activityB
- MYSQL时间函数之FROM_UNIXTIME
- 小程序和H5真的有孰优孰劣吗?详解两者的适用场景
- 小梅哥Xilinx FPGA学习笔记6——参数化设计及模块重用设计流水灯(跑马灯)
- 【OpenCV】障碍物提取
- spark学习系列——6 Historyserver配置