对象

是JavaScript里的一种数据类型

可以理解为是一种无序的数据集合， 注意数组是有序的数据集合，用来描述某个事物

let human={
            uname:'小明',
            age:18,
            gender:'男'
        }

使用

语法

let 对象名 ={

属性名：属性值，

属性名：属性值

}

查

方法一

对象名.属性

human.uname

方法二

对象名['属性']

human

改

对象名.属性=新属性

增

对象名.新属性=新值

删

delete 对象名.属性

调用

对象.方法名

遍历对象

for(let k in obj){

console.log(k)

console.log(log[k])

}

内置对象

Math

包含的方法有：

random：生成0-1之间的随机数（包含0不包括1）

ceil：向上取整

floor：向下取整

max：找最大数

min：找最小数

pow：幂运算

abs：绝对值

变量声明

var let const

注意：先用const,但是const定义的变量是不能修改的（因为const声明的变量里面存的是地址），如果发现变量需要修改，换成let

获取DOM对象

语法

选一个

document.querySelector('css选择器')

选多个

document.querySelectorAll('css选择器')

返回值

CSS选择器匹配的NodeList对象集合

注意

这得到的是一个伪数组：有长度有索引号的数组，但是没有 pop() push() 等数组方法

想要得到里面的每一个对象，则需要遍历（for）的方式获得

哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

操作元素内容

对象.innerText 属性

将文本内容添加/更新到任意标签位置

显示纯文本，不解析标签

元素.innerHTML 属性

将文本内容添加/更新到任意标签位置

会解析标签，多标签建议使用模板字符

操作元素属性

操作元素常用属性

JS 设置/修改标签元素属性

先获取元素，再进行修改

对象.属性=值

操作元素样式属性

通过 style 属性操作CSS

对象.style.样式属性=值

操作类名(className) 操作CSS

元素.className='active'(active是个css类名)

通过 classList 操作类控制CSS

追加类

元素.classList.add(‘类名’)

删除类

元素.classList.remove(‘类名’)

切换类

元素.classList.toggle('类名')

操作表单元素属性

获取

DOM对象.属性名

设置

DOM对象.属性名=新值

自定义属性

data-自定义属性

在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获取

定时器-间歇函数

开启定时器

let 变量名= setTnterval(函数，间隔时间)

let n = setInterval(function () {
            console.log(11111)
        }, 1000)

关闭定时器

clearInterval(变量名)

事件

事件监听

元素对象.addEventListener('事件类型'，要执行的函数)

三要素：

事件源： 那个dom元素被事件触发了，要获取dom元素

事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等

事件调用的函数： 要做什么事

事件类型

鼠标事件

click 鼠标点击

mouseenter 鼠标经过

mouseleave 鼠标离开

焦点事件

focus 获得焦点

blur 失去焦点

键盘事件

Keydown 键盘按下触发

Keyup 键盘抬起触发

文本事件

input 用户输入事件

事件对象

获取

在事件绑定的回调函数的第一个参数就是事件对象

一般命名为event、ev、e

常用属性

type

获取当前的事件类型

clientX/clientY

获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY

获取光标相对于当前DOM元素左上角的位置

key

用户按下的键盘键的值

现在不提倡使用keyCode

环境对象

指的是函数内部特殊的变量this ，它代表着当前函数运行时所处的环境

弄清楚this的指向，可以让我们代码更简洁

函数的调用方式不同，this 指代的对象也不同

【谁调用， this 就是谁】 是判断 this 指向的粗略规则

直接调用函数，其实相当于是 window.函数，所以 this 指代 window

回调函数

当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

function fn(){
            console.log('我是回调函数...')
        }
        setInterval(fn,1000)

事件流

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

假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

捕获阶段是从父到子

冒泡阶段是从子到父

实际工作都是使用事件冒泡为主

事件捕获

从DOM的根元素开始去执行对应的事件 (从外到里)

事件捕获需要写对应代码才能看到效果

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）

若传入false代表冒泡阶段触发，默认就是false

若是用 L0 事件监听，则只有冒泡阶段，没有捕获

事件冒泡

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒

泡

当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

事件冒泡是默认存在的

L2事件监听第三个参数是 false，或者默认都是冒泡

阻止冒泡

问题

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

需求

若想把事件就限制在当前元素内，就需要阻止事件冒泡

前提

阻止事件冒泡需要拿到事件对象

语法

事件对象.stopPropagation()

我们某些情况下需要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转,可以使用

e.preventDefault()

解绑事件

on事件方式

直接使用null覆盖偶就可以实现事件的解绑

btn.onclick=function(){
            alter('点击了')
        }
        btn.onclick=null

addEventListener方式

必须使用removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])

function fn(){
            alter('点击了')
        }
        //绑定事件
        btn.addEventListener('click',fn)
        //解绑事件
        btn.removeEventListener('click',fn)

注意 匿名函数无法被解绑

鼠标经过事件的区别

mouseover 和 mouseout 会有冒泡效果

mouseenter 和 mouseleave 没有冒泡效果 (推荐)

两种注册事件的区别

传统on注册（L0）

同一个对象,后面注册的事件会覆盖前面注册(同一个事件)

直接使用null覆盖偶就可以实现事件的解绑

都是冒泡阶段执行的

事件监听注册（L2）

语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)

后面注册的事件不会覆盖前面注册的事件(同一个事件)

可以通过第三个参数去确定是在冒泡或者捕获阶段执行

必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)

事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

优点：减少注册次数，可以提高程序性能

原理：事件委托其实是利用事件冒泡的特点

给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

实现：事件对象.target. tagName 可以获得真正触发事件的元素ul.addEventListener('click', function(){}) 执行父级点击事件

其他事件

页面加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

监听页面所有资源加载完毕：

给 window 添加 load 事件

window.addEventListener('load',function(){
            //执行操作
        })

页面滚动事件

滚动条在滚动的时候持续触发的事件

监听整个页面滚动：

给 window 或 document 添加 scroll 事件

window.addEventListener('scroll',function(){
            //执行操作
        })

监听某个元素的内部滚动直接给某个元素加即可

获取位置

scrollLeft和scrollTop （属性）

获取被卷去的大小

获取元素内容往左、往上滚出去看不到的距离

这两个值是可读写的

尽量在scroll事件里面获取被卷去的距离

div.addEventListener('scroll',function(){
            console.log(this.scrollTop)
        })

页面尺寸事件

resize

window.addEventListener('resize',function(){
            //执行操作
        })

获取宽高

获取元素的可见部分宽高（不包含边框，margin，滚动条等）

clientWidth和clientHeight

window.addEventListener('resize', function () {
            let w=document.documentElement.clientWidth
            console.log(w)
        })