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~!');
</script>

注:

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

3.外部 JS文件

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

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

3.JS注释

1. 单行注释

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

2. 多行注释

/* 获取用户年龄和姓名 并通过提示框显示出来 */  默认快捷键 alt + shift + a ）
快捷键修改为： ctrl + shift + /

4.JS的输入输出语句

注:

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

二. JS基础语法

1. 变量

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

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

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

语法：

 var 变量名 = 初始化值;

注:

• 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 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法

注:

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

3.布尔型 Boolean

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

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

4.Undefined 和 Null

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

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

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

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

5.数据类型转换

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

4. 转换为数字型
   

3. 运算符

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

1. ++，-- ， +(正号)
2. ++ --: 自增(自减)
3. ++(–) 在前，先自增(自减)，再运算
4. ++(–) 在后，先运算，再自增(自减)
5. +(-)：正负号

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

2. 算数运算符

 + - * / % ...

3. 赋值运算符

= += -+…

4. 比较运算符

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

比较方式

1. 类型相同：直接比较
   字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
2. 类型不同：先进行类型转换，再比较
   ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

5. 逻辑运算符
   && || !
   * 其他类型转boolean：

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

6. 三元运算符

? : 表达式
var a = 3;
var b = 4;

          var c = a > b ? 1:0;

语法：

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

4. 流程控制语句：

1. f…else…
2. switch:
3. 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
             switch(变量):
                             case 值:
    在JS中,switch语句可以接受任意的原始数据类型
4. while
5. do…while
6. for

5. JS特殊语法：

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

三.基本对象

1.数组

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

1.创建数组

1. 利用 new 创建数组

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

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

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

注:

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

2.遍历数组

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

注意:

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

2.函数对象

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

1.函数的使用

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

1. 声明函数

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

2. 调用函数

函数名();

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

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. 函数的两种声明方式

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

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

注:

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

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

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

注:

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

3.自定义对象

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

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

1.创建对象的三种方式

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

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

1. 利用字面量创建对象
   对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。
   { } 里面采取键值对的形式表示

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

2. 利用new Object创建对象

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

3. 利用构造函数创建对象

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

1. 构造函数用于创建某一类对象，其首字母要大写
2. 构造函数要和 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);

注意:

1. 构造函数约定首字母大写。
2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
3. 构造函数中不需要 return 返回结果。
4. 当我们创建对象的时候，必须用 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 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用

1. Date()方法的使用
   获取当前时间必须实例化

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

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

注意:

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

3. 日期格式化
   

3.数组对象

1.数组对象的创建

创建数组对象的两种方式

1. 字面量方式
2. new Array()

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

3.数组排序

4.数组索引方法

5.数组转换为字符串

其他:

4.字符串对象

1.根据字符返回位置

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

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

其他:

1. replace() 方法用于在字符串中用一些字符替换另一些字符。
   其使用格式如下：

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

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

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

3. toUpperCase() //转换大写
4. 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.事件基础

事件三要素

1. 事件源 （谁）
2. 事件类型 （什么事件）
3. 事件处理程序 （做啥）

执行事件的步骤

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

常见的鼠标事件

4.操作元素

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

1.改变元素内容

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

2.常用元素的属性操作

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

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(‘属性’);

区别：

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

设置属性值

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

区别：

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

移除属性

• element.removeAttribute(‘属性’);

5.节点操作

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

1.概述

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

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

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

2.节点层级

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

1. 父级节点

node.parentNode

注:

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

2. 子节点

(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。

3. 兄弟节点

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

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

4. 创建节点

document.createElement('tagName')

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

5. 添加节点

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

6. 删除,复制节点

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

五.事件高级

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

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

传统注册方式

利用 on 开头的事件 onclick

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

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

addEventListener 事件监听方式

 eventTarget.addEventListener(type, listener[, useCapture])

eventTarget.addEventListener()方法将指定的***注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：

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

attachEvent 事件监听方式

eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent()方法将指定***注册到eventTarget(目标对象)上，当该对象触发指定的事件时，指定的回调函数就会被执行。
这个知道就行,现在几乎不用.

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

1. 传统注册方式

eventTarget.onclick = null;

3. 方法监听注册方式

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

3.DOM事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。
比如我们给一个div 注册了点击事件：
DOM 事件流分为3个阶段：

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

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

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

***对象

官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。
比如：

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

事件对象的使用语法

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

这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
e.target 和 this 的区别：

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

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

5.阻止事件冒泡

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。
事件冒泡本身的特性，会带来的坏处，也会带来的好处
阻止事件冒泡的里昂中方式

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

e.stopPropagation()

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

e.cancelBubble = true;

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

7.常用的鼠标事件

1. 禁止鼠标右键菜单
   contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

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

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

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

3. 鼠标事件对象
   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 对象是浏览器的顶级对象，它具有双重角色。

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

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

2.window 对象的常见事件

1.窗口加载事件

window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS
文件等), 就调用的处理函数。

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

注意:

1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕， 再去执行处理函数。
2. window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。
3. 如果使用 addEventListener 则没有限制

补充:

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

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

2.调整窗口大小事件

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

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

注意：

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

3.两种定时器

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

• setTimeout()
• setInterval()

1.setTimeout()方法

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

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

1. window 可以省略。
2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
3. 延迟的毫秒数省略默认是 0，如果写，必须是毫秒。
4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

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

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

1. 简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
2. 我们学习过的 element.onclick = function(){} 或element.addEventListener(“click”, fn); 里面的 函数也是回调函数。

2.setInterval() 定时器

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

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

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

补充:关于this

1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
2. 方法调用中谁调用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 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

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

1. offset 系列常用属性：
   
2. offset 与 style 区别
   

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

• 获得元素距离带有定位父元素的位置
• 获得元素自身的大小（宽度高度）
  

2. 元素可视区 client 系列

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列
的相关属性可以动态的得到该元素的边框大小、元素大小等。

3. 元素滚动 scroll 系列

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

如图:

页面被卷去的头部
如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏
掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。

三大系列总结

他们主要用法：

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