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](#6sessionStorage 和 localStorage)

简介

[6.1. 数据存储的目的](#6.1. 数据存储的目的)

[6.2. 数据的持续性](#6.2. 数据的持续性)

[6.3. 存储容量](#6.3. 存储容量)

[6.4. 访问数据的范围](#6.4. 访问数据的范围)

[6.5. 使用场景](#6.5. 使用场景)

[6.6. 安全性](#6.6. 安全性)

6.7代码示例

[存储数据:使用 setItem() 方法](#存储数据:使用 setItem() 方法)

[获取数据:使用 getItem() 方法](#获取数据:使用 getItem() 方法)

[删除数据:使用 removeItem() 方法](#删除数据:使用 removeItem() 方法)

[清空所有数据:使用 clear() 方法](#清空所有数据:使用 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结构

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使用

html 复制代码
<!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() 方法。这个方法不接受任何参数。

html 复制代码
<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>
相关推荐
时光の尘6 分钟前
C语言菜鸟入门·关键字·float以及double的用法
运维·服务器·c语言·开发语言·stm32·单片机·c
以后不吃煲仔饭20 分钟前
Java基础夯实——2.7 线程上下文切换
java·开发语言
进阶的架构师20 分钟前
2024年Java面试题及答案整理(1000+面试题附答案解析)
java·开发语言
前端拾光者24 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
程序猿阿伟26 分钟前
《C++ 实现区块链:区块时间戳的存储与验证机制解析》
开发语言·c++·区块链
傻啦嘿哟44 分钟前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光1 小时前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用1 小时前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
Dola_Pan1 小时前
C语言:数组转换指针的时机
c语言·开发语言·算法
ExiFengs1 小时前
实际项目Java1.8流处理, Optional常见用法
java·开发语言·spring