H5C3总结
fullPage.js插件
fullPage.js插件,对应的html结构,JS初始化,相关属性、方法和回调函数
- JS初始化:
$(function(){
$('#fullpage').fullpage();
});
stellar.js插件(视觉延迟效果)
stellar.js插件,对应的html结构(在DOM结构中添加 data-stellar-ratio 自定义属性),JS初始化,相关参数(较少)
- 对应的html结构:
在DOM结构中添加 data-stellar-ratio 自定义属性。
因此可以使用H5方法操作DOM添加这个自定义属性(会显示在html中),而不能使用jQuery方法添加这个自定义属性(不会显示在html中,只是存储在内存中) - JS初始化:
$(function(){
$.stellar({
horizontalScrolling: false,
responsive: true
});
});
- 需要应用视觉延迟效果的元素,其背景图的 background-attachment 属性值应设为 fixed ;
移动端使用H5
jQuery主要用于解决浏览器兼容性问题,但是移动端一般没有兼容性问题,所以一般移动端不用jQuery(过于笨重),而主要使用H5
语义化标签
- 语义化标签的作用
- 1.1,开发者角度:具有更好的可读性
- 1.2,网站发布者角度:便于seo(搜索引擎优化)
- 语义化标签的兼容性问题
- 2.1,IE9以下不支持H5标签(大部分css3属性,一些H5的api),IE9以下不认识这些标签,会把这些标签当做行内元素去看待
- 2.2,(不兼容的解决办法1)语义化标签需要动态创建 document.createElement(‘header’) 同时设置为块级元素(display: block;)
- 2.3,(不兼容的解决办法2)有一款插件能帮你完成这件事件 —— html5shiv.js,必须引入在头部,在页面结构生成之前,提前解析h5标签
- 2.4,优化处理:支持H5标签的浏览器不要加载html5shiv.js,IE9以下不支持H5的浏览器加载
- 2.4.1,js判断客户的浏览器版本可以做到,但是不能做到js提前加载
- 2.4.2,条件注释:可放在网页的任何地方 ,根据浏览器版本去判断是否加载html5shiv.js(html标签)
- 2.4.3,条件注释也可用于根据浏览器版本去判断是否加载 html 标签
- 2.4.4,条件注释的固定语法 lt 小于 gt 大于 lte 小于等于 gte 大于等于
- 2.4.5,例如本页head部分所示(判断是否加载html5shiv.js),和本页body最前面所示(判断是否加载 html 标签)
<!--[if lte IE 8]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
Respond.js
Respond.js 让 IE6-8这些不支持媒体查询的浏览器 支持CSS3的媒体查询(Media Query)。
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js""></script>
<![endif]-->
3D切割轮播图
- 1,在3D变换中使用了rotate之后,坐标轴也会跟着旋转
- 2,在对元素进行3D的transform变换时(特别是Z轴部分高于原Z平面),则该元素会直接忽略自身和其他元素的层级,要想提高应该浮在该元素上的元素的层级时,设置z-index无法使其可见,应该使用 transform: translateZ(1px) 来提升该元素的层级
- 3,在添加 perspective 属性的元素上也要添加 transform-style: preserve-3d;(表示所有子元素在3D空间中呈现)属性
H5-DOM扩展
获取元素
- documnet.querySelector(“选择器”);
- documnet.querySelectorALL(“选择器”);
- documnet.getElementsByClassName(“选择器”);
操作类名(对比jQuery)
- element.classList.remove(“类名”);
==>$().removeClass(“类名”); - element.classList.add(“类名”);
==>$().addClass(“类名”); - element.classList.toggle(“类名”);
==>$().toggleClass(“类名”); - element.classList.contains(“类名”); —返回布尔类型的值,该元素存在对应的类则返回true,不存在则返回false
==>$().hasClass(“类名”);
自定义属性(对比jQuery)
- H5的自定义属性名必须使用驼峰命名法,如userName会被转换为data-user-name,因此属性名中本身不允许使用大写,否则设置与读取时都易出错
- 设置自定义属性值
element.dataset.属性名 = 属性值;
element.dataset[“属性名”] = 属性值;
==>$().data(“属性名”,“属性值”); - 获取自定义属性值
element.dataset.属性名;
element.dataset[“属性名”];
==>$().data(“属性名”);
全屏方法
- element.requestFullScreen() 开启全屏显示
使用时需要添加前缀,如:webkit内核浏览器:webkitRequestFullScreen、webkitCancelFullScreen,如chrome浏览器。
- css前缀:-webkit-(chrome浏览器),-moz-(火狐浏览器),-ms-(IE浏览器),-o-(opera浏览器)
- document.cancelFullScreen() 关闭全屏显示,关闭任何元素的全屏模式都要使用 document 调用
- document.fullScreen 检测当前是否处于全屏,返回布尔类型的值
多媒体方法(自定义播放器-音频-视频)
- 多媒体相关的属性,方法和事件
本地存储
- window 下的 localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
只能存储字符串,可以将json格式的数据使用JSON.stringify()编码后存储;
读取到的字符串数据也可以使用JSON.parse()转换为json格式数据后使用。 - window.localStorage 生命周期为关闭浏览器窗口,在同一个窗口(页面)下数据可以共享
- window.sessionStorage 永久生效,除非手动删除(服务器方式访问然后清除缓存),可以多窗口(页面)共享
- 这两个属性下的方法:
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容 — 慎用
历史管理
- window.history对象可以用于单页面应用,Single Page Application,可以无刷新改变网页内容,实现异步渲染页面。
- pushState(null, null, url) 追加一条历史记录
- replaceState(null, null, url) 替换当前的url,不会增加或减少历史记录
- onpopstate事件
- 当前进或后退时则触发,调用history.pushState()或者history.replaceState()不会触发popstate事件.
- popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JS中调用history.back()、history.forward()、history.go()方法).
- 各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.
网络状态
- window.navigator.onLine 返回一个布尔值,用于检测当前的网络状态是否在线,在线返回true,不在线返回false
- online 事件,window添加online事件,在电脑由脱机状态变为在线状态时触发
- offline 事件,window添加offline事件,在电脑由在线状态变为脱机状态时触发
文件读取
- 选择文件后会触发onchange事件
- var reader = new FileReader(); FileReader构造函数返回一个文件读取对象
- FileReader构造函数创建的文件读取对象下有属性、方法和相关事件
- https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
地理定位
- navigator.geolocation.getCurrentPosition(successCallback, errorCallback) 获取当前地理信息
当成功获取地理信息后,会调用succssCallback,并返回一个包含位置信息的对象position。
position.coords.latitude纬度
position.coords.longitude经度
position.coords.accuracy精度
position.coords.altitude海拔高度
当获取地理信息失败后,会调用errorCallback,并返回错误信息error - navigator. geolocation.watchPosition(successCallback, errorCallback) 重复获取当前地理信息
- 在现实开发中,通过调用第三方API(如百度地图)来实现地理定位信息,这些API都是基于用户当前位置的,并将用位置位置(经/纬度)当做参数传递,就可以实现相应的功能。
元素拖拽
- 元素加上 draggable=“true” 属性后就可以被拖拽了
- 在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发 - 释放目标上触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件 - 注意: 在拖动元素时,每隔 350 毫秒会触发 ondrag 事件。
- 默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,必须阻止对元素的默认处理方式。
通过调用 ondragover 事件的 e.preventDefault() 方法阻止对元素的默认处理方式。
复习jQuery事件对象的几个属性
- e.target — 触发事件的当前对象(注册事件的元素的子元素或注册事件的元素本身),比如ul注册了事件,点击了其中的li,则e.target返回该li
- e.currentTarget — 注册事件的对象,比如ul注册了事件,点击了其中的li,则e.currentTarget返回ul
- e.delegateTarget — 代理注册事件的对象,比如$(".box").on(“click”,“ul”,function); 点击了ul中的li,则e.delegateTarget返回.box元素