前端Web API

最新推荐文章于 2022-11-09 20:06:32 发布

LonM

最新推荐文章于 2022-11-09 20:06:32 发布

阅读量552

点赞数

分类专栏：前端开发笔记文章标签： Web API 前端

本文链接：https://blog.csdn.net/qq_45555892/article/details/102693222

版权

前端开发笔记专栏收录该内容

12 篇文章 5 订阅

订阅专栏

前端Web API

API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能

1.获取元素、事件基础、操作元素

获取元素

根据ID获取

语法：document.getElementById(id)
返回值：元素对象 或 null

根据标签名获取元素

语法：document.getElementsByTagName('标签名')  或者 element.getElementsByTagName('标签名') 
返回值：元素对象集合（伪数组，数组元素是元素对象）

根据类名获取元素 （h5新增）

document.getElementsByClassName(‘类名’) //返回元素对象集合

根据选择器获取元素 （h5新增）

document.querySelector(‘选择器’) //返回第一个元素对象

document.querySelectorAll(‘选择器’) //根据指定选择器返回

获取body元素

document.body

获取html元素

document.documentElement

事件基础

事件三要素

事件源（谁）：触发事件的元素
事件类型（什么事件）：例如 click 点击事件
事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

执行事件的步骤

1.获取事件源

2.注册事件（绑定事件）

3.添加事件处理程序（采取函数赋值形式）

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发

修改元素内容（获取或设置）

element.innerText 从起始到终止位置的内容，但不识别html标签，空格和换行也会去掉

element.innerHTML 从起始到终止位置的内容，但识别html标签，空格和换行也会保留

属性操作

获取属性的值：元素对象.属性名

设置属性的值：元素对象.属性名=值

样式属性操作

element.style 行内样式操作

element.className 类名样式操作

2.自定义属性操作、节点操作

排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

自定义属性操作

获取属性值

1.element.属性 //获取内置属性（元素本身自带的属性）

2.element.getAttribute(’属性值’) //主要获得自定义的属性，程序员自定义的属性

设置属性值

1.element.属性 = ‘值’ //设置内置属性值

2.element.setAttribute(’属性值’,‘值’) //主要设置自定义的属性

移出属性

element.removeAttribute(‘属性’);

H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值

比如：element.setAttribute('data-index',2)

获取H5自定义属性

element.dataset.属性名

element.dataset[’‘属性名’]

节点操作

元素节点 nodeType为1 //实际开发中的主要操作对象

属性节点 nodeType为2

文本节点 nodeType为3（包含文字、空格、换行等）

父级节点

node.parentNode //返回最近的一个父节点，没有则返回null

子节点

1.parentNode.childNodes //会返回所有节点

2.parentNode.children //只返回子元素节点，其余节点不返回，重点使用这个

第1个子节点：parentNode.firstElementChild

最后一个子节点：parentNode.lastElementChild

兄弟节点

node.nextElementSibling 返回下一个兄弟元素节点

node.previousElementSibling 返回上一个兄弟元素节点

创建节点

document.createElement(‘tagName’)

添加节点

node.appendChild(节点名) //将一个节点添加到指定父节点的子节点列表末尾，类似于css里的after伪元素

node.insertBefore(节点名,指定元素) //将一个节点添加到父节点指定的子节点前面，类似于css里的before伪元素

删除节点

node.removeChild(child)

说明：node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

复制（克隆）节点

node.cloneNode() ; // 括号为空或者里面是false 浅拷贝只复制标签不复制里面的内容

node.cloneNode(true); //括号为true 深拷贝复制标签复制里面的内容

document.write创建元素

语法：
- document.write()
- element.innerHTML
- document.createElement()
区别：
1. document.write 是直接将内容写入页面的内容流，界面加载完成之后，再写入，这样它会导致页面全部重绘
2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰
5. 总结：不同浏览器下，innerHTML 效率要比 creatElement 高

3.事件高级

方法事件监听addEventListener()

同一个元素同一个事件可以注册多个监听器（事件处理程序）

// 参数1：事件类型，它是字符串 必定加引号 而且不带on
// 参数2：事件处理程序
btns[1].addEventListener('click', function() {
	alert(22);
})
btns[1].addEventListener('click', function() {
	alert(33);
})

attachEvent()事件监听

语法：

 eventTarget.attachEvent(eventNameWithOn, callback) 
 比如： btns[2].attachEvent('onclick', function() {
        alert(11);
    }) //  attachEvent ie9以前的版本支持  这里的事件需要带on

删除事件（解绑事件）

1. eventTarget.removeEventListener(type, listener[, useCapture]);
 //针对addEventListener()
2. eventTarget.detachEvent(eventNameWithOn, callback);
//针对attachEvent()

DOM 事件流

捕获阶段
当前目标阶段
冒泡阶段

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

注意：

JS 代码中只能执行捕获或者冒泡其中的一个阶段。
onclick 和 attachEvent 只能得到冒泡阶段。（理解：只在冒泡阶段触发）
addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

事件对象

  eventTarget.onclick = function(event) {
     // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt 
  } 
  eventTarget.addEventListener('click', function(event) {
    // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt 
  }）

事件对象的属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准 ie6-8使用
e.type	返回事件的类型比如click mouseover 不带on
e.cancelBubble=true	该属性阻止冒泡排序非标准 ie6-8使用
e.returnValue=false	阻止默认事件（默认行为）非标准 ie6-8使用比如不让链接跳转
e.preventDefault()	阻止默认事件（默认行为）标准比如不让链接跳转
e.stopPropagation()	阻止冒泡排序

e.target 和 this 的区别

this 是事件绑定的元素（绑定这个事件处理函数的元素）。
e.target 是事件触发的元素（比如click事件中点击的对象）。

阻止默认行为

e.preventDefault(); //标准写法一般用这个
e.returnValue = false; // 低版本浏览器 ie678
return false; //return后面的不执行

    <a href="http://www.baidu.com">百度</a>
    <script>
        // 2. 阻止默认行为 让链接不跳转 
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
             e.preventDefault(); //  dom 标准写法
        });
        // 3. 传统的注册方式
        a.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
            e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
            e.returnValue = false;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
            return false;
        }
    </script>

阻止事件冒泡

e.stopPropagation() //标准写法
e.cancelBubble = true; //非标准写法

 var son = document.querySelector('.son');
		// 给son注册单击事件
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); 
            window.event.cancelBubble = true; 
        }, false);

阻止事件冒泡的兼容性处理

  if(e && e.stopPropagation){
      e.stopPropagation();
  }else{
      window.event.cancelBubble = true;
  }

事件委托

事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

禁止鼠标右键菜单

contextmenu事件：鼠标右键菜单事件。主要控制应该何时显示上下文菜单（右键菜单），主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu', function(e) {
	e.preventDefault();
})

禁止鼠标选中

selectstart 事件：鼠标选中事件，用于界面文字防止选中

document.addEventListener('selectstart', function(e) {
    e.preventDefault();
})

鼠标事件对象

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于整个文档页面的X坐标 IE9+支持
e.pageY	返回鼠标相对于整个文档页面的Y坐标 IE9+支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

常用键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	被按下时触发
onkeypress	被按下时触发但不识别功能键比如ctrl shift 箭头等
onkeyCode	返回该键的ASCII值

如果使用addEventListener 不需要加 on

三个事件的执行顺序是： keydown – keypress — keyup （按下–按住–抬起）

keyCode判断用户按下哪个键

    <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        document.addEventListener('keyup', function(e) {
            console.log(e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }
        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log(e.keyCode);
        })
    </script>

onkeydown 和 onkeyup 不区分字母大小写，通过keyCode属性获取到的a 和 A 得到的都是65
onkeypress 区分字母大小写，通过keyCode属性获取到的 a 是 97 和 A 得到的是65
但是在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）

4.BOM、JS执行机制、元素偏移量 offset

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

页面（窗口）加载事件

第一种——语法：

window.onload = function(){}
或者 
window.addEventListener("load",function(){});

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。
如果使用 addEventListener 则没有限制

第二种——语法：

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。

调整窗口大小事件

语法：

 window.onresize = function(){}

 window.addEventListener("resize",function(){});

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

window.innerWidth 当前屏幕的宽度

定时器

setTimeout()

 window.setTimeout(回调函数, [延迟的毫秒数]);

window 可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取**字符串‘函数名()’**三种形式。第三种不推荐
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

清除定时器：

 window.clearTimeout(定时器名字)

setInterval() 闹钟定时器

 window.setInterval(回调函数, [间隔的毫秒数]);

和setTimeout用法类似

清除定时器：

 window.clearInterval(intervalID);

this指向问题

全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this也指向window）
方法调用中谁调用this指向谁
构造函数中this指向构造函数的实例（通过构造函数new出来的对象）

location对象

获取或设置窗体的 URL，并且可以用于解析 URL

URL 的一般语法格式为：

 protocol://host[:port]/path/[?query]#fragment

 http://www.itcast.cn/index.html?name=andy&age=18#link

location 对象的属性

location 对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机（域名）
location.port	返回端口号
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容常见于链接锚点

location对象的常见方法

location对象方法	返回值
location.assign()	和href一样，可以跳转页面
location.replace()	替换当前页面，因为不记录历史，所以不能后退
location.reload()	重新加载页面，相当于刷新按钮或者F5 如果参数为true 强制刷新

navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值

下面前端代码可以判断用户那个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

history对象

与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL

history对象方法	作用
back()	后退功能
forward()	前进功能
go(参数)	前进后退功能参数是1则前进1个页面参数是-1 后退1个页面

JS执行机制

同步：先做一件事情，然后再做另一件事情。他是单线程，一个人依次做多件事情

异步：是两件事情同时去做，他是多线程，多个人同时做多个事情

元素偏移量 offset

offset属性	作用
element.offsetParent	返回该元素带有定位的父元素如果父级都没有定位则返回body
element.offsetTop	返回该元素相对带有定位父元素上方的偏移量
element.offsetLeft	返回该元素相对带有定位父元素左边的偏移量
element.offsetWidth	返回自身padding、边框、内容区的宽度
element.offsetHeight	返回自身padding、边框、内容区的高度

注意：返回的数值都不带单位

offset 与 style 区别

offset：想要获取元素大小位置，用offset更合适

style：想要给元素更改值，则需要用style改变

获取鼠标在盒子内的坐标

我们在盒子内点击，想要得到鼠标距离盒子左右的距离。
首先得到鼠标在页面中的坐标（e.pageX, e.pageY）
其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)
用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标
如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动

var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})

5.元素可视区 client 、元素滚动 scroll、动画函数封装

client

通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

立即执行函数

(function(){})()
(function(){}())

创建一个独立的作用域，避免了命名冲突问题

pageshow

这个事件在页面显示时触发，无论页面是否来自缓存。
在重新加载页面中，pageshow会在load事件触发后触发；
根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件
persisted：判断页面是否来自缓存，如果是返回true，如果不是返回false
注意这个事件给window添加。

元素滚动 scroll

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离
element.scrollLeft	返回被卷去的左侧距离
element.scrollWidth	返回自身实际的宽度，不含边框
element.scrollHeight	返回自身实际的高度，不含边框

返回数值均不带单位

当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。
滚动条在滚动时会触发 onscroll事件

页面被卷去的头部

可以通过window.pageYOffset 获得如果是被卷去的左侧window.pageXOffset

注意，元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部则是 window.pageYOffset

页面被卷去的头部兼容性解决方案

需要注意的是，获取页面被卷去的头部高度，有兼容性问题，因此通常有如下几种写法：

声明了 DTD，使用 document.documentElement.scrollTop
未声明 DTD，使用 document.body.scrollTop
新方法 window.pageYOffset和 window.pageXOffset，IE9 开始支持

function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
//使用的时候  getScroll().left

mouseenter 和mouseover的区别

mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发，因为mouseenter不会冒泡。

跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

简单动画函数封装

function animate(obj目标对象, target目标位置){…}

给不同元素记录不同定时器

核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。

 function animate(obj, target) {
            // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
            // 解决方案就是 让我们元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }

动画函数多个目标值之间移动

<script>
        // 缓动动画函数封装obj目标对象 target 目标位置
        // 思路：
        // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
        // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
        // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
        function animate(obj, target) {
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                // 步长值写到定时器的里面
                // 把我们步长值改为整数 不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                obj.style.left = obj.offsetLeft + step + 'px';

            }, 15);
        }
        var span = document.querySelector('span');
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');

        btn500.addEventListener('click', function () {
            // 调用函数
            animate(span, 500);
        })
        btn800.addEventListener('click', function () {
            // 调用函数
            animate(span, 800);
        })
            // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 
            // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
    </script>

动画完整版代码

 <script>
        // 缓动动画函数封装obj目标对象 target 目标位置
        // 思路：
        // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
        // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
        // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
        function animate(obj, target, callback) {
            // console.log(callback);  callback = function() {}  调用的时候 callback()

            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                // 步长值写到定时器的里面
                // 把我们步长值改为整数 不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                    // 回调函数写到定时器结束里面
                    if (callback) {
                        // 调用函数
                        callback();
                    }
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                obj.style.left = obj.offsetLeft + step + 'px';

            }, 15);
        }
        var span = document.querySelector('span');
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');

        btn500.addEventListener('click', function () {
            // 调用函数
            animate(span, 500);
        })
        btn800.addEventListener('click', function () {
            // 调用函数
            animate(span, 800, function () {
                // alert('你好吗');
                span.style.backgroundColor = 'red';
            });
        })
            // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 
            // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
    </script>

节流阀

当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发，利用回调函数，添加一个变量来控制，锁住函数和解锁函数

开始设置一个变量var flag= true;
If(flag){flag = false; do something} 关闭水龙头
利用回调函数动画执行完毕， flag = true 打开水龙头

返回顶部

页面滚动了多少，可以通过 window.pageYOffset 得到
最后是页面滚动，使用 window.scroll(x,y) 不带单位直接写数字

6.移动端和插件的使用、本地存储

常见的触屏事件

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

触摸事件对象（TouchEvent）

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生了改变的列表，从无到有，从有到无的变化

因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

移动端拖动元素

 <script>
        // （1） 触摸元素 touchstart：  获取手指初始坐标，同时获得盒子原来的位置
        // （2） 移动手指 touchmove：  计算手指的滑动距离，并且移动盒子
        // （3） 离开手指 touchend:
        var div = document.querySelector('div');
        var startX = 0; //获取手指初始坐标
        var startY = 0;
        var x = 0; //获得盒子原来的位置
        var y = 0;
        div.addEventListener('touchstart', function(e) {
            //  获取手指初始坐标
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            x = this.offsetLeft;
            y = this.offsetTop;
        });

        div.addEventListener('touchmove', function(e) {
            //  计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            // 移动我们的盒子 盒子原来的位置 + 手指移动的距离
            this.style.left = x + moveX + 'px';
            this.style.top = y + moveY + 'px';
            e.preventDefault(); // 阻止屏幕滚动的默认行为
            //如果不阻止，当粉色盒子滚出界面之后会出现滚动条
        });
    </script>

注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

transitionend

监听过渡完成的事件对象

语法： element.addEventListener(‘transitionend’,函数);

classList 属性

返回元素的类名。但是ie10以上版本支持

添加类：

element.classList.add（’类名’）；

focus.classList.add('current');

移除类：

element.classList.remove（’类名’）;

focus.classList.remove('current');
例：ol.querySelector('.sty').classList.remove('sty');

切换类：

element.classList.toggle（’类名’）; 有这个类名则移除，没有则添加

focus.classList.toggle('current');

注意:以上方法里面，所有类名都不带点

click 延时解决方案

移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。

解决方案：

1. 禁用缩放：浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。

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

2.利用touch事件自己封装这个事件解决300ms 延迟。

原理就是：

当我们手指触摸屏幕，记录当前触摸时间

当我们手指离开屏幕，用离开的时间减去触摸的时间

如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击

代码如下:

//封装tap，解决click 300ms 延时
function tap (obj, callback) {
        var isMove = false;
        var startTime = 0; // 记录触摸时候的时间变量
        obj.addEventListener('touchstart', function (e) {
            startTime = Date.now(); // 记录触摸时间
        });
        obj.addEventListener('touchmove', function (e) {
            isMove = true;  // 看看是否有滑动，有滑动算拖拽，不算点击
        });
        obj.addEventListener('touchend', function (e) {
            if (!isMove && (Date.now() - startTime) < 150) {  // 如果手指触摸和离开时间小于150ms 算点击
                callback && callback(); // 执行回调函数
            }
            isMove = false;  //  取反 重置
            startTime = 0;
        });
}
//调用  
  tap(div, function(){   // 执行代码  });

3.使用插件：fastclick 插件解决300ms 延迟

  <script src="fastclick.js"></script>
  <script>
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
    </script>

Swiper 插件

中文官网地址： https://www.swiper.com.cn/

其他移动端常见插件

lsuperslide： http://www.superslide2.com/

l iscroll： https://github.com/cubiq/iscroll

1.打开demo实例文件，查看需要引入的相关文件，并且引入

2.复制demo实例文件中的结构html，样式css以及js代码

移动端视频插件

zy.media.js

Bootstrap

Bootstrap JS插件使用步骤：

1.引入相关js 文件

2.复制HTML 结构

3.修改对应样式

4.修改相应JS 参数

本地存储

1、容量较大，sessionStorage约5M、localStorage约20M

2、只能存储字符串，可以将对象JSON.stringify() 编码后存储

window.sessionStorage （session：会话）

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以键值对的形式存储使用

存储数据：

sessionStorage.setItem('key', 存的内容)

获取数据：

sessionStorage.getItem('key')

删除数据：

sessionStorage.removeItem('key')

清空数据：(所有都清除掉)

sessionStorage.clear()

window.localStorage

1、声明周期永久生效，除非手动删除否则关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

3、以键值对的形式存储使用

存储数据：

localStorage.setItem('key', value)

获取数据：

localStorage.getItem('key')

删除数据：

localStorage.removeItem('key')

清空数据：(所有都清除掉)

localStorage.clear()

change事件

当选框发生改变的时候可以使用change事件

LonM

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端Web API

前端Web APIAPI是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能1.获取元素、事件基础、操作元素获取元素根据ID获取语法：document.getElementById(id)返回值：元素对象或 null根据标签名获取元素语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagNa...
复制链接

扫一扫

专栏目录