pink老师js869集笔记

B站pink老师JavaScript 869集笔记

计算机基础部分

1、编程语言

1.1 编程

编程:就是让计算机为解决某个问题而使用某种程序设计语言编写代码程序，并最终的得到的过程

计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定通过计算机语言向计算机发出指令。

1.2 计算机语言

计算机语言是指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介

计算机语言分为三种

机器语言
汇编语言
高级语言

实际上计算机最终所执行的都是机器语言，它是由“0”和“1”组成的二进制数，二进制是计算机语言的基础

1.3 编程语言

编程语言分为

汇编语言

汇编语言和机器语言实质是相同的，都是对硬件操作，只不过指令采取了英文缩写的标识符，容易识别和记忆。
高级语言

高级语言主要是相对于低级语言而言，它并不是指某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等

1.4 翻译器

高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个编辑器。编辑器可以讲我们所编写的源代码转换为机器语言，这也被称为二进制化。记住1和0

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xeaFIUJC-1620388130787)(pink老师js869集笔记.assets/image-20200716164225199.png)]

1.5 编程语言和标记语言区别

编程语言：有很强的逻辑和行为能力。在编程语言里，你会看到很多 if else、for、while等具有逻辑性的行为能力的指令，这是主动的。
标记语言（HTML）：不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的，他是被动的

总结

计算机可以帮助人类解决某些问题
程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
编程语言有机器语言、汇编语言、高级语言
高级语言需要一个翻译器转换为计算机识别的机器语言
编程语言是主动的有很强的逻辑性

2、计算机基础

2.1 计算机组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iblXPekL-1620388130789)(pink老师js869集笔记.assets/image-20200716164238943.png)]

2.2 数据存储

计算机内部使用二进制0和1来表示数据
所有数据，包括文件、图片等最终都是以二进制数据（0和1）的形式来存放在硬盘中的
所有程序，包括操作系统本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序文件复制到硬盘中
硬盘、内存都是保存的二进制数据

2.3 数据存储单位

bit<byte<kb<GB<TB<……

位(bit):1bit可以保存一个0或者1 最小的存储单位
字节(Byte):1B=8b
千字节(KB):1KB=1024B
兆字节(MB):1MB=1024KB
吉字节(GB):1GB=1024MB
太字节(TB):1TB=1024GB
……

JavaScript基础部分

1、初始JavaScript

1.1 JavaScript历史

布兰登艾奇
10天完成JavaScript设计
网景公司最初命名位liveScript，后来于Sun合作之后将其改为JavaScript

1.2 JavaScript 是什么

JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思）
脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行
现在也可以基于Node.js技术进行服务器端编程

1.3 JavaScript的作用

表单动态校验（密码强度检测）（JS产生最初的目的）
网页特效
服务端开发（Node.js）
桌面程序（Electron）
APP（Cordova）
控制硬件-物联网（Ruff）
游戏开发（cocos2d-js）

1.4 浏览器执行JS简介

浏览器分成两部分：渲染引擎和js引擎

渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的bink，老版本的webkit
JS引擎：也成为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

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

1.5 JS的组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-onDPSyYt-1620388130790)(pink老师js869集笔记.assets/image-20200716164255833.png)]

ECMAScript

ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript，但实际上后两者是ECMAScript语言的实现和扩展。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AnHEFQOe-1620388130792)(pink老师js869集笔记.assets/image-20200716164310553.png)]
DOM——文档对象模型

文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
BOM——浏览器对象模型

BOM，是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转，获取分辨率等

1.6 JS初体验

js的书写方式

行内式，直接在元素里面写就可以
```
<input type="text" onclick="alert('弹出')">
```
- 可以讲单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性）
- 注意单双引号的使用：在HTML中我们推荐使用双引号，js中我们推荐使用单引号>
- 可读性差，在HTML中编写JS大量代码时，不方便阅读
- 引号易错，引号多层嵌套匹配时，非常容易混淆
- 特殊情况下使用

内嵌式

<script>
        /* 
        内容
         */
</script>

最常用的方法

外部

 <script src=""></script>

利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
引用外部JS文件的script标签中间不可以写代码
适用于js代码量比较大的情况

1.7 js注释

单行注释用//
多行注释用 /* */

1.8 js输入输出语句

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JtKFqpq1-1620388130794)(pink老师js869集笔记.assets/image-20200716164322377.png)]

2、变量

2.1 什么是变量

白话：变量就是一个装东西的盒子

通俗：变量用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改

2.2 变量在内存中存储

本质：变量是程序在内存中申请的一块用来存放数据的空间

2.3 变量的使用

<script>
        var age;
        age=1;
</script>

声明变量
- var 是一个js关键字，用来声明变量。使用该关键字声明变量后，计算机会自动会变量分配内存空间，不需要程序员管
- age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
赋值

2.4 变量语法拓展声明变量特殊情况

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fbTYTpEv-1620388130796)(pink老师js869集笔记.assets/image-20200716164335135.png)]

2.5 变量命名规范

由字母（A-Z a-z）、数字（0-9）、下划线、美元符号组成
严格区分大小写
不能以数字开头
不能是关键字、保留字
变量名必须有意义
遵守驼峰命名法，首字母小写，后面单词的首字母要大写

2.6 案例：变量的两个值交换

 <script>
        //两个数 值  交换
        var temp;//temp  用来交换存储
        var appl1 = '青苹果', appl2 = '红苹果';
        temp = appl1;
        //先把 appl1 的值 给temp
        appl1 = appl2;
        //appl2的值  给appl1
        appl2 = temp;
        //temp的值 给appl2
        console.log(appl1);
        console.log(appl2);
    </script>

小结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hVWRgQfM-1620388130797)(pink老师js869集笔记.assets/image-20200716164448091.png)]

3、数据类型

3.1 数据类型

在js中，运行代码时，变量的数据类型是由JS引擎根据=号右边变量值的数据类型来判断的，运行完毕之后变量就确定了数据类型

js是动态语言变量的数据类型是可以变化的

    <script>
        var x=10;// x是字符型
        x='pink';// x是字符串型
    </script>

3.2 数据类型分类

js把数据类型分为两类：

简单数据类型
复杂数据类型（object）

3.3 简单数据类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H00iRNbO-1620388130797)(pink老师js869集笔记.assets/image-20200716164459968.png)]

3.3.1 数字型

数字型进制
- 八进制：0-7 以0打头
- 十六进制：0-9，a-f 以0x打头
范围

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M8lamRV2-1620388130799)(pink老师js869集笔记.assets/image-20200716164510774.png)]
数字型特殊值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PPykc2oj-1620388130800)(pink老师js869集笔记.assets/image-20200716164520623.png)]

4.判断一个变量是否为数字型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ho50nwGt-1620388130801)(pink老师js869集笔记.assets/image-20200716164531499.png)]

3.3.2 字符串型

转义符使用的时候一定要用引号包裹起来转义符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nlol9pcj-1620388130801)(pink老师js869集笔记.assets/image-20200716164545515.png)]

字符串长度通过length获取

字符串拼接

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FwYg86j4-1620388130802)(pink老师js869集笔记.assets/image-20200716164557978.png)]

    <script>
        // 只要有字符串和其他类型拼接，最后也是一个字符串数据
        console.log('沙漠' + '骆驼');
        //结果是：沙漠骆驼
        console.log('pink老师' + 18);
        //结果是：pink老师18
        console.log('pink老师' + true);
        //结果是：pink老师true
        console.log('12' + 12);
        //结果是：1212
        console.log('pink老师' + 18 + '岁');
        //结果是：pink老师18岁
        var age = 28;
        console.log('pink老师' + age + '岁');
        //结果是：pink老师28岁
        //我们变量不要直接写在字符串里面，是通过和字符串相连的方式实现的
        //变量和字符串相连的口诀：引引加加
        console.log('pink老师' + age);
    </script>

3.3.3 布尔型

布尔型只有两个值：true、false

布尔型参与运算，true是1，false是0

3.3.4 undefined、null

    <script>
        var str1 = undefined;
        console.log(str1 + 'pink');//undefinedpink
        console.log(str1+1);//  声明了变量没有赋值的数据和数字型的数据相加结果是NaN
        //  null控制
        var space=null;
        console.log(str1 + 'pink');//nullpink
        console.log(str1+1);// 1
        

    </script>

3.4 获取变量数据类型 typeof

    <script>
        //  typeof 可以用来获取检测变量的数据类型
        var num = 10;
        console.log(typeof num);//  number
        var str = 'pink';
        console.log(typeof str);//  string


    </script>

3.5 数据类型转换

常见的数据类型转换：

转换为字符串类型
转换为数字型
转换为布尔型

3.5.1 转换为字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nvoBXDTH-1620388130803)(pink老师js869集笔记.assets/image-20200716164609980.png)]

最重要的是：加号拼接字符串第三种也成为隐式转换

    <script>
        //  1   变量.toString()
        var num = 10;
        var str = num.toString();
        console.log(str);
        //  2   利用String(变量)
        console.log(String(num));
        //  3   利用加号 拼接字符串
        console.log('' + num);
    </script>

3.5.2 转换为数字型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tU5nfOjw-1620388130804)(pink老师js869集笔记.assets/image-20200716164621107.png)]

前两种最为常用、重点

    <script>
        //  转换为数字型
        var age = '18';
        //  1   parseInt(变量)  可以把字符型转换为数字型，它是取整的
        console.log(parseInt(age));
        console.log(parseInt('3.9'));// 3
        console.log(parseInt('120px'));// 120   自动去掉后面的单位
        console.log(parseInt('rem120px'));//        NaN
        //  2   parseFloat(变量)  可以把字符型转换为数字型，可以得到小数
        console.log(parseFloat('3.14'));//  3.14
        console.log(parseFloat('120px'));// 120
        console.log(parseFloat('rem120px'));//  NaN
        //  3   Number(变量)
        console.log(Number('123'));//   123
        //  4   利用加减乘除  隐式转换
        console.log('12'-0);//  12
    </script>

案例：计算年龄

    <!-- 在页面中弹出一个输入框，我们输入出生年月份后，能计算出我们的年龄 -->
    <script>
        var year = prompt('请输入出生年份');
        var age = 2018 - year;
        //year过来是字符串型 ，但是我们用的是减号，有隐式转换
        alert('您今年' + age + '岁啦');
    </script>

案例：简单加法计算器

    <script>
        //用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果
        var num1 = prompt('请输入第一个数值');
        var num2 = prompt('请输入第二个数值');
        alert('最终结果为:' + (parseFloat(num1) + parseFloat(num2)));
        //如果不给num1 num2加括号 则会是字符串型
    </script>

3.5.3 转化为布尔型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ArXqmODF-1620388130805)(pink老师js869集笔记.assets/image-20200716164636226.png)]

4、标识符、关键字、保留字

4.1 标识符

定义：就是指开发人员为变量、属性、函数、参数取的名字

4.2 关键字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PZM1rdPs-1620388130806)(pink老师js869集笔记.assets/image-20200716164649385.png)]

4.3 保留字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OXXzgwiV-1620388130807)(pink老师js869集笔记.assets/image-20200716164658984.png)]

5、JavaScript运算符

5.1 运算符

运算符也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript常见的运算符有：

算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

5.1.1 算术运算符

定义：算术运算使用的符号，用于执行两个变量或值的算术运算。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kZmN1ulm-1620388130808)(pink老师js869集笔记.assets/image-20200716164710617.png)]

浮点数进行算数运算会有问题的

5.1.2 递增递减运算符

在js中，递增和递减既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符

注意：递增和递减运算符必须和变量配合使用

注意：

1、前置自增和后置自增如果单独使用效果是一样的

2、后置递增：先表达式返回原值后面变量再+1

3、前置递增：先变量+1，后表达式返回原值

4、与其他代码连用时，执行结果会不同

    <script>
        //  前置递增运算符  ++写在变量前面
        //  先加1，在返回值

        var age = 10;
        ++age;//    类似于age=age+1
        var p = 10;
        console.log(++p + 10);//    21

        //  后置递增    变量++
        var age = 10;
        console.log(age++ + 10);//20

        var a = 10;
        ++a;//  ++a  11     a=11
        var b = ++a + 2;//  a=12  ++a=12
        console.log(b);//14

        var c = 10;
        c++;//c=11   c++=11
        var d = c++ + 2;//c=12 c++=11 
        console.log(d);//13

        var e = 10;
        var f = e++ + ++e;//e++=10 e=11  ++e=12  e=12
        console.log(f);//22

        /*
            1、前置自增和后置自增 如果单独使用效果是一样的
            2、后置递增：先表达式返回原值 后面变量再+1
            3、前置递增：先变量+1，后表达式返回原值
            4、与其他代码连用时，执行结果会不同
         */
    </script>

5.1.2 比较运算符

定义：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n3c7SGNc-1620388130809)(pink老师js869集笔记.assets/image-20200716164725972.png)]

等号有隐式转换。全等要求两侧的值、数据类型必须一样。双等只要求数值相等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EFakPTFs-1620388130809)(pink老师js869集笔记.assets/image-20200716164741181.png)]

5.1.3 逻辑运算符

定义：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M48TazY7-1620388130810)(pink老师js869集笔记.assets/image-20200716164756060.png)]

短路运算原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值

    <script>
        /* 
            短路运算

            逻辑与短路运算特点
            语法：表达式1&&表达式2
            如果第一个表达式为真，则返回表达式2
            如果第一个表达式为假，则返回表达式1

            逻辑或运算特点
            语法：表达式1||表达式2
            如果第一个表达式为真，则返回表达式1
            如果第一个表达式为假，则返回表达式2
         */
        console.log(123 && 456);//  456
        console.log(0 && 456);//  0
        console.log(0 && 1 + 2 && 456);//  0

        console.log(123 || 456);//  123
        console.log(0 || 456);//  456

    </script>

5.1.4 赋值运算符

定义：用来把数据赋值给变量的运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oarRZzh6-1620388130811)(pink老师js869集笔记.assets/image-20200716164807197.png)]

5.1.5 运算符优先级

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HIazVE6p-1620388130812)(pink老师js869集笔记.assets/image-20200716164816258.png)]

5.2 表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

简单理解：是由数字、运算符、变量等组成的式子

6、JavaScript流程控制

6.1 流程控制

定义：流程控制就是来控制我们的代码按照什么结构顺序来执行

主要有3中结构

顺序结构
分支结构
循环结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lt2ZooPm-1620388130813)(pink老师js869集笔记.assets/image-20200716164826860.png)]

6.2 顺序结构

顺序结构：是程序中最简单、最基本的流程控制，他没有特定的语法结构，程序会按照代码的先后顺序、依次执行，程序中大多数的代码都是这样执行的

6.3 分支结构

6.3.1 分支结构—if语句

        //  结构
        if(条件表达式){
            //  执行语句
        }

条件表达式为真，则继续执行大括号里面代码，为假则不执行

6.3.2 分支结构—if else语句（双分支语句）

       结构
		if(条件表达式){
            //  执行语句
        }
        else{
            //执行语句
        }

6.3.3 分支结构—if else if语句

        //结构
        if(条件表达式1){
            //语句1
        }
        else if(条件表达式2){
            //语句2
        }
        else if(条件表达式3){
            //语句3
        }
        else{
            //最后的语句
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5KosszXI-1620388130813)(pink老师js869集笔记.assets/image-20200716164847480.png)]

6.3.4 三元表达式

三元表达式结构

条件表达式？表达式1 ：表达式2

如果条件表达式结果为真，则返回表达式1的值

如果结果为假，则返回表达式2的值

6.3.5 switch语句

定义：switch语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特点之的选项时，就可以使用switch

        switch(表达式){
            case value1:执行语句1;break;
            case value2:执行语句1;break;
            case value3:执行语句1;break;
            case value4:执行语句1;break;
            default:执行最后的语句;
            
        }

注意

如果case都没有匹配上，switch中如果有default语句，则执行这个，如果没有则不执行
switch后面的括号和case后面的value的值是全等的形式
switch后面的括号必须是整数型常量，包括char，short，int，long等，不能是浮点数

6.4 循环结构

循环的主要语句

for循环
while循环
do…while循环

6.4.1 for循环

        // for循环结构
        for(初始化变量;条件表达式;操作表达式){
            循环体
        }

6.4.2 for循环的案例

    <!-- <script>
        //打印星星  一行五个
        var str = '';
        for (var i = 1; i <= 5; i++) {
            str = str + '★';
        }
        console.log(str);
        //如果直接输出星星，他会不在一行显示，所以用字符串加号链接的形式

    </script> -->
    <!-- <script>
        //打印 5×5  阵列星星
        var str = '';
        //用于链接星星
        for (var j = 1; j <= 5; j++) {
            //控制行数
            for (var k = 1; k <= 5; k++) {
                str = str + '★';
            }
            str = str + '\n';
        }
        console.log(str);
    </script> -->
    <!-- <script>
        //打印  从上往下 逐行递减的星星阵列
        var str = '';
        //用于链接星星
        for (var j = 1; j <= 5; j++) {
            //控制行数
            for (var k = 1; k <= -j + 6; k++) {
                str = str + '★';
            }
            str = str + '\n';
        }
        console.log(str);

    </script> -->
    <!-- <script>
        //用户输入几行几列
        var row = prompt('请您输入行数');
        var cols = prompt('请您输入列数');
        var str = '';
        for (var i = 1; i <= row; i++) {
            //控制行数
            for (var k = 1; k <= cols; k++) {
                str = str + '★';
            }
            str = str + '\n';
        }
        console.log(str);
    </script> -->
    <script>
        //用户输入几行,第一行的个数，每一行的个数逐行递减
        var row = prompt('请您输入行数');
        var s = prompt('请您输入第一行的星星个数');
        var str = '';
        console.log('行数是' + row);
        console.log('每一行的个数是' + s);

        for (var i = row; i > 0; i--) {
            //控制行数
            for (var k = 1; k <= i; k++) {
                str = str + '★';
            }
            str = str + '\n';
        }
        console.log(str);
    </script>

九九乘法口诀表

    <script>
        //打印 九九乘法口诀表
        var str = '';
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                //1×2=2
                //str=str;
                str = str + j + '×' + i + '=' + i * j + '\t';
                //'\t'  表示此公式运行完以后，在一个tab空格
            }
            str = str + '\n';
        }
        console.log(str);

    </script>

弹出输入框，求平均值

    <script>
        //弹出输入框 输入总的班级人数（num）
        //依次输入学生成绩  保存起来 score
        //求平均值
        var num = prompt('请输入总的班级人数');
        var sum = 0;
        var average = 0;
        for (var i = 1; i <= num; i++) {
            var score = prompt('请输入第' + i + '个学生的成绩');
            sum = sum + parseFloat(score);
            //prompt取过来的数据是字符串型的需要转换
        }
        average = sum / num;
        alert('班级总的成绩是' + sum);
        alert('班级总的平均分成绩是' + average);
    </script>

6.4.3 for循环小结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xJGPj1bH-1620388130814)(pink老师js869集笔记.assets/image-20200716164904872.png)]

6.4.4 while循环

        //while结构
        while(条件表达式){
            //循环体
        }

6.4.5 do…while循环

        //while结构
        while(条件表达式){
            //循环体
        }

        //do while结构
        do{
            // 循环体

        }while(条件表达式);

6.5 循环小结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZUo41ZN7-1620388130816)(pink老师js869集笔记.assets/image-20200716164916131.png)]

6.6 continue 关键字

定义：用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会减少执行一次）

6.7 break 关键字

定义：用于立即跳出整个循环（循环结束）

7、数组

7.1 数组的概念

定义：数组是指一组数据的集合，其中每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式

7.2 数组的创建方式

利用new创建数组
利用数组字面量创建数组

        //创建数组 两种方式
        //1、利用数组字面量
        var arr = [1, 2, 3];
        console.log(arr[0]);

        //2 利用new Array()
        var arr1 = new Array();
        var arr2 = new Array(2);//表示数组长度为2 里面有两个空的数组元素
        var arr3 = new Array(3, 3);//等价于 [3，3]  表示里面有两个数组元素，一个是3一个是3
        console.log(arr3);

7.3 遍历数组

<script>
        var s = [2, 6, 1, 77, 52, 25, 7]
        var max = s[0];
        for (var i = 1; i <= s.length; i++) {
            if (max < s[i]) {
                max = s[i];
            }
        }
        console.log(max);
</script>

7.4 数组案例

7.4.1 案例：筛选数组

<script>
        //将数组【2，0，6，1，77，0，52，0，25，7】中大于等于10 的数 选出来，并存放到新的数组中
    方法1
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newarr = [];
        var j = 0
        for (var i = 0; i <= arr.length; i++) {
            if (arr[i] >= 10) {
                newarr[j] = arr[i];
                j++; //索引号必须从0开始
            }
        }
        console.log(newarr);

    </script>


	方法2
    <script>
        // 将数组【1，2，3，4，5】反转过来
        var arr = [1, 2, 3, 4, 5];
        var newarr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            newarr[newarr.length] = arr[i];
        }
        console.log(newarr);

    </script>

7.4.2 案例：冒泡排序

<script>
        // 冒泡 排序
        var arr=[5,4,3,2,1];
        for( var i=0;i<=arr.length-1;i++){
            //外层循环 负责躺数 5个值 是4躺
            for(var j=0;j<=arr.length-i-1;j++){
                // 里面循环的次数
                if(arr[j]>arr[j+1]){
                    var temp=arr[j];
                    arr[j]=arr[j+1];
                    arr[j+1]=temp;

                }
            }
        }
        console.log(arr);
        
    </script>

8、函数

8.1 函数的概念

定义：在JS里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数

8.2 函数的使用

声明函数和调用函数

    <script>
        // 声明函数 
        /* 
            function 函数名字(){
                //函数体
            }
         */
        function 函数名(形参1，形参2) {
            //在声明函数的括号里面的是形参
            return 需要返回的结果;
        }
        函数名(实参1，实参2);
        //在调用函数的括号里面是实参
        //形参是接收实参的

        function cook(aru) {
            console.log(aru);

        }
        cook('酸辣土豆丝');
    </script>

调用函数：函数名（）；一定要加小括号

函数名常常采用名词
函数不调用，函数不执行
函数调用一定要写小括号
声明函数用function关键字

8.3 形参和实参

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zf8NkNK6-1620388130818)(pink老师js869集笔记.assets/image-20200716164930914.png)]

参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

如果实参的个数和形参的个数一致，则正常输出结果
如果实参的个数多余形参的个数会取到形参的个数
如果实实参的个数小于形参的个数，假设形参（num1,num2）给了num1值没有给num2，但是函数的形参是一个局部变量，并且是一个没有接收值的 underfined 所以结果是：定义了，未赋值
在函数内部，未声明直接赋值的变量也是全局变量

8.4 return

我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名（）通过return实现的
只要函数遇到return 就把后面的结果返回给函数的调用者函数名（）=return后面的结果
只能返回一个值，如果需要返回多个值，则用数组 return [num1.num2……]，或者用对象
如果函数里面有return则返回的是return后面的值，如果函数没有return，则返回的是underfined
return不仅能退出循环，还能返回return语句后面的值

8.5 函数案例

8.5.1 案例：求最大值

<script>
        //利用函数求数组 【5，2，99，101，67，77】中的最大值
        function getMax(s) {
            var max = s[0];
            for (var i = 1; i <= s.length; i++) {
                if (s[i] > max) {
                    max = s[i];
                }
            }
            return max;
        }

        var re = getMax([5, 2, 99, 101, 67, 77]);
        console.log(re);

    </script>

8.5.2 案例：反转数组

<script>
        //；利用函数翻转  任意数组  reverse翻转
        function reverse(arr) {
            var newArr = [];
            for (var i = arr.length - 1; i >= 0; i--) {
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        var arr1 = reverse([1, 3, 4, 6, 9]);
        console.log(arr1);
        var arr2 = reverse(['red', 'pink', 'blue']);
        console.log(arr2);
        /* 结果为：
        9 6 4 3 1
        blue pink red */

    </script>

8.5.3 案例：冒泡排序

    <script>
        //  函数封装  冒泡排序  sort  排序
        function sort(arr) {
            for (var i = 0; i <= arr.length - 1; i++) {
                //外层循环 负责躺数 5个值 是4躺
                for (var j = 0; j <= arr.length - i - 1; j++) {
                    // 里面循环的次数
                    if (arr[j] > arr[j + 1]) {
                        var temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;

                    }
                }
            }
            return arr;
        }
        var arr1=sort([9,4,7]);
        console.log(arr1);
        
    </script>

8.6 用榨汁机模拟函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3bsexAqe-1620388130819)(pink老师js869集笔记.assets/image-20200716164943553.png)]

8.7 arguments

当我们不确定有多少个参数传递的时候，我们可以用arguments来获取，在JS中，arguments实际上它是当前函数的一个内置对象。所有的函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参

只有函数才有，并且每个函数都有一个arguments对象

伪数组特点

具有数组的length属性
按照索引的方式进行存储的
他没有真正数组的一些方法 pop() push()等等

8.8 函数的声明方式

利用function 创建函数也成为命名函数
匿名函数只不过是这个变量里面存储的是一个函数，调用的时候是变量名+（）也可以传递参数

        var 变量名=function(){
            
        }

8.9 作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突

作用域分为：局部作用域和全局作用域

局部作用域就是在函数内部

变量分为：局部变量和全局变量

函数的形参，可以看作是局部变量
函数中没有声明，直接赋值的变量也是全局变量
全局变量，浏览器窗口关闭，全局变量销毁
局部变量，此函数代码块运行完毕后，局部变量销毁
局部变量只能在函数内部使用
全局变量可以在任何地方使用

8.10 作用域链

        function f1(){
            var num=123;
            function f2(){
                console.log(num);
                
            }
            f2();
        }
        var num=456;
        f1();
        //  最后输出的是123；采取就近原则，一层一层的往上找

8.11 预解析

JavaScript代码是由浏览器中的JavaScript解析器来执行的，JavaScript解析器在运行JavaScript代码的时候分为两步，第一步预解析，第二步代码执行

第一步：预解析

js引擎会把js里面所有的var 和function提升到当前作用域的最前面

预解析分为：变量预解析（变量提升）和函数预解析（函数提升）
1. 变量提升：就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作
2. 函数提升：就是把所有的函数声明提升到当前作用域的最前面不调用函数
代码执行

8.12 案例：预解析

        //  第一题
        var num=10;
        fun();
        function fun(){
            console.log(num);
            var num=20;
        } 
        //  结果为：underfined  定义未声明

        //  第一题解析  相当于执行了以下操作
        var num;
        function fun(){
            var num;
            console.log(num);
            var num=20;
        } 
        num=10;
        fun();

        //第二题
        var num=10;
        function fn(){
            console.log(num);
            var num=20;
            console.log(num);

            
        }
        fn();
        //  结果为：underfined  20

        //  第二题解析  相当于执行了以下操作
        var num;
        function fn(){
            var num;
            console.log(num);
            
            num=20;
            console.log(num);

            
        }
        fn();

        //  第三题
        var a=18;
        f1();
        function f1(){
            var b=9;
            console.log(a);
            console.log(b);
            var a='123';
            
        }
        //  结果为：underfined  9

        //  第三题解析  相当于执行了以下操作
        var a;
        function f1(){
            var b;
            var a;
            b=9;
            console.log(a);//underfined
            console.log(b);//9
            a='123';
            
        }
        a=18;
        f1();

        //  第四题
        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        function f1() {
            var a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);

        }
        // 

        //  第四题解析  相当于执行了以下操作
        function f1() {
            var a;
            a = b = c = 9;
            //  相当于 var a=9;b=9;c=9
            //  集体声明 var a=9,b=9,c=9 才等于var a=9;var b=9
            console.log(a);//9
            console.log(b);//9
            console.log(c);//9

        }
        f1();
        console.log(c);//9
        console.log(b);//9
        console.log(a);//报错

9、JavaScript对象

9.1 对象定义

定义：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如：一本书、一辆汽车、一个人

9.2 对象的组成

对象是由属性和方法组成的

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

9.3 创建对象使用对象

利用字面量创建对象
利用 new Object创建对象
利用构造函数创建对象

9.3.1 字面量创建对象

        //  利用字面量创建对象
        var obj = {
            uname: '张三丰',
            age: 20,
            sex: '男',
            say: function () {
                console.log('我会唱歌');

            }
        }
                /*

            1、里面的属性或者方法我们采取键值对的形式  键 属性名：值 属性值
            2、多个属性或者方法中间用逗号隔开的
            3、方法冒号后面跟的是一个匿名函数
            4、使用对象
                调用对象的属性 我们采取 对象名.属性名
                obj.uname
                也可以采取  对象名['属性名']
                obj['uname']

                调用对象的方法 我们采取 对象名.方法名，还要加小括号
                obj.say()
         */

9.3.2 利用 new Object创建对象

         //利用 new Object创建对象
         var dx=new Object();
         dx.uname='张三';
         dx.age=20;
         dx.say=function(){
             console.log('哈喽~');
             
         }
         /* 
         注意
         1、我们是利用等号赋值的方法，添加对象的属性和方法
         2、每个属性和方法之间用分号结尾
         

          */

9.3.3 利用构造函数创建对象

构造函数定义：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用，我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面

    <script>
        //  利用字面量创建对象
        var obj = {
            uname: '张三丰',
            age: 20,
            sex: '男',
            say: function () {
                console.log('我会唱歌');

            }
        }
        /*

            1、里面的属性或者方法我们采取键值对的形式  键 属性名：值 属性值
            2、多个属性或者方法中间用逗号隔开的
            3、方法冒号后面跟的是一个匿名函数
            4、使用对象
                调用对象的属性 我们采取 对象名.属性名
                obj.uname
                也可以采取  对象名['属性名']
                obj['uname']

                调用对象的方法 我们采取 对象名.方法名，还要加小括号
                obj.say()
         */


/*          //利用 new Object创建对象
         var dx=new Object();
         dx.uname='张三';
         dx.age=20;
         dx.say=function(){
             console.log('哈喽~');
             
         }
         /* 
         注意
         1、我们是利用等号赋值的方法，添加对象的属性和方法
         2、每个属性和方法之间用分号结尾


          */ 
        
        // 利用构造函数创建对象
        //要求  创建四大天王的对象
        //  相同点 名字、年龄、性别、方法
        //  构造函数的语法格式
        // function 构造函数名(){
        //     this.属性=值;
        //     this.方法名=function(){

        //     }
        // }
        // new  构造函数名();  调用对象
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing=function(sang){
                console.log(sang);
                
            }
        }
        var ldh = new Star('刘德华', 18, '男');
        ldh.sing('冰雨'); //给刘德华的对象 传递方法的值
        console.log(ldh.name);
        console.log(ldh['sex']);
        var zxy = new Star('张学友', 19, '男');
        console.log(zxy);

        //特点
        //1、构造函数首字母要大写
        //2、我们构造函数不需要return 就可以返回结果
        //3、我们调用构造函数 必须使用new
        //4、我们只要 new Star()  调用函数 就创建一个对象
        //利用构造函数创建对象
        //5、我们的属性和方法前面必须写 this 
        //因为我们前面两种创建对象的方式 一次只能创建一个对象
        //  1、因为我们一次创建一个对象 ，里面很多的属性呵方法是大量相同的 我们只能复制
        //  2、因此 我们可以利用函数的方法  重复这些相同的代码  我们就把这个函数称为  构造函数
        // 3、又因为这个 函数不一样，里面封装的不是普通代码 而是对象
        // 4、构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

    </script>

实例

 function Hero(name, type, blood, attack) {
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = attack;
            this.jineng = function (jineng) {
                this.jineng = jineng;

            }
        }
        var lianpo = new Hero('廉颇', '力量型', '500血量', '攻击：近战');
        lianpo.jineng('打王者');
        console.log(lianpo);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yLppFvVZ-1620388130821)(pink老师js869集笔记.assets/image-20200716165002626.png)]

9.4 构造函数和对象的练习

构造函数，如Stars（），抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
创建对象，如new Stars()，特指某一个，通过new关键字创建对象的过程我们也成为对象实例化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F8uUmmPM-1620388130822)(pink老师js869集笔记.assets/image-20200716165013910.png)]

9.5 new关键字

new在执行时会做四件事情

在内存中创建一个新的空对象
让this指向这个新的对象
执行构造函数里面的代码，给这个新对象添加属性和方法
返回这个新对象（所以构造函数不需要return）

9.6 遍历对象 for(变量 in 对象)

<script>
        //遍历对象
        var obj = {
            name: 'pink老师',
            age: 18,
            sex: '男'
        }
        // for in 遍历我们的对象
        // 语法格式：
        // for (变量 in 对象) {

        // }
        for (var k in obj) {
            console.log(k);  //K是变量
            //如果输出变量  得到的是属性名
            console.log(obj[k]);//得到的是  属性值 必须采取中括号的形式
        }
        //我们使用 for in里面的变量  我们喜欢写K  或者key
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KQcYwxEv-1620388130824)(pink老师js869集笔记.assets/image-20200716165028981.png)]

实例：

<script>
        function Perpos(name, age, sex, height, width) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.height = height;
            this.width = width;
            this.worker = function (worker) {
                this.worker = worker;

            }
        }
        var daidaigou = new Perpos('呆呆狗', 20, '女', 180, '50KG');
        daidaigou.worker('全栈开发工程师');
        for (var k in daidaigou) {
            console.log(k);
            console.log(daidaigou[k]);
        }
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sg62iHzO-1620388130825)(pink老师js869集笔记.assets/image-20200716165042292.png)]

9.7 对象小结

对象可以让代码结构更清晰
对象复杂数据类型 object
本质：对象就是一组无序的相关属性和方法的集合
构造函数泛指某一大类，比如苹果，不管是红色苹果还是绿色苹果，都统称为苹果
对象实例特指一个事物，比如这个苹果、正在给你们讲课的pink老师等
for……in语句用于对对象的属性进行循环操作

9.8 变量、属性、函数、方法的区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BcOEYFz9-1620388130825)(pink老师js869集笔记.assets/image-20200716165054149.png)]

10、JavaScript内置对象

10.1 JavaScript中的对象分类

ECMAScript 基础基础内容
1. 自定义对象
2. 内置对象
浏览器对象 JS API

内置对象：就是JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）

最常用的内置对象

Math
Date
Array
String等

10.2 内置对象—Math对象

    <script>
        // math 数学对象  不是一个构造函数，所以我们不需要new来调用，而是直接使用里面的数学和方法即可
        console.log(Math.PI);// 一个属性 圆周率
        console.log(Math.max(1, 99, 3));//99
        //max如果没有参数 则返回负无穷大
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c0fYCShe-1620388130826)(pink老师js869集笔记.assets/image-20200716165104873.png)]

    <script>
        //  1   绝对值方法
        console.log(Math.abs(1));// 1
        console.log(Math.abs(-1));// 1
        console.log(Math.abs('-1'));// 1 有隐式转换

        //  2   三个取整的方法
        //  向下取整 Math.floor()
        console.log(Math.floor(1.1));// 1
        console.log(Math.floor(1.9));// 1
        console.log(Math.floor(-1.1));// -2
        //  向上取整  Math.ceil()
        console.log(Math.ceil(1.1));// 2
        console.log(Math.ceil(1.9));// 2
        console.log(Math.ceil(-1.1));// -1

        //  3   四舍五入 Math.round()  其他数字都是四舍五入，但是5往大了取
        console.log(Math.ceil(1.1));// 1
        console.log(Math.ceil(1.5));// 2
        console.log(Math.ceil(1.9));// 2
        console.log(Math.ceil(-1.1));// -1
        console.log(Math.ceil(-1.5));// -1

        //  随机数方法
        // random（） 返回的是一个小数 取值是[0,1) 这个方法不跟参数

        //  得到一个两数之间的随机整数 不包括两个数在内
        function getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
        }
        console.log(getRandomInt(10, 20));

        //  得到一个两数之间的随机整数 包括两个数在内
        function getRandomIntInclusive(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
        }
        console.log(getRandomIntInclusive(20, 30));

    </script>

10.3 内置对象—日期对象

    <script>
        //Date() 日期对象  是一个构造函数 必须使用NEW 来调用我们的日期对象
        var arr = new Array();//创建一个数组对象
        var obj = new Object();//创建一个对象实例
        //1、使用 date  没有参数 返回系统当前时间
        var date = new Date();
        console.log(date);
        //2、参数常用的写法  数字型 2019，10，01  或者是字符串型'2019-10-1 8:8:8'
        var date1 = new Date(2019, 10, 1);
        console.log(date1);//返回的是十一月
        var date2 = new Date('2019-10-1 8:8:8');
        console.log(date1);//返回的是十一月

        //格式化日期  年月日
        var date = new Date();
        console.log(date.getFullYear());//返回当前年份
        console.log(date.getMonth() + 1);//月份 返回的月份小1个月  记得月份+1
        console.log(date.getDate());// 返回的是 几号
        console.log(date.getDay());// 周一返回的是1  周六返回的是6 但是周日返回的是 0
        // 我们写一个 2019年5月1日  星期三
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        var day = date.getDay();
        console.log('今天是' + year + '年' + month + '月' + dates + '日' + arr[day]);


        //格式化日期 时分秒
        var date = new Date();
        console.log(date.getHours());//时
        console.log(date.getMinutes());//分
        console.log(date.getSeconds());//秒
        //要求封装一个函数 返回当前的时分秒 格式08：08：08
        function getTime() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            //为了当小时 分 秒 为个位数的时候 更好看
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + '时：' + m + '分：' + s + '秒：';

        }
        console.log(getTime());
    </script>

获取毫秒数

    <script>
        //  获取Date总的毫秒数
        // 1、通过valueOf()   getTime()
        var date = new Date();
        console.log(date.valueOf());//就是我们现在时间 距离1970.1.1 总的毫秒数
        console.log(date.getTime());
        //2、简单写法
        var date1 = +new Date();//+new Date() 返回的就是总的毫秒数
        console.log(date1);
        //3、 H5新增的  获得总的毫秒数
        console.log(Date.now());
    </script>

日期格式化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bOalUkH0-1620388130827)(pink老师js869集笔记.assets/image-20200716165118599.png)]

10.4 案例：日期对象，倒计时没有设置定时器

    <script>
        function countDown(time) {
            var nowTime = +new Date();//返回的是当前时间总的毫秒数
            var inputTime = +new Date(time);//返回的是用户输入时间总的毫秒数
            var times = (inputTime - nowTime) / 1000;//time是剩余时间总的毫秒数   /1000 表示剩余时间总的毫秒数转化为秒
            var d = parseInt(times / 60 / 60 / 24);//天
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24);//小时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60);//分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60);//秒
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';

        }
        console.log(countDown('2020-4-7 10:00:00'));

    </script>

求剩余天、小时、分钟、秒的公式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k8pMJVVd-1620388130828)(pink老师js869集笔记.assets/image-20200716165132146.png)]

10.5 内置对象—数组对象

10.5.1 检测是否为数组 instanceof

        //检测是否为数组
        //1、instanceof 元素安抚 它可以用来检测是否为数组
        console.log(arr3 instanceof Array); //返回ture
        //2、Array.isArray(参数); H5新增的
        console.log(Array.isArray(arr3));

10.5.2 添加删除数组元素的方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8AiDYaDd-1620388130832)(pink老师js869集笔记.assets/image-20200716165145941.png)]

        //添加删除数组元素的方法
        // 1、push() 在我们数组的末尾 添加一个或者多个数组元素  格式：数组名.push(添加元素的内容)
        var arr4 = [1, 2, 3];
        arr4.push(4);
        console.log(arr4);
        //  push是可以给数组后面追加新的元素
        //  push（） 参数直接写  数组元素就可以
        //  push完毕之后，返回的结果是  新数组的长度
        //  原数组也会发生变化
        //  添加多个push(num1.num2)

        // 2、unshift 在数组的开头 添加一个或者多个元素 格式：数组名.unshift(内容);
        arr4.unshift('red');
        console.log(arr4);

        //  unshift是可以给数组前面追加新的元素
        //  unshift（） 参数直接写  数组元素就可以
        //  unshift完毕之后，返回的结果是  新数组的长度
        //  原数组也会发生变化

        //删除数组的方法
        // 3、pop() 它可以删除数组的最后一个元素
        var arr5 = [2, 4, 5]
        arr5.pop();
        console.log(arr5);

        //  pop是可以删除数组的最后一个元素
        //  pop（）没有参数
        //  pop完毕之后，返回的结果是  删除的那个元素
        //  原数组也会发生变化

        // 4、shift()
        var arr6 = [2, 4, 5]
        arr6.shift();
        console.log(arr6);

        //  shift是可以删除数组的第一个元素
        //  shift（）没有参数
        //  shift完毕之后，返回的结果是  删除的那个元素
        //  原数组也会发生变化

10.5.3 数组排序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jbhxqdPK-1620388130833)(pink老师js869集笔记.assets/image-20200716165157839.png)]

        //数组排序
        // 1、反转数组  格式：数组名.reverse();
        var arr7 = [1, 2, 3, 4];
        arr7.reverse();
        console.log(arr7);

        // 2、数组排序  格式：数组名.sort();但是数组中有两位数 再用sort就会出现问题
        var arr8 = [4, 22, 9, 6, 44, 0, 6];
        arr8.sort(function (a, b) {
            return a - b;//升序的顺序排列
            //return b - a;降序的顺序排列
        });
        console.log(arr8);

10.5.4 数组索引方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OcYyM3fj-1620388130834)(pink老师js869集笔记.assets/image-20200716165224780.png)]

        // 返回数组索引号的方法
        //   1、用indexOf() 格式：数组名.indexOf(元素)     当此数组中有两个相同的元素，他只会返回第一个相同元素的索引号    如果数组没有此元素 还用indexOf 查找元素的索引号 则返回-1
        var arr9 = [2, 5, 6, 8];
        console.log(arr9.indexOf(6));
        console.log(arr9.lastIndexOf(8));
        //   2、用lastIndexOf  格式：数组名.lastIndexOf（）   此方法是从后面开始查找  第一种方法是从前往后查找
        // 案例 ：数组去重
        //  封装一个去重的函数 unique
        function unique(arr10) {
            var newArr = [];
            for (var i = 0; i < arr10.length; i++) {
                if (newArr.indexOf(arr10[i]) === -1) {
                    newArr.push(arr10[i]);
                }

            }
            return newArr;

        }
        var demo = unique([1, 4, 5, 4, 1]);
        console.log(demo);

10.5.5 数组转换为字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vmkqcVNi-1620388130834)(pink老师js869集笔记.assets/image-20200716165237154.png)]

        //数组转化为字符串
        //  1、toString()  将我们的数组转换为字符串,逗号分隔开
        var arr11 = [1, 2, 3];
        console.log(arr11.toString());
        //  2、join(分隔符) 默认用逗号分隔
        var arr12 = [1, 2, 3, 4, 5, 6, 7];
        console.log(arr12.join('-'));

10.5.6 连接素组、删除数组元素、截取数组元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TRC3C32G-1620388130835)(pink老师js869集笔记.assets/image-20200716165247297.png)]

10.6 内置对象—字符串对象

10.6.1 基本包装类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eBr2SlDg-1620388130836)(pink老师js869集笔记.assets/image-20200716165309837.png)]

10.6.2 根据字符返回位置

字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-StQYymbT-1620388130837)(pink老师js869集笔记.assets/image-20200716165323478.png)]

        //字符串对象  根据字符串返回位置
        // indexOf(想要查找的字符,起始位置)
        var str = '改革春风吹满面，春天来了';
        console.log(str.indexOf('春'));
        console.log(str.indexOf('春', 3));

案例：

        //案例 o出现的位置及次数
        var str = 'abcoefoxyozzopp';
        var index = str.indexOf('o');
        var num = 0;
        while (index !== -1) {
            console.log(index);
            num++;
            index = str.indexOf('o', index + 1);
        }
        console.log(num);

        //   出现次数最多的字符 并统计次数
        var str = 'abcoefoxyozzopp';
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i);
            //chars  是字符串的每一个字符
            if (o[chars]) {
                //o[chars]得到的是属性值
                o[chars]++;
            }
            else {
                o[chars] = 1;
            }
        }
        console.log(o);
        var max = 0;
        var ch = '';
        for (var k in o) {
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log(ch);

10.6.3 根据位置返回字符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fLuVsdsA-1620388130838)(pink老师js869集笔记.assets/image-20200716165339022.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pBLtHGhf-1620388130838)(pink老师js869集笔记.assets/image-20200716165350301.png)]

10.6.4 字符串的操作方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lndCPfo6-1620388130839)(pink老师js869集笔记.assets/image-20200716165402806.png)]

        //字符串拼接
        //  1.  concat('字符串1','字符串2')
        var str = 'andy'
        console.log(str.concat('red'));// andyred

        //  2   substr('截取的起始位置','截取几个字符')
        var str1 = '改革春风吹满地'
        console.log(str1.substr(2, 2));//春风

        //  3   replace('被替换的字符','替换为的字符') 只能替换被第一次匹配到的字符
        console.log(str.replace('a', 'b'));//bndy

        //  4   字符转换为数组  split('分隔符')
        var str2 = 'red,pink,blue';
        console.log(str2.split(','));

11、JavaScript简单类型和复杂类型

11.2 堆和栈

11.1 简单类型和复杂类型的定义

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型

值类型：简单数据类型/基本数据类型，在存储的时变量中存储的是值本身，因为叫做值类型

string、number、boolean、underfined、null
引用类型：复杂数据类型，在存储时变量中存储的仅仅时地址（引用），因此叫做引用数据类型

通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、 Date等

区别
1. 栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于结构中的栈
  
  简单数据类型存放到栈里面
2. 堆（操作系统）：存储复杂类型（对象）。一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收
  
  复杂数据类型存放到堆里面
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wq2ej8Pa-1620388130840)(pink老师js869集笔记.assets/image-20200716165422885.png)]
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-71HxXwrX-1620388130841)(pink老师js869集笔记.assets/image-20200716165433009.png)]
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yrx6bjvi-1620388130842)(pink老师js869集笔记.assets/image-20200716165444760.png)]
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DdEZRtfz-1620388130843)(pink老师js869集笔记.assets/image-20200716165501357.png)]
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HmU4ov6W-1620388130843)(pink老师js869集笔记.assets/image-20200716165515962.png)]

web APIS

1、web APIS和js基础关联性

1.1 JS组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hrGIhdrK-1620388130844)(pink老师js869集笔记.assets/image-20200716165528226.png)]

1.2 API

API定义：API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或者硬件得以访问一组例程的能力，而又无需访问源码，或者理解内部工作机制的细节

简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能

1.3 web API

web API：是浏览器提供的一套操作浏览器功能和页面元素的API（BOM、DOM）

1.4 api webapi总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6spwBSP5-1620388130846)(pink老师js869集笔记.assets/image-20200716165541396.png)]

2、 DOM

1.5.1 DOM定义

DOM就是文档对象模型

DOM树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nxgR4QYA-1620388130846)(pink老师js869集笔记.assets/image-20200716165556664.png)]

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看作是对象

1.5.2 获取元素

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

根据ID获取

    <div id="id1" class="class1">
	var id = document.getElementById('id1');

<div id="time">2019-9-9</div>
    <script>
        // 1、因为我们文档页面是从上往下加载，所以先得有标签，所以我们script 写道标签的下面
        //  2、get 获得   element 元素  by通过  驼峰命名法
        //  3、参数 id是大小写敏感的字符串
        //  4、返回的是一个元素对象
        var timer = document.getElementById('time');
        //  5、打印我们返回的元素对象 更好的查看里面的属性
        console.dir(timer)
    </script>

console.dir() 作用:更好的查看里面的属性和方法，输出的是一个对象

根据标签名获取

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6y8KGXO9-1620388130847)(pink老师js869集笔记.assets/image-20200716165611736.png)]

通过HTML5新增的方法获取

<div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>shouye</li>
            <li>chanp</li>
        </ul>
    </div>
    <script>
        //  1、getElementsByClassName() 通过类名获取
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        //  2、querySelector() 返回指定选择器的第一个元素对象   切记里面的选择器要加符号 类加. id加id

        var firstbox = document.querySelector('.box');
        console.log(firstbox);

        //  3、querySelectorAll() 返回指定选择器的所有元素对象集合
        var allbox = document.querySelectorAll('.box');
        console.log(allbox);

    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-269Hwsn2-1620388130848)(pink老师js869集笔记.assets/image-20200716165621815.png)]

特殊元素获取

获取body、html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ogrHXLB-1620388130848)(pink老师js869集笔记.assets/image-20200716165636732.png)]

1.5.3 事件基础

事件基础

Js使我们有能力创建动态页面，而事件是可以被JS侦测到的行为

简单理解：触发————机制

网页中的每个元素都可以产生某些可以触发js的事件，例如，我们可以在用户点击按钮时产生一个事件，然后去执行某些操作

<body>
    <button id="btn">唐伯虎</button>
    <script>
        //  点击一个按钮  弹出对话框
        /* 
        
            1、事件三部分  事件源  事件类型  事件处理程序   这三部分 也称为事件三要素
            (1)事件源：事件被触发的对象     按钮
            (2)事件类型：如何触发什么事件 比如鼠标点击（onclick）  鼠标经过
            (3)事件处理程序  通过一个函数赋值的方式完成

         */
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            alert('点桥下');
        }
        /*
            btn：事件源
            onclick：事件类型
            function：事件处理程序

         */
    </script>
</body>

常用鼠标事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dHi8Qtpo-1620388130849)(pink老师js869集笔记.assets/image-20200716165650182.png)]

1.5.4 操作元素

1.5.4.1 改变元素内容

element.innerText

element.innerHTML

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jIKaCXNm-1620388130850)(pink老师js869集笔记.assets/image-20200716165703571.png)]

element.innerText和element.innerHTML的区别

innerText 不识别html标签非标准去除空格和换行
innerHTML 识别html标签 W3C标准保留空格和换行
这连哥哥属性是可读写的可以获取元素里面的内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g90kU123-1620388130851)(pink老师js869集笔记.assets/image-20200716165719980.png)]

1.5.4.2 改变属性

案例：用户点击div 获取当前时间

    <style>
        div,
        p {
            width: 300px;
            height: 30px;
            line-height: 30px;
            color: #ffffff;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>
        1223
    </p>
    <script>
        //  需求：当我们点击了按钮，div里面的文字会发生变化
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function () {
            div.innerText = getDate();

        }
        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            var day = date.getDay();
            return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
        }
        //  我们元素可以不用添加时间
        var p = document.querySelector('p');
        p.innerText = getDate();
    </script>
</body>

案例：点击不同的按钮，切换相应的图片

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
            height: 200px;
        }
    </style>
</head>

<body>
    <!-- 
        点击按钮1，显示刘德华照片  点击按钮2  显示张学友照片 
    -->
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="images/刘德华.jpg" alt="" title="刘德华">
    <script>
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        zxy.onclick = function () {
            img.src = 'images/张学友.jpg';
            img.title = '张学友'
        }
        ldh.onclick = function () {
            img.src = 'images/刘德华.jpg';
            img.title = '刘德华';
        }
    </script>
</body>

</html>

案例：分时显示不同图片，显示不同问候语

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 500px;
            height: 300px;

        }
    </style>
</head>

<body>
    <img src="images/上午好.jpg" alt="">
    <div>上午好</div>
    <script>
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        var date = new Date();
        var h = date.getHours();
        if (h < 12) {
            img.src = 'images/上午好.jpg';
            div.innerHTML = '亲，上午好';
        }
        else if (h < 18) {
            img.src = 'images/中午好.jpg';
            div.innerHTML = '亲，中午好';
        }
        else {
            img.src = 'images/晚上好.gif';
            div.innerHTML = '亲，晚上好';
        }
    </script>
</body>

</html>

1.5.4.3 修改表单里面的元素、属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xb1Wkkoa-1620388130851)(pink老师js869集笔记.assets/image-20200716165752441.png)]

案例：显示密码与不显示密码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            border: 1px solid red;
            margin: 100px auto;
        }

        .box input {
            width: 300px;
            height: 30px;
            border: 0;
            outline: none;
        }

        img {
            width: 24px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="pass">
            <img src="images/闭眼.jpg" alt="" id="eye">
        </label>
        <input type="password" id="pass">
    </div>
    <script>
        var eye = document.getElementById('eye');
        var pass = document.getElementById('pass');
        var flag = 0;//用于控制睁眼闭眼的次数
        eye.onclick = function () {
            if (flag == 0) {
                pass.type = 'text';
                flag = 1
                eye.src = 'images/睁眼.jpg'
            }
            else {
                pass.type = 'password';
                flag = 0;
                eye.src = 'images/闭眼.jpg';
            }
        }
    </script>
</body>

</html>

1.5.4.4 修改样式属性操作

element.style 行内样式操作

element.className 类名样式操作

注意

JS里面的样式采取驼峰命名法，比如fontSize、backgroundColor
JS修改style样式操作，产生的是行内样式，css权重比较高
如果样式修改较多，可以采取操作类名方式更改元素样式
class因为是一个保留字，因为使用className来操作元素类名属性
className会直接更改元素的类名，会覆盖原先的类名
若不想覆盖建议用同类

案例：修改背景颜色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JtO6E8Mw-1620388130852)(pink老师js869集笔记.assets/image-20200716165808933.png)]

案例：淘宝，点击叉号关闭二维码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nUesDh3J-1620388130853)(pink老师js869集笔记.assets/image-20200716165821786.png)]

案例：循环精灵图背景

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ptVmRHJ-1620388130854)(pink老师js869集笔记.assets/image-20200716165911238.png)]

案例：文本框获得焦点隐藏原始文字，失去焦点，显示原始文字

获得焦点onfocus
失去焦点onblur

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yjWn9EIz-1620388130856)(pink老师js869集笔记.assets/image-20200716165928662.png)]

操作元素总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QUBDgPEr-1620388130856)(pink老师js869集笔记.assets/image-20200716165940473.png)]

1.5.4.5 排它思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排它西乡算法：

所有元素全部清楚样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，然后设置自己

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        button {
            width: 40px;
            height: 40px;
            background-color: rgb(99, 97, 97);
            border: 0;
        }

        div {
            width: 300px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
    </div>
    <script>
        var btns = document.getElementsByTagName('button');
        console.log(btns);
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                //  1、先把所有按钮的背景颜色去掉
                //  2、再让当前的按钮颜色变成粉色
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'red';
            }
        }

    </script>
</body>

</html>

案例：四个图片点击其中一个，整个页面背景就是这个图片百度换肤

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100%;
            background: url(images/百度换肤-山水-01.jpg) no-repeat;
            background-size: cover;

        }

        ul {
            width: 500px;
            margin: 100px auto;
        }

        ul li {
            list-style: none;
            float: left;
            width: 100px;
            height: 50px;

        }

        img {
            width: 95%;
            height: 95%;
        }
    </style>
</head>

<body>
    <ul class="yangshi">
        <li><img src="images/百度换肤-山水-01.jpg" alt=""></li>
        <li> <img src="images/百度换肤-山水-02.jpg" alt=""></li>
        <li> <img src="images/百度换肤-山水-03.jpg" alt=""></li>
        <li> <img src="images/百度换肤-山水-04.jpg" alt=""></li>
    </ul>
    <script>
        var imgs = document.querySelector('.yangshi').querySelectorAll('img');
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                // console.log(a);
                document.body.style.backgroundImage = ('url(' + this.src + ')');
                //如果把this 换成imgs[i] 就不行，就得在事件外面写var a=imgs[i].src
            }
        }
    </script>
</body>

</html>

案例：表格中隔行变色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1tzy44dU-1620388130858)(pink老师js869集笔记.assets/image-20200716165955726.png)]

案例：全选反选

pink老师讲的

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function() {
                // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
            }
            // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

</html>

百度的

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>复选框</title>

    <style type="text/css">

    </style>
</head>

<body>
    <input type="checkbox" id="boxid" οnclick="setAllNo()" />全选/全不选
    <br />
    <input type="checkbox" name="love" />篮球
    <br />
    <input type="checkbox" name="love" />排球
    <br />
    <input type="checkbox" name="love" />羽毛球
    <br />
    <input type="checkbox" name="love" />乒乓球
    <br />
    <input type="button" value="全选" οnclick="setAll()" />
    <input type="button" value="全不选" οnclick="setNo()" />
    <input type="button" value="反选" οnclick="setOthers()" />

    <script type="text/javascript">
        //全选函数
        function setAll() {
            var loves = document.getElementsByName("love");
            for (var i = 0; i < loves.length; i++) {
                loves[i].checked = true;
            }
        }

        //全不选函数
        function setNo() {
            var loves = document.getElementsByName("love");
            for (var i = 0; i < loves.length; i++) {
                loves[i].checked = false;
            }
        }

        //反选
        function setOthers() {
            var loves = document.getElementsByName("love");
            for (var i = 0; i < loves.length; i++) {
                if (loves[i].checked == false)
                    loves[i].checked = true;
                else
                    loves[i].checked = false;
            }
        }

        //全选/全不选操作
        function setAllNo() {
            var box = document.getElementById("boxid");
            var loves = document.getElementsByName("love");
            if (box.checked == false) {
                for (var i = 0; i < loves.length; i++) {
                    loves[i].checked = false;
                }
            } else {
                for (var i = 0; i < loves.length; i++) {
                    loves[i].checked = true;
                }
            }
        }
    </script>

</body>

</html>

1.5.5.6 自定义属性操作

获取属性值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HQp1uvBc-1620388130859)(pink老师js869集笔记.assets/image-20200716170012345.png)]

程序员自己设置的属性一般格式为：data-属性名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XOQ09ciO-1620388130860)(pink老师js869集笔记.assets/image-20200716170026398.png)]

设置属性值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JDEvdxXU-1620388130861)(pink老师js869集笔记.assets/image-20200716170047303.png)]

移除属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-REvsQQ3X-1620388130862)(pink老师js869集笔记.assets/image-20200716170056710.png)]

案例：tab栏切换

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tab {
            width: 1400px;
            margin: 100px auto;
        }

        .tab .tab_list {
            width: 1400px;
            height: 40px;
            background-color: rgb(146, 145, 145);
        }

        ul li {
            float: left;
            list-style: none;
            width: 200px;
            height: 40px;
            font-size: 20px;
            text-align: center;
            line-height: 40px;

        }

        .current {
            background-color: red;
            color: #ffffff;
        }

        .item {
            display: none;
        }

        .item:nth-child(1) {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item">商品介绍内容</div>
            <div class="item">规格与包装内容</div>
            <div class="item">售后保障内容</div>
            <div class="item">商品评价内容</div>
            <div class="item">手机社区内容</div>
        </div>
    </div>
    <script>
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        console.log(lis);
        var tab_con = document.querySelector('.tab_con');
        var items = document.querySelectorAll('.item');
        for (var i = 0; i < lis.length; i++) {
            // 给五个小li设定索引号
            lis[i].setAttribute('index', i);
            //  index是啥索引的意思
            lis[i].onclick = function () {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                    console.log(this);
                }
                this.className = 'current';
                //2 下面的显示内容模块
                var index = this.getAttribute('index');
                console.log(index);
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                items[index].style.display = 'block';
            }
        }
    </script>
</body>

</html>

1.5.5 节点操作

1.5.5.1 节点

主要体现在：父子兄节点之间上

一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)这三个基本属性

元素节点 1
属性节点 2
文本节点 3（包括文字、空格、换行等）

1.5.5.2 父节点 parentNode

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-51O5qx2r-1620388130863)(pink老师js869集笔记.assets/image-20200716170123622.png)]

格式：元素.parentNode

1.5.5.3 子节点 childNodes (标准)

此方法得到的是所有节点，包括：文本节点、元素节点等等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MnkombBz-1620388130864)(pink老师js869集笔记.assets/image-20200716170136197.png)]

children （非标准）

它返回所有的子元素节点，它只返回之元素节点，其余节点不返回

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QGoPGNS5-1620388130864)(pink老师js869集笔记.assets/image-20200716170147209.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y3ofJdtm-1620388130865)(pink老师js869集笔记.assets/image-20200716170203885.png)]

firstChild、lastChild 返回的是第一个子节点、最后一个子节点，不管是文本节点和元素节点

案例：鼠标移动到这里显示下拉菜单离开隐藏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9kNUcKwM-1620388130866)(pink老师js869集笔记.assets/image-20200716170218477.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YneIbjNp-1620388130867)(pink老师js869集笔记.assets/image-20200716170229016.png)]

1.5.5.4 兄弟节点

node.nextSibling 得到是下一个兄弟，包括：文本节点、元素节点

node.previosSibling 得到的是上一个兄弟节点，同样是包含所有的节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gSTxt8nW-1620388130867)(pink老师js869集笔记.assets/image-20200716170246446.png)]

node.nextElementSibling 得到的是下一个兄弟元素节点

node.previousElementSibling 得到的是上一个兄弟元素节点

解决兄弟节点兼容性问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZaBRsCcx-1620388130868)(pink老师js869集笔记.assets/image-20200716170305065.png)]

1.5.5.5 创建节点

document.creatElement(‘tagName’)

1.5.5.6 添加节点

node.appendChild(child) node是父级 child是子级追加元素

node.inserBefore(child,指定元素) 在指定元素前面添加

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xyeZXlfk-1620388130870)(pink老师js869集笔记.assets/image-20200716170322154.png)]

案例：简单版发布留言

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            list-style: none;
            background-color: pink;
        }
    </style>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10">123</textarea>
    <button>发布</button>


    <ul>

    </ul>
    <script>
        //1获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        //  2  注册事件
        btn.onclick = function () {
            if (text.value == 0) {
                alert('您没有输入内容');
                return false;
            }
            else {
                //  创建元素  先有li才能赋值
                var li = document.createElement('li');
                li.innerHTML = text.value;
                //  添加元素
                ul.insertBefore(li, ul.children[0]);
            }

        }
    </script>
</body>

</html>

1.5.5.7 删除节点

node.removeChild(child) 删除节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VoGLgRKb-1620388130871)(pink老师js869集笔记.assets/image-20200716170336623.png)]

1.5.5.8 复制节点

node.cloneNode()

注意

如果括号参数为空或者false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
如果括号的参数为true，则是深度拷贝，会复制节点本身以及里面的所有子节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Rpo3LVu-1620388130872)(pink老师js869集笔记.assets/image-20200716170348362.png)]

案例：动态生成表格

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }

        * {
            margin: 0;
            padding: 0;
        }

        th,
        td {
            border: 1px solid rgba(27, 27, 27, 0.2);
        }

        tr {
            height: 40px;
        }
    </style>
</head>

<body>
    <table cellpadding="0" border="1px" cellspacing="0">
        <thead>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        //  先准备好学生的数据
        var datas = [
            {
                name: '魏璎珞',
                subject: 'JavaScript',
                score: 100
            }
            ,
            {
                name: '红利',
                subject: 'JavaScript',
                score: 198
            },
            {
                name: '富恒',
                subject: 'JavaScript',
                score: 99
            },
            {
                name: '明玉',
                subject: 'JavaScript',
                score: 188
            }
        ]
        //  创建行 
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            // 创建tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 创建行里面的单元格，单元格的数量取决于每个对象里面的属性个格式  for循环遍历对象
            for (var k in datas[i]) {
                // 创建单元格
                var td = document.createElement('td');
                //  创建单元格的同时 把对象里面的属性值 给td
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            //  创建有删除两个字的单元格
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(td);
        }
        //  删除操作
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                //删除a 所在的行
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>
</body>

</html>

1.5.5.9 三种动态创建元素的区别

document.write()
element.innerHTML
document.creatElement

区别

document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则会导致页面全部重绘
innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
innerHTML创建对个元素效率更高（不要采用拼接字符串，采取数组形式拼接），结构稍微复杂
createElement() 创建多个元素效率稍低一点点，但是结构清晰

1.5.6 DOM重点核心

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tC6lKb0M-1620388130873)(pink老师js869集笔记.assets/image-20200716170410778.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ydOmImtv-1620388130874)(pink老师js869集笔记.assets/image-20200716170424615.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yvahPeww-1620388130875)(pink老师js869集笔记.assets/image-20200716170433872.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VofvhpMp-1620388130875)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200508220938757.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kIRExE4j-1620388130876)(pink老师js869集笔记.assets/image-20200716170444299.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AnSk6bqc-1620388130877)(pink老师js869集笔记.assets/image-20200716170454814.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sSqdY2gV-1620388130878)(pink老师js869集笔记.assets/image-20200716170510657.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zDSAiSom-1620388130879)(pink老师js869集笔记.assets/image-20200716170522474.png)]

3、高级事件

3.1 注册事件

传统注册时间
方法监听事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5GRPy2hu-1620388130880)(pink老师js869集笔记.assets/image-20200716170532948.png)]

3.2 addEventListener 事件监听方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rn5EXDRd-1620388130881)(pink老师js869集笔记.assets/image-20200716170556698.png)]

3.3 DOM事件流

事件流描述的是从页面中接收事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

比如：我们给DIV添加了点击事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7e33wQmL-1620388130882)(pink老师js869集笔记.assets/image-20200716170608841.png)]

DOM事件流分为3个阶段

捕获阶段
当前目标阶段
冒泡阶段

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-de39cNp1-1620388130883)(pink老师js869集笔记.assets/image-20200716170622027.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RnPMIpKd-1620388130884)(pink老师js869集笔记.assets/image-20200716170634796.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rqz3SPrL-1620388130884)(pink老师js869集笔记.assets/image-20200716170645290.png)]

注意

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-67C1CEw0-1620388130885)(pink老师js869集笔记.assets/image-20200716170659995.png)]

没有冒泡的：onblur onfocus onmouseenter onmouseleave

3.4 事件对象

官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象是事件对象event，它有很多属性和方法

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function (event) {
            //1.event 就是一个事件对象 写到我们侦听函数的小括号里面 当形参来看
            //2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
            //3.事件对象 是我们事件一系列相关数据的集合 跟事件相关的  比如鼠标点击里面就包括了鼠标的相关信息，鼠标做表  如果是键盘事件里面就包括的键盘事件信息 比如 判断用户按下了哪个键
            //4.这个事件对象我们可以自己命名 常用e
            //5、事件对象也有兼容性问题  ie678通过window.event 
            //e=e||window.event 兼容性
        }
    </script>
</body>

</html>

3.5 事件对象的常见属性和方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xvb6pJBo-1620388130886)(pink老师js869集笔记.assets/image-20200716170734860.png)]

 //  常见事件对象的属性和方法
        //  1、e.target 返回的是触发事件大的对象（元素），this返回的是绑定事件的对象（元素）
        //  区别：e.target 点击了那个元素就返回那个元素，this 谁绑定了这个事件 就返回谁
比如给ul绑定点击事件，this指向的是ul，e.target指向的是li

阻止默认事件阻止冒泡

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JP038YbE-1620388130887)(pink老师js869集笔记.assets/image-20200716170753578.png)]

解决冒泡兼容性问题

3.6 事件委托

事件委托原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父结点上，然后利用冒泡原理影响每个子结点

案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器

事件委托作用

提高了程序的性能

案例

<body>
    <ul>
        <li>你好我是1</li>
        <li>你好我是2</li>
        <li>你好我是3</li>
        <li>你好我是4</li>
        <li>你好我是5</li>
    </ul>
    <script>
        // 事件委托的核心原理就是：给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            alert('知否知否  弹框在手');
            e.target.style.backgroundColor = 'pink'
        })
    </script>
</body>

3.7 常见的鼠标事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hwNIzrAo-1620388130887)(pink老师js869集笔记.assets/image-20200716170833195.png)]

3.7.1 禁止鼠标右击菜单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Smh2JdaB-1620388130888)(pink老师js869集笔记.assets/image-20200716170845206.png)]

3.7.2 禁止鼠标选中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qqiEFh1X-1620388130889)(pink老师js869集笔记.assets/image-20200716170855163.png)]

3.8 鼠标事件对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TGxZiP4I-1620388130890)(pink老师js869集笔记.assets/image-20200716170908139.png)]

案例：跟随鼠标移动的天使

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            width: 30px;
            height: 30px;
        }
    </style>
</head>

<body>
    <img src="images/tianshi.jpg" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function (e) {
            var x = e.pageX;
            var y = e.pageY;
            pic.style.left = x - 15 + 'px';
            pic.style.top = y - 15 + 'px';

        })
    </script>
</body>

</html>

3.9 常用键盘事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k1ft6gce-1620388130890)(pink老师js869集笔记.assets/image-20200716171007212.png)]

案例：按下S键搜索框获得焦点

keyup 是按下松开时 down和press在文本框的特点：他们两个时间触发的时候，文字还没有落入文本框中

<body>
    <input type="text">
    <script>
        var search=document.querySelector('inpput');
        document.addEventListener('keyup',function(e){
            // console.log(e.keyCode);
            if(e.keyCode==83){
                search.focus();//获得焦点

            }
            
        })
    </script>
</body>

案例：京东快递单号查询在你输入快递单号后，他会在上面显示一个大的div显示你输入的内容这个内容的字号比较大

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .search {
            position: relative;
            width: 178px;
            margin: 100px;

        }

        .con {
            position: absolute;
            display: none;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333333;
        }

        .con::before {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid transparent;
            border-top-color: #ffffff;

        }
    </style>
</head>

<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup', function () {
            if (this.value == '') {
                con.style.display = 'none';
            }
            else {
                con.style.display = 'block';
                con.innerHTML = this.value;
            }

        })
    </script>
</body>

</html>

如果想要完善还有一个问题，获得焦点的时候有内容显示，没有内容隐藏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p9p3VFPW-1620388130891)(pink老师js869集笔记.assets/image-20200716171025665.png)]

4、BOM

4.1 BOM概述

BOM浏览器对象

BOM即浏览器对象模型他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

BOM缺乏标注，js语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分

DOM和BOM区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pQ17lWz9-1620388130892)(pink老师js869集笔记.assets/image-20200716171038087.png)]

4.2BOM的构成

BOM比DOM更大，它包含DOM

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-evyK3EQR-1620388130893)(pink老师js869集笔记.assets/image-20200716171059835.png)]

4.3 window常见事件

4.3.1窗口加载事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uLXaG9zm-1620388130894)(pink老师js869集笔记.assets/image-20200716171122331.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mJDXcGrE-1620388130895)(pink老师js869集笔记.assets/image-20200716171159415.png)]

4.3.2调整窗口大小事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2OcHVBjA-1620388130895)(pink老师js869集笔记.assets/image-20200716171225001.png)]

4.4 定时器

开启定时器 setTimeout() 回调函数
开始定时器 setlnterval()
停止定时器 clearTimeout(定时器名字)
停止定时器 clearInterval(定时器名字)

  <script>
        /* 
         1、   setTimeout
         语法规范：window.setTimeout(调用函数,延时时间);
         1、这个window在调用的时候可以省略
         2、延时时间单位是毫秒 但是可以省略 如果省略默认是0秒
         3、这个调用函数可以直接写函数  还可以写函数名 还有一种写法  '函数名()'  但是这个写法不提倡
         4、页面中可能有很多的定时器，我们经常给定时器加标识符（名字）
         var timer1=setTimeout(calkback,3000);
         var timer2=setTimeout(calkback,6000);
          */
        /* 
         //方案1
        setTimeout(function(){
             console.log('时间到了');
             
         },2000) */
        //方案2
        function calkback() {
            console.log('爆炸了');

        }
        setTimeout(calkback, 3000);
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QS5EV36H-1620388130896)(pink老师js869集笔记.assets/image-20200716171340599.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-unP90mJk-1620388130897)(pink老师js869集笔记.assets/image-20200716171359313.png)]

案例：京东倒计时，设置了定时器

            <div class="time_bottom">
                <span class="hour"></span>
                <span class="minute"></span>
                <span class="second"></span>
            </div>
        </div>

    </div>
    <script>
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2020-4-14 22:00:00');//返回的是用户输入时间总的毫秒数
        function countDown() {
            var nowTime = +new Date();//返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000;//time是剩余时间总的毫秒数   /1000 表示剩余时间总的毫秒数转化为秒
            var h = parseInt(times / 60 / 60 % 24);//小时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;//剩余的小时给小时盒子
            var m = parseInt(times / 60 % 60);//分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;//剩余的分钟给分钟盒子
            var s = parseInt(times % 60);//秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;//剩余的秒数给秒数盒子
        }
        setInterval(countDown, 1000);
</script>
这样写会有一点小bug  在var input下面 先调用一下这个函数 就可以解决

案例：发送短信点击发送后60S内不能再次点击

<body>
    手机号码<input type="text"><button>发送</button>
    <script>
        var time = 10;//控制剩余时间
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            btn.disabled = true;
            var timer = setInterval(function () {
                if (time == 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    time = 10;
                }
                else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000)

        })
    </script>
</body>

4.5 this指向问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是哪个调用它的对象

1、全局作用域或者普通函数中this指向全局对象window（注意：定时器里面的this也是指向window）

2、方法调用中谁调用this指向谁

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RhhhmYV4-1620388130898)(pink老师js869集笔记.assets/image-20200716171432255.png)]

3、构造函数中this指向构造函数的实例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9lESHIi8-1620388130899)(pink老师js869集笔记.assets/image-20200716171447516.png)]

4.6 JS执行队列

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RI6k2Yr5-1620388130900)(pink老师js869集笔记.assets/image-20200716171500076.png)]

同步和异步

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uu0jhMSM-1620388130901)(pink老师js869集笔记.assets/image-20200716171522696.png)]

同步任务

同步任务都在主线程上执行，形成一个执行栈

异步任务

JS的异步是通过回调函数实现的

一般而言，异步任务有以下三种类型

普通事件，如 click、resize等
资源加载，如 load、error等
定时器

异步任务相关回调函数添加到任务队列中（任务对象也成为消息队列）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0FDaO7l2-1620388130902)(pink老师js869集笔记.assets/image-20200716171539522.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nVEVAGjD-1620388130902)(pink老师js869集笔记.assets/image-20200716171602802.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-40yKQy1I-1620388130903)(pink老师js869集笔记.assets/image-20200716171614826.png)]

4.7 location 对象

定义：window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL，因为这个属性返回的是一个对象，所以我们将这个属性也成为location

4.7.1 URL

定义：统一资源定位符，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它

语法格式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AZPbYFZ5-1620388130904)(pink老师js869集笔记.assets/image-20200716171634994.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FEitE3aW-1620388130904)(pink老师js869集笔记.assets/image-20200716171645743.png)]

4.7.2 location 对象的属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pkWi6K5r-1620388130905)(pink老师js869集笔记.assets/image-20200716171703434.png)]

案例：五秒之后跳转到首页

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script>
        var timer = 5;
        var div = document.querySelector('div');
        tiaozhuan();
        function tiaozhuan() {
            if (timer == 0) {
                location.href = 'http:www.jd.com';
            }
            else {
                div.innerHTML = '您好，将在' + timer + '秒之后跳转到首页'
                timer--;
            }
        }
        setInterval(tiaozhuan, 1000)
    </script>
</body>

</html>

案例：根据用户在输入框输入的值跳转到不同的页面

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>

<body>
    <div>

    </div>
    <script>
        console.log(location.search);//得到：？uname=andy
        //  1、先去掉问号    substr('起始的位置',截取几个字符)
        var params = location.search.substr(1);//1表示从索引号1开始  第二值没写表示截取到最后
        console.log(params);

        //得到  uname=andy
        //  2、利用等号把字符串分割为数组
        var arr = params.split('=');
        console.log(arr);
        var div = document.querySelector('div');
        div.innerHTML = arr[1] + '欢迎你';
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="index.html">
        用户名：<input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>

</html>

4.7.3 location 对象的方法刷新页面跳转页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S9MCwvJ0-1620388130906)(pink老师js869集笔记.assets/image-20200716171820076.png)]

4.8 navigator 对象

此对象包含有关浏览器的信息，他有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值

案例：判断用户那个前端打开页面，实现跳转

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iLaDDTEh-1620388130906)(pink老师js869集笔记.assets/image-20200716171833694.png)]

4.9 history 对象 back() forward()

与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中访问过的URL）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LEDlt4Dc-1620388130907)(pink老师js869集笔记.assets/image-20200716171849071.png)]

5、PC端网页特效

5.1 元素偏移量 offset系列

我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等

获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数字都不带单位

offset 系列常用属性：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dyHEISbC-1620388130908)(pink老师js869集笔记.assets/image-20200716171930823.png)]

offsettop/left 他以带有定位的父亲为准如果没有父亲或者父亲没有定位，则以body为准

offsetwidth/height 可以的到元素的大小宽度和高度是包括：padding+border+width的

offsetparent 返回的是带有定位的父亲否则返回的就是body

offset和style的区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-afPdC0vV-1620388130908)(pink老师js869集笔记.assets/image-20200716171944707.png)]

案例：获取鼠标点击的坐标

<style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        var div = document.querySelector('.box');
        div.addEventListener('click', function (e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            this.innerHTML = 'x坐标是' + x + '\ny坐标是' + y;
        })
    </script>
</body>

案例：能拖动的模态框

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }
        
        ul,
        li,
        ol,
        dl,
        dt,
        dd,
        div,
        p,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        a {
            padding: 0px;
            margin: 0px;
        }
        
        .login {
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }
        
        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
        }
        
        .login-input-content {
            margin-top: 20px;
        }
        
        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }
        
        .login-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .3);
        }
        
        a {
            text-decoration: none;
            color: #000000;
        }
        
        .login-button a {
            display: block;
        }
        
        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }
        
        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }
        
        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }
        
        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
    <div id="login" class="login">
        <div id="title" class="login-title">登录会员
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
            </div>
            <div class="login-input">
                <label>登录密码：</label>
                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
    </div>
    <!-- 遮盖层 -->
    <div id="bg" class="login-bg"></div>
    <script>
        // 1. 获取元素
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        var title = document.querySelector('#title');
        // 2. 点击弹出层这个链接 link  让mask 和login 显示出来
        link.addEventListener('click', function() {
                mask.style.display = 'block';
                login.style.display = 'block';
            })
            // 3. 点击 closeBtn 就隐藏 mask 和 login 
        closeBtn.addEventListener('click', function() {
                mask.style.display = 'none';
                login.style.display = 'none';
            })
            // 4. 开始拖拽
            // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
        title.addEventListener('mousedown', function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            // (3) 鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })
        })
    </script>
</body>

</html>

案例：京东放大镜

结构图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8dZeNXk8-1620388130909)(pink老师js869集笔记.assets/image-20200716172029699.png)]

代码：JS

window.addEventListener('load', function() {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
    preview_img.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function() {
            mask.style.display = 'none';
            big.style.display = 'none';
        })
        // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
    preview_img.addEventListener('mousemove', function(e) {
        // (1). 先计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
        // (3) 我们mask 移动的距离
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // (4) 如果x 坐标小于了0 就让他停在0 的位置
        // 遮挡层的最大移动距离
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // 大图
        var bigIMg = document.querySelector('.bigImg');
        // 大图片最大移动距离
        var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigIMg.style.left = -bigX + 'px';
        bigIMg.style.top = -bigY + 'px';

    })

})

5.2 元素可视区 client系列

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QoHY5hgI-1620388130910)(pink老师js869集笔记.assets/image-20200716172058348.png)]

5.3 立即执行函数

立即执行函数：（function(){}）（）

不需要调用，立马执行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OAmlcLjb-1620388130911)(pink老师js869集笔记.assets/image-20200716172117651.png)]

作用：创建一个独立的作用域

5.4 元素滚动scroll 系列

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cpSXRWOo-1620388130912)(pink老师js869集笔记.assets/image-20200716172129325.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WsFyOGWM-1620388130913)(pink老师js869集笔记.assets/image-20200716172139650.png)]

虽然不包含边框，但是包含padding

页面被卷去的头部

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hVesANj8-1620388130913)(pink老师js869集笔记.assets/image-20200716172154870.png)]

案例：淘宝侧边栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .slide-bar {
            width: 45px;
            height: 130px;
            margin-left: 600px;
            position: absolute;
            left: 50%;
            top: 300px;
            background-color: pink;
        }

        .header {
            width: 1200px;
            height: 150px;
            background-color: purple;
            margin: 10px auto;
        }

        .banner {
            width: 1200px;
            height: 250px;
            background-color: skyblue;
            margin: 10px auto;
        }

        .main {
            width: 1200px;
            height: 1000px;
            background-color: yellowgreen;
            margin: 10px auto;
        }

        span {
            position: absolute;
            bottom: 0;
            display: none;
        }
    </style>
</head>

<body>
    <div class="slide-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header">头部区域</div>
    <div class="banner">banner区域</div>
    <div class="main">主体区域</div>
</body>

</html>
<script>
    var slideBar = document.querySelector(".slide-bar");
    var banner = document.querySelector(".banner");
    var bannerTop = banner.offsetTop; //banner到达页面顶部时，页面被卷去的头部的大小，一定要写到滚动的外面
    console.log(bannerTop);

    var slideBarTop = slideBar.offsetTop - bannerTop;  //固定定位之后，应该变化的数值
    var main = document.querySelector(".main");
    var goBack = document.querySelector(".goBack");
    var mainTop = main.offsetTop;

    //1,页面滚动事件 scroll
    document.addEventListener("scroll", function () {
        if (window.pageYOffset >= bannerTop) {
            slideBar.style.position = "fixed";
            slideBar.style.top = slideBarTop + "px";
        }
        else {
            slideBar.style.position = "absolute";
            slideBar.style.top = 300 + "px";
        }

        //2，当页面滚动到main盒子，就显示 goBack 模块（“返回顶部”）
        if (window.pageYOffset >= mainTop) {
            goBack.style.display = "block";
        }
        else {
            goBack.style.display = "none";
        }
    })
</script>

5.5 三大系列总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QTz5IV2z-1620388130914)(pink老师js869集笔记.assets/image-20200716172214201.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h1lEijQu-1620388130915)(pink老师js869集笔记.assets/image-20200716172227921.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JYlZql3M-1620388130915)(pink老师js869集笔记.assets/image-20200716172238334.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aUBWYhcm-1620388130916)(pink老师js869集笔记.assets/image-20200716172246978.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8yIFbs6z-1620388130917)(pink老师js869集笔记.assets/image-20200716172256764.png)]

他们的主要用法

offset系列经常用于获得元素位置 offsetLeft offsetTop
client经常用于获取元素大小 clientWidth clientHeight
scroll 经常用于获取滚动距离 scrollTop scrollLeft
注意页面的滚动距离通过 window.pageXOffset获得

5.6 onouseenter onmousover区别

区别：当加上mouseover 它的子级也会触发但如果是mouseenter鼠标在在他身上的时候才会触发 mouseenter不会冒泡

mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发
mouseenter不会冒泡

5.7 动画函数封装

5.7.1 左右动画函数封装

//  简单动画函数封装obj目标对象 target目标位置
function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            if (callback) {
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

5.7.2 上下动画函数封装

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = (target - window.pageYOffset) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (window.pageYOffset == target) {
            clearInterval(obj.timer);
            if (callback) {
                callback();
            }
        }
        window.scroll(0, window.pageYOffset + step);

    }, 15);
}

5.8 PC端网页轮播图

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="动画函数.js">

    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 600px;
            height: 400px;
            background-color: pink;
            margin: 100px auto;
            text-align: center;
            overflow: hidden;
        }

        img {
            width: 600px;
            height: 400px;
        }

        .span1,
        .span2 {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: red;
            line-height: 40px;
            display: none;
            z-index: 3;

        }

        .span1 {
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            border-top-left-radius: 50%;
            border-bottom-left-radius: 50%;
        }

        .span2 {
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
        }

        .yuanbtn {
            position: absolute;
            bottom: 0;
            left: 20px;
            z-index: 3;
        }



        .yuanbtn li {

            list-style: none;
            float: left;
            margin-right: 5px;
            background-color: #a09e9e;
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .yuanbtnbgc {
            background-color: red !important;
        }

        .pic {
            width: 700%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .pic li {
            list-style: none;
            float: left;

        }
    </style>
</head>

<body>

    <div class="box">
        <!-- span表示左右两边的小按钮 -->
        <span class="span1">&gt;</span>
        <!-- span1是右侧的 span2是左侧的 -->
        <span class="span2">&lt;</span>
        <ol class="yuanbtn">

        </ol>
        <!-- 下面是图片 -->
        <ul class="pic">
            <li>
                <img src="images/轮播图-01.jpg" alt="">
            </li>
            <li>
                <img src="images/轮播图-02.jpg" alt="">
            </li>
            <li>
                <img src="images/轮播图-03.jpg" alt="">
            </li>
            <li>
                <img src="images/轮播图-04.jpg" alt="">
            </li>
        </ul>
    </div>
    <script>
        //页面加载完图片  啥的才执行
        window.addEventListener('load', function () {
            //鼠标经过轮播图 左右按钮显示，离开隐藏
            var span1 = document.querySelector('.span1');
            var span2 = document.querySelector('.span2');
            console.log(span1, span2);
            var box = document.querySelector('.box');
            var picwidth = box.offsetWidth;
            console.log(picwidth);
            // 鼠标移动到盒子上显示 左右两侧按钮
            box.addEventListener('mouseenter', function () {
                span1.style.display = 'block';
                span2.style.display = 'block';
                clearInterval(timer);
                timer = null;
            })
            box.addEventListener('mouseleave', function () {
                span1.style.display = 'none';
                span2.style.display = 'none';
                timer = setInterval(function () {
                    // 手动调用点击事件
                    span1.click();
                }, 2000)
            })
            //动态生成小圆圈
            var ul = box.querySelector('ul');
            var ol = box.querySelector('ol');
            console.log(ul);
            console.log(ul.children);
            for (var i = 0; i < ul.children.length; i++) {
                //创建小li
                var li = document.createElement('li');
                //记录当前小圆圈的索引号
                li.setAttribute('index', i);
                // 吧小li插入到ol
                ol.appendChild(li);
                // 我给可以在生成小圆圈的同时 绑定事件
                li.addEventListener('click', function () {
                    //  干掉所有人
                    for (var i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = '';
                    }
                    this.className = 'yuanbtnbgc';
                    //  点击小圆圈 滚动图片
                    // ul的移动距离 就是小圆圈索引号×图片宽度，负

                    var index = this.getAttribute('index');
                    // 当我们点击了某个小li 就要把这个li的索引号给num
                    num = index;
                    // 当我们点击了某个小li 就要把这个li的索引号给circle
                    circle = index;
                    // 确定当前小圆圈的索引号
                    animate(ul, -(index * picwidth))
                })
            }
            // 默认给第一个小圆圈换成红色
            ol.children[0].className = 'yuanbtnbgc';
            // 克隆第一张图片 放在ul最后面
            var first = ul.children[0].cloneNode(true);
            ul.appendChild(first);
            //  点击右侧按钮 图片 右移动一张
            var num = 0;
            var circle = 0;
            var flag = true;//节流阀变量
            // circle控制小圆圈播放
            span1.addEventListener('click', function () {
                if (flag) {
                    flag = false;
                    // 如果走到了复制的最后一张图片 它的ul left要改为0
                    if (num == ul.children.length - 1) {
                        ul.style.left = 0;
                        num = 0;
                    }
                    num++;
                    animate(ul, -(num * picwidth), function () {
                        flag = true;//打开节流阀
                    })
                    //  点击右侧按钮 小圆圈跟着一起变化
                    circle++;
                    // 如果等于5 走到了最后克隆的图片
                    if (circle == ol.children.length) {
                        circle = 0;
                    }
                    for (var i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = '';
                    }
                    ol.children[circle].className = 'yuanbtnbgc';
                }
            })
            // 左侧按钮
            span2.addEventListener('click', function () {
                if (flag) {
                    flag = false;
                    // 如果走到了复制的最后一张图片 它的ul left要改为0
                    if (num == 0) {
                        ul.style.left = -(ul.children.length - 1) * picwidth + 'px';
                        num = ul.children.length - 1;
                    }
                    num--;
                    animate(ul, -(num * picwidth), function () {
                        flag = true;
                    })
                    //  点击右侧按钮 小圆圈跟着一起变化
                    circle--;
                    // 如果等于5 走到了最后克隆的图片
                    if (circle < 0) {
                        circle = ol.children.length - 1;
                    }
                    for (var i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = '';
                    }
                    ol.children[circle].className = 'yuanbtnbgc';
                }
            })
            //  自动播放
            var timer = setInterval(function () {
                // 手动调用点击事件
                span1.click();
            }, 2000)
        })
    </script>
    <!-- 
        需求
        1、鼠标经过轮播图模块  左右按钮显示，离开隐藏左右按钮
        2、点击右侧按钮一次，图片往左播放一张
        3、图片播放的同时，下面小圆圈模块跟随一起变化
        4、点击小圆圈 可以播放相应图片
        5、鼠标不经过轮播图，轮播图也会自动播放
        6、鼠标经过 轮播图模块 自动播放停止
     -->

</body>

</html>

5.9 回到顶部动画案例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .w {
            width: 1200px;
            margin: auto;
        }

        .head {
            height: 500px;
            background-color: #000000;
        }

        .banner {
            height: 300px;
            background-color: red;
        }

        .main {
            height: 1000px;
            background-color: green;
        }

        .ce {
            position: absolute;
            top: 700px;
            right: 100px;
            height: 100px;
            width: 60px;
            background-color: pink;

        }

        span {
            display: none;
        }
    </style>
</head>

<body>
    <div class="ce">
        <span>返回顶部</span>
    </div>
    <header class="head w"></header>
    <div class="banner w"></div>
    <div class="main w"></div>
    <script>
        var span = document.querySelector('span');
        var ce = document.querySelector('.ce');
        var banner = document.querySelector('.banner');
        var bannerTop = banner.offsetTop;//这个距离是banner距离页面顶部的距离
        var ceTop = ce.offsetTop - bannerTop;
        var main = document.querySelector('.main');
        var mainTop = main.offsetTop;
        console.log(ceTop);

        console.log(bannerTop);
        document.addEventListener('scroll', function () {
            if (window.pageYOffset >= bannerTop) {
                ce.style.position = 'fixed';
                ce.style.top = ceTop + 'px';
            }
            else {
                ce.style.position = 'absolute';
                ce.style.top = 700 + 'px';
            }
            if (window.pageYOffset >= mainTop) {
                span.style.display = 'block';
            }
            else {
                span.style.display = 'none';
            }
        })
        // 点击返回顶部  窗口滚动到页面你的最上方
        span.addEventListener('click', function () {
            //  window.scroll(x,y) 可以返回到任何区域，但是是瞬间返回到 x,y不跟单位
            // window.scroll(0, 0);
            // 窗口滚动  所以对象是窗口
            animate(window, 0);
        })
        //  动画函数 向上滚动的
        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var step = (target - window.pageYOffset) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (window.pageYOffset == target) {
                    clearInterval(obj.timer);
                    if (callback) {
                        callback();
                    }
                }
                window.scroll(0, window.pageYOffset + step);

            }, 15);
        }
    </script>
</body>

</html>

5.10 筋斗云导航栏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        body {
            background-color: #000000;
        }

        div {
            position: relative;
            width: 960px;
            height: 40px;
            margin: 100px auto;
            background-color: #fff;

        }

        ul {
            position: absolute;
        }

        ul li {
            float: left;
            list-style: none;
            width: 120px;
            height: 40px;
            text-align: center;
        }

        span {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            background: url(images/筋斗云背景.jpg) no-repeat center/120px 40px;
            width: 120px;
            height: 40px;
            z-index: 0;
        }
    </style>
</head>
<!-- 
    功能需求
    鼠标经过某个小li 筋斗云跟这到当前小li的位置
    鼠标离开这个小li  筋斗云复原为原来的位置
    鼠标点击了某个小li 筋斗云就会留在点击这个小li的位置
 -->

<body>
    <div>
        <span></span>
        <ul class="ul1">
            <li>首页新闻</li>
            <li>师资力量</li>
            <li>活动策划</li>
            <li>企业文化</li>
            <li>招聘信息</li>
            <li>公司简介</li>
            <li>上海校区</li>
            <li>广州校区</li>
        </ul>
    </div>
    <script>
        var span = document.querySelector('span');
        console.log(span);
        var current = 0;
        //current  作为筋斗云的起始位置
        var lis = document.querySelectorAll('li');
        console.log(lis);
        for (var i = 0; i < lis.length; i++) {
            lis[i].addEventListener('mouseenter', function () {
                animate(span, this.offsetLeft);
            })
            lis[i].addEventListener('mouseleave', function () {
                animate(span, current);
            })
            lis[i].addEventListener('click', function () {
                current = this.offsetLeft;
                //  把位置固定住
            })
        }
        function animate(obj, target, hanshu) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                    if (hanshu) {
                        hanshu();
                    }
                }

                obj.style.left = obj.offsetLeft + step + 'px';

            }, 15)
        }
    </script>
</body>

</html>

6、移动端网页特效

6.1 概述

1、触屏事件概述

移动端浏览器兼容性较好，我们不需要考虑以前js的兼容性问题可以放心的使用原生js书写效果但是移动端也有自己独特的地方比如触屏事件touch 也称触摸事件 Android和ios都有

touch对象代表一个触摸点触摸点可能事一根手指也可能事一根触摸笔触碰事件可响应用户手指（或者触控笔）对屏幕或者触控板操作

常见的触屏事件如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RteicClT-1620388130917)(pink老师js869集笔记.assets/image-20200716172325858.png)]

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        //  1、手机触摸DOM元素事件，这里的摸就相当于点击
        div.addEventListener('touchstart', function () {
            console.log('我摸了你');

        });
        //  2、手机在DOM元素身上移动，就是当你点击后，不松手继续移动
        div.addEventListener('touchmove', function () {
            console.log('我继续摸了你');

        });
        //  3、手机在一个DOM元素离开时，就是鼠标按下松开的时候
        div.addEventListener('touchend', function () {
            console.log('轻轻的我走了');

        });
    </script>

6.2 触摸事件对象

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测出点的移动，出点的增加和减少，等等

touchstart touchmove touchend 三个事件都会有各自事件对象

触摸事件对象常见对象列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AS6HKxpR-1620388130918)(pink老师js869集笔记.assets/image-20200716172358634.png)]

//  touches正在触摸屏幕的所有手指的列表 就是有几个手指在触摸屏幕
//  targetTouches 正在触摸当前DOM元素的手指列表 就是有几个手指在触摸DOM元素
//  如果侦听的是一个DOM元素，他们两个是一样的

//  changedTouches手指状态发生改变的列表 从无到有 或者从有到无
//  当我们手指离开屏幕的时候，就没有了touches和targetTouches列表
//  但是会有changedTouches
//  最常用 targetTouches

6.3 移动端拖动元素

1、touchstart touchmove touchend 可以实现拖动元素

2、但是拖动元素需要当前手机的坐标值我们可以使用 targetTouches[0]里面的pageX 、pageY的值

3、移动端拖动的原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置+手指移动的距离

4、手指滑动的距离：手指滑动中的位置减去手指刚开始触摸的位置

拖动元素三部曲

1、触摸元素 touchstart 获取手指初始坐标，同时获得盒子原来的位置

2、移动手指touchmove 计算手指的滑动距离并且移动盒子

3、离开手指 touchend

注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault()；

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        var startX = 0;// 获取手指初始坐标
        var startY = 0;
        var x = 0; //盒子原来的位置
        var y = 0; //盒子原来的位置
        div.addEventListener('touchstart', function (e) {
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            x = this.offsetLeft;
            y = this.offsetTop;
        })
        div.addEventListener('touchmove', function (e) {
            // 计算手指的移动距离
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            this.style.left = x + moveX + 'px';
            this.style.top = y + moveY + 'px';
            e.preventDefault();//阻止屏幕滚动的默认行为
        })
    </script>
</body>

</html>

6.4 移动端轮播图

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .foucs {
            position: relative;
            overflow: hidden;

        }

        ul {
            overflow: hidden;
            margin-left: -100%;
            width: 500%;
        }

        ul li {
            list-style: none;
            float: left;
            width: 20%;
        }

        img {
            width: 500px;
            height: 100px;
        }



        ol {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 90px;
        }

        ol li {
            width: 5px;
            height: 5px;
            background-color: red;
            list-style: none;
            float: left;
            border-radius: 2px;
            margin-right: 8px;

        }

        .current {
            width: 15px;
        }
    </style>
</head>

<body>
    <div class="foucs">
        <ul>
            <li><img src="images/轮播图-03.jpg" alt=""></li>
            <li><img src="images/轮播图-01.jpg" alt=""></li>
            <li><img src="images/轮播图-02.jpg" alt=""></li>
            <li><img src="images/轮播图-03.jpg" alt=""></li>
            <li><img src="images/轮播图-01.jpg" alt=""></li>
        </ul>
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script>
        window.addEventListener('load', function () {
            var foucs = document.querySelector('.foucs');
            console.log(foucs);

            var ul = foucs.children[0];
            console.log(ul);
            // 获得foucs的宽度
            var w = foucs.offsetWidth;
            console.log(w);
            // 利用定时器轮播图片
            var index = 0;
            var flag = false;
            var ol = foucs.children[1];
            var timer = setInterval(function () {
                index++;
                var translatex = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }, 2000)
            // 等着我们过度完成之后，再去判断  监听过度结束事件
            ul.addEventListener('transitionend', function () {
                // 无缝滚动
                if (index >= 3) {
                    index = 0;
                    // 去掉过度效果 快速来到目标位置
                    ul.style.transition = 'none';
                    var translatex = -index * w;
                    ul.style.transform = 'translateX(' + translatex + 'px)';
                } else if (index < 0) {
                    index = 2;
                    index = 0;
                    // 去掉过度效果 快速来到目标位置
                    ul.style.transition = 'none';
                    var translatex = -index * w;
                    ul.style.transform = 'translateX(' + translatex + 'px)';
                }
                // 小圆点跟随变化
                ol.querySelector('.current').classList.remove('current');
                ol.children[index].classList.add('current');
            });
            // 手指滑动轮播图
            var startX = 0;
            var moveX = 0;
            ul.addEventListener('touchstart', function (e) {
                startX = e.targetTouches[0].pageX;
                clearInterval(timer);
            });
            ul.addEventListener('touchmove', function (e) {
                moveX = e.targetTouches[0].pageX - startX;
                var translatex = -index * w + moveX;
                ul.style.transition = 'none';
                ul.style.transform = 'translateX(' + translatex + 'px)';
                flag = true;
                e.preventDefault();
            });
            ul.addEventListener('touchend', function () {
                if (flag) {
                    if (Math.abs(moveX) > 50) {
                        if (moveX > 0) {
                            index++;
                        }
                        else {
                            index++;
                        }
                        var translatex = -index * w;
                        ul.style.transition = 'all .3s';
                        ul.style.transform = 'translateX(' + translatex + 'px)';
                    }
                    else {
                        var translatex = -index * w;
                        ul.style.transition = 'none';
                        ul.style.transform = 'translateX(' + translatex + 'px)';
                    }
                }
                //  重新开启定时器
                clearInterval(timer);
                timer = setInterval(function () {
                    index++;
                    var translatex = -index * w;
                    ul.style.transition = 'all .3s';
                    ul.style.transform = 'translateX(' + translatex + 'px)';
                }, 2000)
            })
        })
    </script>
</body>

</html>

classList 切换类追加类删除类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zViRwPIY-1620388130919)(pink老师js869集笔记.assets/image-20200716172533359.png)]

切换类就是你点击一下添加这个类，再点击一点，就删除这个类

6.5 移动端回到顶部

移动端click 是有延迟的

移动端的click事件会有300ms的延迟原因是移动端屏幕双击会缩放页面

清除这个300ms延迟的方法

1、禁止缩放

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o8Oip0o3-1620388130920)(pink老师js869集笔记.assets/image-20200716172550426.png)]

2、利用touch事件子级封装这个事件解决300ms延迟

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xs4X8zAm-1620388130921)(pink老师js869集笔记.assets/image-20200716172605084.png)]

3、使用插件 fastclick

地址：https://github.com/ftlabs/fastclick

在lib 里面直接复制它的js代码

使用步骤

引入JS文件
在页面中再写一个script写入下面的代码
直接写自己的代码就可以了

if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded', function() {
		FastClick.attach(document.body);
	}, false);
}

6.6 移动端常用开发插件

6.6.1 swiper插件

地址：https://www.swiper.com.cn

使用步骤

引入min.css min.js
打开相应的demo 直接复制它的结构 css样式也要复制到我们自己的css文件夹里面
打开相应的demo 复制它的js 到我们自己的js文件中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3EsXvBnM-1620388130921)(pink老师js869集笔记.assets/image-20200716172616771.png)]

其他插件

superslide:http://www.superslide2.com/

iscroll:https://gitub.com/cubiq/iscroll

插件使用总结

确认插件实现的功能
去官网查看使用说明
下载插件
打开demo实例文件，查看需要引入的相关文件，并且引入
复制demo实例文件中的结构html，样式css以及js代码

常用框架 Bootstrap Vue Angular Reactden等

常用插件swiper superslide iscroll等

6.6.2 Bootstrap插件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oap8awRb-1620388130922)(pink老师js869集笔记.assets/image-20200716172628174.png)]

7、本地存储

7.1 本地存储特性

数据存储在用户浏览器中
设置、读取方便、甚至页面刷新不丢失数据
容量较大，sessionStorage约5M、localStorage约20M
只能存储字符串，可以将对象JSON.stringify()编码后存储

7.2 window.sessionStorage

生命周期为关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式存储使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bi71GyrX-1620388130922)(pink老师js869集笔记.assets/image-20200716172647708.png)]

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function () {
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            //第一个参数就是名字，第二个就是值
        })
        get.addEventListener('click', function () {
            console.log(sessionStorage.getItem('uname'));
            // 写的参数就是你想获取的参数的名字
        })
        remove.addEventListener('click', function () {
            sessionStorage.removeItem('uname');
        })
        del.addEventListener('click', function () {
            sessionStorage.clear();
        })
    </script>
</body>

7.3 window.localStorage

生命周期永久生效，除非手动删除否则关闭页面也会存在
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gCrbHquM-1620388130923)(pink老师js869集笔记.assets/image-20200716172700352.png)]

案例：记住用户名

<body>
    <input type="text" id="username"><input type="checkbox" id="remember">记住用户名
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
        if (localStorage.getItem('username')) {
            username.value = localStorage.getItem('username');
            remember.checked = true;
        }
        remember.addEventListener('change', function () {
            if (this.checked) {
                localStorage.setItem('username', username.value)
            }
            else {
                localStorage.removeItem('username');
            }
        })
    </script>
</body>

jQuery入门

8.1 jQuery 概述

javascript库:即library，是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库，就是这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等

简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高校的使用这些封装好的功能了。

比如jQuery，就是为了快速方便的操作DOM,里面基本都是函数（方法）

常见的js库

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-48rfpalW-1620388130923)(pink老师js869集笔记.assets/image-20200716172738150.png)]

8.2 jQuery的概念

jQuery是一个快速、简介的JavaScript库，其设计的宗旨是“write less,Do More”，提倡写更少的代码，做更多的事情

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZuBCbRA-1620388130924)(pink老师js869集笔记.assets/image-20200716172751464.png)]

8.2 jQuery优点

轻量级。核心文件才几十KB，不会影响页面加载速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程，隐式迭代
对事件、样式、动画支持，大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
免费、开源

8.3 使用

8.3.1 等着页面加载完毕再加载JS

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mr4pxzh3-1620388130924)(pink老师js869集笔记.assets/image-20200716172807791.png)]

8.3.2 jQuery对象和DOM对象区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U8w3dQ1I-1620388130925)(pink老师js869集笔记.assets/image-20200716172829965.png)]

jQuery对象和DOM对象之间是可以相互转换的

因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换成DOM对象才能使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j5il9LoH-1620388130926)(pink老师js869集笔记.assets/image-20200716172847298.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-USV7xYVS-1620388130926)(pink老师js869集笔记.assets/image-20200716172900635.png)]

8.4 选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kjJimR1U-1620388130927)(pink老师js869集笔记.assets/image-20200716172920841.png)]

8.5 设置属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ap4iYb9q-1620388130927)(pink老师js869集笔记.assets/image-20200716172932782.png)]

8.6 隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

8.7 jQuery 筛选选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uoLZjxej-1620388130928)(pink老师js869集笔记.assets/image-20200716172945821.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FRzmgNai-1620388130929)(pink老师js869集笔记.assets/image-20200716172955515.png)]

parent返回的是距离最近的父级元素

chidlren是最亲一代的子级元素就是亲儿子相当于子代选择器 ul>li

find 可以选择儿子和孙子相当于后代选择器

siblings查找不包括自己的同辈元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WPrKwBi0-1620388130930)(pink老师js869集笔记.assets/image-20200716173012697.png)]

8.8 案例：鼠标放上去显示，离开隐藏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k5jDbkea-1620388130930)(pink老师js869集笔记.assets/image-20200716173022602.png)]

8.9 排他思想

<script src="jQuery-min.js"></script>

</head>

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function () {
            // 1 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function () {
                $(this).css('background', "pink");
                $(this).siblings("button").css("background", "");
            });
        })
    </script>
</body>

8.10 JQ 左右tab栏切换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QONOnwOf-1620388130931)(pink老师js869集笔记.assets/image-20200716173050016.png)]

<script src="jQuery-min.js"></script>
    <style>
        .wrapper {
            width: 400px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid yellow;
        }

        #left {
            float: left;
        }

        #content {
            position: relative;
            float: right;
        }

        #content div {
            width: 200px;
            height: 200px;
        }

        .red {
            position: absolute;
            top: 0;
            left: -200px;
            background-color: red;

        }

        .green {
            position: absolute;
            top: 0;
            left: -200px;
            background-color: green;

        }

        .black {
            position: absolute;
            top: 0;
            left: -200px;
            background-color: black;

        }
    </style>
</head>

<body>
    <div class="wrapper">
        <ul id="left">
            <li><a href="#">红色</a></li>
            <li><a href="#">绿色</a></li>
            <li><a href="#">黑色</a></li>
        </ul>
        <div id="content">
            <div class="red"></div>
            <div class="green"></div>
            <div class="black"></div>

        </div>
    </div>
    <script>
        $(function () {
            $("#left li").mouseover(function () {
                var index = $(this).index();
                console.log(index);
                $("#content div").eq(index).show();
                $("#content div").eq(index).siblings().hide();
            })
        })
    </script>
</body>

8.11 JQ操作CSS 添加类删除类

1、参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须佳引号，值如果是数字可以不用跟单位和引号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fy0dsxj9-1620388130932)(pink老师js869集笔记.assets/image-20200716173104635.png)]

2、参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属于可以不用加引号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1FWzaKkx-1620388130932)(pink老师js869集笔记.assets/image-20200716173116563.png)]

数字可以不加引号，属性也可以不加引号，如果是符合属性则必须采取驼峰命名法，属性值不是引号，则必须加引号

添加类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vbMKBwwu-1620388130933)(pink老师js869集笔记.assets/image-20200716173132530.png)]

删除类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-etU7ZYAC-1620388130934)(pink老师js869集笔记.assets/image-20200716173141898.png)]

切换类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hawzi5L0-1620388130934)(pink老师js869集笔记.assets/image-20200716173152839.png)]

注意：

1、原生js的className 会覆盖原先的类

2、jQuery的addClass 不会覆盖原先的类

8.12 JQ效果（动画效果）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FF1huZqO-1620388130935)(pink老师js869集笔记.assets/image-20200716173211661.png)]

show()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3piPf6Xw-1620388130936)(pink老师js869集笔记.assets/image-20200716173222379.png)]

hide()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Xy6wS4K-1620388130936)(pink老师js869集笔记.assets/image-20200716173233912.png)]

切换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Yzn4fiz-1620388130937)(pink老师js869集笔记.assets/image-20200716173246606.png)]

向下滑动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9QTTSg18-1620388130937)(pink老师js869集笔记.assets/image-20200716173302196.png)]

向上滑动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FTBQZCXl-1620388130938)(pink老师js869集笔记.assets/image-20200716173312775.png)]

滑动切换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ewUOWwIR-1620388130939)(pink老师js869集笔记.assets/image-20200716173323486.png)]

事件切换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VhbuQyqz-1620388130939)(pink老师js869集笔记.assets/image-20200716173336435.png)]

第一个函数是鼠标经过第二个是鼠标离开的函数

如果hover 只写了一个函数，那么鼠标经过和鼠标离开都会触发这个函数

动画队列及其停止排队方法

1、动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

2、停止排队

stop()

1、stop()方法用于停止动画或者效果

2、注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-je1l0J9s-1620388130940)(pink老师js869集笔记.assets/image-20200716173401081.png)]

淡入效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Q7pSvjd-1620388130941)(pink老师js869集笔记.assets/image-20200716173413840.png)]

淡出效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5bhRU19U-1620388130941)(pink老师js869集笔记.assets/image-20200716173425842.png)]

渐进效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jRiasC0n-1620388130942)(pink老师js869集笔记.assets/image-20200716173436096.png)]

案例：选中的高亮显示，其他变暗

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vBRgt4St-1620388130943)(pink老师js869集笔记.assets/image-20200716173446338.png)]

自定义动画

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jNVJIqtJ-1620388130943)(pink老师js869集笔记.assets/image-20200716173455446.png)]

注意，第一个参数必须是对象的格式

案例：手风琴

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OM2ktVPP-1620388130944)(pink老师js869集笔记.assets/image-20200716173536853.png)]

8.13 JQ属性操作

获取属性值 element.prop(“属性名”) 获取的只能是固有的属性值;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oruW3jZo-1620388130944)(pink老师js869集笔记.assets/image-20200716173546660.png)]

设置属性值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xmWgmLyy-1620388130945)(pink老师js869集笔记.assets/image-20200716173602521.png)]

前面的prop方法只能是设置固有的属性，不能设置自定义的属性

自定义的属性获取和修改

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yar8wVkO-1620388130945)(pink老师js869集笔记.assets/image-20200716173616315.png)]

案例：购物车全选案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-whxCatiw-1620388130946)(pink老师js869集笔记.assets/image-20200716173628415.png)]

选择器：checked 检查有几个按钮被选中了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WvGgrROz-1620388130946)(pink老师js869集笔记.assets/image-20200716173654553.png)]

8.14 JQ内容文本值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YLl0QDUA-1620388130947)(pink老师js869集笔记.assets/image-20200716173729135.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q7iJttVt-1620388130948)(pink老师js869集笔记.assets/image-20200716173739635.png)]

案例：加减商品数量案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0nmyB14a-1620388130948)(pink老师js869集笔记.assets/image-20200716173759065.png)]

修改商品的小计

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s1gLazp3-1620388130949)(pink老师js869集笔记.assets/image-20200716173819143.png)]

加号模块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2i4lCH1m-1620388130950)(pink老师js869集笔记.assets/image-20200716173828339.png)]

减号模块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p25fIVe7-1620388130951)(pink老师js869集笔记.assets/image-20200716173843201.png)]

parents(“选择器”) 可以返回指定的祖先元素

toFixed(数字)保留几位小数的操作

8.15 遍历元素 each()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vlIB24w7-1620388130951)(pink老师js869集笔记.assets/image-20200716173918690.png)]

第二个参数是DOM对象，一定要转化为jq对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f4wpskoo-1620388130952)(pink老师js869集笔记.assets/image-20200716173936745.png)]

案例：购物车

结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0nAzDzEF-1620388130953)(pink老师js869集笔记.assets/image-20200716173952221.png)]

代码：

$(function() {
    // 1. 全选 全不选功能模块
    // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
    // 事件可以使用change
    $(".checkall").change(function() {
        // console.log($(this).prop("checked"));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
        if ($(this).prop("checked")) {
            // 让所有的商品添加 check-cart-item 类名
            $(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(".cart-item").removeClass("check-cart-item");
        }
    });
    // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
    $(".j-checkbox").change(function() {
        // if(被选中的小的复选框的个数 === 3) {
        //     就要选中全选按钮
        // } else {
        //     不要选中全选按钮
        // }
        // console.log($(".j-checkbox:checked").length);
        // $(".j-checkbox").length 这个是所有的小复选框的个数
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        if ($(this).prop("checked")) {
            // 让当前的商品添加 check-cart-item 类名
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    });
    // 3. 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
    $(".increment").click(function() {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
        // 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格  就是 商品的小计
        // 当前商品的价格 p  
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        console.log(p);
        var price = (p * n).toFixed(2);
        // 小计模块 
        // toFixed(2) 可以让我们保留2位小数
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
        getSum();
    });
    $(".decrement").click(function() {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);
        // var p = $(this).parent().parent().siblings(".p-price").html();
        // parents(".p-num") 返回指定的祖先元素
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        console.log(p);
        // 小计模块 
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });
    //  4. 用户修改文本框的值 计算 小计模块  
    $(".itxt").change(function() {
        // 先得到文本框的里面的值 乘以 当前商品的单价 
        var n = $(this).val();
        // 当前商品的单价
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });
    // 5. 计算总计和总额模块
    getSum();

    function getSum() {
        var count = 0; // 计算总件数 
        var money = 0; // 计算总价钱
        $(".itxt").each(function(i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
        $(".p-sum").each(function(i, ele) {
            money += parseFloat($(ele).text().substr(1));
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }
    // 6. 删除商品模块
    // (1) 商品后面的删除按钮
    $(".p-action a").click(function() {
        // 删除的是当前的商品 
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // (2) 删除选中的商品
    $(".remove-batch").click(function() {
        // 删除的是小的复选框选中的商品
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    });
    // (3) 清空购物车 删除全部商品
    $(".clear-all").click(function() {
        $(".cart-item").remove();
        getSum();
    })
})

8.16 创建元素添加元素删除元素

创建元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ttE3fToj-1620388130953)(pink老师js869集笔记.assets/image-20200716174007517.png)]

添加元素

内部添加

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qrc1emlH-1620388130954)(pink老师js869集笔记.assets/image-20200716174018394.png)]

外部添加

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mq3UPUjh-1620388130954)(pink老师js869集笔记.assets/image-20200716174028920.png)]

删除元素 empty remove

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NcTvLYoy-1620388130955)(pink老师js869集笔记.assets/image-20200716174038894.png)]

8.17 事件注册解绑事件

1、单个事件注册

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ae9mVhvQ-1620388130956)(pink老师js869集笔记.assets/image-20200716174049035.png)]

2、用on（）方法在匹配元素上绑定一个或多个事件的事件处理函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nPCqTu8x-1620388130956)(pink老师js869集笔记.assets/image-20200716174133611.png)]

 $("div").on({
            mouseenter: function () {
                $(this).css("background", "red");
            },
            click: function () {
                $(this).css("background", "green");
            }
        })

on（）方法的优点

1、可以绑定多个事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pfmfE5Vb-1620388130957)(pink老师js869集笔记.assets/image-20200716174153338.png)]

2、on可以实现事件委托

$(在页面中本来就存在的父元素).on(什么事件，绑定给谁，function（）{})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8320JYB0-1620388130958)(pink老师js869集笔记.assets/image-20200716174208205.png)]

3、动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wjoO5SQZ-1620388130958)(pink老师js869集笔记.assets/image-20200716174219122.png)]

案例：微博发布

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zgo9xvcR-1620388130959)(pink老师js869集笔记.assets/image-20200716174229225.png)]

解绑事件

off() 解除绑定的所有事件

off(“click”) 解除绑定的click

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y0pmQtxa-1620388130960)(pink老师js869集笔记.assets/image-20200716174246003.png)]

8.18 自动触发事件 trigger()

三种方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mseuUj31-1620388130960)(pink老师js869集笔记.assets/image-20200716174302660.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q92eKndl-1620388130961)(pink老师js869集笔记.assets/image-20200716174316947.png)]

第三种方法不会触发默认行为

8.19 JQ事件对象

阻止默认行为阻止冒泡

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lBE3DkfA-1620388130962)(pink老师js869集笔记.assets/image-20200716174328291.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pi8SG5PS-1620388130962)(pink老师js869集笔记.assets/image-20200716174350337.png)]

8.20 JQ拷贝对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ocdPr2lZ-1620388130963)(pink老师js869集笔记.assets/image-20200716174403375.png)]

会覆盖以前的数据

浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象

深拷贝是完全拷贝如果里面有不冲突的属性则会合并到一起

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PumGwf0R-1620388130964)(pink老师js869集笔记.assets/image-20200716174414618.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-24psl6Le-1620388130964)(pink老师js869集笔记.assets/image-20200716174424878.png)]

8.21 JQ多库共存

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ggvREfi2-1620388130965)(pink老师js869集笔记.assets/image-20200716174434453.png)]

把$修改为了suibian

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vMh0Z2Z2-1620388130966)(pink老师js869集笔记.assets/image-20200716174446108.png)]

8.22 JQ插件

地址

1.JQ插件库：http://www.jq22.com/

2.JQ之家：http://www.htmleaf.com/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gPlobFd0-1620388130966)(pink老师js869集笔记.assets/image-20200716174458542.png)]

图片的懒加载

懒加载用第一个插件库的 EasyLazyload.js

引入懒加载必须要在body最下面然后调用懒加载

全屏滚动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UuiskeJl-1620388130967)(pink老师js869集笔记.assets/image-20200716174510965.png)]

bootstrap插件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6AjEdzQa-1620388130968)(pink老师js869集笔记.assets/image-20200716174522287.png)]

要引入bootstrap的css bootstrap的js 和jq的js 才算成功

8.23 JQ尺寸位置操作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nmr8OjoF-1620388130969)(pink老师js869集笔记.assets/image-20200716174533896.png)]

Width 里面跟参数则是修改宽度

以上参数如果是空则是获取相应值，返回的是数字型

如果参数为数字，则是修改相应值

参数可以必须写单位

jq位置

1、获取设置距离文档的位置（偏移）offset 跟父盒子没有任何关系

$(“div”).offset() 这样返回的是一个对象加上.top返回的是距离顶部的元素

$("div").offset({
           top:200,
           left:200
       });
       这样是修改盒子的位置

8.23.1 offset() 设置或获取元素偏移 position() 页面滚动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RA3pKgMJ-1620388130969)(pink老师js869集笔记.assets/image-20200716174608052.png)]

2。position()

1、这个方法只能获取不能设置

2、获取距离带有定位父级位置偏移

3、返回的也是一个对象

3、页面滚动事件

$(window).scroll

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xEL2GWP6-1620388130970)(pink老师js869集笔记.assets/image-20200716174704104.png)]

scrolltop 这个设置参数表示页面卷去多少

案例：带有动画返回顶部

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dLh529ga-1620388130971)(pink老师js869集笔记.assets/image-20200716174813913.png)]

案例：电梯导航

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery-min.js"></script>
    <style>
        .ce {
            position: fixed;
            top: 100px;
            left: 20px;
        }

        .w {
            width: 1200px;
            margin: 0 auto;
        }

        .one,
        .two,
        .three,
        .four,
        .five {
            height: 600px;
            color: #ffffff;

        }

        .one {
            background-color: black;
        }

        .two {
            background-color: red;
        }

        .three {
            background-color: yellow;
        }

        .four {
            background-color: green;
        }

        .five {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="ce">
        <div>家用电器</div>
        <div>手机通讯</div>
        <div>第三个</div>
        <div>第四个</div>
        <div>第五个</div>
    </div>
    <div class="floor">
        <div class="w one">家用电器</div>
        <div class="w two">手机通讯</div>
        <div class="w three">第三个</div>
        <div class="w four">第四个</div>
        <div class="w five">第五个</div>
    </div>
    <script>
        $(".ce div").click(function () {
            console.log($(this).index());
            var current = $(".floor .w").eq($(this).index()).offset().top
            // 选出对应索引号的内容区的盒子  计算它的offset().top
            $("body,html").stop().animate({
                scrollTop: current
            })
        })
        //  注意：
        /*
        如果电梯导航栏 采用了到达某个位置显示的效果则需要
        1、把内容包装成一个函数，在页面加载的时候就要调用

        电梯导航栏如果某个被点击则需要做出相应的变化
        则需要这样
        $(this).addClass("某个类").siblings().removeClass()

        当我们滚动内容。电梯导航也做出相应的变化
        这个要写在页面滚动模块里面

        $(window).scroll(function(){
           $(".floor .w").each(function(i,ele){
               if($(document).scrollTop()>=$(ele).offset().top){
                    添加类删除类
               }
           })
       })
        */

    </script>
</body>

</html>

pink老师的：

$(function() {
    // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
    // 节流阀  互斥锁 
    var flag = true;
    // 1.显示隐藏电梯导航
    var toolTop = $(".recommend").offset().top;
  //recommed是内容的最开始的部分
    toggleTool();// 这是侧边栏 就是  导航栏 

    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }

    $(window).scroll(function() {
        toggleTool();
        // 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名


        if (flag) {
            $(".floor .w").each(function(i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();

                }
            })
        }



    });
    // 2. 点击电梯导航页面可以滚动到相应内容区域
    $(".fixedtool li").click(function() {
        flag = false;
        console.log($(this).index());
        // 当我们每次点击小li 就需要计算出页面要去往的位置 
        // 选出对应索引号的内容区的盒子 计算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 页面动画滚动效果
        $("body, html").stop().animate({
            scrollTop: current
        }, function() {
            flag = true;
        });
        // 点击之后，让当前的小li 添加current 类名 ，姐妹移除current类名
        $(this).addClass("current").siblings().removeClass();
    })
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QWcginuz-1620388130971)(pink老师js869集笔记.assets/image-20200716174832888.png)]

JavaScript面向对象

1.1 含义

两大编程思想

1、面向过程

2、面向对象

面向过程编程 POP（Process-oriented programming）

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步的实现，使用的时候再一个一个的依次调用就可以了

举个例子把大象放进冰箱

1、打开冰箱门 2、把大象装进去 3、关上门

面向对象编程 OOP

面向对象是把事物分解成一个个对象，然后由对象之间分工与合作

举个例子：将大象装进冰箱，面向对象做法

1、大象对象

进去

2、冰箱对象

打开

关闭

3、使用大象和冰箱的功能

面向对象特点封装性继承性多态性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NAUy09XO-1620388130972)(pink老师js869集笔记.assets/image-20200716174956292.png)]

面向过程和面向对象对比

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8BVh14Wz-1620388130972)(pink老师js869集笔记.assets/image-20200716175005014.png)]

面向过程就像是蛋炒饭面向对象写出来的程序就像是一份盖浇饭

面向对象更贴近我们的实际生活

ES6中的类和对象

面向对象的思维特点

1、抽取（抽象）对象共用的属性和行为组织（封装）成一个类（模板）

2、对类进行实例化，获取类的对象

面对对象编程我们考虑的是有哪些对象，按照面向对象思维特点不断的创建对象，使用对象，指挥对象做事情

对象：对象是一个具体的事物，一本书、一辆汽车、一个人等

Js中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等

对象是由属性和方法组成的

属性：事物的特征，在对象中用属性来表示（常用名词）

方法：事物的行为，在对象中用方法来表示（常用动词）

类class

类抽象了对象的公共部分，它泛指某一大类

对象特指某一个，通过实例化一个具体的的对象

1.2 创建类

创建类

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gntQqt3r-1620388130973)(pink老师js869集笔记.assets/image-20200716175018909.png)]

1.3 构造函数

构造函数 constructor

constructor（）方法是类的构造函数（默认方法），用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法，如果没有显示定义，类的内部会自动给我们创建一个 constructor（）

<script>
        //  1 创建类 class  创建一个明星类
        class Star {
            constructor(uname) {
                this.uname = uname;
            }
        }

        //  2 利用类创建对象 new
        var ldh = new Star('刘德华');
        console.log(ldh.uname);
        /* 
            注意 
            1、通过class 关键字创建类，类名我们还是习惯性定义首字母大写
            2、类里面有个constructor 函数，可以接受传递过来的参数，同时返回实例对象
            3、constructor 函数 只要new生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数
            4、生成实例 new 不能省略
            5、最后注意语法规范，创建类 类名后面不需要加小括号，生成实例 类名后面加小括号，构造函数不需要加function
         */

    </script>

1.4 类中添加方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HOcMwESq-1620388130974)(pink老师js869集笔记.assets/image-20200716175103015.png)]

<!-- 

        类中创建方法的要求
        1、我们类里面所有的函数不需要写function
        2、多个函数方法之间不需要添加逗号分隔
        
     -->

1.5 继承 extends supers

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8OAkpVqn-1620388130974)(pink老师js869集笔记.assets/image-20200716175116456.png)]

super关键字，super里面的参数，会传给父元的构造函数里面的形参

super关键字用于访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-njGopyyH-1620388130975)(pink老师js869集笔记.assets/image-20200716175212710.png)]

父类中的this终究指向的是父类的属性，如果不加super ，直接写this.x=x this.y=y 是没有用处的，因为父类的sum指向的还是父类

1、继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的

2、继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法（就近原则）

3、super.say() 调用父类的say 方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ydu1AwmI-1620388130975)(pink老师js869集笔记.assets/image-20200716175246885.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BPhDKkFu-1620388130976)(pink老师js869集笔记.assets/image-20200716175258964.png)]

类里面的注意点

在 es6 没有变量提升
类里面的共有的属性和方法，一定要加this

this的指向

构造函数里面的this 指向的是类的实例化对象
类里面的方法指向的是谁调用指向谁

1.6 追加字符串 element.inserAdjacentHTML

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m8AhBo9D-1620388130977)(pink老师js869集笔记.assets/image-20200716175324548.png)]

Element.inserAdjacentHTML() 此方法支持追加字符串

appendChild不支持追加字符串的子元素

双击事件

双击禁止选中文字代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SVW4jExP-1620388130977)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200509133920077.png)]

文本框里面的文字处于选定状态

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zn6BrB6i-1620388130978)(pink老师js869集笔记.assets/image-20200716175335983.png)]

1.7 构造函数

构造函数

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装盗这个函数里面

再js中，使用构造函数要注意以下两点

1、构造函数用于创建某一类对象，其首字母要大写

2、构造函数要和new一起使用才有意义

在构造函数中，new会执行四件事情

1、在内存中创建一个新的空对象

2、让this指向这个新的对象

3、执行构造函数里面的代码，给这个新对象添加属性和方法

4、返回这个新对象（所以构造函数不需要return）

在构造函数中分为实例成员和静态成员

1、实例成员就是构造函数内部通过this添加的成员 this.什么什么=什么什么

实例成员只能通过实例化的对象来访问

Console.log(ldh.uname)

2、静态成员在构造函数本身上添加的成员 sex 就是静态成员

Star.sex=’男’

静态成员只能通过构造函数来访问

Star.sex

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zmpuCvGR-1620388130979)(pink老师js869集笔记.assets/image-20200716175352243.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ziGbDydF-1620388130979)(pink老师js869集笔记.assets/image-20200716175401080.png)]

1.8 原型对象

构造函数可以通过原型分配的函数是所有对象所共享的

 <!-- 
        构造函数原型  prototype
        构造函数通过原型分配的函数是所有对象所共享的
        js中规定，每一个构造函数都有一个prototype属性，指向另一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有
        我们可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法

        一般情况下，我们的公共属性定义到构造函数里面，公共的方法我们放到原型对象身上

        原型就是一个对象，我们也成为prototype原型对象
        原型的作用：共享方法
     -->
    <script>
        function Star(age) {
            this.age = age
        }
        Star.prototype.sing = function () {
            console.log("我会唱歌");
        }
        var ddg = new Star(20);
        var mmg = new Star(20);
        ddg.sing();
        mmg.sing();
        
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v7L6V3kq-1620388130980)(pink老师js869集笔记.assets/image-20200716175419348.png)]

1.9 对象原型

 <!-- 

        对象原型 _proto_
        对象都会有一个属性__proto__指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在

        1、__proto__对象原型和原型对象prototype是等价的
        2、__proto__对象原型的意义就在于为对象的查找机制提供了一个方法，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype

        对象身上系统自动添加一个__proto__ 指向我们构造函数的原型对象

        查找规则：先看ldh对象身上是否有sing方法，如果有就执行这个对象上的sing  如果没有sing方法，因为有__proto__的存在，就去构造函数原型对象prototype身上去找sing这个方法
     -->

<!-- 

        对象原型（__proto__）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性，constructor我们称为构造函数，因为它值的是构造函数本身
        constructor主要用于记录该对象引用于那个构造函数，它可以让原型对象重新指向原来的构造函数
        很多情况下，我们需要手动的利用constructor 这个属性指回原来的构造函数

      -->
      <script>
          Star.protptype={
              constructor:Star,
              //  不加这句话 会出错误，因为覆盖了
              sing:function(){

              },
              movie:function(){

              }
          }
      </script>

1.10 构造函数、实例、原型对象三者之间的关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iDQSvdIi-1620388130980)(pink老师js869集笔记.assets/image-20200716175433192.png)]

1、Star 构造函数通过 Star.prototype 指向Star 的原型

2、ldh = new Star , ldh 里面有一个_ _ proto _ _ 指向构造函数的原型

3、Star的原型可以通过 Star.prototype.constructor 指回构造函数

4、ldh._ _ proto _ _.constructor 可以指回构造函数，因为 _ _proto _ _ 和prototype 是等价的，其实还是通过原型的consturctor 指回的构造函数

1.11 原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zq156ZV8-1620388130981)(pink老师js869集笔记.assets/image-20200716175445220.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TVzpmO70-1620388130981)(pink老师js869集笔记.assets/image-20201020132418851.png)]

1.12 查找机制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qQ1LZd5j-1620388130982)(pink老师js869集笔记.assets/image-20200716175458283.png)]

 <script>
        function Star(uname, age) {
            this.uname = uname;
            this.age = age
        }
        Star.prototype.sing = function () {
            console.log('我会唱歌');

        }
        var ldh = new Star('刘德华', 19);
        // 1 在构造函数中，里面this指向的对象实例 ldh
        // 2 原型对象函数里面大的this 指向的是  实例对象 ldh
    </script>

1.13 扩展内置对象

可以通过原型对象，对原来的内置对象进行扩展自定义的方法，比如给数组增加自定义求偶数和的功能

<script>
        console.log(Array.prototype);
        Array.prototype.sum = function () {
            var sum = 0;
            for (var i = 0; i < this.length; i++) {
                sum = sum + this[i];
            }
            return sum;
        }
        var arr = [1, 2, 3];
        console.log(arr.sum());

    </script>

1.13.1 call()

call（）

调用这个函数，并且修改函数运行时的this指向

fun.call(thisArg,arg1,arg2,……)

thisArg:当前调用函数this的指向对象

arg1,arg2:传递的其他参数

<script>
        function fn(x, y) {
            console.log('你是谁');
            console.log(this);
            console.log(x + y);


        }
        var o = {
            name: 'andy'
        };
        //  fn();
        // 1.call（） 可以调用函数
        // fn.call();
        // 2.call（） 可以改变这个函数的this指向
        fn.call(o, 1, 2)
    </script>

jiey哦那个父构造函数继承属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r8XIl2ti-1620388130982)(pink老师js869集笔记.assets/image-20200716175519359.png)]

子类如何继承父类的方法，并且修改子构造函数的方法不会影响父

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zJYTOPwF-1620388130983)(pink老师js869集笔记.assets/image-20200716175530848.png)]

1.14 es5新增的方法

1.14.1 数组方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NWsKl0Df-1620388130983)(pink老师js869集笔记.assets/image-20200716175543254.png)]

1.14.1.1 forEach() 遍历数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xG7Ylnty-1620388130984)(pink老师js869集笔记.assets/image-20200716175619732.png)]

1.14.1.2 filer()筛选数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O3UVoJEi-1620388130985)(pink老师js869集笔记.assets/image-20200716175632029.png)]

最后输出的则是 66 88

查找数组中是否有符合条件的元素

1.14.1.3 some()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yOqtLqRd-1620388130985)(pink老师js869集笔记.assets/image-20200716175758601.png)]

在forEach 里面 return 不会终止遍历

在some里面遇到return true 就是终止遍历迭代效率更高

在filter里面遇到return 也不会终止迭代

查询数组中的唯一一个元素用some是最好的选择

案例：查询商品

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 500px;

        }
    </style>
</head>

<body>
    <div class="search">
        按照价格查询：<input type="text" class="start"> - <input type="text" class="end"> <button
            class="search-price">搜索</button> 按照商品名称查询：<input type="text" class="product"> <button
            class="search-pro">查询</button>
    </div>
    <table cellpadding=0 cellspacing=0 border="1px solid #000">
        <thead>
            <tr>
                <th>id</th>
                <th>产品名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        var data = [{
            id: 1,
            pname: '小米',
            price: 3999
        }, {
            id: 2,
            pname: 'oppo',
            price: 999
        }, {
            id: 3,
            pname: '荣耀',
            price: 1299
        }, {
            id: 4,
            pname: '华为',
            price: 1999
        }];
        // 获取相应的元素
        var tbody = document.querySelector('tbody');
        // 把数据渲染到页面中
        setDate(data);
        function setDate(mydata) {
            tbody.innerHTML = '';
            mydata.forEach(function (value) {
                var tr = document.createElement('tr');
                tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
                tbody.appendChild(tr);
            })
        }
        // 3 根据价格查询商品
        var search_price = document.querySelector('.search-price');
        var start = document.querySelector('.start')
        var end = document.querySelector('.end')
        search_price.addEventListener('click', function () {
            var newDate = data.filter(function (value) {
                return value.price >= start.value && value.price <= end.value
            })
            console.log(newDate);
            setDate(newDate);
        })
        //  按照商品名称查询
        // 如果查找数组中唯一的元素，一般情况下用some
        var product = document.querySelector('.product');
        var search_pro = document.querySelector('.search-pro');

        search_pro.addEventListener('click', function () {
            var arr = [];
            data.some(function (value) {
                if (value.pname === product.value) {
                    arr.push(value);
                    return true//必须写 true
                }
            })
            setDate(arr);
        })
    </script>
</body>

</html>

1.14.2 字符串方法

1.14.2.1 trim() 字符串两端删除空白字符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-grtEenOn-1620388130986)(pink老师js869集笔记.assets/image-20200716175934402.png)]

1.14.3 对象方法

1.14.3.1 Object.keys() 用于获取对象所有的属性返回的是一个数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rAcOeFtk-1620388130987)(pink老师js869集笔记.assets/image-20200716175946005.png)]

1.14.3.2 给对象添加新属性或者修改原有的属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XcAMHomN-1620388130987)(pink老师js869集笔记.assets/image-20200716180005327.png)]

Prop的值是字符串形式的要加引号 ennumerable 默认是false 则不允许遍历

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7avmPGna-1620388130988)(pink老师js869集笔记.assets/image-20200716180016142.png)]

1.15 函数进阶

1.15.1 定义函数

1、函数定义的方式

1、通过函数声明方式

2、函数表达式（匿名函数）方式 Var fun=function(){}

3、利用new Function

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nXqvZjdI-1620388130988)(pink老师js869集笔记.assets/image-20200716180036270.png)]

利用new Function的时候里面的参数、函数体必须用引号括起来

所有函数都是Function的实例（对象）

函数也属于对象，万物皆对象

1.15.2 构造函数原型对象对象实例三者关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EOm4KUSi-1620388130989)(pink老师js869集笔记.assets/image-20200716180047382.png)]

1.15.3 函数调用方式

<script>
       /* 
            函数的调用方式
            1、普通函数
            2、对象的方法
            3、构造函数
            4、绑定事件函数
            5、定时器函数
            6、立即执行函数
        */
        // 1、普通函数
        function fn(){
            console.log('人生的顶峰');
            
        }
        /* 
            普通函数 调用方式
            1、 fn(); 格式：函数名+（）;
            2、 fn.call()  格式：函数名.call()
         */

         // 2、对象的方法
         var o={
             sayHi:function(){
                 console.log('人生的顶峰');
                 
             }
         }
         /* 
            对象的方法 调用方式
            o.sayHi()   格式：对象名.方法名+（）
          */

          // 3、构造函数
          function Star(){

          }
          new Star();
          /* 
            构造函数  调用方式
            new 构造函数名+()

           */

           // 4、绑定事件函数
           btn.οnclick=function(){

           }
           /* 
                绑定事件函数 调用方式
                点击按钮就可以调用
            */

            // 5、定时器函数
            setInterval(function(){},100)
            //这个函数是定时器自动1秒调用一次的函数

            // 6、立即执行函数
            (function(){
                console.log('人生巅峰');
                
            })()
            // 立即执行函数 是自己自动调用
    </script>

1.15.4 函数内的this的指向

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KwuGUjXf-1620388130990)(pink老师js869集笔记.assets/image-20200716180148304.png)]

1.15.5 修改函数的指向

1.15.5.1 call（）

改变函数内部this指向

1、call（）方法

作用

1、可以调用这个函数

2、改变函数内的this指向

3、call的主要作用是可以实现继承

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ItLTXEAk-1620388130991)(pink老师js869集笔记.assets/image-20200716180203403.png)]

1.15.5.2 apply方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FPiuMRDC-1620388130991)(pink老师js869集笔记.assets/image-20200716180408899.png)]

作用 1、调用函数 2、改变函数内部的指向，但是它的参数必须是数组形式打印出来是一个字符串 3、apply 的主要应用我们可以利用apply 借助数学内置对象求最大值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CHdA0G6m-1620388130992)(pink老师js869集笔记.assets/image-20200716180424229.png)]

1.15.5.3 bind（）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bQ8wlHCj-1620388130993)(pink老师js869集笔记.assets/image-20200716180434732.png)]

如果我们有的函数我们不需要立即调用，但是又想改变函数的this指向，常用bind方法例如发送短信的案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KKie6gUK-1620388130993)(pink老师js869集笔记.assets/image-20200716180445420.png)]

call apply bind 总结

总结 call apply bind

相同点：都可以改变函数内部的this指向

不同点

1、call 和apply 会调用函数，并且改变函数内部this指向

2、call和apply传递的参数不一样，call传递参数 aru1,aru2…… 形式 apply参数必须是数组形式[arg]

3、bind不会调用函数可以改变函数内部this的指向

主要应用场景

1、call经常做继承

2、apply经常跟数组有关系，比如借助于数学对象实现数组最大值最小值

3、bind不调用函数，但是还想改变this指向，比如改变定时器内部的this指向

1.16 严格模式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oPrUZJ5z-1620388130994)(pink老师js869集笔记.assets/image-20200716180501861.png)]

开启严格模式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-22P7Oeow-1620388130995)(pink老师js869集笔记.assets/image-20200716180511590.png)]

严格模式中的变化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ejd0VqvM-1620388130995)(pink老师js869集笔记.assets/image-20200716180529804.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vt9O6NrI-1620388130996)(pink老师js869集笔记.assets/image-20200716180539452.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DjsUOCor-1620388130997)(pink老师js869集笔记.assets/image-20200716180549789.png)]

1.17 高阶函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HfItht61-1620388130997)(pink老师js869集笔记.assets/image-20200716180600765.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pUu2fNHS-1620388131000)(pink老师js869集笔记.assets/image-20200716180610255.png)]

1.17.1 闭包

闭包

变量作用域

变量根据作用域的不同分为两种，全局变量和局部变量

1、函数内部可以使用全局变量

2、函数外部不可以使用全局变量

3、当函数执行完毕，本作用域的局部变量会销毁

闭包定义

闭包指有权访问另一个函数作用域中变量的函数

简单理解就是，一个作用域可以访问另外一个函数内部的局部变量

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Dsi5HF6-1620388131001)(pink老师js869集笔记.assets/image-20200716180629101.png)]

<script>
        //  闭包的作用：延伸了变量的作用范围
        function fn() {
            var num = 10;
            function fun() {
                console.log(num);
            }
            // 里面的函数，可以访问外面函数局部作用域的变量 内可以访外
            fun();
        }
        fn();
        // fn 就是闭包
        //  被访问的局部变量所在的函数，就是闭包

        //  我们f1外面的作用域可以访问 f2内部的局部变量
        function f1() {
            var num1 = 20;
            function f2() {
                console.log(num1);

            }
            return f2;
            //  这里返回的就是一个函数
        }
        var f = f1();
        f();
        // 类似于
        // var f= function f2() {
                //     console.log(num1);

                // }
    </script>

闭包案例：

<ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        //  闭包应用 点击li输出当前li的索引号
        //  1我们可以利用动态添加属性的方式
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function () {
                console.log(this.index);

            }
        }
        //  2 利用闭包的方式得到当前小li的索引号
        //  经典面试题
        //  立即执行函数格式
        //  (function(){})(这里传递的是参数,实参);
        for (var i = 0; i < lis.length; i++) {
            //  利用for循环 创建了4个立即执行函数
            (function (i) {
                lis[i].onclick = function () {
                    console.log(i);

                }

            })(i);
            //  这里的立即执行函数是个闭包
            //  立即执行函数也成为小闭包，因为立即执行函数里面的任何一个函数都可以使用它的i这个变量
        }
    </script>

<ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        //  闭包应用  -3秒钟之后，打印所有li元素的内容
        var lis=document.querySelector('.nav').querySelectorAll('li');
        for(var i=0;i<lis.length;i++){
            (function(i){
                setTimeout(function(){
                    console.log(lis[i].innerHTML);
                    
                },3000)
            })(i);
        }
    </script>

<script>
        /* 
            闭包应用-计算打车价格
            起步价13（3公里内），之后没多一公里增加5块钱
            如果有拥堵情况，总价格多收取10元
        
         */
        var car = (function () {
            var start = 13;//起步价
            var total = 0;//总价
            return {
                // 正常的价格
                price: function (n) {
                    if (n <= 3) {
                        total = start;
                    }
                    else {
                        total = start + (n - 3) * 5
                    }
                    return total;
                },
                yd: function (flag) {
                    return flag ? total + 10 : total;
                }
            }
        })();
        console.log(car.price(5));
        console.log(car.yd(true));

    </script>

1.17.2 递归

递归函数

定义：如果一个函数再内部可以调用其本身，那么这个函数就是递归函数

简单理解：函数内部自己调用自己，这个函数就是递归函数

递归效果的作用和循环效果一样

由于递归很容易发生“栈溢出”错误，所以必须要加退出条件 return

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-has7vwx5-1620388131001)(pink老师js869集笔记.assets/image-20200716180648468.png)]

递归案例：

<script>
        /*  //  1  求阶乘
         function fn(n) {
             if (n == 1) {
                 return 1;
             }
             return n * fn(n - 1);
         }
         fn();
         //  2 求斐波那契数列
         function fb(n) {
             if (n == 1 || n == 2) {
                 return 1;
             }
             return fb(n - 1) + fb(n - 2);
         }
         fb(); */
        //  3 根据输入的id号，返回数据对象
        var data = [{
            id: 1,
            name: '家电',
            goods: [{
                id: 11,
                gname: '冰箱',
            }, {
                id: 12,
                gname: '洗衣机'
            }]
        }, {
            id: 2,
            name: '服饰'
        }];
        //  1 利用forEach去遍历里面的每一个对象
        function getID(json, id) {
            var o = {};
            json.forEach(function (item) {
                if (item.id == id) {
                    o = item;
                    return item;
                }
                // 得到里层的数据 利用递归函数
                // 里面应该有goods这个数组 并且长度不等于0
                else if (item.goods && item.goods.length > 0) {
                    o = getID(item.goods, id);
                }

            })
            return o;
        }
        console.log(getID(data, 1));
        console.log(getID(data, 11));

    </script>

1.18 浅拷贝和深拷贝

<script>
        /* 
            浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用
            深拷贝拷贝多层，每一级别的数据都会拷贝
         */
        var obj = {
            id: 1,
            name: 'andy'
        };
        var o = {};
        // }
        // console.log(o);
        //  格式：Object.assign(拷贝给谁，拷贝谁)  这个也是浅拷贝
        Object.assign(o, obj);
        console.log(o);

    </script>

<script>
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            },
            color: ['pink', 'red']
        };
        var o = {};
        function deepCopy(newobj, oldobj) {
            for (var k in oldobj) {
                // 判断属性值属于那种数据类型
                //  获取属性值
                var item = oldobj[k];
                // 判断这个值是否是数组
                if (item instanceof Array) {
                    newobj[k] = [];
                    o.color = [];
                    deepCopy(newobj[k], item)
                }
                else if (item instanceof Object) {
                    newobj[k] = [];
                    deepCopy(newobj[k], item)
                }
                else {
                    newobj[k] = item;
                }
                // 判断这个值是否是对象
                // 属于简单数据类型
            }
        }
    </script>

1.19 正则表达式

正则表达式

正则表达式是用于匹配字符串中字符组合的模式。再js中正则表达式也是对象

匹配、替换、提取

1.19.1 创建正则表达式

// 创建正则表达式
        // 1.利用RegExp对象来创建  正则表达式
        var regexp = new RegExp(/123/);
        console.log(regexp);
        //  2 利用里面量创建 正则表达式
        var rg = /123/;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bqtCtZ3n-1620388131002)(pink老师js869集笔记.assets/image-20200716180722625.png)]

正则表达式特殊字符

特殊字符也成为元字符

1.19.2 边界符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mMPnxDL5-1620388131003)(pink老师js869集笔记.assets/image-20200716180731080.png)]

//  边界符  ^ $
        var rg = /abc/; //正则表达式不需要加引号 不管是数字型还是字符型
        //  /abc/    只要包含abc这个字符串 返回的都是true
        console.log(rg.test('abc'));
        console.log('——————————————————————————');
        var reg = /^abc/;
        console.log(reg.test('abc'));//true
        console.log(reg.test('abcd'));//true
        console.log(reg.test('aabcd'));// false
        console.log('——————————————————————————');
        var reg1 = /^abc$/;
        //  /^abc$/  精确匹配必须是abc  才符合规范

1.19.3 字符类

var reg2 = /[abc]/;
        //  表示只要包含a或者b或者c 都返回true
        console.log(reg2.test('andy'));//true
        console.log(reg2.test('bady'));//true
        console.log(reg2.test('color'));//true
        console.log(reg2.test('red'));//false
        console.log('——————————————————————————');
        var reg3 = /^[a-z]$/;
        //  表示26个英文字母 任何一个字母返回 true
        console.log(reg3.test('r'));//true
        console.log(reg3.test(1));//false
        console.log('——————————————————————————');
        console.log('组合形式的');
        var reg4 = /^[a-zA-Z0-9]$/
        //26个英文字母（大小写都可以）任何一个字母返回 true    还是多选一
        console.log(reg4.test('a'));//true
        console.log(reg4.test('b'));//true
        console.log(reg4.test(9));//true
        console.log(reg4.test('A'));//true
        console.log(reg4.test('!'));//false
        console.log('——————————————————————————');
        console.log('——————————————————————————');
        var reg5 = /^[^a-zA-Z0-9]$/
        //  如果中括号里面有^ 则表示取反的意思，就是不能包含这些

1.19.4 量词符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YZltKFGx-1620388131003)(pink老师js869集笔记.assets/image-20200716180744137.png)]

<script>
        //   * 相当于>=0 可以出现0次或者很多次
        var reg = /^a*$/;
        console.log(reg.test(''));//true
        console.log(reg.test('a'));//true
        console.log(reg.test('aaa'));//true

        console.log('+号');

        //  + 相当于>=1  可以出现1次或者很多次
        var reg1 = /^a+$/;
        console.log(reg1.test(''));//false
        console.log(reg1.test('a'));//true
        console.log(reg1.test('aaa'));//true
        console.log('?号');

        // ? 相当于 1||0
        var reg2 = /^a？$/;
        console.log(reg2.test(''));//true
        console.log(reg2.test('a'));//true
        console.log(reg2.test('aaa'));//false

        // {3} 重复 3次
        var reg3 = /^a{3}$/;
        console.log(reg3.test(''));//false
        console.log(reg3.test('a'));//false
        console.log(reg3.test('aaa'));//true

        // {3,}  表示三次起步  大于等于3
        // {3，16} 表示大于等于3  并且 小于等于16
        //  量词中间不能有空格
        
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6nlhR7m6-1620388131004)(pink老师js869集笔记.assets/image-20200716180755021.png)]

1.19.5 预定义类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-du4TgPLN-1620388131004)(pink老师js869集笔记.assets/image-20200716180804277.png)]

正则表达式的或者是一个竖线

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ES6glltn-1620388131005)(pink老师js869集笔记.assets/image-20200716180813707.png)]

手机号的正则表达式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MvdZGPeW-1620388131005)(pink老师js869集笔记.assets/image-20200716180823946.png)]

QQ号的正则表达式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9GuoSPaM-1620388131006)(pink老师js869集笔记.assets/image-20200716180832664.png)]

昵称的正则表达式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6PQ1uAnS-1620388131006)(pink老师js869集笔记.assets/image-20200716180853349.png)]

正则表达式：https://c.runoob.com/front-end/854

1.19.6 正则表达式的替换 switch 全局匹配

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9WKryoi5-1620388131007)(pink老师js869集笔记.assets/image-20200716180908805.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cfpKnyNe-1620388131007)(pink老师js869集笔记.assets/image-20200716180919324.png)]

替换铭敏感词

括号总结

大括号量词符里面表示重复的次数
中括号字符集合匹配方括号中的任意字符
小括号表示优先级

JavaScript ES6

1.1 ES6简介

什么是ES6

ES全称是ECMAScript，它是由ECMA国际标准化组织，制定的一项脚本语言的标准化规范

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8CxxFcie-1620388131008)(pink老师js869集笔记.assets/image-20200716180934716.png)]

ES6实际上是一个泛指，泛指ES2015及后续的版本

为什么要使用ES6

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript脚本本身也有一些令人不满意的地方

变量提升特性增强了程序运行时的不可预测性
语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

1.2 let

let是ES6新增的用于声明变量的关键字

let声明的变量只在处于块级有效
块级外边的代码访问let，会出现报错
在大括号中用let声明的变量才具有块级作用域，var声明的变量是不具备这个特性的
let声明的变量不存在变量提升
使用let声明变量的块级作用域，具有暂时性死区特性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fJdeyv8H-1620388131009)(pink老师js869集笔记.assets/image-20200716180949083.png)]

    <script>
        if (true) {
            let b = 20;
            console.log(b);
            if (true) {
                let c = 30;
            }
            console.log(c);// 还是报错


        }
        console.log(b);//b是块级作用变量，外面强行访问只有报错

        // 防止循环变量成为全局变量
        for (let i = 0; i < 2; i++) { }
        console.log(i);//  也会出现报错

        console.log(a);//  也会报错  不存在变量提升
        let a=100;
        
        //  使用let关键字声明的变量具有暂时性死区特性
        var num=10;
        if(true){
            console.log(num); //  会报错
            let num=20;
            /* 
                运行的时候 不会直接向上一级查找num，在这个块级作用域中声明了let num 变量 这个num就和这个块级作用域进行了绑定，所以在声明之前使用它会出现报错
            */
        }
    </script>

经典面试题：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T2grCBcQ-1620388131009)(pink老师js869集笔记.assets/image-20200716181019070.png)]

变量 i 是全局变量，函数执行输出的都是全局作用域下的 i 的值所以结果是输出两次2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X50nmOt9-1620388131010)(pink老师js869集笔记.assets/image-20200716181037786.png)]

经典面试图解：此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行输出的是自己上一级（循环产生的块级作用域）作用域下 i 的值

1.3 const

作用：声明常量。常量就是值（内存地址）不能变化的量2

用const声明的变量是具有块级作用域的
声明常量时必须赋值否则会报错
常量复制后，值不能修改

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-liZ16wUq-1620388131011)(pink老师js869集笔记.assets/image-20200716181049721.png)]

注意： PI=100 不行报错

ary[0]=123 可以他没有更改内存的地址

ary=【1.2】报错

对于复杂数据类型，它的内部元素的值可以更改，但是你对他的内存地址更改不可以，就不能给这个值重新赋值 ary[0] 只是修改数据内部的值没有修改地址

1.4 let、const、var的区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-64VgNZdv-1620388131012)(pink老师js869集笔记.assets/image-20200716181133038.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qdx6gk3B-1620388131012)(pink老师js869集笔记.assets/image-20200716181141738.png)]

存储的数据不变化尽量使用const 比如数学中不更变的值

1.5 解构赋值

es6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构

数组解构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IbVQ2TU5-1620388131014)(pink老师js869集笔记.assets/image-20200716181151857.png)]

let后面不是数组，是解构，是变量的名字，1，2，3是值，他们是一一对应的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JEFgGY1O-1620388131015)(pink老师js869集笔记.assets/image-20200716181204396.png)]

输出的是1 2 3

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jspi4n16-1620388131016)(pink老师js869集笔记.assets/image-20200716181214738.png)]

bar 是1 foo是underfined

对象解构

等号的右边就是从哪里获取值左边就是你获取谁

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bI6tbl4P-1620388131017)(pink老师js869集笔记.assets/image-20200722175311810.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vJTJlrPn-1620388131018)(pink老师js869集笔记.assets/image-20200716181223951.png)]

对象解构实际上是属性匹配

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R2Cdo2q2-1620388131019)(pink老师js869集笔记.assets/image-20200716181234141.png)]

1.6 箭头函数

格式：（）=>{}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HrtwGbla-1620388131019)(pink老师js869集笔记.assets/image-20200716181248226.png)]

函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
如果形参只有一个，可以省略小括号
箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。即箭头函数的this指向的是箭头函数定义区域的this

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WCkF3ooB-1620388131020)(pink老师js869集笔记.assets/image-20200716181328823.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qiMB3iOb-1620388131021)(pink老师js869集笔记.assets/image-20200716181336819.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CFlbsXWw-1620388131022)(pink老师js869集笔记.assets/image-20200716181350547.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6wZz8HBl-1620388131023)(pink老师js869集笔记.assets/image-20200716181446473.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k9Ts3PGE-1620388131024)(pink老师js869集笔记.assets/image-20200716181455950.png)]

因为：对象不能产生作用域，实际上箭头函数在全局作用域中定义了，window没有this 所以是underfined

1.7 剩余参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w5Hlan1d-1620388131025)(pink老师js869集笔记.assets/image-20200716181518213.png)]

…表示：把剩下的都接收了，用数据接收

在形参前面加上三个点，表示都接收过来

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8wecqiZs-1620388131026)(pink老师js869集笔记.assets/image-20200716181528338.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YotGzFlQ-1620388131026)(pink老师js869集笔记.assets/image-20200716181537328.png)]

1.8 Array 的扩展方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5sYvnYZb-1620388131027)(pink老师js869集笔记.assets/image-20200716181545936.png)]

输出结果是没有逗号的，因为逗号被当成了分隔符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C70kGmf1-1620388131028)(pink老师js869集笔记.assets/image-20200716181556184.png)]

合并数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dFecyqa6-1620388131029)(pink老师js869集笔记.assets/image-20200716181617957.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CqsOSsFj-1620388131030)(pink老师js869集笔记.assets/image-20200716181634567.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1o3rOjqc-1620388131031)(pink老师js869集笔记.assets/image-20200716181644236.png)]

将伪数组转换为真正的数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RVWEWCYV-1620388131032)(pink老师js869集笔记.assets/image-20200716181654417.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LdeJdMRC-1620388131033)(pink老师js869集笔记.assets/image-20200716181702938.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G65DgQO0-1620388131034)(pink老师js869集笔记.assets/image-20200716181713696.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Elbzqa8i-1620388131034)(pink老师js869集笔记.assets/image-20200716181731770.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dKEmMrYL-1620388131035)(pink老师js869集笔记.assets/image-20200716181746951.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JQiFQIOw-1620388131036)(pink老师js869集笔记.assets/image-20200716181804440.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1dcHGhzH-1620388131036)(pink老师js869集笔记.assets/image-20200716181816873.png)]

模板字符串中可以解析变量

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fuathlBJ-1620388131037)(pink老师js869集笔记.assets/image-20200716181826684.png)]

模板字符串可以换行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hIgjoft0-1620388131037)(pink老师js869集笔记.assets/image-20200716181836453.png)]

反引号：在英文状态下连敲两下ESC下面的键即可

模板字符串可以调用函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ttGZuIv4-1620388131038)(pink老师js869集笔记.assets/image-20200716181856543.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ZNlqQin-1620388131039)(pink老师js869集笔记.assets/image-20200716181907792.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQCkboiN-1620388131039)(pink老师js869集笔记.assets/image-20200716181922454.png)]

Set 数据结构

ES6提供了新的数据解构Set。它类似于数组，但是成员的值都是i唯一的，没有重复的值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aVdrHoqD-1620388131040)(pink老师js869集笔记.assets/image-20200716181933321.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ihkBzKa2-1620388131041)(pink老师js869集笔记.assets/image-20200716181947727.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-amprUWxw-1620388131041)(pink老师js869集笔记.assets/image-20200716181956301.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qw19VxT7-1620388131042)(pink老师js869集笔记.assets/image-20200716182006522.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n8IGGKmn-1620388131042)(pink老师js869集笔记.assets/image-20200716182017626.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GqBvMunq-1620388131043)(pink老师js869集笔记.assets/image-20200716182027505.png)]

数组常用方法、字符串常用方法总结

1、数组的常用方法

1.1 push（）后加返回值是新数组的长度

注意：

此方法是从原始数组的最后面开始添加
此方法的返回值是新数组的长度
不会生成新的数组，是在原始数组上进行操作

        var arr1 = [1, 2, 3];
        var arr_1 = arr1.push(4, 5, 6);
        console.log('数组arr为：' + arr1);
        // 数组arr为：1，2，3，4，5，6  注意因为此处是字符串拼接了
        console.log('arr_1为：' + arr_1);
        // arr_1为：6

1.2 unshift（）前加返回值是新数组的长度

unshift方法是从原始数组的最前面开始添加内容
unshift方法的返回值是新数组的长度
unshift方法不会生成新的数组，是在原始数组上进行操作

        // unshift
        var arr2 = ['unshift第一项', 'unshift第二项'];
        var arr2_new = arr2.unshift('unshift新添加的');
        console.log('数组为:' + arr2);
        //数组为:unshift新添加的,unshift第一项,unshift第二项
        console.log('unshift返回值为:' + arr2_new);
        //unshift返回值为:3

1.3 pop（）后删返回的是被删除的元素

pop方法是删除原始数组的最后一个元素
pop方法的返回值是被删除的元素

        var pop_yuan = ['pop1', 'pop2'];
        var pop_new = pop_yuan.pop();
        console.log('原始的数组为:' + pop_yuan);
        //原始的数组为:pop1
        console.log('返回值为:' + pop_new);
        //返回值为:pop2

1.4 shift（）前删返回的是被删除的元素

shift方法是删除原始数组的第一个元素
shift方法返回的是被删除的元素

1.5 splice 删除，添加此方法会修改原数组，并且返回新的数组

splice 方法参数分为别：添加或者删除下标的位置，删除元素的个数或者是0，剩下的参数就是需要添加的元素
splice 方法第一个参数的值大于或者等于数组长度时，从数组的最后面开始操作；如果第一个参数的值是负数并且这个负数加上数组长度还是负数的时候从数组的最前面开始操作若加上数组长度是正数则从正数位置开始操作
splice 方法第二个参数为 0 时，表示添加元素
splice 方法会修改原数组
splice 方法的返回值是添加或者删除的元素组成的新的数组

        var splice_yuan = [1, 2, 3,];
        var splice_fan = splice_yuan.splice(1, 1);
        console.log('数组为:' + splice_yuan);
        // 数组为  1,3
        console.log(splice_fan);
        // 返回值被删除或者添加的元素形成的数组 [2]

1.6 concat 拼接

concat 方法返回值是一个新的数组不会修改原始的数组

        var concat_yuan1 = [1, 2, 3];
        var concat_yuan2 = [3, 4, 5];
        var concat_yuan3 = [3, 4, 5];
        var concat_fan = concat_yuan1.concat(concat_yuan2);
        console.log(concat_fan);//1,2,3,3,4,5
        console.log(concat_yuan1);// 1,2,3
        console.log(concat_yuan2);//3,4,5

1.7 slice() 剪切截取

slice 方法的第一个参数是从第几个索引开始，第二个参数是截至到第几个索引注意包括开始索引，并不包括结束的索引
slice 方法返回新的数组，不改变原数组，新的数组是截取的内容组成新的数组

        var slice_yuan = [1, 2, 3, 4, 5, 6, 7];
        var slice_fan = slice_yuan.slice(2, 5)
        console.log(slice_fan);// 3,4,5
        console.log(slice_yuan);//1,2,3,4,5,6,7

1.8 join（）toString（）数组转换成字符串

join 方法后面的小括号中如果什么东西都不加，则返回值中会有逗号分隔，如果加上 ‘’ 单引号，单引号间没有空格，则返回值中没有分隔符
join 方法的返回值是一个新的字符串，原始数组并没有被改变

        var join_yuan = ['你好', '你不好'];
        var join_fan = join_yuan.join('');
        console.log(join_yuan);//["你好", "你不好"]
        console.log(join_fan);//你好你不好

1.9 sort（）升序、降序

sort 方法括号里面跟一个函数，如果函数里面的 return b - a 则表示降序，若是 return a - b 则表示升序
sort 方法会直接会原数组进行操作
sort 方法返回值是完成排序后的数组

        var sort_yuan = [9, 20, 4, 7, 8, 1]
        var sort_fan = sort_yuan.sort(function (a, b) {
            return b - a;
        });
        console.log(sort_yuan);//[20, 9, 8, 7, 4, 1]
        console.log(sort_fan);//[20, 9, 8, 7, 4, 1]

1.10 reverse （）颠倒顺序

reverse 方法返回值是颠倒后的数组
reverse 方法会改变原数组

1.10 indexOf（）括号内写元素返回此元素的下标

indexOf 方法第一个参数是想要查找的内容，第二个参数是从几号索引开始查找
如果数组内有相同的元素，则只会查找到第一个元素，并且返回第一个元素的索引值
如果没有找到则返回 -1
如果第二个参数大于或者等于数组长度的时候直接返回 -1 , 如果第二个参数的值是负数并且这个负数加上数组长度还是负数的时候则检索整个数组

        var indexof_yuan = [2, 3, 3, 5, 6];
        console.log(indexof_yuan.indexOf(3));// 1
        console.log(indexof_yuan.indexOf(5));// 1
        console.log(indexof_yuan.indexOf(3, 3));// -1
        console.log(indexof_yuan);// [2, 3, 3, 5, 6]

1.11 includes（）确认数组中是否有某个元素，要么返回 true 要么返回 false

1.12 jses5中新增的数组常用方法

1.12.1 forEach() 遍历数组

        var foreach_yuan = [3, 6, 9];
        foreach_yuan.forEach(function (value, index, array) {
            console.log('数组中的每一个元素   ' + value);
            console.log('数组中的每一个元素的索引   ' + index);
            console.log('数组本身   ' + array);
        })

1.12.2 map（）格式化数组

就是格式化数组，跟forEach的参数一样

此方法必须有return

最终返回的是一个新的数组不修改原数组

1.12.3 filter（）筛选数组

不会修改原数组
返回值是一个新的数组
filter 方法中遇到是遍历完数组所有元素才结束

        var a = [1, 2, 3, 4, 11]
        // 第一个参数为一个方法，有三个参数，current:当前值 index:当前值下标 array:这个数组对象
        var b = a.filter(function (value, index, array) {
            return value < 10
        })

        console.log(b) // [1,2,3,4]
        console.log(a) // [1,2,3,4,11]

1.12.4 every（）方法

不修改原数组
返回值要么是 true 要么是 false
函数内必须有 return 才可以
数组中所有元素都符条件才返回 true ，若有一个不符合则返回 false

var a = [1,2,3,4,5]
 
var b = a.every(function(current,index,array){
       return current < 6
})
 
var c = a.every(function(current,index,array){
       return current < 3
})
console.log(b)  // true 
console.log(c)  // false

1.12.5 some方法

some方法返回值是布尔类型
如果查找到符合条件的元素，则返回 true ，如果没有查找到符合条件的元素则返回 false
如果找到第一个满足条件的元素，则不再继续往下找

var a = [1,2,3,4,5]
 
var b = a.some(function(current,index,array){
       return current > 4
})
 
var c = a.some(function(current,index,array){
       return current > 5
})
console.log(b)  // true 
console.log(c)  // false

1.12.6 find（）

查找数组中符合条件的第一个元素，并返回这个元素
找不到则返回 underfined

var a = [1,2,3,4]
// b在下面需要使用，则一般用find
var b = a.find(function(ele,index,array){
    return ele == 1
})
 
var c = 3
var d = b + c
console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log(d) // 4
 
// 若只需判断元素是否存在
// 若果是简单数组(非对象数组)，则一般使用Array.includes(value)方法
// 如果为对象数组，则可以使用Array.some()方法
 
var a = [1,2,3]
console.log(a.includes(1))  // true
 
var a = [{"name": "xiaoming" },{"name": "xiaohong"}]
 
console.log(a.some(function(ele){
    return ele.name == 'xiaoming'
}))                            // true

1.12.7 array.isArray()

判断一个元素是否为数组

Array.isArray([])  // true
Array.isArray({})  // false

1.12.8 关于 filter some forEach 总结

在forEach 里面 return 不会终止遍历
在some里面遇到return true 就是终止遍历迭代效率更高
在filter里面遇到return 也不会终止迭代
对于查找数组中唯一一个存在的元素用some效率更高

2、字符串的一些常用方法

2.1 indexOf

返回值是此元素在字符串中的索引号
找不到返回 -1
找到第一个符合元素条件的元素就返回，不在继续执行

        //字符串对象  根据字符串返回位置
        // indexOf(想要查找的字符,起始位置)
        var str = '改革春风吹满面，春天来了';
        console.log(str.indexOf('春'));// 2
        console.log(str.indexOf('春', 3));// 8

2.2 charAt（index）根据位置返回相应的元素 charCodeAt(index)

        var str1 = 'ddg'
        console.log(str1.charAt(2));// g
        console.log(str1.charCodeAt(0));// 100

2.3 concat(), substr() replace() , split()

        //  1.  concat('字符串1','字符串2')
        var str = 'andya'
        console.log(str.concat('red'));// andyred

        //  2   substr('截取的起始位置','截取几个字符')
        var str1 = '改革春风吹满地'
        console.log(str1.substr(2, 2));//春风

        //  3   replace('被替换的字符','替换为的字符') 只能替换被第一次匹配到的字符
        console.log(str.replace(/a/g, 'b'));//bndyb

        //  4   字符转换为数组  split('分隔符')
        var str2 = 'red,pink,blue';
        console.log(str2.split(','));

substr 第二个参数是截取的个数
split 括号中加上逗号才能被分隔成每一个索引中的元素是每一格数组元素

解构赋值和箭头函数

箭头函数

箭头函数是 ES6 里面一个简写函数的语法方式

重点： 箭头函数只能简写函数表达式，不能简写声明式函数

function fn() {} // 不能简写
const fun = function () {} // 可以简写
const obj = {
  fn: function () {} // 可以简写
}

语法： (函数的行参) => { 函数体内要执行的代码 }

const fn = function (a, b) {
  console.log(a)
  console.log(b)
}
// 可以使用箭头函数写成
const fun = (a, b) => {
  console.log(a)
  console.log(b)
}

const obj = {
  fn: function (a, b) {
    console.log(a)
    console.log(b)
  }
}
// 可以使用箭头函数写成
const obj2 = {
  fn: (a, b) => {
    console.log(a)
    console.log(b)
  }
}

箭头函数的特殊性

箭头函数内部没有 this的指向，箭头函数的 this 是上下文的 this
也就是说箭头函数上一级的this是什么，那么箭头函数里面的this也就是什么。

箭头函数中的this和函数的调用没关系，和函数在哪里创建有关系

// 在箭头函数定义的位置往上数，这一行是可以打印出 this 的
// 因为这里的 this 是 window
// 所以箭头函数内部的 this 就是 window
const obj = {
  fn: function () {
    console.log(this)
  },
  // 这个位置是箭头函数的上一级，但是不能打印出 this
  fun: () => {
    // 箭头函数内部的 this 是书写箭头函数的上一级一个可以打印出 this 的位置
    console.log(this)
  }
}

obj.fn()
obj.fun()


<div>hello</div>
<script>
    var div1=document.querySelector('div')
    div1.onclick= function () {
        console.log(this) //div对象
		
        let fn=() => {
            console.log(this)
        }
        fn()  //div对象
//        var fn= function () {
//            console.log(this)
//        }
//        fn()  //window对象
    }
</script>

按照我们之前的 this 指向来判断，两个都应该指向 obj
但是 fun 因为是箭头函数，所以 this 不指向 obj，而是指向 fun 的外层，就是 window

箭头函数内部没有 arguments 这个参数集合

const obj = {
  fn: function () {
    console.log(arguments)
  },
  fun: () => {
    console.log(arguments)
  }
}
obj.fn(1, 2, 3) // 会打印一个伪数组 [1, 2, 3]
obj.fun(1, 2, 3) // 会直接报错

函数的行参只有一个的时候可以不写 () 其余情况必须写

const obj = {
  fn: () => {
    console.log('没有参数，必须写小括号')
  },
  fn2: a => {
    console.log('一个行参，可以不写小括号')
  },
  fn3: (a, b) => {
    console.log('两个或两个以上参数，必须写小括号')
  }
}

函数体只有一行代码的时候，可以不写 {} ，并且会自动 return

const obj = {
  fn: a => {
    return a + 10
  },
  fun: a => a + 10
}

console.log(fn(10)) // 20
console.log(fun(10)) // 20

函数传递参数的时候的默认值

我们在定义函数的时候，有的时候需要一个默认值出现

就是当我不传递参数的时候，使用默认值，传递参数了就使用传递的参数

function fn(a) {
  a = a || 10
  console.log(a)
}
fn()   // 不传递参数的时候，函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候，函数内部的 a 就是 20

在 ES6 中我们可以直接把默认值写在函数的行参位置

function fn(a = 10) {
  console.log(a)
}
fn()   // 不传递参数的时候，函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候，函数内部的 a 就是 20

这个默认值的方式箭头函数也可以使用

const fn = (a = 10) => {
  console.log(a)
}
fn()   // 不传递参数的时候，函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候，函数内部的 a 就是 20

注意： 箭头函数如果你需要使用默认值的话，那么一个参数的时候也需要写（）

解构赋值

解构赋值：解析一个数据结构并赋值
作用：就是快速的从对象或者数组中取出成员的一个语法方式

解构对象

快速的从对象中获取成员

// ES5 的方法向得到对象中的成员
const obj = {
  name: 'Jack',
  age: 18,
  gender: '男'
}

let name = obj.name
let age = obj.age
let gender = obj.gender

// 解构赋值的方式从对象中获取成员
const obj = {
  name: 'Jack',
  age: 18,
  gender: '男'
}

// 前面的 {} 表示我要从 obj 这个对象中获取成员了
// name age gender 都得是 obj 中有的成员
// obj 必须是一个对象
let { name, age, gender } = obj

// ES5 的方法向得到对象中的成员
const obj = {
  name: 'Jack',
  age: 18,
  gender: '男'
}
//定义变量接收对象里面拿出来的成员
let username=obj.name
console.log(username)

// 解构赋值的方式从对象中获取成员
const obj = {
  name: 'Jack',
  age: 18,
  gender: '男'
}
//解构赋值的时候可以给变量起一个别名
let{name:username}=obj
console.log(username)

//多级解构赋值
var obj={
    name:'Tom',
    age:23,
    info:{
        id:1001,
        class:1913
    }
}
//访问id属性
let{info}=obj
console.log(info)
let{id}=info
console.log(id)
//可以书写在一行
let{info:{id}}=obj
//起别名
let {info:{id:userId}}=obj
console.log(userId)

解构数组

快速的从数组中获取成员

// ES5 的方式从数组中获取成员
const arr = ['Jack', 'Rose', 'Tom']
let a = arr[0]
let b = arr[1]
let c = arr[2]

// 使用解构赋值的方式从数组中获取成员
const arr = ['Jack', 'Rose', 'Tom']

// 前面的 [] 表示要从 arr 这个数组中获取成员了
// a b c 分别对应这数组中的索引 0 1 2
// arr 必须是一个数组
let [a, b, c] = arr

//多级解构数组
let arr=[1,2,[3,4]]
let[a,b,[c,d]]=arr
console.log(c)
console.log(d)

注意

{} 是专门解构对象使用的
[] 是专门解构数组使用的
不能混用

call() apply() bind()

call()

第一个参数是this的指向，后面的参数是要传递的参数

    <script>
        var a = {
            name: 'onepixel', //定义a的属性
            say: function () { //定义a的方法
                console.log("Hi,I'm function a!");
            }
        };
        function b(name) {
            console.log("Post params: " + name);// Post params: test
            console.log("I'm " + this.name);// I'm onepixel
            this.say();// Hi,I'm function a!
        }
        b.call(a, 'test');     //将b的this指向a，参数是b的
    </script>

apply()

第一个参数是this的指向，后面的参数必须是一个数组中，包括你想要传递的参数

        //里面有最大最小数字值的一个数组对象
        var numbers = [5, 6, 2, 3, 7];

        /* 使用 Math.min/Math.max 在 apply 中应用 */
        var max = Math.max.apply(null, numbers);
        // 一般情况是用 Math.max(5, 6, ..) 或者 Math.max(numbers[0], ...) 来找最大值
        var min = Math.min.apply(null, numbers);
        console.log(max, min);

bind() 这个方法需要调用一下，并不会本身自己调用