JS基础-ClassList -移动端插件的引入-touch事件-sessionStorage 和 localStorage

2024-09-05 07:44
文章标签 基础 js 事件 插件 引入 移动 touch localstorage sessionstorage classlist

本文主要是介绍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事件

  1. touchstart：当手指触摸屏幕时触发。
  2. touchend：当手指从屏幕上抬起时触发。
  3. touchmove：当手指在屏幕上滑动时持续触发。
  4. 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引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>

初始化

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引入

<!-- 引入Swiper CSS -->  
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>  <!-- 引入Swiper JS -->  
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

通过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结构

<div class="swiper-container">  <div class="swiper-wrapper">  <div class="swiper-slide">Slide 1</div>  <div class="swiper-slide">Slide 2</div>  <div class="swiper-slide">Slide 3</div>  ...  </div>  <!-- 如果需要分页器 -->  <div class="swiper-pagination"></div>  <!-- 如果需要导航按钮 -->  <div class="swiper-button-prev"></div>  <div class="swiper-button-next"></div>  <!-- 如果需要滚动条 -->  <div class="swiper-scrollbar"></div>  
</div>

初始化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.引入

    <link rel="stylesheet" href="../css/zy.media.min.css"><script src="../js/zy.media.min.js"></script>

5.2使用

        <div class="zy_media"><video poster="" data-config='{"mediaTitle": "耶鲁大学--耶耶酱"}'><source src="../img/xhs_live_photo_1718153378902.mp4" type="video/mp4" />您的浏览器不支持HTML5视频</video><div id="modelView">&nbsp;</div>

5.3js初始化

    <script>zymedia('video');('video', {autoplay: true,controls: false,loop: true,muted: true,volume: 0.5,width: '100%',height: 'auto'});</script>

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/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js

6.2使用 

<!doctype html>
<html lang="zh-CN"><head><!-- 必须的 meta 标签 --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap 的 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"><title>Hello, world!</title></head><body><h1>Hello, world!</h1><!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ --><!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） --><script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script><!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 --><!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04" crossorigin="anonymous"></script>--></body>
</html>

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() 方法。这个方法不接受任何参数。

<body><input type="text" name="" id=""><button class="set">存储数据</button><button class="get">获取数据</button><button class="remove">删除数据</button><button class="del">清空数据</button><script>var inp = document.querySelector('input');var set = document.querySelector('.set');var get = document.querySelector('.get');var remove = document.querySelector('.remove');var del = document.querySelector('.del');//存储数据set.addEventListener('click', function () {var value = inp.value;sessionStorage.setItem('name', value);localStorage.setItem('user', JSON.stringify({ name: 'Alice', age: 30 }));});//获取数据get.addEventListener('click', function () {var value = sessionStorage.getItem('name');alert(value);// 从 localStorage 获取数据  const user = localStorage.getItem('user');if (user) {const parsedUser = JSON.parse(user);console.log(parsedUser.name); // 输出: Alice  }});//删除数据remove.addEventListener('click', function () {sessionStorage.removeItem('name');localStorage.removeItem('user');});//清空数据del.addEventListener('click', function () {sessionStorage.clear();});</script>
</body>

这篇关于JS基础-ClassList -移动端插件的引入-touch事件-sessionStorage 和 localStorage的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1138353。

相关文章

JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
禁止平板,iPad长按弹出默认菜单事件

禁止平板,iPad长按弹出默认菜单事件

通过监控按下抬起时间差来禁止弹出事件，把以下代码写在要禁止的页面的页面加载事件里面即可     var date;document.addEventListener('touchstart', event => {date = new Date().getTime();});document.addEventListener('touchend', event => {if (new
阅读更多...
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。 示例代码： class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...
【Linux 从基础到进阶】Ansible自动化运维工具使用

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具，采用无代理架构（agentless），基于 SSH 连接进行管理，具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用，旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念
阅读更多...
Node.js学习记录（二）

Node.js学习记录（二）

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件
阅读更多...
AI基础 L9 Local Search II 局部搜索

AI基础 L9 Local Search II 局部搜索

Local Beam search 对于当前的所有k个状态，生成它们的所有可能后继状态。 检查生成的后继状态中是否有任何状态是解决方案。 如果所有后继状态都不是解决方案，则从所有后继状态中选择k个最佳状态。 当达到预设的迭代次数或满足某个终止条件时，算法停止。 — Choose k successors randomly, biased towards good ones — Close
阅读更多...
我在移动打工的日志

我在移动打工的日志

客户：给我搞一下录音 我：不会。不在服务范围。 客户：是不想吧 我：笑嘻嘻（气笑） 客户：小姑娘明明会，却欺负老人 我：笑嘻嘻 客户：那我交话费 我：手机号 客户：给我搞录音 我：不会。不懂。没搞过。 客户：那我交话费 我：手机号。这是电信的啊！！我这是中国移动！！ 客户：我不管，我要充话费，充话费是你们的 我：可是这是移动！！中国移动！！ 客户：我这是手机号 我：那又如何，这是移动！你是电信！！
阅读更多...
EasyPlayer.js网页H5 Web js播放器能力合集

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求，要求做一款播放器，发现能力上跟EasyPlayer.js基本一致，满足要求： 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏（单屏/全屏） 多分屏（2*2） 多分屏（3*3） 多分屏（4*4） 播放控制 播放（单个或全部） 暂停（暂停时展示最后一帧画面） 停止（单个或全部） 声音控制（开关/音量调节） 主辅码流切换 辅助功能 屏
阅读更多...
音视频入门基础：WAV专题（10）——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

音视频入门基础：WAV专题（10）——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

一、引言 从文章《音视频入门基础：WAV专题（6）——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道，通过FFprobe命令可以打印WAV音频文件每个packet（也称为数据包或多媒体包）的信息，这些信息包含该packet的pts、dts： 打印出来的“pts”实际是AVPacket结构体中的成员变量pts，是以AVStream->time_base为单位的显
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2