JavaScript0-CSDN博客

本文链接：https://blog.csdn.net/jiuxiandd/article/details/135140213

编译性语言和解释性语言的区别

编译性语言：在代码执行之前进行编译，生成中间代码文件

解释性语言：运行时进行及时解释，并立即执行

浏览器

1. 渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit

2. JS引擎：也称为JS解释器，用来读取网页中的JavaScript代码，对器处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机取执行。所以JavaScript语言归为脚本语言，会逐行解释执行。

JS定义

JS是一种运行在客户端（浏览器）的编程语言，实现人机交互的效果。

作用

①网页特效（监听用户的一些行为让网页作出对应的反馈）
②表单验证（针对表单数据的合法性进行判断）
③数据交互（获取后台的数据，渲染到前端）
④服务器编程（node.js）

JS的组成

1. ECAScript：由ECMA国际进行标准化的一门编程语言

2. Web APIs：

①DOM 操作文档（网页文档对象模型）：是W3C组织推荐的处理可拓展标记语言的标准编程接口。通过DOM提供的接口可以对网页上的各种元素进行操作。比如对页面元素进行移动、大小、添加删除等操作

②BOM 操作浏览器（浏览器对象模型）：它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口，比如页面弹窗、检测窗口宽度、存储数据到浏览器等等

JS的三种书写方式

1. 行内式JS，直接写到元素的内部，指将单行或少量的JavaScript代码写在HTML标签的事件属性中(也就是以on开头的属性，如onclick)。（使用的很少）

① 在HTML中外面推荐使用双引号，JS中推荐使用单引号

② 可读性差，在HTML中编写大量代码时，不方便阅读

③ 引号易错，引号多层嵌套匹配时，非常容易弄混

2. 内嵌式JS，指在html文件内使用script标签包裹起来，页面打开自动执行。（使用方便，但是大篇幅的JS代码千万不要用。）

① 可以将多行jS代码写到<script>标签中

② 内嵌JS是学习时常用的方式

3. 外部式JS，是指将JavaScript代码写在一个单独的文件中，一般使用"js"作为文件的扩展名，在HTML页面中使用（推荐使用，因为有各种优化方法）

① 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用

② 引用外部JS文件的script标签中间不可以写代码

③ 适合于JS代码量比较大的情况

JS的注释

1. 单行注释：//注释内容

2. 多行注释：/*注释内容*/

JS输入输出语句

alert(msg) //浏览器弹出警示框

console.log(msg) //浏览器控制台打印输出信息

prompt(info) //浏览器弹出输入框，用户可以输入

document.write(str) //向body内输出内容，如果输出的内容写的是标签，也会被解析成网页元素

变量

1. 概述：变量是程序在内存中申请的一块用于存放数据的空间。我们可以通过变量名获取数据，甚至数值可以修改

2. 变量的使用

（1）声明变量

//声明变量
let age; //声明一个名称为age的变量

//在过往的版本中，通常使用var声明变量

var是一个JS关键字，用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管

age是程序员自定义的变量名，我们要通过变量名来访问内存中分配的空间

（2）赋值

变量值是程序员保存到变量的值

（3）变量语法拓展

① 更新变量：一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准

② 同时声明多个变量：同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开

③ 声明变量的特殊情况

（4）变量命名规范

3. 数组

（1）概念：属猪是一种可以按顺序保存数据的数据类型

（2）作用：可以将一组数存储在单个变量名下

（2）语法

let 数组名 = [元素1, ……, 元素n]  //定义一个数组

let arr = new Array(元素1, ……, 元素n)  //定义一个数组

// 数组添加新的数据
arr.push(元素1, ……, 元素n)  //将一个或多个元素添加到数组的末尾，并返回该数组的新长度
arr.unshift(元素1, ……, 元素n)  //将一个或多个元素添加到数组的开头，并返回该数组的新长度

// 删除数组中的数据
arr.pop()  //从数组中删除最后一个元素，并返回该元素的值
arr.shift()  从数组中删除第一个元素，并返回该元素的值
arr.splice(起始位置, 删除的个数)  //删除指定起始位置起的几个元素

（3）数组的基本使用（和其他编程语言类似）

① 数组可以通过下标/索引进行赋值/取值

② 数组可以存储任意类型的数据

③ 数组长度可以通过数组的length属性获得

常量

（1）概述：使用 const 声明的变量称为“常量”

（2）使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是 let

（3）常量不允许重新赋值

（4）一般情况下，在声明变量时，通常const优先，当变量需要改变时，再将const改为let，数组和对象的变量是引用数据类型，可以用const声明

数据类型

1. JS的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的

2. 数据类型的分类

（1）简单数据类型（Number、String、Boolean、Undefined、Null）

① 数字型Number（既可以用来保存整数值，也可以保存小数（浮点数））

a. 进制

八进制，数字前面加0，如：var num = 056 //表示八进制56，转换为十进制为46

十六进制，数字前面加0x，如：var num = 0x9a //表示十六进制2E，转化为十进制为46

b. 数字型的最大值与最小值

数字型最大值为：Number.MAX_VALUE，其值为：1.7976931348623157e+308

数字型最小值为：Number.MIN_VALUE，其值为：5e-324

c. 数字型的三个特殊值

Infinity，代表无限大，大于任何数值

- Infinity，代表无限小，小于任何数值

NaN，Not a number，代表一个非数值

d. 判断是否是数字型的方法

isNaN(x)：如果x是数字返回false，如果x不是数字则返回true

② 字符串型String

字符串型是引号中的任意文本，可以是单引号，也可以是双引号。因为HTML标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号。

a. 字符串引号嵌套

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

b. 字符船转义符（和其他语言相同）

c. 字符串长度

通过字符串的length属性获取整个字符串长度

str.length：获取字符串str的长度

d. 字符串拼接

多个字符串之间可以使用 + 进行拼接，拼接方式为：字符串+任何类型=拼接之后的新字符串

拼接前会做一个动作：将与字符串拼接的任何类型都会转化成字符串类型，后才会开始拼接

e. 字符串拼接加强

我们会经常使用字符串和变量来拼接，因为变量可以很方便地修改里面的值

f. 模板字符串

let age = 18
document.write(`我今年${age}岁了`

用${}包裹需要替换的内容即可，age会自动替换字符串里面的值

③ 布尔类型

a. 布尔类型可以参与运算，true视为1，false视为0

④ Undefined类型和Null类型

如果一个变量声明未赋值，就是undefined未定义数据类型

（2）复杂数据类型（Object）

（3）获取检测变量的数据类型typeof

typeof x：获取检测变量x的数据类型

（4）字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值

在控制台中，不同颜色的数据代表不同的数据类型，黑色表示字符串类型，浅蓝色表示数字型，深蓝色表示布尔类型，浅灰色表示undefined或null。

（5）数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另一种数据类型。

① 转换成字符串类型

② 转换成数字类型

a. 以数字开头时，会截取最前面的数字，否则返回NaN

b. 当使用减号作为运算符时，系统会进行隐式转换，将数据类型转换为数字型，如果是使用加号作为运算符，则需要程序员显式转换。

③ 转换成布尔类型

运算符

1. 算术运算符：和其他编程语言类似

2. 逻辑运算符：和其他编程语言类似

语句

语句测试时可以通过浏览器f12里面的source来进行断点判断

1. if语句：和其他编程语言类似

2. 三元运算符：和其他编程语言类似

3. switch语句：和其他编程语言类似

函数

1. 和其他编程语言类似

2. 函数分类

（1）具名函数

语法

function 函数名(参数){ 
    //函数体 
}
//可以给函数参数设定个默认值

（2）匿名函数

① 定义：将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式

② 语法

// 匿名函数的定义
let fn = function () { 
    //函数体
}

// 匿名函数的调用
fn()  //函数名()

（3）立即执行函数（不需要调用，直接执行）

① 语法

((function (x,y) { 函数体 })(传入参数1, 传入参数2); 
//1. 后面的是传入值    2. function及其函数体前后需要加括号    3. 函数结束末尾要加分号

② 作用

防止变量污染

对象

1. 概述：JS的一种数据类型，用来存放无序数据的集合

2. 对象的使用

（1）对象声明语法

let 对象名 = {
    属性名: 属性值, 
    方法名: 函数
    }    // {}是对象字面量
let 对象名 = new Object()

（2）对象有属性和方法组成

① 属性：信息或者特征

a. 属性都是成对出现的，包括属性名和属性值

b. 属性就是依附在对象上的遍历

② 方法：功能或者行为

a. 查取对象属性的值：对象名.属性（获取对象中带字符串的属性名语法：对象名[‘属性名’] ）

b. 修改对象属性的值：对象名.属性=新值

c. 增加对象的属性：对象名.新属性名=新值

d. 删除对象的属性：delete 对象名.属性

（3）对象的遍历

使用for循环遍历对象

① 数组的for in循环遍历
let arr = ['一','二','三']
for (let k in arr){
    console.log(k)
}
// 注意，此处获取的k不是数组的值，而是数组的下标，而且该下标属于字符串

② 对象的for in循环
let obj = {
    uname : 'me',
    age : 18,
    gender : '男'
}
for (let k in obj){
    console.log(k)
    console.log(obj[k])
    //不可以使用obj.k，k是字符串，不是number
}
// 注意，此处获取的k不是对象属性的值，而是对象的属性名

（4）内置对象

JavaScript内部提供的对象，包含各种属性和开发者调用

WEBAPIs

API作用和分类

（1）作用：使用JS去操作html和浏览器

（2）分类：DOM（文档对象模型）、BOM（浏览器对象模型）

一. DOM

1. DOM

（1）概念：用来呈现以及与任意HTML或XML文档交互的API

（2）作用：开发网页内容特效和实现用户交互

2. DOM树

（1）概念：将HTML文档以树状结构直观的表现出来，我们称之为文档书或DOM树

（2）描述网页内容关系的名词

（3）作用：文档书直观的体现了标签与标签之间的关系

3. DOM对象（重要）

（1）概念：浏览器根据HTML标签生成的JS对象

① 所有的标签属性都可以在这个对象上面找到

② 修改这个对象的属性会自动映射到标签身上

（2）核心思想：把网页内容当做对象来处理

（3）document对象

① 是DOM里提供的一个对象

② 所以它提供的属性和方法都是用来访问和操作网页内容的

③ 网页所有内容都在document里面

4. 获取DOM对象

（1）根据CSS选择器来获取DOM元素（重点）

① 选择匹配的第一个元素

document.querySelector('CSS选择器')

参数：包含一个或多个有效的CSS选择器字符串

返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象，没有匹配到就返回null

② 选择匹配的多个元素

document.querySelectorAll('CSS选择器')

参数：包含一个或多个有效的CSS选择器字符串

返回值：CSS选择器匹配的NodeList对象集合

// 获取第一个标签
document.querySelector('CSS选择器')    //只能获取第一个标签

// 例子：
<div class="box"> 123 </div>
<div class="box"> abc </div>
// 获取DOM对象
const box1 = document.querySelector('div')   //获取的DOM对象是123的div标签
const box2 = document.querySelector('.box')   //同理，获取的DOM对象也是123的div标签

<p id="nav"> 导航栏 </p>
const nav = document.querySelector('#nav')   //获取的DOM对象是导航栏的p标签（id选择器）

<ul>
    <li> 测试1 </li>
    <li> 测试2 </li>
    <li> 测试3 </li>
</ul>
const li = document.querySelector('ul li:first-child')   //获取的DOM对象是测试1的li标签




document.querySelectorAll('CSS选择器')    //获取所有标签

const lis = document.querySelectorAll('ul li')    //可以获取测试1，测试2，测试3的li标签，并将这些标签对象的返回值放进一个数组中，即lis = NodeList(3)[li,li,li]

（2）通过其他方式获取DOM对象

5. 操作元素内容方法

（1）目标：能够修改元素的文本更换内容。DOM对象都是根据标签生成的，所有操作标签，本质上就是操作DOM对象

（2）操作元素内容

① 对象.innerText

a. 作用：获取对象的文本内容，将文本内容添加/更新到任意标签位置

b. 显示纯文本，不解析标签

② 对象.innerHTML

a. 作用：获取对象的文本内容，将文本内容添加/更新到任意标签位置

b. 会解析标签，多标签建议使用模板字符（与innerText区别在于是否会解析标签）

<div class = "box"> 我是div的内容 </div>  


<script>
    const box = document.querySelector('.box')    // 获取div标签的DOM对象
    console.log(box.innerText)    // 输出结果为：我是div的内容
    box.innerText = '<strong>修改后div的内容</strong>'    
    console.log(box.innerText) 
    // 输出结果为：<strong>修改后div的内容</strong>
    // 因为是纯文本，所以不解析标签
</script>

<script>
    const box = document.querySelector('.box')    // 获取div标签的DOM对象
    console.log(box.innerHTML)    // 输出结果为：我是div的内容
    box.innerHTML = '<strong>修改后div的内容</strong>'    
    console.log(box.innerHTML) 
    // 输出结果为：修改后div的内容
    // innerHTML会解析标签
</script>

6. 操作元素属性方法

（1）目标：能够修改标签元素属性。比如通过src更换图片

（2）操作元素常见属性

// 语法
对象.属性 = 新值

// 例子
<img src = "./image1.jpg" alt = "" >

<script>
    const img = document.querySelector('img')    // 获取图片元素对象
    img.src = './image2.jpg'    // 修改图片对象的src，由image1变为image2
    img.title = '这是image2'    // 修改img标签的title
</script>

（3）操作元素样式属性

① 通过style属性操作css

// 通过style属性操作css
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
}
</style>

<body>
    <div class="box"></div>    //样式为box的盒子，长宽200，粉色
    
    <script>
        const box = document.querySelectoe('.box')    //获取元素
        box.style.width = '300px'    // 修改样式属性，对象.style.样式属性= '值'，别忘了单位
        box.style.backgroundColor = 'hotpink' 
        box.style.border = '2px solid blue' 
        // 修改后的盒子，长为200，宽为300，背景颜色为hotpink，同时增加了边框
    </script>
</body>

// 修改样式通过style属性引出，如果属性有-连接符，需要转换为小驼峰命名法，赋值的时候不要忘了加单

② 通过类名操作css

// 通过类名操作css 
语法：元素.className = 'active'

// 由于class是关键字，所以使用class Name去代替
// className是使用新值替换旧值，如果需要添加一个类，则添加的过程中也需书写需保留的类名

<style>
    .box {样式}
    .nav {样式}
</style>

<body>
    <div></div>    //样式默认的盒子
    
    <script>
        const box = document.querySelectoe('div')    //获取div元素的对象
        div.className = 'box'    // 添加类名，此时div具有box的样式
        div.className = 'box nav'    // 添加类名，此时div具有box和nav的样式
        
    </script>
</body>

// 修改样式通过style属性引出，如果属性有-连接符，需要转换为小驼峰命名法，赋值的时候不要忘了加单

③ 通过classLIst操作css

// 通过classList操作css 
元素.classList.add('类名')    //追加一个类
元素.classList.remove('类名')    //删除一个类
元素.classList.toggle('类名')    //切换一个类



// 由于class是关键字，所以使用class Name去代替
// className是使用新值替换旧值，如果需要添加一个类，则添加的过程中也需书写需保留的类名

<style>
    .box {样式}
    .act {样式}
</style>

<body>
    <div class = "box" ></div>    //样式为box的盒子
    
    <script>
        const box = document.querySelectoe('.box')    //获取div元素的对象
        box.classList.add('act')    //给该标签元素添加类act，得到一个具有box和act样式的盒子
        box.classList.remove('box')    //给该标签元素删除类box，得到一个仅具有act样式的盒子
        //类切换，判断类名是否存在，存在则删除，不存在则添加
        box.classList.toggle('box')    //因为box类已经不存在，故会加上box类的样式，得到一个具有box和act样式的盒子
        box.classList.toggle('act')    //因为act类存在，故会删除act类的样式，得到一个仅具有box样式的盒子
    </script>
</body>

// 修改样式通过style属性引出，如果属性有-连接符，需要转换为小驼峰命名法，赋值的时候不要忘了加单

7. 操作元素表单元素方法

（1）目标：表单很多情况也需要修改属性

（2）语法

//修改表单属性
//语法
表单.value = '用户名'
表单.type = 'password'

<style>
    .box {样式}
    .act {样式}
</style>

<body>
    <input type="text" value="电脑">    //设置表单
     
    <script>
    const uname = document.querySelector('input')    //获取表单对象
    //获取表单的值，表单.value，区别于其他标签元素的innerHTML
    console.log(uname.value)    //输出结果：电脑
    uname.value = '我要买电脑'    //设置表单的值
    uname.type = 'password'    //修改表单的属性，此时文本框变为密码框
    </script>
</body>

// 修改样式通过style属性引出，如果属性有-连接符，需要转换为小驼峰命名法，赋值的时候不要忘了加单

8. 操作自定义属性

（1）标准属性：标签天生自带的属性，比如class id title等，可以直接使用点语法操作比如：disabled、checked、selected等

（2）自定义属性：

① 在html5中推出来了专门的data-自定义属性

② 在标签上一律以data-开头

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

<body>
    <div class="box" data-id="10">盒子</div>
    <script>
        const box = document.querySelector('.box')
        console.log(box.dataset.id)
    </script>
</body>

9. 事件监听

（1）事件：在编程时系统内发生的动作或者发生的事情

（2）事件监听：让程序检测是否有事件发生，一旦有事件出发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件。

（3）语法

//事件监听语法
元素对象.addEventListener('事件类型', 要执行的函数)

事件监听三要数
1. 事件源：那个dom元素被事件触发了，要获取dom元素
2. 事件类型：用什么方式触发
3. 事件调用的函数：要做什么事

<body>
    <button> 点击 </button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            alert('你好')
        })
    </script>
</body>

（4）常见的事件类型
鼠标事件：click鼠标点击、mouseenter鼠标经过、mouseleave鼠标离开
焦点事件：focus获得焦点、blur失去焦点
键盘事件：Keydown键盘按下触发、Keyup键盘抬起触发
文本事件：input用户输入事件

（5）事件对象

① 定义：也是个对象，这个对象里有事件触发时的相关信息

② 使用场景：判断用户按下哪个键，也可以判断鼠标点击了哪个元素

元素.addEventListener('click',function(e){})
//e就是事件对象，事件对象一般在事件绑定的回调函数的第一个参数就是事件对象

（6）常见属性

（6）补充（定时器）

定时器语法

//开启定时器
let timerId = setInterval(函数fn, 间隔时间t)
// 每隔t时间，就会执行一次fn

//如果想关闭定时器，则需要调用clearInterval函数，此函数的参数为setInterval的返回值
clearInterval(timerId)

10. 环境对象

（1）目标：能够分析判断函数运行在不同环境中this所指代的对象

（2）环境对象概念：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境。每个函数里面都有this。一般来说，谁调用函数，this就指向谁

（3）作用：弄清楚this的指向，可以让我们代码更简洁

11. 回调函数

概念：如果将函数A作为参数传递给函数B时，我们称函数A为回调函数。

function fn(){
    console.log('我是回调函数')
}
//fn传递给了setInterval，fn就是回调函数
setInterval(fn, 1000)


box.addEventListener('click', function() {
    console.log('我也是回调函数')
})

12. 事件流

（1）概念：指的是事件完整执行过程中的流动路径

（2）事件流两个阶段：捕获阶段（父到子）、冒泡阶段（子到父）

（3）事件捕获

① 概念：从DOM的根元素开始去执行对应的事件（从外到离）

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

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

（4）事件冒泡

① 概念：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。（即当一个元素触发事件后，会依次向上调用所有父级的同名事件）

DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
//第三个参数为布尔类型，传入true表示捕获阶段触发，传入false表示冒泡阶段触发，默认false

（5）阻止冒泡

① 起因：冒泡模式的存在，容易导致事件影响到父级元素

② 前提：阻止事件冒泡需要拿到事件对象

③ 语法

 事件对象.stopPropagation()
//此方法是阻断事件流动传播，调用此方法的事件对象可以接受到来自子级的冒泡或者来自父级的捕获，但是执行完事件函数后就不会继续传递了

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

（6）解绑事件

① on事件方式，直接使用null覆盖偶就可以实现事件的解绑

//绑定事件
btn.onclick = function() {
    alert('点击了')
}
//解绑事件
btn.onclick = null

② addEventListener事件方式，需要使用方法removeEventListener进行事件的解绑

//定义事件触发函数
function fn() {
    alert('点击了')
}
//绑定事件
btn.addEventListener('click', fn)
//解绑事件
btn.removeEventListener('click', fn)
//注意，如需解绑事件，则不能使用匿名函数，需要将函数抽取出来，单独定义一个fn函数

③ 鼠标经过事件区别

mouseover和mouseout会有冒泡效果

mouseenter和mouseleave没有冒泡效果（推荐）

（8）阻止默认行为

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

② 语法

e.preventDefault()

13. 事件委托

（1）概念：利用事件流的特征解决一些开发需求的知识技巧

（2）优点：减少注册次数，提高程序性能

（3）原理：事件委托是利用事件冒泡的特点。给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

（4）实现：事件对象target.tagName可以获得真正触发事件的元素

//需求：点击li元素使其变红色
<body>
    <ul>
        <li>第1个孩子</li>
        <li>第2个孩子</li>
        <li>第3个孩子</li>
        <li>第4个孩子</li>
        <li>第5个孩子</li>
        <p>我不需要变色</p>
    <ul>

    <script>
        //获取父元素ul的对象
        const ul = document.querySelector('ul')
        //给ul对象绑定事件
        ul.addEvenrlistener('click',function (e) {
            //因为p元素也在ul里面，所以需要对点击对象进行判断
            if(e.target.tagName === 'LI'){
                //只有点击的对象是li元素，才会变色
                //通过事件对象的方式获取我们点击的对象，即哪个li元素
                e.target.style.color = 'red'    //结果：点击的li元素变成红色
            }
        })
    </script>
</body>

14. 其他事件

（1）页面加载事件

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

② 事件名：load（监听页面所有资源加载完毕）

//等待页面所有资源加载完毕，就回去执行回调函数
window.addEventListener('load', function(){
    const btn = document.querySelector('button')
    btn.addEventListener('click', function(){
        alert(1)
    })
})

//或者等待图片加载完毕的load事件
img.addEventListener('load', function(){} )

不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

③ 当初始的HTML文档被完全加载和解析完毕之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载

（2）页面滚动事件

① 概念：滚动条在滚动的时候持续触发的事件

② 事件名：scroll

//页面滚动事件
window.addEventListener('scroll', function(){} )

③ 获取页面滚动的位置

事件对象.scrollLeft    //获取被卷去的顶部距离
事件对象.scrollTop    //获取被卷去的左侧距离

scrollLeft和scrollTop是可赋值的，赋值时无需带单位

（3）页面尺寸事件

① 概念：会在窗口尺寸改变时的时候触发的事件

② 事件名：resize

//页面尺寸事件
window.addEventListener('resize', function(){} )

③ 获取页面尺寸的宽高

事件对象.clientWidth    //获取元素的可见部分宽
事件对象.clientHeight    //获取元素的可见部分高
//获取元素的可见部分宽高（不包含边框、margin、滚动条等）

15. 元素尺寸与位置

（1）获取宽高（获取元素自身的宽高，包括元素自身设置的宽高，padding、border）

对象.offsetWidth
对象.offsetHeight    
//获取的是可视宽高，如果盒子是隐藏的，获取的结果是0
//获取出来的是数值，方便计算

（2）获取位置（获取元素距离自己定位父级元素的左、上距离)

对象.offsetLeft
对象.offsetTop
//offsetLeft和offsetTop是只读属性

（3）获取位置

element.getBoundingClinentRect()    //方法返回元素的大小及其相对于视口的位置

总结：

16. 日期对象

（1）概念：用来表示事件的对象

（2）作用：可以得到当前系统的时间

（3）实例化示例

//语法
//获取得到当前时间
const date = new Date()
//获取指定的时间
const date = new Date('2022-5-1 08:30:00')

（4）日期对象方法

获取月份/星期的时候，需要将得到的结果+1才是当前月份/星期

data.toLocaleString()    //获取日期和时间 2022/4/1 09:41:21
data.toLocaleDateString()    //获取日期 2022/4/1
data.toLocaleTimeString()    //获取时间 09:41:21

（5）时间戳

① 概念：指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

② 使用场景：如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成

③ 算法：将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数

④ 获得时间戳的方法

//1. 使用个体Time()方法（此方法需要实例化）
const date = new Date()
const time_now = date.getTime()
const date = new Date('2022-5-1 08:30:00')    //获取指定时间的时间戳
const time = date.getTime()


//2. 使用+new Date()方法
const time_now = +new Date()
const time = +new Date('2022-5-1 08:30:00')    //获取指定时间的时间戳


//3. 使用Date.now()方法（此方法只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳）
const time_now = Date.now()

⑤ 时间戳的运用（将时间戳转换成时分秒）

17. DOM节点

（1）概念：DOM树里每一个内容都被称之为节点

（2）节点类型

① 元素节点（重要）：所有的标签，比如body、div；html是根节点

② 属性节点：所有的属性，比如href

③ 其他

（3）节点关系：针对的找亲戚返回的都是对象

（4）查找节点

① 父节点查找

//父节点查找语法
子元素.parentNode    //返回近一级的节点，找不到则返回null

② 子节点查找

//获取子节点
父元素.childNodes    //获得所有子节点、包括文本节点（空格、换行）、注释节点等
父元素.children    //仅获得所有元素节点，返回的是一个伪数组

③ 兄弟节点查找

元素.nextEWlementSibling    //获得下一个兄弟节点
元素.previousEWlementSibling    //获得上一个兄弟节点

（5）增加节点

① 先创建一个节点

//创建一个新的元素节点
document.creatElement('标签名')

② 将节点插入到父元素的最后一个子元素中

//追加节点

//插入到这个父元素的最后
父元素.appendChild(要插入的元素） 

//插入到某个子元素的前面
父元素.insertBefore(要插入的元素, 在哪个元素前面)

（6）克隆节点

//克隆一个已有的节点
元素.cloneNode(布尔值)
//若为true，则代表克隆时会包含后代节点一起克隆
//若为false，则代表克隆时不包含后代节点（默认）

（7）删除节点

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

18. M端事件

移动端也有增加独特的地方，如触摸事件touch

19. JS插件

二、BOM

1. BOM

① 概念：浏览器对象模型

window对象一个全局对象，也可以说是JavaScript中的顶级对象，window对象下的属性和方法调用时可以省略window

所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法

2. 定时器-延时函数，同之前的间歇函数