2.关闭定时器

clearlnterval（timeld）

disabled（按钮禁用属性）

事件

含义：事件是在编程时系统内发生的动作或者发生的事情比如用户在网页上单击一个按钮

事件监听 addEventlistener（‘事件’，要执行的函数）

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

事件监听三要素：

1.事件源：那个dom元素被事件触发了，要获取dom元素 2.事件：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等 3.事件调用的函数：要做什么事

语法：

举例：

事件类型：

回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数常见的使用场景：

环境对象

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境作用：弄清楚this的指向，可以让我们代码更简洁 1.函数的调用方式不同，this 指代的对象也不同 2.【谁调用， this 就是谁】是判断 this 指向的粗略规则 3.直接调用函数，其实相当于是 window.函数，所以 this 指代 window

编程思想（排他思想）

干掉所有人使用for循环
复活他自己通过this或者下标找到自己或者对应的元素

Dom节点

OM树里每一个内容都称之为节点

节点类型

1.元素节点

所有的标签比如 body、 div html 是根节点 2.属性节点所有的属性比如 href 3.文本节点所有的文本其他

查找节点

节点关系

父节点

parentNode 属性返回最近一级的父节点找不到返回为null

子节点

hildNodes

获得所有子节点、包括文本节点（空格、换行）、注释节点等

children （重点）
仅获得所有元素节
返回的还是一个伪数组兄弟节点

兄弟关系查找：

1. 下一个兄弟节点

nextElementSibling 属性

2. 上一个兄弟节点

previousElementSibling 属性

增加节点

1.创建节点

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点创建元素节点方法：

2.追加节点

要想在界面看到，还得插入到某个父元素中插入到父元素的最后一个子元素:

插入到父元素中某个子元素的前面

3.克隆节点

特殊情况下，我们新增节点，按照如下操作：复制一个原有的节点把复制的节点放入到指定的元素内部克隆节点：

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值若为true，则代表克隆时会包含后代节点一起克隆--深拷贝若为false，则代表克隆时不包含后代节点--浅拷贝默认为false

4.删除节点

若一个节点在页面中已不需要时，可以删除它在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除语法：

如不存在父子关系则删除不成功删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

时间对象

在代码中发现了 new 关键字时，一般将这个操作称为实例化创建一个时间对象并获取时间

语法：

格式：

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为 0 ~ 11
getDate()	获取月份中的每一天	不同月份取值也不相同
getDay()	获取星期	取值为 0 ~ 6
getHours()	获取小时	取值为 0 ~ 23
getMinutes()	获取分钟	取值为 0 ~ 59
getSeconds()	获取秒	取值为 0 ~ 59

时间戳

什么是时间戳是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式三种方式获取时间戳

使用 getTime() 方法

简写 +new Date()

3.使用 Date.now()

事件对象

事件对象是什么：也是个对象，这个对象里有事件触发时的相关信息例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息如何获取？在事件绑定的回调函数的第一个参数就是事件对象一般命名为event、ev、e

常用事件对象属性

1.type 获取当前的事件类型 2.clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置 3.offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置 4.key 用户按下的键盘键的值现在不提倡使用keyCode

事件流

事件流指的是事件完整执行过程中的流动路径

事件捕获好疼事件冒泡

事件冒泡概念:

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件事件冒泡是默认存在的

事件捕获概念：

从DOM的根元素开始去执行对应的事件 (从外到里) 事件捕获需要写对应代码才能看到效果代码：

说明： addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）若传入false代表冒泡阶段触发，默认就是false 若是用 L0 事件监听，则只有冒泡阶段，没有捕获

阻止事件流动

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素若想把事件就限制在当前元素内，就需要阻止事件流动阻止事件流动需要拿到事件对象语法：

此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

鼠标经过事件： mouseover 和 mouseout 会有冒泡效果 mouseenter 和 mouseleave 没有冒泡效果(推荐)

阻止事件流动

阻止默认行为，比如链接点击不跳转，表单域的不提交语法：

事件委托（事件对象.target）

事件委托是利用事件流的特征解决一些开发需求的知识技巧总结：优点：给父级元素加事件（可以提高性能）原理：事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发实现：事件对象.target 可以获得真正触发事件的元素

加载事件：load

给window添加load事件

事件名：DOMContentLoaded

监听页面dom加载完毕

元素大小和位置

滚动事件（scroll家族）

事件名：scroll

滚动条默认带17px距离

监听整个页面滚动

获取宽高：获取元素的内容总宽高（不包含滚动条）返回值不带单位 scrollWidth和scrollHeight 获取位置: 获取元素内容往左、往上滚出去看不到的距离 scrollLeft和scrollTop

（offset家族）

1.获取宽高：获取元素的自身宽高、包含元素自身设置的宽高、padding、border offsetWidth和offsetHeight 2.获取位置：获取元素距离自己定位父级元素的左、上距离 offsetLeft和offsetTop 注意是只读属性

 offset家族
      1 offsetWidth  获取元素的宽度 包含这滚动条
      2 offsetHeight 获取元素的高度 包含这滚动条
      3 offsetLeft 获取定位了的父元素的 水平距离 左 
      4 offsetTop 获取定位了的父元素的 垂直距离 上

（client家族）

获取宽高：获取元素的可见部分宽高（不包含边框，滚动条等）/单纯可见内容区域宽高 clientWidth和clientHeight 获取位置：获取左边框和上边框宽度 clientLeft和clientTop 注意是只读属性

屏幕大小改变事件（resize）

swiper插件（轮播图网站）

1.插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果 2.学习插件的基本过程 3.熟悉官网,了解这个插件可以完成什么需求 www.swiper.com.cn/ 4.看在线演示,找到符合自己需求的demo www.swiper.com.cn/demo/index.… 5.查看基本使用流程 www.swiper.com.cn/usage/index… 6.查看APi文档,去配置自己的插件 www.swiper.com.cn/api/index.h… 7.注意: 多个swiper同时使用的时候, 类名需要注意区分