Html5其它补充内容---第三天

发布时间:2020-03-17 21:20:51 作者:我是小谷粒
来源:网络 阅读:831

四、DOM扩展
1、获取元素
①document.getElementsByClassName ('class') 通过类名获取元素,以伪数组形式存在。
②document.querySelector('selector') 通过CSS选择器获取元素,符合匹配条件的第1个元素。
③document.querySelectorAll('selector') 通过CSS选择器获取元素,以伪数组形式存在。
2、类名操作
①Node.classList.add('class') 添加class
②Node.classList.remove('class') 移除class
③Node.classList.toggle('class') 切换class,有则移除,无则添加
④Node.classList.contains('class') 检测是否存在class
Node指一个有效的DOM节点,是一个通称。
3、自定义属性
在HTML5中我们可以自定义属性,其格式如下data-*="",例如
data-info="我是自定义属性",通过Node.dataset['info'] 我们便可以获取到自定义的属性值。
Node.dataset是以对象形式存在的,当我们为同一个DOM节点指定了多个自定义属性时,Node.dataset则存储了所有的自定义属性的值。
假设某元素 <div id="demo" data-name="itcast" data-age="10">
var demo = document.querySelector('#demo');
1、读取自定义属性 demo.dataset(所有的属性及属性值)或者 demo.dataset['age'](age属性的值)
2、设置demo.dataset['name'] = 'web developer'
五、新增API
1、网络状态
window.online 用户网络连接时被调用
window.offline 用户网络断开时被调用
2、全屏
Node.requestFullScreen() 开启全屏显示
document.cancelFullScreen() 关闭全屏显示,只能通过document才能关闭
document.fullScreen检测当前是否处于全屏
全屏伪类选择器
:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}
3、文件读取
通过FileReader对象我们可以读取本地存储的文件,使用 File 对象来指定所要读取的文件或数据。其中File对象可以是来自用户在一个 <input> 元素上选择文件后返回的FileList 对象,也可以来自由拖放操作生成的  DataTransfer。
实例化一个读取器:var reader = new FileReader();
读取文件reader.readAsDateURL();
reader.readAsBinaryString();
reader.readAsTEXT();
事件监听onload 当文读取完成时调用
属性result 文件读取结果
4、拖拽
①拖拽元素:页面中设置了draggable="true"属性的元素,其中<img>、<a>标签默认是可以被拖拽的
②目标元素:页面中任意的元素
③事件监听:根据元素类型不同,需要设置不同的事件监听
a拖拽元素
ondrag 应用于拖拽元素,整个拖拽过程都会调用
ondragstart 应用于拖拽元素,当拖拽开始时调用,只触发一次
ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素,当拖拽结束时调用
b目标元素
ondragenter 应用于目标元素,当拖拽元素进入时调用
ondragover 应用于目标元素,当停留在目标元素上时调用,
ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素,当鼠标离开目标元素时调用

5、地理定位
①获取当前地理信息(只获取一次)
navigator. geolocation.getCurrentPosition(successCallback, errorCallback, options)
②重复获取当前地理信息(多次)
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 高精度模式 true、false
b) timeout 超时设置,单位为ms
c) maximumAge表示浏览器重新获取位置信息的时间间隔,单位为ms

6、历史管理
提供window.history,对象我们可以管理历史记录,可用于单页面应用,Single Page Application,可以无刷新改变网页内容。
①pushState(data, title, url) 追加一条历史记录
data对象,用于存储自定义数据,通常设为null
title网页标题,基本上没有被支持,一般设为空
url 以当前域为基础增加一条历史记录,不可跨域设置
②replaceState(data, title, url) 与pushState()基本相同,不同之处在于replaceState(),只是替换当前url,不会增加/减少历史记录。
③事件监听
onpopstate事件,当前进或后退时则触发,通过事件对象ev.state可以读取到存储的数据。
7、Web存储(本地存储)
① a、设置、读取方便
b、容量较大,sessionStorage约5M、localStorage约20M
c、只能存储字符串,可以将对象JSON.stringify() 编码后存储
②window.sessionStorage
a、生命周期为关闭浏览器窗口
b、在同一个窗口下数据可以共享
③window.localStorage
a、永久生效,除非手动删除
b、可以多窗口共享
④方法详解
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容
⑤其它
WebSQL、IndexDB
8、应用缓存
HTML5中我们可以轻松的构建一个离线(无网络状态)应用,只需要创建一个cache manifest文件。
①优势
a、可配置需要缓存的资源
b、网络无连接应用仍可用
c、本地读取缓存资源,提升访问速度,增强用户体验
d、减少请求,缓解服务器负担
②缓存清单
一个普通文本文件,其中列出了浏览器应缓存以供离线访问的资源,推荐使用.appcache为后缀名,添加MIME类型
AddType text/cache-manifest .appcache
例如我们创建了一个名为demo.appcache的文件,然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache",路径要保证正确。
③manifest文件格式
a、顶行写CACHE MANIFEST
b、CACHE: 换行 指定我们需要缓存的静态资源,如.css、image、js等
c、NETWORK: 换行 指定需要在线访问的资源,可使用通配符
d、FALLBACK: 换行 当被缓存的文件找不到时的备用资源 ./online.html ./offline.html
当online没有用offline替换
④其他
b、可以指定多个CACHE: NETWORK: FALLBACK:,无顺序限制
c、#表示注释,只有当demo.appcache文件内容发生改变时或者手动清除缓存后,才会重新缓存。
d、chrome 可以通过chrome://appcache-internals/工具和离线(offline)模式来调试管理应用缓存
9、多媒体

推荐阅读:
  1. MySQL第三天
  2. GSP记录补充

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

前端 第三天 第三

上一篇:微信/QQ中添加提示浏览器中打开的微信遮罩代码

下一篇:罗森伯格亮相2012 Datacenter Dynamics Shanghai

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》