移动端JavaScript基础-笔记

最新推荐文章于 2024-09-04 20:18:34 发布

黑人的乔丹鞋

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量230

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/HeiRen_QDX/article/details/115710768

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

移动端JS特效

触屏

触屏事件概述

touch代表一个触控点。也就是我们的手指，或者是触控笔。触控事件可以响应用户的触摸操作。

触控事件

触控事件	说明
touchstart	手指摸到一个DOM元素时，触发。
touchmove	手指在一个DOM元素上滑动时，触发。
touchend	手指从一个DOM元素上移开时，触发。

常用形式

元素.addEventListener('touchstart',处理函数);
元素.addEventListener('touchmove',处理函数);
元素.addEventListener('touchend',处理函数);

触控事件对象

触控事件对象，一个伪数组，它包含了许多触控相关系列的信息。touchEvent

触控列表	说明
touches	正在触摸手指的列表。
targetTouches	正在触摸DOM元素上的手指列表。
changedTouches	手指状态发生改变的列表，从有到无，从无到有。

常用形式

元素.addEventListener('touches',处理函数);
元素.addEventListener('targetTouches',处理函数);
元素.addEventListener('changedTouches',处理函数);

过渡事件

在我们需要制作动画时，添加了过渡动画。部分功能需要在过渡动画之后发生，那么就可以使用 transitionend 事件。

名称	说明
transitionend	过渡动画结束时，触发。

常用形式

元素.addEventListener('transitionend',处理函数);

classList类名列表

classList是HTML5新增属性，伪数组形式存储元素的类名信息。IE10以上支持

该属性拥有添加、修改、删除类名的方法。

名称	说明
classList.add()	添加类名
classList.remove()	删除类名
classList.toggle()	切换类名

常用形式

元素.classList.add('类名')//不加.
元素.classList.remove('类名')
元素.classList.toggle('类名')

click点击延时

在移动端，由于双击会缩放页面，所以click点击事件存在300ms的延时，用于区分两者。

解决方案：

禁止窗口缩放【直接在html标签中添加】

<meta name="viewport" content="user-scalable=no">

通过touch事件封装一个函数解决
使用插件。fastclick 插件 解决。

常用函数

插件和框架

什么事插件？

插件就是一个JS文件，他有一定的书写规范，方便展示效果，拥有特定功能且方便调用。如轮播图和瀑布插件。

插件的使用流程：

引入插件的JS文件，如果有CSS文件也需要引入。
插入插件提供的网页骨架。
根据需求微调。

Swiper

开源、免费、强大的触摸滑动插件。-主要使用在滑动图片，焦点图。

SuperSilder

SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等等。

Bootstrap框架

本地存储

为什么需要本地存储呢？

答：因为互联网高速发展，数据量不断增大。很多数据不需要频繁向数据库读写，在本地存储起来，提高网页效率和降低资源损耗。

window.sessionStorage

生命周期为关闭浏览器窗口。
在同一窗口（页面）下数据可以共享。
以 键值对 的方式存储数据。

名称	说明
sessionStorage.setItem(键,值)	存储键值对
sessionStorage.getItem(键)	获取值
sessionStorage.removeItem(键)	删除键值对
sessionStorage.clear()	清除所有键值对

常用形式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            padding: 10px;
            text-align: left;
        }
        
        input {
            height: 22px;
        }
        
        button {
            padding: 2px;
            margin: 0 5px;
            outline: none;
            border: 1px solid #000;
            background-color: #fff;
            font-size: 16px;
            vertical-align: middle;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box"><input type="text"><button class="set">写入数据</button><button class="get">读取数据</button><button class="remove">删除数据</button><button class="det">清空所有数据</button></div>
    <script>
        // 获取元素
        var input = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.det');
        set.addEventListener('click', function() {
            var value = input.value; //获取输入框的值
            sessionStorage.setItem('uname', value); //本地储存
        });
        get.addEventListener('click', function() {
            var value = sessionStorage.getItem('uname'); //获取值
            console.log(value);
        });
        remove.addEventListener('click', function() {
            sessionStorage.removeItem('uname'); //删除值
        });
        del.addEventListener('click', function() {
            sessionStorage.clear(); //清除所有值
        });
    </script>
</body>

</html>

window.localStorage

使用方法与 sessionStorage 相同。

生命周期为永久。
在统一窗口（页面）下数据可以共享。
以 键值对 的方式存储数据。

名称	说明
localStorage.setItem(键,值)	存储键值对
localStorage.getItem(键)	获取值
localStorage.removeItem(键)	删除键值对
localStorage.clear()	清除所有键值对

JSON.stringify(数组对象);//将数组对象转换为JSON字符串，这样就解决了数组无法直接存储到本地存储中使用。
JSON.parse(字符串对象);//将字符串转换为数组。

事件

change

在元素发生改变时，触发。如:复选框的变化。

元素.addEventListener('change',处理函数);

黑人的乔丹鞋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
移动端JavaScript基础-笔记

移动端JS特效触屏触屏事件概述touch代表一个触控点。也就是我们的手指，或者是触控笔。触控事件可以响应用户的触摸操作。触控事件触控事件说明touchstart手指摸到一个DOM元素时，触发。touchmove手指在一个DOM元素上滑动时，触发。touchend手指从一个DOM元素上移开时，触发。常用形式元素.addEventListener('touchstart',处理函数);元素.addEventListener('touchmove',处理函
复制链接

扫一扫

专栏目录