JS基础-ClassList -移动端插件的引入-touch事件-sessionStorage 和 localStorage
目录
1.classList属性
添加类
删除类
切换类
检查类是否存在
替换类
移动端touch事件
2.消除点击延迟
Fastclick插件的引入
引入FastClick
初始化
3.Swiper插件的引入和使用
通过CDN引入
通过npm安装（vue中建议）
使用SwiperHTML结构
初始化Swiper
4.zyMedia插件简介
4.1下载与引入
4.2使用
4.3js初始化
4.4参数说明
5.bootstrap的安装和使用
5.1CDN引入
5.2使用
6sessionStorage 和 localStorage
简介
6.1. 数据存储的目的
6.2. 数据的持续性
6.3. 存储容量
6.4. 访问数据的范围
6.5. 使用场景
6.6. 安全性
6.7代码示例
存储数据：使用 setItem() 方法
获取数据：使用 getItem() 方法
删除数据：使用 removeItem() 方法
清空所有数据：使用 clear() 方法
1.classList属性
JavaScript 中 DOM（文档对象模型）元素的一个的属性，他是HTML5新增的一个属性，返回元素的类名（ie10以上的版本支持）。
添加类
element.classList.add('newClassName');向 element 元素添加一个名为 newClassName 的类（如果它尚不存在的话）。
删除类
element.classList.remove('oldClassName');切换类
element.classList.toggle('toggleClassName');toggle 方法会根据 element 元素上是否已存在指定的类名来添加或删除该类。如果 toggleClassName 存在，则删除它；如果不存在，则添加它。
检查类是否存在
if (element.classList.contains('someClassName')) {
// 如果存在 'someClassName' 类，则执行某些操作
}contains 方法用于检查 element 元素的类列表中是否存在指定的类名。
替换类
虽然 classList 没有直接的替换方法，但你可以通过组合使用 remove 和 add 方法来实现替换类的效果：
element.classList.remove('oldClassName');
element.classList.add('newClassName');2.移动端touch事件
- touchstart：当手指触摸屏幕时触发。
- touchend：当手指从屏幕上抬起时触发。
- touchmove：当手指在屏幕上滑动时持续触发。
- touchcancel：当系统停止跟踪触摸时触发。这通常发生在触摸点太多，浏览器无法全部跟踪时，或者当触摸操作被中断（例如，电话来电）时。
// 获取元素
var element = document.getElementById('myElement');
// 添加 touchstart 事件监听器
element.addEventListener('touchstart', function(event) {
// 处理触摸开始事件
console.log('Touch started');
// 你可以访问 event.touches 数组来获取所有触摸点的信息
for (var i = 0; i < event.touches.length; i++) {
// event.touches[i] 包含关于触摸点的信息，如位置等
console.log(event.touches[i].clientX, event.touches[i].clientY);
}
});
//按住不松开
element.addEventListener('touchmove, function(event) {
console.log('我继续摸');
});
// 添加 touchend 事件监听器
element.addEventListener('touchend', function(event) {
// 处理触摸结束事件
console.log('Touch ended');
});触摸事件对象
| 触摸列表 | 说明 |
| touches | 正在触摸屏幕的所有手指的一个列表 |
| targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
| changeTouches | 手指状态发生了改变的列表，从无到有，从有到无的变化 |
3.消除点击延迟
Fastclick插件的引入
FastClick 是一个用于消除移动端浏览器上点击延迟（click delay）的 JavaScript 库
引入FastClick
通过CDN引入
初始化
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}移除
FastClick.detach(document.body);4.Swiper插件的引入和使用
Swiper（通常称为Swiper Slider或Swiper.js）是一个流行的滑动插件，用于创建触摸滑动切换效果，常用于图片轮播、滑块导航等场景。Swiper支持响应式布局、触摸滑动、硬件加速以及丰富的API和配置选项。
通过CDN引入
通过npm安装（vue中建议）
npm install swiper导入
// ES6
import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';
// CommonJS
const Swiper = require('swiper');
require('swiper/swiper-bundle.css'); 使用Swiper
HTML结构
...
初始化Swiper
var mySwiper = new Swiper('.swiper-container', {
// 可选选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
// 更多配置...
});vue中swiper的引入https://swiperjs.com/vue
获取更多配置查看swiper官方文档https://swiperjs.com/
中文网https://www.swiper.com.cn/demo/index.html
5.zyMedia插件简介
5.1下载与引入
1.下载 https://github.com/ireaderlab/zyMedia
2.引入
5.2使用
5.3js初始化
5.4参数说明
- type: '' 指定媒体类型，默认空
- mediaTitle: '' 设置媒体标题，默认空，不展示
- nativeControls: false 强制用原生的播放控制器，默认不使用，true为使用
- autoplay: false 是否自动播放，默认否，true为自动播放
- preload: 'none' 是否预加载，默认关闭，和原生preload对应，其他值为metadata|auto|''
- videoWidth: '100%' 指定视频宽，默认100%
- videoHeight: 'auto' 指定视频高，默认auto
- aspectRation: (16 / 9) 指定视频宽高比，默认16:9
- audioWidth: '100%' 指定音频宽，默认100%
- audioHeight: 44 指定音频高，默认44px
- autoLoop: false 是否循环播放，默认否，true为无限循环
- timeFormatType: 1 时间格式类型，默认mm:ss，2为m:s
- alwaysShowHours: false 是否强制显示小时位，默认否，true为显示
- alwaysShowControls: false 是否始终显示控制栏，默认否，自动隐藏，true为始终显示
- hideVideoControlsOnLoad: false 加载时是否隐藏视频控制栏，默认否，true为隐藏
- enableFullscreen: true 是否显示全屏按钮，默认显示，false为不显示
- pauseOtherPlayers: true 是否播放唯一，默认唯一，播放时将暂停其他播放实例，false为不唯一
- enableVisibilityState: true, 是否页面不可见时暂停当前所有播放，默认暂停
- duration: 0 指定媒体时长，默认0
- success: null 实例化成功时的回调，默认无
- error: null 实例化错误时的回调，默认无
- beforePlay: null 点击播放前的交互，默认无，如果函数返回true，将不播放视频
6.bootstrap的安装和使用
中文网https://www.bootcss.com/getting-started
6.1CDN引入
Description
URL
CSS
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
JS
https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
6.2使用
Hello, world!
Hello, world!
7.sessionStorage 和 localStorage
简介
sessionStorage 和 localStorage 是Web存储API的一部分，它们允许你在用户的浏览器中存储数据，而无需使用cookies。
7.1. 数据存储的目的
localStorage：主要用于长期存储数据，即使浏览器关闭后，数据也不会被删除。它适合存储那些不需要频繁变更的数据，比如用户偏好设置。
sessionStorage：主要用于存储一个会话（session）中的数据，这意味着当会话结束时（比如，当浏览器标签页被关闭时），存储的数据会被清除。它适用于存储那些只在一个会话期间需要的临时数据。
7.2. 数据的持续性
localStorage：数据存储在用户的浏览器中，没有时间限制，除非被显式地清除（通过浏览器设置或JavaScript代码），否则数据将一直存在。
sessionStorage：数据在页面会话期间存在，页面会话在浏览器标签页被关闭时结束。因此，存储在sessionStorage中的数据在页面刷新时不会丢失，但在关闭标签页后会被清除。
7.3. 存储容量
对于大多数现代浏览器来说，localStorage 和 sessionStorage 的存储容量限制都很高（通常是几MB），但这可能因浏览器而异。
7.4. 访问数据的范围
localStorage：存储的数据可以在同一源（协议、域名和端口）下的所有标签页和窗口之间共享。
sessionStorage：存储的数据只能在当前标签页（或窗口）中访问，即使在同一个源的不同标签页之间也无法共享。
7.5. 使用场景
localStorage：适合存储用户设置、购物车数据等需要跨会话持久化的数据。
sessionStorage：适合存储表单数据、临时的用户状态信息等只在当前会话中需要的数据。
7.6. 安全性
两者都存储在客户端，因此都需要注意数据的安全性问题。虽然它们提供了基本的隔离机制，但敏感信息不应该直接存储在localStorage或sessionStorage中，而应该使用更安全的方法（如HTTPS和服务器端存储）来保护。
7.7代码示例
存储数据：使用 setItem() 方法
对于 sessionStorage 和 localStorage，你都可以使用 setItem() 方法来存储数据。这个方法接受两个参数：键（key）和值（value）。值通常是字符串，但如果你需要存储其他类型的数据（如对象或数组），你需要先将其转换为字符串（例如，使用 JSON.stringify()）。
获取数据：使用 getItem() 方法
你可以使用 getItem() 方法通过键来检索存储的数据。这个方法只接受一个参数：你想要检索的键（key）。返回的值是字符串（即使你存储的是对象或数组，也会被存储为字符串）。因此，如果你存储的是对象或数组，你需要先将其解析回原始类型（例如，使用 JSON.parse()）
删除数据：使用 removeItem() 方法
如果你想要删除某个键对应的数据，可以使用 removeItem() 方法。这个方法接受一个参数：你想要删除的键（key）。
清空所有数据：使用 clear() 方法
如果你想要清空 localStorage 或 sessionStorage 存储的所有数据，可以使用 clear() 方法。这个方法不接受任何参数。