pink老师js869集笔记

B站pink老师JavaScript 869集笔记

计算机基础部分

1、编程语言

1.1 编程

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

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

1.2 计算机语言

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

计算机语言分为三种

1. 机器语言
2. 汇编语言
3. 高级语言

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

1.3 编程语言

编程语言分为

1. 汇编语言

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

2. 高级语言

   高级语言主要是相对于低级语言而言，它并不是指某一种具体的语言，而是包括了很多编程语言，常用的有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）：不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的，他是被动的

总结

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

2、计算机基础

2.1 计算机组成

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

2.2 数据存储

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

2.3 数据存储单位

bit

• 位(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)]

1. ECMAScript

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

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

2. DOM——文档对象模型

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

3. BOM——浏览器对象模型

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

1.6 JS初体验

js的书写方式

1. 行内式，直接在元素里面写就可以

   <input type="text" onclick="alert('弹出')">
   

   • 可以讲单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性）
   • 注意单双引号的使用：在HTML中我们推荐使用双引号，js中我们推荐使用单引号>
   • 可读性差，在HTML中编写JS大量代码时，不方便阅读
   • 引号易错，引号多层嵌套匹配时，非常容易混淆
   • 特殊情况下使用

2. 内嵌式

   <script>
           /* 
           内容
            */
   script>
   

   • 最常用的方法

3. 外部

 <script src="">script>

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

1.7 js注释

1. 单行注释 用//
2. 多行注释用 /* */

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>

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

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

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

2.5 变量命名规范

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

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把数据类型分为两类：

1. 简单数据类型
2. 复杂数据类型（object）

3.3 简单数据类型

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

3.3.1 数字型

1. 数字型进制

   • 八进制：0-7 以0打头
   • 十六进制：0-9，a-f 以0x打头

2. 范围

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

3. 数字型特殊值

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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 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)]

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

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中结构

1. 顺序结构
2. 分支结构
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:执行最后的语句;
            
        }

注意

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

6.4 循环结构

循环的主要语句

1. for循环
2. while循环
3. do…while循环

6.4.1 for循环

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

6.4.2 for循环的案例

九九乘法口诀表

弹出输入框，求平均值

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 数组的创建方式

1. 利用new创建数组
2. 利用数组字面量创建数组

        //创建数组 两种方式
        //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>

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

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

8.3 形参和实参

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

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

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

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

8.4 return

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

8.5 函数 案例

8.5.1 案例：求最大值

8.5.2 案例：反转数组

8.5.3 案例：冒泡排序

8.6 用榨汁机模拟函数

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

8.7 arguments

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

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

伪数组特点

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

8.8 函数的声明方式

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

        var 变量名=function(){
            
        }

8.9 作用域

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

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

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

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

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

8.10 作用域链

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

8.11 预解析

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

第一步：预解析

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

   预解析分为：变量预解析（变量提升）和函数预解析（函数提升）

   1. 变量提升：就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
   2. 函数提升：就是把所有的函数声明提升到当前作用域的最前面 不调用函数

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 创建对象 使用对象

1. 利用字面量创建对象
2. 利用 new Object创建对象
3. 利用构造函数创建对象

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运算符一起使用，我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面

实例

 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在执行时会做四件事情

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

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

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

实例：

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

9.7 对象小结

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

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

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

10、JavaScript内置对象

10.1 JavaScript中的对象分类

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

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

最常用的内置对象

1. Math
2. Date
3. Array
4. String等

10.2 内置对象—Math对象

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

10.3 内置对象—日期对象

获取毫秒数

日期格式化

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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 获取元素

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

根据ID获取

    

	var id = document.getElementById('id1');

2019-9-9
    

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

根据标签名获取

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

通过HTML5新增的方法获取

盒子1
    
盒子2
    

        

            
shouye
            
chanp
        
    
    

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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的事件，例如，我们可以在用户点击按钮时产生一个事件，然后去执行某些操作

    唐伯虎
    

常用鼠标事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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的区别

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

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

1.5.4.2 改变属性

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

    



    显示当前系统时间
    
某个时间
    

        1223
    
    

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

    
    
    
    



    
    刘德华
    张学友
    
    

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

    
    
    
    



    
    
上午好
    

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

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

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

1.5.4.4 修改样式属性操作

element.style 行内样式操作

element.className 类名样式操作

注意

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

案例：修改背景颜色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)]

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

1. 获得焦点onfocus
2. 失去焦点onblur

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

操作元素总结

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

1.5.4.5 排它思想

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

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

    
    
    
    



    

        按钮1
        按钮2
        按钮3
        按钮4
        按钮5
    
    

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

案例：表格中隔行变色

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

案例：全选反选

pink老师讲的

    
    
    




    

        

            

                

                    

                        
                    
                    
商品
                    
价钱
                
            
            

                

                    

                        
                    
                    
iPhone8
                    
8000
                
                

                    

                        
                    
                    
iPad Pro
                    
5000
                
                

                    

                        
                    
                    
iPad Air
                    
2000
                
                

                    

                        
                    
                    
Apple Watch
                    
2000
                

            
        
    
    

百度的

    
    

    



    全选/全不选
    

    篮球
    

    排球
    

    羽毛球
    

    乒乓球
    

    
    
    

    

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栏切换

    
    
    
    



    

        

            

                
商品介绍
                
规格与包装
                
售后保障
                
商品评价
                
手机社区
            
        
        

            
商品介绍内容
            
规格与包装内容
            
售后保障内容
            
商品评价内容
            
手机社区内容
        
    
    

1.5.5 节点操作

1.5.5.1 节点

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

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

1. 元素节点 1

2. 属性节点 2

3. 文本节点 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)]

案例：简单版 发布留言

    
    
    
    



    123
    发布


    


    
    

1.5.5.7 删除节点

node.removeChild(child) 删除节点

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

1.5.5.8 复制节点

node.cloneNode()

注意

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

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

案例：动态生成表格

    
    
    
    



    

        

            
姓名
            
科目
            
成绩
            
操作
        
        

    
    

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

• document.write()
• element.innerHTML
• document.creatElement

区别

1. document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则会导致页面全部重绘
2. innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
3. innerHTML创建对个元素效率更高（不要采用拼接字符串，采取数组形式拼接），结构稍微复杂
4. 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 注册事件

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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个阶段

1. 捕获阶段
2. 当前目标阶段
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，它有很多属性和方法

    
    
    
    



    
123
    

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有注册事件，就会触发事件监听器

事件委托作用

提高了程序的性能

案例

    

        
你好我是1
        
你好我是2
        
你好我是3
        
你好我是4
        
你好我是5
    
    

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)]

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

3.9 常用键盘事件

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

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

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

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

    
    
    
    



    

        
123
        
    
    

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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 定时器

1. 开启定时器 setTimeout() 回调函数
2. 开始定时器 setlnterval()
3. 停止定时器 clearTimeout(定时器名字)
4. 停止定时器 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)]

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

这样写会有一点小bug 在var input下面 先调用一下这个函数 就可以解决

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

    手机号码发送
    

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的异步是通过回调函数实现的

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)]

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

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

    
    
    



    


    
    








    
    
    



    

        用户名：
        
    

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)]

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

案例：能拖动的模态框

    
    
    



    
点击，弹出登录框
    

        
登录会员
            关闭
        
        

            

                用户名：
                
            
            

                登录密码：
                
            
        
        
登录会员
    
    
    

    

案例：京东放大镜

结构图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)]

案例：淘宝侧边栏

    
    
    



    

        返回顶部
    
    
头部区域
    
banner区域
    
主体区域

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)]

他们的主要用法

1. offset系列经常用于获得元素位置 offsetLeft offsetTop
2. client经常用于获取元素大小 clientWidth clientHeight
3. scroll 经常用于获取滚动距离 scrollTop scrollLeft
4. 注意页面的滚动距离通过 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端网页轮播图

    
    
    
    
    




    

        
        >
        
        <
        


        
        
        

            

                
            
            

                
            
            

                
            
            

                
            
        
    
    
    

5.9 回到顶部动画案例

    
    
    
    



    

        返回顶部
    
    

    

    

    

5.10 筋斗云导航栏

    
    
    
    




    

        
        

            
首页新闻
            
师资力量
            
活动策划
            
企业文化
            
招聘信息
            
公司简介
            
上海校区
            
广州校区
        
    
    

6、移动端网页特效

6.1 概述

1、触屏事件概述

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

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

常见的触屏事件如下

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

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()；

6.4 移动端轮播图

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代码

使用步骤

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

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

6.6 移动端常用开发插件

6.6.1 swiper插件

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

使用步骤

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

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

其他插件

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

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

插件使用总结

1. 确认插件实现的功能
2. 去官网查看使用说明
3. 下载插件
4. 打开demo实例文件，查看需要引入的相关文件，并且引入
5. 复制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 本地存储特性

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

7.2 window.sessionStorage

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

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

    
    存储数据
    获取数据
    删除数据
    清空所有数据
    

7.3 window.localStorage

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

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

案例：记住用户名

    记住用户名
    

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优点

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

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 排他思想

    快速
    快速
    快速
    快速
    快速
    快速
    快速
    

8.10 JQ 左右tab栏切换

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

    



    

        

            
红色
            
绿色
            
黑色
        
        

            

            

            


        
    
    

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)]

案例：电梯导航

    
    
    
    
    



    

        
家用电器
        
手机通讯
        
第三个
        
第四个
        
第五个
    
    

        
家用电器
        
手机通讯
        
第三个
        
第四个
        
第五个
    
    

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（）

1.4 类中添加方法

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

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 原型对象

构造函数可以通过原型分配的函数是所有对象所共享的

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

1.9 对象原型

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)]

1.13 扩展内置对象

可以通过原型对象，对原来的内置对象进行扩展自定义的方法，比如给数组增加自定义求偶数和的功能

1.13.1 call()

call（）

调用这个函数，并且修改函数运行时的this指向

fun.call(thisArg,arg1,arg2,……)

thisArg:当前调用函数this的指向对象

arg1,arg2:传递的其他参数

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是最好的选择

案例：查询商品

    
    
    
    



    

        按照价格查询： -  搜索 按照商品名称查询： 查询
    
    

        

            

                
id
                
产品名称
                
价格
            
        
        


        
    
    

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 函数调用方式

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)]

闭包案例：

        
榴莲
        
臭豆腐
        
鲱鱼罐头
        
大猪蹄子
    
    

        
榴莲
        
臭豆腐
        
鲱鱼罐头
        
大猪蹄子
    
    

1.17.2 递归

递归函数

定义：如果一个函数再内部可以调用其本身，那么这个函数就是递归函数

简单理解：函数内部自己调用自己，这个函数就是递归函数

递归效果的作用和循环效果一样

由于递归很容易发生“栈溢出”错误，所以必须要加退出条件 return

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

递归案例：

1.18 浅拷贝和深拷贝

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)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)]

替换铭敏感词

括号总结

1. 大括号 量词符 里面表示重复的次数
2. 中括号 字符集合 匹配方括号中的任意字符
3. 小括号表示优先级

JavaScript ES6

1.1 ES6简介

什么是ES6

ES全称是ECMAScript，它是由ECMA国际标准化组织，制定的一项脚本语言的标准化规范

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

ES6实际上是一个泛指，泛指ES2015及后续的版本

为什么要使用ES6

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript脚本本身也有一些令人不满意的地方

1. 变量提升特性增强了程序运行时的不可预测性
2. 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

1.2 let

let是ES6新增的用于声明变量的关键字

1. let声明的变量只在处于块级有效
2. 块级外边的代码访问let，会出现报错
3. 在大括号中用let声明的变量才具有块级作用域，var声明的变量 是不具备这个特性的
4. let声明的变量 不存在变量提升
5. 使用let声明变量的块级作用域，具有暂时性死区特性

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

经典面试题：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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

1. 用const声明的变量 是具有块级作用域的
2. 声明常量时必须赋值 否则会报错
3. 常量复制后，值不能修改

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)]

1. 存储的数据不变化尽量使用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)]

1. 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
2. 如果形参只有一个，可以省略小括号
3. 箭头函数不绑定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（）筛选数组

1. 不会修改原数组
2. 返回值是一个新的数组
3. 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（）方法

1. 不修改原数组
2. 返回值 要么是 true 要么是 false
3. 函数内必须有 return 才可以
4. 数组中所有元素都符条件才返回 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 总结

1. 在forEach 里面 return 不会终止遍历
2. 在some里面 遇到return true 就是终止遍历 迭代效率更高
3. 在filter里面遇到return 也不会终止迭代
4. 对于查找数组中唯一一个存在的元素用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() 这个方法需要调用一下，并不会本身自己调用