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 src=""></script>
  • 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:
        执行最后的语句;
}

循环结构

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

break用于跳出整个循环。

数组

创建数组：

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

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

函数

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

声明函数：

function 函数名(){
    函数体
}

• 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>

对象

在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>
    

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

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

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

• new Object

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

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

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

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

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

  • //构造函数的语法格式
            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('乐队的夏天');
    

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

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

  • 调用函数要new函数

  • 方法和属性前面要有this

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

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

遍历对象：

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

• 使用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个页面。