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

ops/2024/11/15 6:05:38/

目录

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以上的版本支持）。

添加类

javascript">element.classList.add('newClassName');

向 element 元素添加一个名为 newClassName 的类（如果它尚不存在的话）。

删除类

javascript">element.classList.remove('oldClassName');

切换类

javascript">element.classList.toggle('toggleClassName');

toggle 方法会根据 element 元素上是否已存在指定的类名来添加或删除该类。如果 toggleClassName 存在，则删除它；如果不存在，则添加它。

检查类是否存在

javascript">if (element.classList.contains('someClassName')) {  // 如果存在 'someClassName' 类，则执行某些操作  
}

contains 方法用于检查 element 元素的类列表中是否存在指定的类名。

替换类

虽然 classList 没有直接的替换方法，但你可以通过组合使用 remove 和 add 方法来实现替换类的效果：

javascript">element.classList.remove('oldClassName');  
element.classList.add('newClassName');

2.移动端touch事件

  1. touchstart：当手指触摸屏幕时触发。
  2. touchend：当手指从屏幕上抬起时触发。
  3. touchmove：当手指在屏幕上滑动时持续触发。
  4. touchcancel：当系统停止跟踪触摸时触发。这通常发生在触摸点太多，浏览器无法全部跟踪时，或者当触摸操作被中断（例如，电话来电）时。
javascript">// 获取元素  
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引入

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

初始化

javascript">if ('addEventListener' in document) {  document.addEventListener('DOMContentLoaded', function() {  FastClick.attach(document.body);  }, false);  
}

 移除

javascript">FastClick.detach(document.body);

4.Swiper插件的引入和使用

Swiper（通常称为Swiper Slider或Swiper.js）是一个流行的滑动插件，用于创建触摸滑动切换效果，常用于图片轮播、滑块导航等场景。Swiper支持响应式布局、触摸滑动、硬件加速以及丰富的API和配置选项。

通过CDN引入

javascript"><!-- 引入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中建议）

javascript">npm install swiper

 导入

javascript">// 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

javascript">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.引入

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

5.2使用

javascript">        <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初始化

javascript">    <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>


http://www.ppmy.cn/ops/107283.html

相关文章

图像白平衡

图像白平衡

目录 效果 背景 什么是白平衡&#xff1f; 实现原理 将指定图色调调整为参考图色调主要流程 示例代码 效果 将图一效果转换为图二效果色调&#xff1a; 调整后&#xff0c;可实现色调对换 背景 现有两张图像&#xff0c;色调不一致&#xff0c;对于模型重建会有影响。因…
阅读更多...
51单片机-第十三节-直流电机驱动（PWM）

51单片机-第十三节-直流电机驱动（PWM）

一、直流电机介绍&#xff1a; 直流电机是一种将电能转换为机械能的装置。 一般的直流电机有两个电极&#xff0c;电极正接&#xff0c;电机正转&#xff0c;电极反接&#xff0c;电机反转。 直流电机主要由永磁体&#xff08;定子&#xff09;、线圈&#xff08;转子&#…
阅读更多...
Java项目——苍穹外卖（一）

Java项目——苍穹外卖（一）

Entity、DTO、VO Entity&#xff08;实体&#xff09; Entity 是表示数据库表的对象&#xff0c;通常对应数据库中的一行数据。它通常包含与数据库表对应的字段&#xff0c;并可能包含一些业务逻辑。 DTO&#xff08;数据传输对象&#xff09; 作用&#xff1a;DTO 是用于在…
阅读更多...
checksum 与 CRC的不同之处

checksum 与 CRC的不同之处

实际应用&#xff1a; CRC&#xff1a;在外发电压时&#xff0c;在报文的最后两个字节做了CRC计算。 checksum &#xff1a; 在按键状态外发&#xff0c;在报文的最后一个字节做了checksum计算。 它们的共同之处&#xff1a;目的都是为了数据的错误检测功能。 只是在算法的…
阅读更多...
idea中配置Translation插件完成翻译功能

idea中配置Translation插件完成翻译功能

文章目录 idea下载插件配置有道云阿里云百度翻译开放平台 idea下载插件 idea中安装Translation插件 使用方法&#xff1a;右下角选择翻译引擎&#xff0c;鼠标选中想翻译的部分&#xff0c;右键翻译即可 之前一直用的微软的翻译&#xff0c;不需要配置&#xff0c;但是最近微软…
阅读更多...
5.8 切换保护模式（5）

5.8 切换保护模式（5）

1 首先测试 了&#xff0c; 之前的代码 是 没有问题的&#xff0c;确实会 停在 汇编处。 1 首先是 设置 除了 CS 之外的寄存器 进入 32为模式 //为了使除了 cs 之外的 段选择寄存器也进入 32位模式。mov $16, %ax // 16为数据段选择子mov %ax, %dsmov %ax, %ssmov %ax, %esmov…
阅读更多...
git：认识git和基本操作（1）

git：认识git和基本操作（1）

目录 一、版本控制器 1.安装git 2.创建git本地仓库 3.配置git 二、git操作&#xff08;1&#xff09; 1.工作区、暂存区、版本库 2.添加文件 3.查看.git 4.修改文件 一、版本控制器 所谓的版本控制器&#xff0c;就是能让你了解到每一个文件的修改历史。相应的&#x…
阅读更多...
快速学习GO语言总结

快速学习GO语言总结

干货分享&#xff0c;感谢您的阅读&#xff01;备注&#xff1a;本博客将自己初步学习GO的总结进行分享&#xff0c;希望大家通过本博客可以在短时间内快速掌握GO的基本程序编码能力&#xff0c;如有错误请留言指正&#xff0c;谢谢&#xff01; 一、初步了解Go语言 &#xf…
阅读更多...
最新文章

Copyright @ 2022~2023