JS进阶之Web APIs

Web APIAPI概念: API(Application Programming Interface 应用程序编程接口): 是一种预先定义的函数, 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力, 而无需访问源码, 或理解内部工作机制的细节.Web API概念: Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)DOM简介DOM的概念: 文档对

信子姚青

350人浏览 · 2020-09-19 22:39:03

信子姚青 · 2020-09-19 22:39:03 发布

Web API

API
1. 概念: API(Application Programming Interface 应用程序编程接口): 是一种预先定义的函数, 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力, 而无需访问源码, 或理解内部工作机制的细节.
Web API
1. 概念: Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

DOM简介

DOM的概念: 文档对象模型(Document Object Model): 是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准接口. 用来改变页面的内容,结构和样式.
DOM树
1. 文档: 一个页面就是一个文档, DOM中使用document表示
2. 元素: 页面中所有标签都是元素, DOM中使用element表示
3. 节点: 网页中的所有内容都是节点(标签, 属性, 文本, 注释), DOM中使用node表示.
获取页面元素
1. 根据元素ID获取: var element = document.getElementById(id);
  1. 参数:
    1. element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
    2. id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.
  2. 返回值: 返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。
  3. console.dir(): 打印我们返回的元素对象, 更好的查看里面的属性和方法
2. 根据标签名获取: var elements = document.getElementsByTagName(name);
  1. elements 是一个由发现的元素出现在树中的顺序构成的动态的HTML集合
  2. name 是一个代表元素的名称的字符串。特殊字符 “*” 代表了所有元素。
  3. element.getElementsByTagName(name); 通过element和标签名称获取页面元素对象
3. 根据类名获取: var element = document.getElementByClassName(‘类名’)
4. 根据指定选择器返回第一个元素对象: document.querySelector(‘选择器’)
5. 根据指定选择器返回: document.querySelectorAll(‘选择器’)
6. 获取body元素: document.body
7. 获取html元素: document.documentElement

事件基础

事件概述

JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript检测到的行为. 简单理解: 触发 – 响应机制

事件三要素

事件源: 事件被触发的对象谁按钮
事件类型: 如何触发什么事件比如鼠标经过还是点击

事件处理程序: 通过一个函数赋值的方式完成

<div>唐伯了虎</div>
<script>
    /*获取事件源*/
    let div = document.getElementsByTagName('div');
    /*注册事件 div[0].onclick */
    /*添加事件处理程序*/
    div[0].onclick = function () {
        alert('点了个秋香');
    }
</script>

常见的鼠标事件

onclick: 鼠标点击左键触发
onmouseover: 鼠标经过触发
onmouseout: 鼠标离开触发
onfocus: 获得焦点触发
onblur: 失去焦点触发
onmousemove: 鼠标移动触发
onmouseup: 鼠标弹起触发

onmousedown: 鼠标按下触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS初体验</title>
    <style>
        input {
            outline: none;
            width: 200px;
            border: 1px solid pink;
            color: #aaa;
        }
    </style>
</head>
<body>
    <input type="text" value="邮箱/ID/手机号">
    <script>
        let register = document.querySelector('input');
        register.onfocus = function () {
            if(this.value === '邮箱/ID/手机号'){
                this.value = '';
            }else {
                this.style.color = '#333';
            }
        }
        register.onblur = function () {
            if(this.value.trim()===''){
                this.value = '邮箱/ID/手机号';
                this.style.color = '#aaa';
            }else {
                this.style.color = '#333';
            }
        }
    </script>
</body>
</html>

操作元素

改变元素内容:

element.innerText: 从起始位置到终止位置的内容, 但它去除html标签, 同时空格和换行也会去掉

element.innerHTML: 起始位置到终止位置的全部内容, 包括html标签, 同时保留空格和换行.

<body>
    <button>显示当前系统事件</button>
    <div></div>
    <script>
        var button = document.querySelector('button');
        var div = document.querySelector('div');
        button.onclick = function () {
            div.innerText = getDate();
        }
        function getDate() {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth()+1;
            let dates = date.getDate();
            let arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
            let day = date.getDay();
            return year+'年'+month+'月'+dates+'日 '+arr[day];
        }
    </script>
</body>

改变元素的属性
1. src: 插入图片的路径
2. href: 点击跳转的路径
3. id: 唯一标识
4. alt: 加载不成功,提示的友好信息
5. title: 鼠标停留时显示的标题信息

改变表单中的属性

value
checked
disabled
selected

type

<body>
    <button>点我=出去了半年</button>
    <input type="text" value="曾经那个少年">
    <script>
       let btn = document.querySelector('button');
       let input = document.querySelector('input');
       btn.onclick = function () {
            input.value = '变啦';
            this.disabled = true;
       }
    </script>
</body>

样式属性的操作: 修改元素的大小, 颜色, 位置等

element.style: 行内样式操作
1. 适用于修改样式比较少, 内容比较简单的情况

element.className: 类名样式操作

适用于修改样式比较多,比较复杂的情况
className: 会直接更改元素的类名, 会覆盖原先的类名.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关闭广告</title>
    <style>
        .box {
            position: relative;
        }
        .box .close {
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <img src="images/luzhou.jpg" alt="">
        <img src="images/close.jpg" alt="" id="box-close" class="close">
    </div>
    <script>
       let close_btn = document.getElementById('box-close');
       let box = document.querySelector('.box');
       close_btn.onclick = function () {
           box.style.display = 'none';
       }
    </script>
</body>
</html>

获取属性的值
1. element.属性: 获取内置属性值(元素本身自带的属性)
2. element.getAttribute(‘属性’): 主要获取自定义的属性(标准), 程序员自定义的属性.
3. element.dataset.自定义属性: H5新增获取自定义属性的值的方法.
设置属性值
1. element.属性 = ‘值’;
2. element.setAttribute = ‘值’; 以data-开头
  1. element.setAttribute(‘data-index’, 1);
移除属性值
1. element.removeAttribute(‘属性名称’);

节点操作

节点概述
1. 一般地, 节点至少拥有nodeType(节点类型), nodeName(节点名称)和nodeValue(节点值)这三个基本属性
  1. 元素节点 nodeType为1
  2. 属性节点 nodeType为2
  3. 文本节点 nodeType为3 (文本节点包含文字, 空格, 换行等)
父级节点: element.parentNode
子节点:
1. element.childNodes : 不常用
2. element.children: 所有子元素节点
3. parentNode.firstElementChild: 第一个子元素节点
4. parentNode.lastElementChild: 最后一个子元素节点
5. parentNode.children[0]: 第一个子元素节点
6. parentNode.children[parentNode.children.length-1]: 最后一个子元素节点
兄弟节点
1. node.nextSiBing: 下一个兄弟节点
2. node.previousSiBing: 上一个兄弟节点
3. node.nextElementSiBing: 下一个兄弟元素节点
4. node.previousElementSiBing: 上一个兄弟元素节点
创建节点
1. 创建元素节点: document.createElement(‘li’)
添加节点
1. node.appendChild(child): node是爸爸, child是孩子, 追加
2. parentNode.insertBefore(child,referenceNode): 在referenceNode前面插入
删除节点
1. node.removeChild(child)
复制节点(克隆节点)
1. node.cloneNode(): 返回调用该方法节点的一个副本, 如果参数为true会拷贝里边的内容
动态创建元素区别
1. document.write(): 直接将内容写入页面的内容流, 但是文档流执行完毕, 则会导致页面全部重绘
2. element.innerHTML: 是将内容写入某个DOM节点, 不会导致页面全部重绘
3. document.createElement(): 创建多个元素效率稍低一点点,但是结构更清晰

事件高级

注册事件概述
1. 给元素添加事件, 称为注册事件或者绑定事件
2. 注册事件有两种方式: 传统方式和方法监听注册方式
3. 传统注册方式: 利用on开头的事件onclick. 同一个元素同一个事件只能设置一个处理函数, 最后注册的处理函数将会覆盖前面注册的处理函数.
4. 方法监听注册方式: addEventListener()
  1. 里边的事件类型是字符串, 必定加引号, 而不带on
  2. 同一个元素, 同一个事件可以添加多个监听器(事件处理程序)
删除事件
1. 事件源.事件类型 = null;
2. evenTarget.removeEventListener(‘事件类型不加on’, 移除的函数);
DOM事件流
1. 概念: 描述的是从页面中接受事件的顺序, 事件发生时会在元素节点之间按照特定的顺序传播, 这个传播过程即DOM事件流.
  1. 从上往下传播称为捕获阶段.
  2. 目标阶段
  3. 从下往上传播称为冒泡阶段
2. 有些事件没有冒泡, 比如onblur, onfocus, onmouseover, onmouseleave
事件对象
1. event就是一个事件对象,写在事件函数的小括号里边充当形参
2. 事件对象只有有了事件才会存在,是系统创建的, 不需要我们传递参数
3. 事件对象是我们事件的一系列相关数据的集合, 跟事件相关的, 比如鼠标点击里面就包含了鼠标的相关信息, 鼠标坐标啊, 如果是键盘事件里边就包含键盘事件的信息, 比如判断用户按下了那个键.
4. 事件对象我们可以自己命名, 比如 event evt e等
```
<div>事件对象</div>
var div = document.querySelector('div');
div.addEventListener('click', function(e)){
	alert('hi~');
}
```
事件对象的常见属性和方法
1. e.target: 返回触发事件的对象
2. e.type: 返回事件的类型
3. e.preventDefault(): 组织默认事件
4. e.stopPropagation(): 防止冒泡
事件委托
1. 概念: 事件委托也称为事件代理
2. 原理: 不是每个子节点单独设置事件监听器, 而是事件监听器设置在其父节点上, 然后利用冒泡原理影响设置每个子节点.
3. 作用: 只操作一次DOM, 提高了程序的性能.

不能说的秘密

<body>
    内容都是秘密
    <script>
        document.addEventListener('contextmenu', function (e) {
            e.preventDefault();
        })
        document.addEventListener('selectstart', function (e) {
            e.preventDefault();
        })
    </script>
</body>

常用的鼠标点击事件
1. e.clientX; 鼠标相对于浏览器窗口可视区的X坐标
2. e.clientY: 鼠标相对于浏览器窗口可视区的Y坐标
3. e.pageX: 鼠标相对于文档页面可视区的X坐标
4. e.pageY: 鼠标相对于文档页面可视区的Y坐标
5. e.screenX: 鼠标相对于电脑屏幕的X坐标
6. e.screenY: 鼠标相对于电脑屏幕的Y坐标
常用键盘事件
1. onkeyup: 某个键盘按键被松开时触发
2. onkeydown: 某个键盘按键被按下时触发
3. onkeypress : 某个按键按键被按下时触发,不能识别功能键,区分大小写
键盘事件对象
1. keyCode: 返回该键的ASCII值

BOM

概念: BOM(Browser Object Model)即浏览器对象模型, 它提供了独立与页面而与浏览器窗口进行交互的对象,其核心对象是window.
BOM的构成
1. window对象是浏览器的顶级对象, 它具有双重角色
  1. 它是JS访问浏览器窗口的一个接口
  2. 它是一个全局对象, 定义在全局作用域中的变量, 函数都会编程window对象的属性和方法. 在调用的时候可以省略.
  3. window对象的常见事件
    1. window.onload: 页面全部加载完成, 只有一个生效, 具有层叠性
    2. window.addEventListener(‘load’, function() {}). 可以有多个
    3. 调整窗口大小事件: window.addEventListener(‘resize’, function() {})
  4. 页面加载事件: document.addEventListener(‘DOMContentLoaded’, function() {}): DOM加载完毕, 不包含图片, flash css等就可以执行.
  5. 回调函数: 上一件事干完, 再回头调用这个函数.
JS执行机制
1. JS是单线程, 也就是说, 同一个事件只能做一件事, 也就是说所有任务需要排队, 前一个任务结束, 才会执行后一个任务,如果JS执行时间过长, 这样就会造成页面的渲染不连贯, 导致页面渲染加载阻塞的感觉.
2. 执行顺序
  1. 先执行执行桟中的同步任务
  2. 异步任务(回调函数)放入任务队列中
  3. 一旦执行完桟中的所有同步任务后, 系统就会按次序读取任务队列中的异步任务, 于是被读取的异步任务结束等待状态, 进入执行桟, 开始执行.
  4. 由于主线程不断的重复获得任务, 执行任务, 再获取任务, 再执行, 所以这种机制被称为事件循环(eventloop).
Location对象
1. window对象给我们提供了一个location属性用于获取或设置窗体的URL, 并且可以用于解析URL.
2. URL:
  1. 概念: 统一资源定位符(Uniform Resource Locator) 是互联网上标准资源的地址, 互联网上的文件都有一个唯一的URL, 它包含的信息指出文件的位置以及浏览器应该怎么处理它.
  2. 语法格式: protocol://host[:port]/path/[?query]#fragment
    1. protocol: 通信协议常用的http, ftp, https等
    2. host: 主机名或者称为域名
    3. port: 端口号.
    4. path: 路径, 一般表示主机上的一个目录或文件地址
    5. query: 请求参数, 以键值对表示&分隔
    6. fragment: 片段 #后面内容常用于链接锚点
  3. location对象的属性
    1. location.href: 获取或者设置整个URL
    2. location.host: 返回主机(域名)
    3. location.port: 返回端口号
    4. location.pathname: 返回路径
    5. location.search: 返回参数
    6. location.hash: 返回片段 #后面内容
    7. location.assign: 重定向
    8. location.replace: 没有记录, 无法后退
    9. location.refresh(true): 强制刷新
navagator 对象
1. navagator 对象包含有关浏览器的信息, 它有很多属性, 我们最常用的是userAgent, 该属性可以返回由客户机发送服务器的user-agent头部的值.
history对象
1. back(): 后退功能
2. forword(): 前进功能
3. go(参数): 前进后退功能

网页特效系列

元素偏移量offset系列
1. 概述: 使用offset相关属性可以动态的得到该元素的位置(偏移)、大小等.
2. 属性
  1. element.offsetTop: 元素相对于有定位父元素上方的偏移量
  2. element.offsetLeft: 元素相对于有定位父元素左边距的偏移量
  3. element.offsetWidth: 返回自身包括padding,边框,内容区的宽度,返回数值不带单位
  4. element.offsetHeight: 返回自身包括padding,边框,内容区的高度,返回数值不带单位
  5. element.offsetParent: 返回做为该元素带有定位的父级元素, 如果父级都没有定位则返回body.
  6. element.pageYoffset: 页面被卷去的头部
client: 元素可视区client系列
1. 概念: client翻译过来就是客户端, 动态的得到元素的边框大小,元素大小
2. 属性:
  1. element.clientWidth: 返回自身包括padding, 内容区的宽度, 不含边框, 返回数值不带单位.
  2. element.clientHeight: 返回自身包括padding, 内容区的高度, 不含边框, 返回数值不带单位.
  3. element.clientLeft: 返回元素左边的大小
  4. element.clientTop: 返回元素上边框的大小.

立即函数: 不需要调用, 立马能够自己执行的函数

 <script>
    (function() {
        alert('小小俊阳');
    })()
</script>
或
<script>
   (function(a,b) {
           alert(a*b);
       }(2,3))
 </script>

元素scroll系列属性
1. scroll属性翻译过来就是滚动的, 我们使用scroll系列的相关属性可以动态的得到该元素的大小, 滚动距离等
2. 属性
  1. element.scrollTop: 返回被卷去的上侧距离, 返回数值不带单位
  2. element.scrollLeft: 返回被卷去的左侧距离, 返回数值不带单位
  3. element.scrollWidth: 返回自身实际的宽度, 不含边框, 返回数值不带单位
  4. element.scrollHeight: 返回自身实际的高度, 不含边框, 返回数值不带单位.
mouseenter和mouseover的区别
1. mouseenter 鼠标事件, 当鼠标移动到元素上时就会触发mouseenter事件
2. mouseover鼠标经过自身盒子会触发, 经过子盒子还会触发, mouseenter只会经过自身盒子触发
3. 原因是mouseenter不会冒泡
4. mouseleave鼠标离开同样不会冒泡
动画函数封装
1. 匀速动画就是盒子是当前的位置+固定的值
2. 缓动动画就是盒子当前的位子+变化的值(目标值-现在的位置)/10
3. 根据实际情况使用math.floor或者math.ceil
4. 一般在定时器结束的时候开启回调函数.
节流阀: 当上一个函数动画内容执行完毕, 再去执行下一个函数动画, 让事件无法连续触发, 核心思路: 利用回调函数, 添加一个变量,锁住函数和解锁函数.

常见移动端特效

手指触摸DOM元素事件: touchstart
手指移动事件: touchmove
手指离开事件: touchend
触摸事件对象
1. touchs: 正在触摸屏幕的所有手指的列表
2. targetTouches: 正在触摸当前DOM元素的手指列表
3. changedTouches: 手指状态发生了改变的列表, 从无到有,或者从有到无
classList属性:
1. 介绍: classList属性是HTML5新增的一个属性, 返回元素的类名, 该元素用于在元素中添加, 移除以及切换CSS类.
2. 方法:
  1. div.classList.add(‘three’).
  2. div.classList.remove(‘three’).
  3. div.classList.toggle(‘类名’)
click延时解决方案
1. 移动端click事件会有300ms的延时, 原因是移动端屏幕双击会缩放页面
2. 解决方案: 禁止缩放, 浏览器禁止默认的双击缩放行为并且去掉300ms的点击延时
```
<meta name="viewport" content="user-scalable=no">
```

移动端常用开发插件

Swiper插件的使用
1. 地址: https://www.swiper.com.cn
2. 引入插件相关文件
3. 按照规定语法使用
superslide: http://www.superslide2.com
iscroll: https://github.com/cubiq/iscroll
移动端视频插件: zy.media.js

本地存储

特性:
1. 数据存储在用户浏览器中
2. 设置、读取方便, 甚至页面刷新不丢失数据
3. 容量较大, sessionStroage约5M, localStorage约20M
4. 只能存储字符串, 可以将对象JSON.stringfy()编码后存储.
window.sessionStroage
1. 生命周期为关闭浏览器窗口
2. 在同一个窗口(页面)下数据可以共享
3. 以键值对的形式存储使用
4. 使用
  1. 设置: sessionStorage.setItem(‘uname’, val);
  2. 获取: sessionStorage.getItem(‘uname’);
  3. 移除: sessionStorage.removeItem(‘uname’);
  4. 删除所有: sessionStorage.clear();
window.localStorage
1. 生命周期永久生效, 除非手动删除否则关闭页面也会存在
2. 可以多窗口(页面)共享(同一浏览器可以共享)
3. 以键值对的形式存储
4. 使用
  1. 设置: localStorage.setItem(‘uname’, val);
  2. 获取: localStorage.getItem(‘uname’);
  3. 移除: localStorage.removeItem(‘uname’);
  4. 删除所有: localStorage.clear();