H5C3总结

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，开发者角度：具有更好的可读性
• 1.2，网站发布者角度：便于seo（搜索引擎优化）

2. 语义化标签的兼容性问题

• 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(“属性名”);

全屏方法

1. element.requestFullScreen() 开启全屏显示
   使用时需要添加前缀，如：webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。

• css前缀：-webkit-(chrome浏览器)，-moz-(火狐浏览器)，-ms-(IE浏览器)，-o-(opera浏览器)

2. document.cancelFullScreen() 关闭全屏显示，关闭任何元素的全屏模式都要使用 document 调用
3. document.fullScreen 检测当前是否处于全屏，返回布尔类型的值

多媒体方法（自定义播放器-音频-视频）

• 多媒体相关的属性，方法和事件

本地存储

1. window 下的 localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
   只能存储字符串，可以将json格式的数据使用JSON.stringify()编码后存储；
   读取到的字符串数据也可以使用JSON.parse()转换为json格式数据后使用。
2. window.localStorage 生命周期为关闭浏览器窗口,在同一个窗口(页面)下数据可以共享
3. window.sessionStorage 永久生效，除非手动删除（服务器方式访问然后清除缓存），可以多窗口（页面）共享
4. 这两个属性下的方法：

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不会.

网络状态

1. window.navigator.onLine 返回一个布尔值，用于检测当前的网络状态是否在线，在线返回true，不在线返回false
2. online 事件，window添加online事件，在电脑由脱机状态变为在线状态时触发
3. offline 事件，window添加offline事件，在电脑由在线状态变为脱机状态时触发

文件读取

1. 选择文件后会触发onchange事件
2. var reader = new FileReader(); FileReader构造函数返回一个文件读取对象
3. FileReader构造函数创建的文件读取对象下有属性、方法和相关事件
4. https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

地理定位

1. navigator.geolocation.getCurrentPosition(successCallback, errorCallback) 获取当前地理信息
   当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。
   position.coords.latitude纬度
   position.coords.longitude经度
   position.coords.accuracy精度
   position.coords.altitude海拔高度
   当获取地理信息失败后，会调用errorCallback，并返回错误信息error
2. navigator. geolocation.watchPosition(successCallback, errorCallback) 重复获取当前地理信息
3. 在现实开发中，通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能。

元素拖拽

1. 元素加上 draggable=“true” 属性后就可以被拖拽了
2. 在拖动目标上触发事件 (源元素):
   ondragstart - 用户开始拖动元素时触发
   ondrag - 元素正在拖动时触发
   ondragend - 用户完成元素拖动后触发
3. 释放目标上触发的事件:
   ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
   ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
   ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
   ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
4. 注意： 在拖动元素时，每隔 350 毫秒会触发 ondrag 事件。
5. 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式。
   通过调用 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元素