Web APIs ｜ 青训营笔记

学习前端的代学生
163 阅读6分钟

Web APIs ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第7天

一、简介

image.png

API

  • 给程序员提供的工具，让程序员不需要关注里面的内核就可以使用它来实现编程。

二、DOM

  • 文档对象模型，是html的标准编程接口，可改变网页的内容、结构和样式
  • DOM树

image.png

  • document.getElementById('id');

    • 参数是字符串，返回的是元素对象

  • console.dir();

    • 打印对象，更好地查看里面的属性和方法

  • getElementsByTagName()可以返回带有指定标签名的对象的集合

    • 集合是伪数组的形式储存的
    • 参数为标签名的时候，是获取某个元素内部所有该指定标签名的子元素

  • HTML5新增的方法获取元素对象集合

    • document.getElementsByClassName("类名");
    • document.querySelector();返回指定选择器的第一个元素对象
    • document.querySelectorAll();返回指定选择器的所有对象的集合

image.png

  • 获取body html元素
    • document.body 获取body元素
    • document.documentElement 获取HTMl元素

1.事件基础

  • 元素.事件 手动调用事件
  • 事件：事件三要素 事件源 事件类型 事件处理程序
    • 事件源：事件被触发的对象
    • 事件类型：鼠标、键盘等
    • 事件处理程序：通过一个函数赋值的方式完成
    • 语法：
事件源.事件类型 = function（）{
    怎么做；
}

image.png

鼠标事件

image.png

改变元素内容

image.png

  • innerText不识别html标签
  • innerHTML识别html标签

改变元素属性

var p = document.querySelector('h');
        var img = document.querySelector('img');
        tbh.onclick = function(){
            p.innerText = '点秋香';
            img.src = "../images/dog.gif";
        }

操作元素总结

image.png

表单

  • 通过改变value来改变显示的值
  • disabled禁用属性

样式属性操作

  • 我们可以通过js修改元素的大小、颜色、位置等样式 image.png

获得焦点 失去焦点

  • onfocus
  • onblur

className style.属性名

  • className:对应着标签的类名

排它思想

首先排除其他人,然后设置自己的样式。

获取属性值

  • element.属性：获取内置属性值
  • element.getArrtribute('属性'); 获取自定义属性(index)

设置属性值

  • element.setArrtribute('属性', '值'); 设置自定义属性 为了保存数据

h5规范

  • 使用data-'属性'开头作为属性名来定义自定义属性

获取自定义属性

  • element.dataset.'属性'

image.png

移除属性

  • removeAttribute('属性');

节点操作

  • 节点概述 image.png
  • 节点层级

image.png

  • 父级节点:子节点.parentNode得到最近的父亲
  • 子级节点：父节点.childNodes(标准)
  • 子元素节点:父节点.children（开发常用）

image.png

  • 返回的是子节点，不是元素子节点

image.png

  • nextSibling下一个兄弟
  • pre

image.png

  • 兄弟元素节点 image.png

image.png

  • 创建节点：createElement('tagName') image.png
  • 添加节点：node.appendChild(child)将节点添加到指定父节点的子节点列表末尾
    • node.insertBefore(child, 指定元素) 将节点添加到父节点的指定子节点前面
  • 删除节点

image.png

  • 复制节点

image.png

image.png

创建元素

  • document.write('标签') 页面重绘,会重新创建
  • inner.HTML() 拼接字符串方式，效率很低
  • inner.HTML()采用数组方式效率最高

image.png

  • document.createElement() 效率高很多

image.png

2.事件高级

注册方式

image.png

image.png

事件监听方式

image.png

事件解绑 清除事件

  • 传统方式：事件 = null
  • 监听方式：

image.png

DOM事件流

  • 事件发生时会在元素节点之间按照特定的顺序传播，事件相同类型才会发生。

image.png

  • 没有冒泡的：onblur，onfocus，onmouseenter，onmouseleave

事件对象(event)

  • 反应了这个事件的属性
  • 可以自己命名
  • 不兼容的话，要用window.event
传统方式
div.onclick = functon(event){};
监听方式
div.addEventListener('click',function(event){});
  • 事件对象的属性和方法 image.png
  • currenttarget跟this相同的功能
  • this跟e.target不一样，this返回的是绑定事件的对象，而e.target返回的是触发事件的对象。
  • 阻止默认行为：preventDefault(标准写法)，例如跳转链接等
  • return false 传统阻止事件对象
  • 阻止冒泡：stopPropagation()

事件委托

image.png

  • 给父元素添加侦听器，利用冒泡影响每一个子节点

鼠标事件

image.png

鼠标事件对象

image.png

键盘事件

image.png

image.png

  • keypress:区分字母大小写
  • keyup:不区分字母大小写
  • 键盘事件对象
  • focus属性 让标签获得焦点 image.png

三、BOM事件

  • 浏览器模型,它提供了独立于内容而与浏览器窗口进行交互的对象

image.png

  • dom包含在Bom里面
  • window对象是浏览器的顶级对象
    • 他是js访问浏览器窗口的一个接口
    • 它是一个全局对象
    • name window下的特殊属性
  • 窗口加载事件
    • window.onload = function(){} 当文档内容完全加载完成后才会触发该事件
    • window.addEventListener('load', function(){})
    • DOMContenLoaded是DOM加载完毕,不包含图片 falsh css等就可以执行 加载速度比load更快一些
  • 调整窗口大小事件
    • window.add...('resize',function(){});
    • 只要窗口发生像素变化就会触发此事件
    • window.innerWidth 当前屏幕的宽度
  • 几种情况都会触发load事件
    • a标签的超链接
    • 刷新
    • 前进后退
  • 解决火狐浏览器前进后退不触发load
    • pageshow事件来触发,如果页面从缓存取过来的页面,用e.persited返回true
  • 定时器setTimeout()
    • window.setTimeout(函数,延迟的毫秒数)
    • 当定时器到了执行此函数
    • 此函数叫回调函数,经常用callback命名

image.png

  • 停止setTimeout()定时器
    • window.clearTimeout(计时器名);
  • setInterval()定时器
    • 每隔这个时间,就去回调一次函数
  • 停止setInterval()定时器
    • window.clearInterval(intervalID);
    • clearInterval(定时器)方法取消了先前通过调用setInterval()建立的定时器

同步和异步

  • js是单线程语言,同一时间只能做一件事
  • 利用多核cpu的计算能力,允许js脚本创建多个线程
  • 同步:按顺序做事情
  • 异步:同时做多个事情

image.png

  • 当同步任务执行完毕后,系统会按次序读取任务队列中的异步任务,于是异步任务进入任务队列

js执行机制

image.png

location对象

  • 用于获取或设置窗体的URL,并且可以用于解析URL
  • url:是互联网上标准资源的地址

image.png

  • location属性 image.png
  • location方法

image.png assign方法有记录历史,可以后退页面

navigator对象

image.png

histroy对象

image.png

pc端网页特效

  • offset系列常用属性

image.png

  • offset和style的区别

image.png

  • client元素可视区
  • client和offset最大的区别

image.png

立刻执行函数

  • (function(参数){})(参数调用), (function(){}())
  • 独立创建了一个作用域

元素滚动scroll系列

  • scroll系列属性,得到的是属性实际大小,这是元素被卷去 image.png
  • 页面被卷去的头部是:window.pageYOffset
  • 解决兼容性问题

image.png

  • 三种系列总结

image.png

mouseenter 鼠标事件

  • 它只会在经过自身盒子触发,不冒泡
  • mouseover鼠标经过自身盒子和子盒子都会触发,因为它会冒泡

动画实现原理

  • 核心原理:通过定时器setInterval()不断移动盒子位置
  • 回调函数原理：函数可以作为一个参数。在主函数里调用使用

节流阀

  • 防止轮播图按钮连续点击造成播放过快
  • 当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发
  • 利用回调函数,添加变量控制,flag = true,利用信号量来控制函数的快慢

滚动窗口 让窗口到最上方

  • window.scroll(x,y)窗口滚动到坐标(x,y)的位置
  • window.pageYOffset垂直方向被卷过的距离

四、移动端网页特效

触屏事件

image.png

  • 事件 image.png
  • 触摸事件对象

image.png

  • 移动端拖动元素

classList属性

  • 返回类名，伪数组集合
  • element.classList.add('类名');增加类名
  • element.remove('类名');删除类名
  • element.classList.toggle('类名');切换类名，如果有这个类就删除，没有这个类就添加

移动端click

  • click事件有300的延时

image.png

五、插件

Swiper插件

image.png

六、框架

image.png

本地存储

image.png

  • window.localStorage

image.png

avatar
文章
阅读
粉丝