JS入门到进阶知识总结

一. 初始JavaScript

1.概念

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言

运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行了

功能：

可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

2.JS的组成

3. 与html结合方式

1.行内式

<input type="button" value="点我试试" οnclick="alert('Hello World')"

注:

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

2.内嵌 JS

<script>
alert('Hello World~!');

注:

可以将多行JS代码写到 <’‘script’’> 标签中
内嵌 JS 是学习时常用的方式

3.外部 JS文件

<script src="my.js"></script>

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

3.JS注释

单行注释

// 用来注释单行文字（ 快捷键 ctrl + / ）

多行注释

/*
获取用户年龄和姓名
并通过提示框显示出来
*/

4.JS的输入输出语句

注:

console.dir()可以输出对象的属性.

二. JS基础语法

1. 变量

变量：一小块存储数据的内存空间

Java语言是强类型语言，而JavaScript是弱类型语言。

强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据

弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

语法：

注:

typeof运算符：获取变量的类型。
null运算后得到的是object

2.数据类型

JS 把数据类型分为两类：

简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)

1.数字型 Number

数字型三个特殊值

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

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

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

注:

isNaN()方法用来判断一个变量是否为非数字的类型，返回 true 或者 false

2.字符串型 String

字符串型可以是引号中的任意文本，其语法为双引号 “” 和单引号’’

var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子;

注:

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。
JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)
通过字符串的 length 属性可以获取整个字符串的长度。
多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串

3.布尔型 Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1); // 2
console.log(false + 1);

4.Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable);

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari);

5.数据类型转换

toString() 和 String() 使用方式不一样。
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

转换为数字型

3. 运算符

一元运算符：只有一个运算数的运算符

++，-- ， +(正号)

++ --: 自增(自减)

++(–) 在前，先自增(自减)，再运算

++(–) 在后，先运算，再自增(自减)

+(-)：正负号

注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的

算数运算符

+ - * / % ...

赋值运算符

= += -+…

比较运算符

< >= <= == ===(全等于)

比较方式

类型相同：直接比较

字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。

类型不同：先进行类型转换，再比较

===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

逻辑运算符

&& || !

* 其他类型转boolean：

1. number：0或NaN为假，其他为真 2. string：除了空字符串("")，其他都是true 3. null&undefined:都是false 4. 对象：所有对象都为true

三元运算符

? : 表达式

var a = 3;

var b = 4;

var c = a > b ? 1:0;

语法：

表达式? 值1:值2;

判断表达式的值，如果是true则取值1，如果是false则取值2；

4. 流程控制语句：

f…else…

switch:

在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)

switch(变量):

case 值:

在JS中,switch语句可以接受任意的原始数据类型

while

do…while

for

5. JS特殊语法：

1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议) 2. 变量的定义使用var关键字，也可以不使用用：定义的变量是局部变量不用：定义的变量是全局变量(不建议)

三.基本对象

1.数组

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

1.创建数组

利用 new 创建数组

var 数组名 = new Array() ；
var arr = new Array(); // 创建一个新的空数组

利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
var 数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','大黄','瑞奇']

注:

声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后最多使用的方式

2.遍历数组

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
  console.log(arrStus[i]);
}

注意:

使用“数组名.length”可以访问数组元素的数量（数组长度）。
当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化。

2.函数对象

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

1.函数的使用

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

声明函数

// 声明函数
function 函数名() {
//函数体代码
}

调用函数

函数名();

注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

2.函数的返回值

return 语句的语法格式如下：

// 声明函数
function 函数名（）{
...
return 需要返回的值；
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值

注意:

在使用 return 语句时，函数会停止执行，并返回指定的值
如果函数没有 return ，返回的值是 undefined

break ,continue ,return 的区别

break ：结束当前的循环体（如 for、while）

continue ：跳出本次循环，继续执行下次循环（如for、while）

return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

3.arguments的使用

JS中所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法

4. 函数的两种声明方式

自定义函数方式

利用函数关键字 function 自定义函数方式。

// 声明定义方式
function fn() {...}
// 调用
fn();

注:

因为有名字，所以也被称为命名函数
调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

函数表达式方式(匿名函数）

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

注:

因为函数没有名字，所以也被称为匿名函数
这个fn 里面存储的是一个函数

3.自定义对象

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

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

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

1.创建对象的三种方式

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：

利用字面量创建对象

利用 new Object 创建对象

利用构造函数创建对象

利用字面量创建对象

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

{ } 里面采取键值对的形式表示

var star = {
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};

利用new Object创建对象

var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
alert('大家好啊~');
}

利用构造函数创建对象

在 js 中，使用构造函数要时要注意以下两点：

构造函数用于创建某一类对象，其首字母要大写

构造函数要和 new 一起使用才有意义

function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.sayHi = function() {
alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
}
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);

注意:

构造函数约定首字母大写。

函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。

构造函数中不需要 return 返回结果。

当我们创建对象的时候，必须用 new 来调用构造函数。

2.遍历对象属性

for…in 语句用于对数组或者对象的属性进行循环操作。

其语法如下：

for (变量 in 对象名字) {
// 在此执行代码
}

举例:

for (var k in obj) {
console.log(k); // 这里的 k 是属性名
console.log(obj[k]); // 这里的 obj[k] 是属性值
}

4.JS内置对象

JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象

前面两种对象是JS 基础内容，属于 ECMAScript；第三个浏览器对象属于我们JS 独有的，具体见JS API 部分

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

1.Math对象

随机数方法 random()

random() 方法可以随机返回一个小数，其取值范围是 [0，1)

举例:得到一个两数之间的随机整数，包括两个数在内

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

2.Date对象

Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用

Date()方法的使用

获取当前时间必须实例化

var now = new Date();
console.log(now);

Date() 构造函数的参数

如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’,可以写成new Date(‘2019-5-1’)或者 new Date(‘2019/5/1’)

注意:

如果Date()不写参数，就返回当前时间
如果Date()里面写参数，就返回括号里面输入的时间

日期格式化

3.数组对象

1.数组对象的创建

创建数组对象的两种方式

字面量方式
new Array()

2.添加删除数组元素的方法

3.数组排序

4.数组索引方法

5.数组转换为字符串

其他:

4.字符串对象

1.根据字符返回位置

2.根据位置返回字符（重点）

3.字符串操作方法（重点）

其他:

replace() 方法用于在字符串中用一些字符替换另一些字符。

其使用格式如下：

replace(被替换的字符串， 要替换为的字符串)；

split()方法

split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。

var str = 'a,b,c,d';
console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]

toUpperCase() //转换大写
toLowerCase() //转换小写

四.DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

DOM树

注:

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

1.获取元素

①.根据ID获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

document.getElementById('id')

②根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName('标签名');

注:还可以获取某个元素(父元素)内部所有指定标签名的子元素.

element.getElementsByTagName('标签名');

③通过 HTML5 新增的方法获取

1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll('选择器'); // 根据指定选择器返回

注意：

querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’#nav’);

④获取特殊元素（body，html）

1. doucumnet.body // 返回body元素对象
2. document.documentElement // 返回html元素对象

2.事件基础

事件三要素

事件源（谁）

事件类型（什么事件）

事件处理程序（做啥）

执行事件的步骤

获取事件源

注册事件（绑定事件）

添加事件处理程序（采取函数赋值形式）

常见的鼠标事件

4.操作元素

DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等

1.改变元素内容

element.innerText()//从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
element.innerHTML()//起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

2.常用元素的属性操作

1. innerText、innerHTML 改变元素内容
2. src、href
3.

3.表单元素的属性操作

type、value、checked、selected、disabled

4.样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

1. element.style 行内样式操作
2. element.className 类名样式操作

注意:

1.JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor

2.JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

操作元素总结

5.自定义属性的操作

获取属性值

element.属性获取属性值。
element.getAttribute(‘属性’);

区别：

element.属性获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’); 主要获得自定义的属性（标准）我们程序员自定义的属性

设置属性值

element.属性 = ‘值’ 设置内置属性值。
element.setAttribute(‘属性’, ‘值’);

区别：

element.属性设置内置属性值
element.setAttribute(‘属性’); 主要设置自定义的属性（标准）

移除属性

element.removeAttribute(‘属性’);

5.节点操作

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

1.概述

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

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

注:我们在实际开发中，节点操作主要操作的是元素节点

2.节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

父级节点

node.parentNode

注:

parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回 null

子节点

(1) parentNode.childNodes （标准）

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。

如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

var ul = document. querySelector(‘ul’);
for(var i = 0; i < ul.childNodes.length;i++) {
  if (ul.childNodes[i].nodeType == 1) {
    // ul.childNodes[i] 是元素节点
    console.log(ul.childNodes[i]);
  }
}

(2) parentNode.children （非标准）

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。

虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

(3) parentNode.firstChild
firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
(4) parentNode.lastChild
lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
(5) parentNode.firstElementChild
firstElementChild 返回第一个子元素节点，找不到则返回null。
(6) parentNode.lastElementChild
lastElementChild 返回最后一个子元素节点，找不到则返回null。

兄弟节点

(1)node.nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。
(2) node.previousElementSibling
previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。

注:实际开发中使用的很少,了解即可

创建节点

document.createElement('tagName')

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

添加节点

node.appendChild(child)//将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的after 伪元素。
node.insertBefore(child, 指定元素)//将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before

删除,复制节点

node.removeChild(child)//从 DOM 中删除一个子节点，返回删除的节点
node.cloneNode()//返回调用该方法的节点的一个副
   1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
   2. 如果括号参数为 true

五.事件高级

1.注册事件（绑定事件）

注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式

利用 on 开头的事件 onclick

<button onclick=“alert('hi~')”></button>
btn.onclick = function() {}

特点：注册事件的唯一性

同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

addEventListener 事件监听方式

.addEventListener(type, listener[, useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：

type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

attachEvent 事件监听方式

eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent()方法将指定监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，指定的回调函数就会被执行。

这个知道就行,现在几乎不用.

2. 删除事件（解绑事件）

传统注册方式

eventTarget.onclick = null;

方法监听注册方式

① eventTarget.removeEventListener(type, listener[, useCapture]);
② eventTarget.detachEvent(eventNameWithOn, callback);

3.DOM事件流

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

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

比如我们给一个div 注册了点击事件：

DOM 事件流分为3个阶段：

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

事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。
事件捕获：网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

注意

1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
2. onclick 和 attachEvent 只能得到冒泡阶段。
3. addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕
获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理
程序。
4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
5. 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
6.

4.事件对象

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

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

比如：

谁绑定了这个事件。
鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

事件对象的使用语法

.onclick = function(event) {
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
}
eventTarget.addEventListener('click', function(event) {
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
}）

这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。

e.target 和 this 的区别：

this 是事件绑定的元素，这个函数的调用者（绑定这个事件的元素） e.target 是事件触发的元素。

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

5.阻止事件冒泡

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。

事件冒泡本身的特性，会带来的坏处，也会带来的好处

阻止事件冒泡的里昂中方式

标准写法：利用事件对象里面的 stopPropagation()方法

e.stopPropagation()

非标准写法：IE 6-8 利用事件对象 cancelBubble 属性

e.cancelBubble = true;

6.事件委托（代理、委派）

7.常用的鼠标事件

禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})

禁止鼠标选中（selectstart 开始选中）

document.addEventListener('selectstart', function(e) {
e.preventDefault();
})

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent 和键盘事件对象 KeyboardEvent。

8.常用的键盘事件

事件除了使用鼠标触发，还可以使用键盘触发.

注意： onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。键盘事件对象

注意: onkeydown 和 onkeyup不区分字母大小写,onkeypress 区分字母大小写。

六.BOM对象

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心

对象是 window。

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

DOM和BOM比较

1.BOM的构成

BOM 比 DOM 更大，它包含 DOM。

window 对象是浏览器的顶级对象，它具有双重角色。

它是 JS 访问浏览器窗口的一个接口。
它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。

2.window 对象的常见事件

1.窗口加载事件

window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS

文件等), 就调用的处理函数。

.onload = function(){}
或者
window.addEventListener("load",function(){});

注意:

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。

window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。

如果使用 addEventListener 则没有限制

补充:

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。

2.调整窗口大小事件

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

window.onresize = function(){}
window.addEventListener("resize",function(){});

注意：

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

3.两种定时器

window 对象给我们提供了 2 个非常好用的方法-定时器。

setTimeout()
setInterval()

1.setTimeout()方法

window.setTimeout(调用函数, [延迟的毫秒数]);

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

注意：

window 可以省略。

这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐

延迟的毫秒数省略默认是 0，如果写，必须是毫秒。

因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

window.setTimeout(调用函数, [延迟的毫秒数]);
window.clearTimeout(timeoutID)//取消了先前通过调用 setTimeout() 建立的定时器。

setTimeout() 这个调用函数我们也称为回调函数 callback

普通函数是按照代码顺序直接调用。而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。

简单理解：回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。

我们学习过的 element.onclick = function(){} 或element.addEventListener(“click”, fn); 里面的函数也是回调函数。

2.setInterval() 定时器

window.setInterval(回调函数, [间隔的毫秒数]);
window.clearInterval(intervalID);//停止 setInterval() 定时器

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

注意：

window 可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

补充:关于this

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

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

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

4.JS执行队列

…此处省略

5.location 对象

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

1.URL

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

URL 的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

2.location 对象的属性

重点记住： href 和 search

3.location 对象的方法

6.history 对象

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

七.PC端网页特效

1. 元素偏移量 offset 系列

offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

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

offset 系列常用属性：

offset 与 style 区别