前端Web API

前端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. 所有元素全部清除样式(干掉其他人)
  2. 给当前元素设置样式 (留下我自己)
  3. 注意顺序不能颠倒,首先干掉其他人,再设置自己

自定义属性操作

获取属性值

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 事件流

  1. 捕获阶段
  2. 当前目标阶段
  3. 冒泡阶段

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

注意:

  1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
  2. onclick 和 attachEvent 只能得到冒泡阶段。(理解:只在冒泡阶段触发)
  3. addEventListener(type, listener[, useCapture])第三个参数如果是 true,表示在事件捕获阶段调用事件处理程序;如果是 false(不写默认就是false),表示在事件冒泡阶段调用事件处理程序。
  4. 实际开发中我们很少使用事件捕获,我们更关注事件冒泡
  5. 有些事件是没有冒泡的,比如 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事件中点击的对象)。

阻止默认行为

  1. e.preventDefault(); //标准写法 一般用这个
  2. e.returnValue = false; // 低版本浏览器 ie678
  3. 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>

阻止事件冒泡

  1. e.stopPropagation() //标准写法
  2. 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>
  1. onkeydown 和 onkeyup 不区分字母大小写,通过keyCode属性获取到的a 和 A 得到的都是65
  2. onkeypress 区分字母大小写 ,通过keyCode属性获取到的 a 是 97 和 A 得到的是65
  3. 但是在我们实际开发中,我们更多的使用keydown和keyup, 它能识别所有的键(包括功能键)

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

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

页面(窗口)加载事件

第一种——语法:

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

第二种——语法:

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

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

调整窗口大小事件

语法

 window.onresize = function(){}

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

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

window.innerWidth 当前屏幕的宽度

定时器

setTimeout()

 window.setTimeout(回调函数, [延迟的毫秒数]);
  1. window 可以省略。
  2. 这个调用函数可以直接写函数,或者写函数名或者采取**字符串‘函数名()’**三种形式。第三种不推荐
  3. 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。

清除定时器:

 window.clearTimeout(定时器名字)

setInterval() 闹钟定时器

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

和setTimeout用法类似

清除定时器:

 window.clearInterval(intervalID);

this指向问题

  1. 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this也指向window)
  2. 方法调用中谁调用this指向谁
  3. 构造函数中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改变

获取鼠标在盒子内的坐标

  1. 我们在盒子内点击,想要得到鼠标距离盒子左右的距离。
  2. 首先得到鼠标在页面中的坐标(e.pageX, e.pageY)
  3. 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)
  4. 用鼠标距离页面的坐标减去盒子在页面中的距离,得到 鼠标在盒子内的坐标
  5. 如果想要移动一下鼠标,就要获取最新的坐标,使用鼠标移动
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、内容区的高度,不含边框,返回数值不带单位

立即执行函数

  1. (function(){})()
  2. (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

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

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

  1. 声明了 DTD,使用 document.documentElement.scrollTop
  2. 未声明 DTD,使用 document.body.scrollTop
  3. 新方法 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>

节流阀

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

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

返回顶部

  1. 页面滚动了多少,可以通过 window.pageYOffset 得到
  2. 最后是页面滚动,使用 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 延迟

  
  

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事件

你可能感兴趣的:(API)