H5C3总结

tech2024-10-20 12

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 标签）

Respond.js

Respond.js 让 IE6-8这些不支持媒体查询的浏览器支持CSS3的媒体查询（Media Query）。

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，不在线返回falseonline 事件，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，并返回错误信息errornavigator. 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返回该lie.currentTarget — 注册事件的对象，比如ul注册了事件，点击了其中的li，则e.currentTarget返回ule.delegateTarget — 代理注册事件的对象，比如$(".box").on(“click”,“ul”,function); 点击了ul中的li，则e.delegateTarget返回.box元素

最新回复(0)