• js简单知识

    JS

    js基础

    初识js

    html决定网页结构和内容（决定看到什么），相当于人的身体。css决定网页呈现给用户的模样（决定好不好看），相当于给人穿衣服、化妆。js实现业务逻辑和页面控制（决定功能），相当于人的各种动作。

    浏览器执行js：浏览器分为两部分：渲染引擎和js引擎。

    • 渲染引擎：用来解析html和css，俗称内核。
    • js引擎：也称为js解释器，用来读取网页中的js代码，对其处理后运行。
    • 浏览器本身不会执行js代码，而是通过内置引擎来执行js代码。js引擎执行代码时逐行解释每一句源码，然后由计算机去执行，所以js语言归为脚本语言，会逐行解释执行。
    组成

    js由ECMAScript（语法）、DOM（页面文档对象模型）、BOM（浏览器对象模型）组成。

    • ECMAScript规定了js 的编程语言和基础核心知识。
    • DOM：通过DOM提供的接口可以对页面上的各种元素进行操作。
    • BOM：它提供了独立于内容的、可以于浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口。
    书写位置

    js有三种书写位置：行内式、内嵌式、外部。

    • 行内式：直接写在元素的内部。
      • 可读性差，不方便阅读。
      • 特殊情况下才使用。
    • 内嵌式：将代码写在script标签中。
    • 外部：引入外部的js文件。
      • script标签中间不能写代码。
      • 适合js代码量大的情况。

    在html中推荐使用双引号，但在js中推荐使用单引号。

    输入输出语句

    js提供的一些输入输出语句：

    • alert(msg)：浏览器弹出警示框。（展示给用户的
    • console.log(msg)：浏览器控制台打印输出信息。（给程序员测试用的
    • prompt(info)：浏览器弹出输入框，用户可以输入。

    变量

    变量是用于存放数据的容器，我们通过变量名获取数据，甚至修改数据。变量的本质是程序在内存中申请的一块用来存放数据的空间。

    变量的使用：先声明再赋值。

    • 声明变量：var age。
      • var是关键字，用来声明变量，使用该关键字声明变量后，计算机会自动为变量分配内存空间。
      • age是程序员定义的变量名。
      • 声明多个变量只需要写一个var，多个变量名用逗号隔开。
    • 赋值：age = 18;
    • 变量初始化：var age = 18;

    声明变量的特殊情况：

    • 只声明不赋值：undefined。
    • 不声明不辅助：报错。
    • 不声明直接赋值：可以使用，但是最好不要。

    变量的命名规范：

    • 严格区分大小写。
    • 不能以数字开头。
    • 不能是关键字、保留字。
    • 变量名要有意义，遵守哦驼峰命名法。
    • 我们尽量不要直接使用name作为变量名，有些浏览器对这留有含义。

    数据类型

    js是一种弱类型（动态）语言，这意味着不用提前声明变量的类型，在程序运行中，类型会自动确定。js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的。js是动态语言，也同时意味着变量的数据类型可以发生改变。

    js把数据类型分为两大类：简单数据类型、复杂数据类型。

    简单数据类型

    Number：用来保存整数值，也可以保存小数。

    • 数字前面加0，表示八进制。例如：010换成十进制就是8。
    • 数字前面加0x，表示八进制。
    • 数字型的最大值：Number.MAX_VALUE，数字型的最小值：Number.MIN_VALUE。
    • Infinity：无穷大；-Infinity：无穷大；NaN：非数字。
      • isNaN()：用来判断非数字，并且返回一个值。如果是数字则返回false，否则返回true。

    String：引号里的文本 （推荐就使用单引号）

    • 引号嵌套：外单内双，外双内单。
    • 字符串转义字符都是\开头，要写到引号里面。

    Boolean：true表示1，false表示0。

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

    • 例如：var v = undefined;
      • console.log(v + 'pink')，输出的是undefinedpink。
      • console.log(v + 1)，输出的是NaN。

    null：空值。

    • 例如：var v = null;
      • console.log(v + 'pink')，输出的是nullpink。
      • console.log(v + 1)，输出的是1。

    检测数据类型：typeof 变量名。

    • prompt取过来的值是字符型的。
    数据类型转换

    数字型转换成字符串型：

    • 变量.toString()
    • String(变量)
    • 变量 + ‘’(隐式转换

    其他类型转换成数字型：

    • parseInt(变量)：字符型转换成数字型，得到的是取整的整数。
      • parseInt(120px)，得到的是120，会去掉这个px单位。
      • parseInt(rem120px)，不识别，得到的是NaN。
    • parseFloat(变量)：字符型转换成数字型，得到的是浮点数。
    • Number(变量)
    • 利用了算数运算 - * / （隐式转换）

    其他类型转换成布尔型：Boolean()函数。

    • 代表空、否定值会被转换成false。如：‘’、0、NaN、null、undefined。
    • 其余值都会被转换成true。

    编译和解释语言

    程序语言翻译成机器语言的工具称为翻译器，它翻译的方式有两种：编译和解释，两者区别在于翻译的时间点不同。

    • 编译器是在代码执行之前进行编译，生成中间代码文件。（Java
    • 解释器是在运行时进行及时解释，并立即执行。（js

    运算符

    浮点数在算数运算里面会有误差，不要直接判断浮点数是否相等。

    ==：默认转换数据类型，会把字符串型的数据转换成数字型，只需要两边值相等就是true。

    ===：要求两侧的值和数据类型完全一致才是true。

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

    分支结构

    三元运算符：条件表达式?表达式1:表达式2。如果条件表达式结果为真，就返回表达式1的值；如果为假就返回表达式2的值。

    switch语句：通常处理case为比较确定值的情况，我们开发里面表达式经常写成变量。表达式的值和case里面的值相匹配的时候是全等，必须值和数据类型都一样。

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    循环结构

    continue关键字用于立即跳出本次循环，继续执行剩余次数循环。

    break用于跳出整个循环。

    数组

    创建数组：

    • var arr = new Array();
    • var arr = [];（用这个，简单

    筛选数组中的元素：newArr[newArr.length] = arr[i];

    函数

    函数使用分为两步：声明函数和调用函数。

    声明函数：

    function 函数名(){
    函数体
}

    • 1
    • 2
    • 3
    • function是关键字，必须小写。
    • 形参可以看作是不用声明的变量。

    函数形参和实参匹配问题

    • 如果实参的个数和形参的个数一致，则正常输出结果。
    • 如果实参的个数多于形参的个数，会取到形参的个数。
    • 如果实参的个数少于形参的个数，多于的形参定义为undefined。

    return：

    • 后面的代码不会被执行。
    • 返回的结果是最后一个值。
    • 函数如果有return则返回的是return后面的值；没有return就返回undefined。

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

    伪数组并不是真正意义上的数组，它有以下特点：

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

    作用域

    js作用域：就是代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性，更重要的是减少命名冲突。

    js的作用域（es6）之前：全局作用域、局部作用域。

    • 全局作用域：整个script标签或者是一个单独的js文件。
    • 局部作用域：在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用。

    变量的作用域：根据作用域的不同变量分为全局变量和局部变量。

    • 全局变量：在全局作用于下的变量，在全局下都可以使用。
      • ps：如果在函数内部没有声明直接赋值的变量也属于全局变量。
    • 局部变量：在局部作用域下的变量或者在函数内部的变量都是局部变量。
      • ps：函数的形参也可以看作是局部变量。

    从执行效率来看全局变量和局部变量：

    • 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源。
    • 局部变量当我们程序执行完毕就会销毁，比较节约内存资源。

    现阶段js没有块级作用域，在es6的时候新增的块级作用域。

    作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值。（就近原则）

    预解析

    js解析器运行js分为两步：预解析、代码执行。

    • 预解析：js引擎会把js里面所有的var还有function提升到当前作用域的最前面。
    • 代码执行：按照代码书写的顺序从上往下执行。

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

    • 变量提升：把所有的变量声明提升到当前作用域的最前面，不提升赋值操作。
    • 函数提升：把所有的变量声明提升到当前作用域的最前面，不调用函数。

    案例：

    <script>
        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);
        }
        //上面的代码预解析过后是：
        f1();
        function f1(){
            var a; // 局部变量
            a = 9;
            b = c = 9; //直接赋值就是全局变量
            console.log(a); //9
            console.log(b); //9
            console.log(c); //9
        }
        console.log(c); //9
        console.log(b); //9
        console.log(a); //报错
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    对象

    在js中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象。对象是由属性和方法组成的。

    • 属性：事物的特征（n
    • 方法：事物的行为（v

    创建对象的三种方式：字面量、new Object、构造函数。

    • 对象字面量：就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法。

      • <script>
        //利用字面量创建对象{}
        var obj = {
            uname: 'wld',
            age: 20,
            saiHi: function(){
                console.log('hi');
            }
        }
        //使用对象 1.采取 对象名.属性名
        console.log(obj.uname);

        //2.调用属性还有一种方法： 对象名['属性名']
        console.log(obj['age']);

        //调用对象的方法sayHi  对象名.方法名()
        obj.saiHi();
    </script>

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18

      • 里面的属性或者方法采取键值对的形式。键 属性名: 值 属性值

      • 多个属性或者方法中间用逗号隔开

      • 方法冒号后面跟的是一个匿名函数

    • new Object

      • //利用new Object创建对象
        var obj = new Object();
        obj.uname = 'wld';
        obj.age = 20;
        obj.saiHi = function(){
            console,log('hi');
        }

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7

      • 利用 等号 = 赋值 的方法添加对象的属性和方法

      • 每个属性和方法之间用分号结束

    • 构造函数：就是把对象里面一些相同的属性和方法抽象出来封装到函数里面。

      • 前面的方式一次只能创建一个对象，因此我们可以利用函数的方法，重复这些相同的代码，里面封装的是对象。

      • //构造函数的语法格式
        function 构造函数名(){
            this.属性 = 值;
            this.方法 = function(){

            }
        }
        new 构造函数名();
        function Star(uname, age, sex, sang){
            this.uname = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang){
                console.log(sang);
            }
        }
        var wld = new Star('www', 20, '女');
        wld.sing('乐队的夏天');

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18

      • 构造函数名字首字母要大写

      • 构造函数不需要return就可以返回结果

      • 调用函数要new函数

      • 方法和属性前面要有this

    变量和属性的相同点：用来存储数据的。不同点：变量是单独声明并赋值，使用的时候直接写变量名，单独存在的；属性是在对象里面的不需要声明的，使用的时候必须是对象.属性。

    函数和方法的相同点：实现某种功能。不同点：函数是单独声明，并且调用的 函数名()单独存在的；方法是在对象里面的，调用的时候是对象.方法。

    遍历对象：

    • for(var k in obj){
    console.log(k); //k 变量 输出 得到的是属性名
    console.log(obj[k]); //obj[k] 得到的是属性值
}

      • 1
      • 2
      • 3
      • 4

    • 使用for in 里面的变量 一般写k 或 key

    内置对象

    内置对象就是指js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。js提供了多个内置对象：Math、Date、Array、String等。

    Math

    Math数学对象不是一个构造函数，所以我们不需要new来调用，而是直接使用里面的属性和方法即可。

    Math.max():

    • 可以没有参数，没参数返回-Infinity
    • 若参数中有非数字型，则返回NaN

    Math.abs()：求数值的绝对值。

    • 存在隐式转换，会把字符串型转换成数字型。例如：‘-1’会转换成-1，但是‘pink’还是返回NaN。

    三个取整方法：

    • Math.floor()：向下取整，往小的取值。
    • Math.ceil()：向上取整，往大的取值。
    • Math.round()：四舍五入。其他数字都是四舍五入，但是**.5特殊**，它往大的取。

    Math.random()：返回一个随机的小数，范围是[0,1)。

    • 没有参数。
    • 想要得到两个数之间的随机整数，并且包含这两个整数：Math.floor(Math.random() * (max - min + 1)) + min;
    Date

    Date是个构造函数，必须使用new来调用创建我们的日期对象。

    new Date();

    • 没有参数，则返回当前系统的当前时间。
    • 参数的常用方法：数字型 2022,8,15 或者是 字符串型 ‘2022-8-15 21:28:8’
      • getMonth()：在返回月份时会比实际小1（0-11）
      • getDay()：周一返回1，周六返回6，周日返回0（0-6）

    获得Date总的毫秒数(时间戳)，不是当前时间的毫秒数，而是距离1970年1月1日的毫秒数。

    • 先new Date()，再调用valueOf()、getTime()
    • 最常用的方法：直接 +new Date()
    • H5新增的方法：Date.now()
    Array

    检测是否为数组：

    • instanceof 运算符
    • Array.isArray(数组名)：H5新增的，ie9以上版本支持

    添加数组元素的方法：

    • push()：在数组的末尾添加一个或者多个数组元素。
      • 参数直接写数组元素就可以了
      • push完毕后，返回的结果是新数组的长度
    • unshift()：在数组的开头添加一个或者多个数组元素。
      • 特点与push一样

    删除数组元素的方法：

    • pop()：删除数组的最后一个元素。

      • 没有参数

      • 返回的结果是删除的元素

    • shift()：删除数组的第一个元素。

      • 特点与pop一样

    翻转数组：reverse();

    数组排序（冒泡排序）：sort(function(a, b){

    return a - b;})(a - b就是升序排列，b - a是降序)

    数组索引方法：

    • indexOf(数组元素)：返回该数组元素的索引号，从前往后查找。
      • 只返回第一个满足条件的索引号
      • 找不到就返回-1
    • lastIndexOf()：返回该数组元素的索引号，从后往前查找。

    数组转换成字符串：

    • toString()
    • join(分隔符)

    contact()：连接两个或多个数组，不影响原数组，返回一个新的数组。

    slice()：数组截取slice(begin, end)，返回被截取项目的新数组。

    splice()：数组删除splice(第几个开始，要删除的个数)，返回被删除项目的新数组。ps：这个会影响原数组。

    String

    基本包装类型：就是把简单数据类型包装成为了复杂数据类型，这样基本数据类型就有了属性和方法。

    • 1.生成临时变量，把简单类型包装成复杂数据类型。
    • 2.赋值给我们声明的字符变量。
    • 3.销毁临时变量。

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

    字符串对象，根据字符返回位置：index('要查找的字符',[起始的位置])

    根据位置返回字符：

    • charAt(index)：返回元素本身
    • charCodeAt(index)：返回相应索引号的字符ASCII值，目的是判断用户按下了哪个键
    • str[index]：H5新增的

    有一个对象 来判断是否有该属性：对象['属性名']

    字符串操作方法：

    • concat(str1,str2...)：用来连接两个或多个字符串，拼接字符串等效于+，+更常用。
    • substr(start,length)：从start开始，length取的是个数。
    • slice(start,end)：从start开始，截取到end位置，end取不到。
    • substring(start,end)：从start开始，截取到end位置，end取不到，基本和slice相同，但是不接受负值。

    替换字符：replace('被替换的字符','替换为的字符')

    字符转换为数组：split('分隔符')

    toUpperCase()：转换大写

    toLowerCase()：转换小写

    数据类型内存分配

    简单类型又叫基本数据类型或者值类型，复杂类型又叫做引用类型。简单数据类型 null返回的是一个空的对象。

    • 值类型：在存储时变量中存储的是值本身。
    • 引用类型：存储的仅仅是地址（引用）。通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等。

    堆栈空间分配区别：

    • 栈：简单数据类型放在栈里面。
    • 堆：复杂数据类型放在堆里面。

    Web API

    API是为我们程序员提供的一个接口，帮组我们实现某种功能，会使用就行。

    Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM），现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器做交互效果。

    DOM

    简介

    DOM是文档对象模型，是个标准编程接口，通过DOM接口可以改变网页的内容、结构和样式。

    DOM树：（DOM把以下内容都看作是对象

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

    获取元素：getElementById()

    • 参数 id是大小写敏感的字符串
    • 返回的是一个元素对象
    • console.dir()：打印我们返回的元素对象，更好的查看里面的属性和方法。

    获取某类标签元素：document.getElementsByTagName('标签名')

    • 返回的是获取过来元素对象的集合，以伪数组的形式存储。
      • 如果页面中只有一个元素对象，返回的还是伪数组的形式。
      • 如果页面中没有这个元素，返回的还是伪数组的形式，只不过是空的。
    • 依次打印里面的元素对象可以采取遍历的方式。
    • 得到的元素是动态的
    • element.getElementsByTagName('标签名')：获取某个元素（父元素）内部所有指定标签名的子元素
      • 父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己。

    通过H5新增的方法获取：

    • document.getElementsByClassName('类名')：根据类名返回元素对象集合。
    • document.querySelector('选择器')：根据指定选择器返回第一个元素对象。
      • 里面的选择器需要加符号，如.box、#nav。
    • document.querySelectorAll('选择器')：根据指定选择器返回所有元素对象集合。

    获取特殊元素（body、html）：

    • document.body：返回body元素对象。
    • document.documentElement：返回html元素对象。
    事件基础

    所谓的事件就是触发的响应机制。事件由三部分组成：事件源、事件类型、事件处理程序，也称为事件三要素。

    • 事件源：事件被触发的对象。
    • 事件类型：如何触发 什么事件。比如：鼠标点击（onclick）还是鼠标经过、键盘按下。
    • 事件处理程序：通过一个函数赋值的方式完成。

    执行事件的步骤：

    • 1.获取事件源
    • 2.注册事件（绑定事件）
    • 3.添加事件处理程序（采取函数赋值形式）
    操作元素

    改变元素内容：

    • element.innerText：从起始位置到终止位置的内容。
      • 不识别html标签 （非标准
      • 去除空格和换行
    • element.innerHTML：起始位置到终止位置的全部内容。
      • 识别html标签 （W3C标准
      • 保留空格和换行
    • 这两个属性是可读写的，可以获取元素里面的内容。

    修改表单属性：

    • 表单里面的值 文字内容是通过value来修改的。
    • 如果想要某个表单被禁用，不能再点击 disabled。
      • this.disabled = true; this指向的是事件函数的调用者。

    样式属性操作：

    • element.style：行内样式操作。

      • js修改style样式操作，产生的是行内样式，css权重比较高。
      • js里的样式采用驼峰命名法。比如：fontSize、backgroundColor。
      • 如果样式比较少或者功能简单的情况下使用。

    • ``element.className`：类名样式操作。（添加类名

      • 它会直接更改类名，会覆盖之前的类名。如果想要保留之前的类名，就在等号先写出之前的类名后面加空格再写上新的类名。（多类名选择器

      • 适合样式多的情况。

    获得焦点：onfocus，失去角度：onblur。

    鼠标经过：onmouseover，失去角度：onmouseout。

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

    • 1.所有元素全部清除样式。
    • 2.给当前元素设置样式。

    获取属性操作：

    • element.属性：获取内置属性值（元素本身自带的属性）

    • element.getAttribute('属性')：主要获取自定义的属性（自己添加的属性）

    修改属性值操作：

    • element.属性 = '值' ：设置内置属性值
    • element.setAttribute('属性','值')：主要针对于自定义的属性

    移除属性：element.removeAttribute('属性')

    自定义属性目的：为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性，H5新增了自定义属性：H5规定自定义属性data-开头做为属性名并且赋值。

    • 新增的获取自定义属性的方法：element.dataset.属性名或者element.dataset['属性名']
      • dataset是一个集合，里面存放了所有以data开头的自定义属性
      • 如果自定义属性里面有多个-链接的单词，获取的时候必须采取驼峰命名法。
      • 这个只能获取data开头的。
    节点操作

    一般来说，节点至少拥有nodeType、nodeName、nodeValue这三个基本属性。在实际开发中，节点操作主要操作的是元素节点。

    • 元素节点 nodeType为1
    • 属性节点 nodeType为2
    • 文本节点 nodeType为3（文本节点包含文字、空格、换行等）
    节点层级

    父节点：parentNode

    • 得到的是离元素最近的父节点。
    • 如果找不到就返回null。

    子节点：

    • 获取子节点

      • childNodes：获取所有的子节点。

        • 得到的所有子节点包含元素节点、文本节点等等。

        • 如果只想要获得里面的元素节点，就要专门处理。

      • children：获取所有的子元素节点。（最常用的

    • 获取第一个子节点（最后一个是last

      • firstChild：返回第一个子节点，不管是元素还是文本节点。

      • firstElementChild：返回第一个子元素节点

      • 实际开发的写法：没有兼容性问题又返回第一个子元素

        • children[index]

    兄弟节点：

    • 下一个兄弟节点：
      • nextSibling：下一个兄弟节点，包含元素节点或文本节点等等。
      • nextElementSibling：下一个兄弟元素节点。
    • 上一个兄弟节点：
      • previousSibling：下一个兄弟节点，包含元素节点或文本节点等等。
      • previousElementSibling：下一个兄弟元素节点。
    创建和添加节点

    我们想要在页面添加一个新的元素：1.创建元素 2.添加元素。

    document.createElement('tagName')方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

    添加节点：

    • node.appendChild(child)（node父级、child子级）方法将一个节点添加到指定父节点的子节点列表末尾，类似于css里面的after伪元素。
    • node.insertBefore(child,指定元素)：在指定元素前面添加child节点。
    删除节点

    node.removeChild(child):删除一个node的child节点，返回删除的节点。

    复制节点

    node.cloneNode()：返回调用该方法的节点的一个副本。

    • 如果括号参数为空或者是false，则是浅拷贝，即只复制标签，不复制里面的内容。
    • 参数为true，则是深拷贝，会复制节点本身和里面的内容。
    三种动态创建元素的区别

    document.write()：直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘。

    innerHTML：创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。

    createElement()：创建多个元素效率稍微低一点，但是结构更清晰。

    BOM

    概述

    BOM是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供很多方法与属性。BOM是浏览器厂商在各自浏览器上定义的，兼容性较差。BOM比DOM大，它包含DOM。

    window对象是浏览器的顶级对象。

    • 它是js访问浏览器窗口的一个接口。
    • 它是一个全局对象。定义在全局作用域中的变量，函数都会变成window对象的属性和方法，在调用的时候可以省略window。
      • window下的一个特殊属性window.name
    window对象的常见事件
    窗口加载事件

    window.onload = function(){}或者window.addEventListener('load',function(){});是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、css、文件等），就调用的处理函数。

    • 有了这个可以把js代码写到页面元素的上方。
    • 这种传统注册事件方式只能写一次，如果有多个，会以最后一个为准。
    • 如果使用addEventListener则没有限制。

    document.addEventListener('DOMContLoaded',function(){})：DOMContLoaded事件触发时，仅当DOM加载完成就行。

    • 如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必须影响用户的体验，此时用这个比较合适。

    • load：等页面内容全部加载完毕，包含页面dom元素、图片、flash、css等。DOMContLoaded：是DOM加载完毕，不包含图片、falsh、css等就可以执行，加载速度比load更快一些。

    调整窗口大小事件

    window.onresize = function(){}或者window.addEventListener('resize',function(){});是调整窗口大小加载事件，当触发时就调用的处理函数。

    • 只要窗口大小发生像素变化，就会触发这个事件。
    • 我们经常利用这个事件完成响应式布局。window.innerWidth是当前屏幕的宽度。
    定时器

    window提供了两个好用的方法：

    • window.setTimeout(调用函数,[延迟的毫秒数])：设置一个定时器，该定时器在定时器到期后执行调用函数。
      • window调用的时候可以省略。
      • 这个延迟时间单位是毫秒，但是可以省略，如果省略就默认是0。
      • 这个调用函数可以直接写函数，还可以写函数名。
      • 页面中可能有很多的定时器，我们经常给定时器加标识符（名字）
      • 这个调用函数称为回调函数callback。
    • setInterval(回调函数,[间隔的毫秒数])：反复调用一个函数，每隔这个时间，就去调用一次回调函数。
      • 特点与setTimeout一样。

    window.clearTimeout(timeoutID)：取消先前通过调用setTimeout()建立的定时器。

    • window可以省略。
    • 里面的参数就是定时器的标识符。

    window.clearInterval(timeoutID)：取消先前通过调用setInterval()建立的定时器。

    this指向问题：一般情况下this的最终指向的是那个调用它的对象。

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

    • 方法调用中谁调用this指向谁

    • 构造函数中this指向构造函数的实例

    js执行机制

    js一大特点是单线程。为了解决单线程造成的等待过久的问题，js出现了同步和异步。本质区别是这条流水线上各个流程的执行顺序不同。

    同步和异步

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

    异步任务：js的异步是通过回调函数实现的。异步任务相关回调函数添加到任务队列中（消息队列）。一般而言，异步任务有以下三种类型：

    • 普通事件：click、resize
    • 资源加载：load、error
    • 定时器：setInterval

    js执行机制：

    • 1.先执行执行栈中的同步任务。
    • 2.异步任务放入任务队列中。
    • 3.一旦执行栈的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

    由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环。

    location对象

    location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

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

    location对象的属性：

    • location.href：获取或者设置整个URL
    • location.host：返回主机（域名）
    • location.port：返回端口号，如果未写返回空字符串
    • location.pathname：返回路径
    • location.search：返回参数
    • location.hash：返回片段 #后面内容常见于链接锚点

    location对象的方法：

    • location.assign()：跟href一样，可以跳转页面（也称为重定向页面），可以后退页面。
    • location.replace()：替换当前页面，因为不记录历史，所以不能后退页面。
    • location.reload()：重新加载页面，相当于刷新按钮或者f5.如果参数为true强制刷新ctrl+f5。
    navigator对象

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

    history对象

    window给我们提供了history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

    history对象方法：

    • back()：可以后退。
    • forward()：前进功能。
    • go(参数)：前进后退功能。参数如果是1就前进1个页面，如果是-1就后退1个页面。
  • 相关阅读:
    Java Web之JSP
    C++11 shared_ptr类型智能指针学习
    【紫光同创国产FPGA教程】【PGC1/2KG第六章】密码锁实验例程
    git常用命令和开发常用场景
    Vue学习第22天——Vuex安装使用详解及案例练习（彻底搞懂vuex）
    2022 年 Java 行业分析报告
    [ROS 系列学习教程] 建模与仿真 - 使用 Arbotix 控制机器人
    JUMPSERVER----一键安装
    18.1 HTTP服务器-极简服务器、请求与响应
    使用plugin DSL引用自定义gradle plugin
  • 原文地址：https://blog.csdn.net/triggerV/article/details/126408739