JavaScript基础
JavaScript语法
JS的组成
js是由ECMASCRIPT,DOM和BOM三者组成的
js的书写位置
prompt();对话框+输入框
字面量
字面就是所见即所得。可用于表示固定值：数字、字符串、fundefined。布尔类型
数字字面量:
Number.MIN_VALUE.计算机最小值
Number.MAX_VALUE.计算机最大值
InFinity。无穷大/去穷小。
NaN.不是一个正常的数。isNaN();判断一个数据是不是NaN
检测数据类型
typeof();type方法用于进行数据类型检测
类型转换
parseint();方法把字符串转整数。对浮点数是转整数。
parseFloat();把字符串转浮点数。
操作符
+-*/
逻辑运算符
逻辑运算符在赋值里
a && b;a如果为false。那么就取右边儿的值。
a || b;a如过为true,那么就取a的值。反之就取b
！表示条件反转。
运算顺序，非与或
运算优先级
()优先级最高
一元运算符 ++ -- !
算数运算符 * / % + -
关系运算符 > >= < <=
相等运算符 == != === !==
逻辑运算符. && || !
赋值运算符
表达式
流程控制语句
if() {
} else {
}
if{
}else if() {
} else {
}
三元表达式:
条件?true条件返回值:false条件返回值;(只能够返回值。不能够执行语句)
JavaScript基础
js数组
数组是一组有序的数据集合，数据内部可以存放多个数据。不限制数据类型，并且数据的长度可以动态的调整。
数组的字面量[]
数据中的每个数据需要用,进行分隔。
创建一个数组:
let att = [];//创建一个空数组
获取数组元素
如果索引值超过了数组最大项，相当于这一项没有赋值。内部存储的就是undefined、
更改数据，arr[index]调用这一项数据。后面等号赋值更改数据
获取数据长度
变量名.length;获取数组的长度。
数组的长度和数组最后一项的数据的位置存在关系。
arr.length = 5;对数据长度进行缩短。后面的数组数据则会消失不见。
数据遍历方法
遍历:对数组的每个元素偶读访问一次就叫做遍历。利用for循环，将数组中的每一项都单独拿出来，进行一些操作
js函数
为什么要有函数
函数,funtion,也叫做功能，方法。函数可以将一段代码封装起来，被封装起来的函数具备
某一项特殊的功能。
函数可以实现一次封装功能。多次调用。
函数声明
funciton 函数名(参数名) {
函数结构体;
}
函数必须先声明才能使用。
函数调用
fun();
函数的参数
函数参数可以接收数据。
多个参数使用，进行分割
funciton a(形参,形参) {
}
a(实参,实参);
只需要知道传递什么参数，执行什么功能，没必要知道内部结构什么。
函数的返回值
利用函数内部的return关键字，设置函数的返回值。
函数的返回值，可以继续参加函数。
函数表达式
函数表达式定义的另外一种方式
函数定义一个变量。
let foo = function () {
};//只能用变量名，进行调用。无法使用函数名。
函数的数据类型
函数是一种单独的数据类型。funciton。
函数是一种数据类型，可以当成其他函数的参数。
setInterval(function(){
console.log(1);
},1000);
函数也可以当做另一个函数的返回值。
arguments对象
调用函数的时候，形参个数可以与实参不同。
arguments对象是一个比较特别的一个对象，实际上是当前函数的一个内置属性。
所有函数都内置了一个arguments对象。arguments对象中存储了传递所有的实参。
arguments是一个伪数组，因此可以进行遍历。
函数的实参个数和形参个数可以不一致。所有的实参都会存储在函数内部的
arguments类数组对象中。
arguments.length;获取方法的实参数量
应用案例:
定义一个求和函数,如果传入1个参数，返回它自己，如果传入两个参数，返回他们的和。
如果传入三个参数，先比较前两个的大小，大的与第三个参数求和返回，如果传入4个及
以上，则输出提示错误。
模拟控制台报错
// 提示用户，实参个数传递错误。
throw new Error("文本提示");
函数递归
函数内部可以通过，函数名调用函数自身的方式，就是调用函数递归现象。
递归的次数太多，容易出现错误:超出计算机的计算最大能力
更多时候，使用递归去解决一些数学中的现象。
例如:可以输出裴波那契数列的某一项的值。
作用域
作用域:变量可以起作用的范围。
变量定义在函数的内部，只能在函数内部被访问到。
任何一堆花括号内的结构体{}都属于块儿作用域。
在这之中声明的变量，在代码外都是不可见的。我们称之为块级作用域。
var声明的函数，是没有块儿作用域的。在e5语法中是可以认为JavaScript
是没有块作用域的。
局部变量:定义在函数内部的变量，只能在函数作用域内部被访问到。外面是没有意义的。
全局变量:从广义上来说。也是一种局部变量，定义在全局的变量。作用域范围是全局。
局部变量在退出作用域后会销毁，全局变量关闭网页或浏览器才会销毁。
参数和函数的作用域
函数的参数本质是一个变量，也有自己的作用域，函数的参数也是属于函数自己内部的局
部变量。只能在函数内部使用，在函数外面没有定义。
函数定义在另一个函数内部，如果外部函数没有执行时，相当于内部代码没写。
作用域链和遮蔽效应
只有函数可以制造作用域结构，那么只要是代码，就是至少有一个作用域。
即圈布局作用域。凡是代码中有函数，那么这个函数就构成另一个作用域。
如果函数中还有函数，那么在这个作用域中又可以诞生一个作用域。
就这样的所有的函数作用域列出来，就可以有一个结构：函数内指向函数外的
链式结构，就称作作用域链。
作用域链，都是在自己的作用域寻找变量。如果没有，再访问上一级。
遮蔽效应:
程序在遇到一个变量时，使用时作用域查找顺序。不同层次的函数内都有可能
定义相同名字的变量，一个变量在使用时，会优先从自己所在层作用域查找变量，
如果当前层没有变量定义会按照顺序从本层往外依次查找，直到找到第一个变量
定义。
整个过程中会发生内层变量，遮蔽外层变量的效果，叫做"遮蔽效应"。
不写var关键字的影响
在函数内部想要定义新的变量，如果不加关键字var，相当于把变量声明在了全局。
这样会造成变量污染。
预解析和声明提升
预解析，把声明变量提升到当前作用域最顶部。
在js中会出现一种现象，在前面调用后定义的量，不会报错。
只会使用undefined值。
函数声明提升。在函数声明前，都可以调用。
先提升变量声明，再提升函数声明。不要书写相同的变量名和表示名
给变量和函数。
function声明定义函数。函数是永远生效的。
函数声明提升可以用于调整代码的顺序。将大段的定义过程放到代码最后，但是不
影响代码执行效果。
IFE自调用函数
自调用函数，表示在定义时就立即调用
函数调用方式:函数名，或函数表达式的变量名后面加()运算符。
函数矮化成表达式的方法，可以让函数参与一些运算。给函数前面
加上一些运算符。
数学运算符: + - ()
逻辑运算符: ! 非运算
立即执行函数:
(function(形参) {
alert("");
})(实参);
ife一次性函数。
JS对象
为什么要有对象
如果有一堆相关的数据，松散的存储不利于使用，存入数组中受下标限制
又必须有固定的顺序。而对象可以自定义名称存储一系列无序的相关数据。
对象字面量
对象字面量语法{}
内部可以存放多条数据.数据与数据之间用逗号分隔，最后一个后面不要
加逗号。
每条属性，都是有属性名和属性值组成的。键值对写法key:value;
let obj = {
key:value,
key:value,
key:value
}
调用对象内部属性和方法的语法
用对象的变量名打点调用某个属性名得到属性值。
在对象内部用this打点调用属性名。this代替对象。
用对象的变量名后面加[]调用，[]内部是字符串格式的
属性名。
调用方法时，需要在方法名后面加()执行。
删除一条对象属性:
delete perspm1.sex
new Object()方法创建对象
Object()构造函数，是一种特殊的函数。主要用来在创建对象时初始化
对象，即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的
语句中。
构造函数用于创建一类对象,首字母要大写。
构造函数要和new一起使用才有意义。
new在执行时会做四件事情。
1会在内存创建一个新的空对象
2会让this指向这个新对象
3执行构造函数,目的:给这个新对象添加属性和方法
new会返回这个新对象
字面量创建对象方法用的更加的多。
工厂函数方法创建对象
如果要创建多个类似的对象。可以将对象的过程封装到一个函数中。
将来调用函数就能够创建一个对象，相当于一个生产对象的函数
工厂，用来简化代码。
自定义构造函数创建对象
比工厂方法更简单。
案例:
function Person(name,age,sex) {
// 不需要使用new一个新对象。
// 使用this代替将来创建的新对象
this.name = name;
this.age = age;
this.sex = sex;
this.sayHi = ()=> {
console.log("Hellow!Word");
};
// 不要添加return
// 用new关键字调用构造函数
}
遍历对象方法
for in循环也是循环的一种，专门用来遍历对象。内部会定义一个key遍历。
key变量在每次循环时会从第一个开始接受属性名。一直接受到最后一条属性
名。执行完跳出循环。
简单的循环遍历：输出每一项的属性名和属性值。
for (let key in person1) {
console.log(person1[key]);
}
简单类型和复杂类型的区别
简单类型又叫做值类型。
复杂类型又叫做，引用类型。
JS中是没有堆栈概念的。
值类型是往栈中存储。引用类型是往堆存储的。
栈:存放函数的参数值。布局变量的值等。
堆:存储复杂类型(对象。)
堆内的对象，赋值到变量。其实是把堆的地址，
引用到了栈地址内存里。多个变量指向了堆原型。
任何一个变量改了，原型也会变，其他变量也会变化。
内置对象
ECMAscript的对象:自定义对象 内置对象。
使用内置对象，要知道对象中有哪些成员，有
什么功能，直接使用。需要参考一些说明手册:MDN
如何学习一个方法
1.方法的功能
2.参数的意义和类型
3.返回值意义和类型
4.demo进行测试
Math对象
Math对象它具有数学常数和函数的属性和方法，我们可以直接进行使用
根据数学相关的运算来找Math中的成员(求绝对值,取整。)
Math对象方法:
Math.PI 圆周率
Math.random()生成随机数
Math.floor()/Math.ceil() 向下取整/向上取整
Math.round() 取整,四舍五入
Math.abs() 绝对值
Math.max() / Math.min() 求最大和最小值
Mathsin()/Math.cos() 正弦/余弦
Math.power() / Math.sqrt() 求指数次幂/求平方根
Math.max.apply(null,a)
Array对象
new Array();构造函数数组方法。
变量 instanceof 构造类型 检测某个实例是否是某个对象类型
数组首尾操作方法
toString() 把数组转换成字符串。默认使用，分割每一项。
push(1,2,3) 在数组末尾，添加一个或多个元素。如果推入一个数组，则会被当做一项数据。
pop() 删除数组最后一项，返回被删除的那项数据。
shift() 删除数组的第一项，返回被删除的那项数据。
unshift(1,2,3) 在数组开头，添加一个或多个元素。如果推入一个数组，则会被当做一项数据。
数组常用方法
Array.concat() 将两个数组合并成一个新的数组，原数组不受影响。参数位置可以是一个数组字面量、
数组变量、零散的值。
Array.slice(start,end);从当前数组中截取一个新的数组。不影响原来的数组，返回一个新的数组。从
start道end的元素。
参数区分正负，正值表示下标位置，负值表示从后面往前第几个位置。参数可以只传递一个。表示从开始位置
截取到字符串结尾。
Array.splice(index,howmany,elment1,elment2,....);
用于插入、删除、或替换数组的元素。
index: 删除元素的开始位置
howmany: 删除元素的个数，可以是0
elment1,elment2: 要替换的新的数据。
实现删除功能，需要传入前两个参数。
替换功能，传3个及以上的参数。
插入功能，传入3个以上的参数。但是第二个参数必须为0。
Array.indexOf();查找数据在数组中最先出现的下标。
Array.lastIndexOf();查找数据在数组中最后出现的下标。
Array.reverse();将数组倒序。
sort();根据字符编码顺序，从小到大排序。
可以添加一个比较的函数。
arr.sort(function(a,b){
if(a < b) {
return -1; // 表示a要排在b前面
} else if (a > b) {
return 1; //表示a要在b的后面。
} else {
return 0; // 表示a和b保持原样，不换位置。
}
});
join("连字符");
通过参数作为连字符将数组中的每一项用连字符连成一个完整的字符串。
默认以，作为连字符。
清空数组的方法:
arr = [];
arr.length = 0;
arr.splice(0,arr.length);
基本包装类型
基本类型的数据:没有属性和方法。
但是字符串是可以调用一些属性和方法。
基本包装类型:基本类型的数据是在进行一些特殊操作时。
暂时会被包装成一个对象。结束后再被销毁。
字符串也有构造函数创建的方法。
字符串特点
字符串是不可变的。
由于字符串不可变，在大量拼接字符串的时候，会有
效率问题。
尽量少用字符串拼接。
字符串的属性
str.length;获取字符串的长度。
字符串方法
str.charAt(number);
方法可以返回指定位置的字符。
返回指定位置的下标位置的字符。
str.indexOf("被搜索字符串");返回子串在第一次在字符串中出现的下标。
str.concat("字符");用于连接两个字符串。
split("分隔符");方法用于把一个字符串分割成数组字符串。
根据分隔符进行使用。
toLowerCase();把字符串英文转换为小写
toUpperCase();把字符串英文转为大写。
slice(start,end);截取字符串，
从开始位置截取到结束位置，不包括结束位置。
substr(start,howmany);方法可在字符串中抽取从start下标开始的指定数目字符。
不写第二参数，则是一直截取到字符串截取。
substring(start,end);参数必须是正数。
比较两个数的大小，小的作为开始，大的作为结束。
DOM和BOM
DOM
API的概念
API是一些预先定义的函数，目的是提供应用程序与开发人员，给予某
软件或硬件，得以访问一组例程的能力，而又无需访问源码。或理解
内部工作机制的细节。
任何开发语言都有自己的API
API的特征输入和输出(i/o)
web API的概念
浏览器提供了一套操作浏览器和页面元素的API(BOM、DOM)
javascript的组成
EACMAScirpt、BOM、DOM
BOM 浏览器对象模型。
DOM 文档对象模型
DOM树
DOM又称为文档模型
文档:一个网页可以称为文档。
节点:网页中的所有内容都是节点(标签、属性、文本、注释)
元素:网页中的标签
属性:标签的属性
经常进行的操作
获取元素、对元素操作、动态创建元素
事件
根据ID获取元素
方法：调用document对象的getElementByid方法。
参数:字符串类型的ID属性值。
返回值: 对象ID名的元素对象
根据标签名获取元素
方法: 调用document对象的getElmentsByTagName方法
参数: 字符串类型的标签名
返回值: 同名的元素对象组成的数组
注意1: 操作数据时，应按照数组操作方式进行。
getElmentByTagName可以动态添加。
元素内部获取标签元素
获取的元素对象内部，本身也可以调用根据标签获取元素方法。
例如div元素对象也可以调用getElmentsByTagName方法。
目的: 缩小选择元素的范围。类似CSS中的后代选择器。
根据name属性获取元素
方法: 调用document对象的getElementsByName方法。
参数: 字符串类型的name属性值
返回值: name属性值相同的元素对象组成的数组。
不建议使用: 在IE9和Opera中有兼容问题。会多选中id属性相同的元素。
返回节点列表集合。
动态变化的集合。
根据类名获取元素
方法: 调用document对象的getElmentsByClassName方法
参数：字符串类型的class属性值。
返回值: class属性值相同的元素对象组成的数组。
浏览器兼容问题: 不支持IE8及以下浏览器。
根据选择器获取元素
方法一:
调用document对象的querySelector方法。通过CSS中的选择器，选择
第一个附和条件的标签元素。
方法二:
调用document对象的querySelectorAll方法，通过css中的选择器去
选择所有符合条件的标签元素。
参数: 字符串类型的CSS中的选择器
浏览器兼容问题: 不支持IE8以下
document.querySelector("#box1 .para");
不是动态加载的。需要在元素加载完毕后使用。
事件
事件: 在什么时候做什么事
执行机制: 出发--响应机制
绑定事件(注册事件)三要素:
1:事件源:给谁绑定事件
2:事件类型:绑定什么类型的时间click单击
3:时间函数:时间发生后执行什么内容，写在函数内部。
常用事件监听方法
方法一: 绑定html元素属性。(直接在onlick中输入js代码)
方法二： 绑定DOM对象属性。(获取的元素。在元素的.onlick中赋值函数。)
javascript解析器会给绑定事件的元素添加一个监听·，解析器会一直检测这个元素。
只要出发对应的绑定事件，会立刻执行事件函数。
常用的鼠标事件类型
onclick 鼠标左键单击触发
ondblclick 鼠标左键双击触发
onmousedown 鼠标按键按下触发
onmouseup 鼠标按键放开时触发。
onmousemove 鼠标在元素上移动触发
onmouseover 鼠标移动到元素上触发
onmouseout 鼠标移出元素边界触发
非表单元素属性
例如：href、title、id、src
调用方法: 元素对象打点调用属性名。例如obj.href
注意：部分的属性名跟关键字和保留字冲突，会更换写法
class=>classNane
for=>htmlFor
rowspan=>rowSpan
属性赋值: 给元素属性赋值，等号右侧的赋值都是字符串格式。
事件函数内部的this
在事件函数内部有一个this，指向事件源。
不同函数不同this的指向
普通函数 this 指向windows对象
构造函数 this 指向生成的实例对象。
对象方法 this 指向对象本身
事件函数 this 指向事件源。
取消a标签的跳转效果
可以在a标签的点击事件里添加。
return false;
innerHTML和innerText
jsDOM对象，innerText。表示标签内的内容。
获取标签内部内容的属性有两个: innerHTML和innerText
innerHTML属性:在获取标签内部内容时，如果包含标签，获取的内容会包含标签。
获取的内容包括空白换行等。
innerText属性:在获取标签内部内容时，如果包含标签，获取的内容会过滤标签。
获取的内容会去掉换行和缩进等空白。
对比使用场景:
innerText: 在设置纯字符串时使用;
innerHTML： 在设置有内部子标签结构时使用。
表单元素属性
value 用于大部分表单元素的内容获取(option)除外
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性
checked 复选框选中属性
注意:在DOM中元素对象的属性值只有一个时，会被转成布尔值
显示。例如txt.disabled = true;
文本框焦点事件
获得文本框焦点时，可以使用一个onfocus事件。
失去焦点时，可以使用onblur事件。
自定义属性操作
<span age=""></span>可以对元素进行自定义属性。
元素自定义的新属性不能用点语法直接调用
DOM对象操作.
gitAttribute(name) 获取标签行内属性
setAttribute(name,value) 设置标签行内属性
removeAttribute(name) 移除标签行内属性
style样式属性操作
元素对象的style属性的值是一个行内样式组成的对象。
对象内部封装了所有的行内样式属性以及属性值。
元素的样式属性可以继续打点调用。获取或设置相关的行内
样式属性。
类似background-color这种复合属性的单一属性写法，是
由多个单词组成的。要修改为驼峰命名方式书写:
backgroundColor
document.body.可以直接获取body元素
className属性替换
可以通过replace(原有字符,替换字符)方法。
进行搜索和替换。
dom.className.replace("原本","替换");
查看DOM对象相关属性
console.dir(DOM对象);
DOM对象数组遍历中，this无法查看下标。
但是，可以通过遍历添加自定义属性，
记录下标。
节点属性
生成一个新的元素对象
let newNode = document.createElement("div");
newNode.innerHTML = "新的div";
给body添加一个新的节点子元素
document.body.appendChild(newNode);
移除元素docu.body.removeChild(DOM);
获取节点内部的子元素节点
DOM.children;获取DOM对象内的所有子元素.
nodeType 节点的类型，属性值为数字。
表示不同的节点类型，共12种。只读
1 元素节点
2 属性节点
3 文本节点
nodeName 节点的名称(标签名称).只读
nodeValue 节点值，返回或设置当前节点的值。
元素节点的nodeValue始终是null
DOM.getAttributeNode("id"); 获取属性节点。
DOM.childNodes;获取元素的文本节点(返回数组)
父子节点常用属性
childNodes 只读属性，获取一个节点所有子节点
的实时的集合。集合是动态变化的。
children 只读属性，返回一个节点所有的子元素
节点集合。是一个动态更新的HTML元素集合。
firstChild 只读属性，返回该节点的第一个子
节点。如果该节点没有子节点则返回NULL。
lashChild 只读属性，返回该元素的最后一个子
节点。如果该节点没有子节点，则返回null。
parentNode 返回一个当前节点的父节点，如果
没有这样的节点，比如说像这个节点是树结构的
顶端或者没有插入一颗树中。这个属性返回NULL。
parentElement 返回当前节点的父元素节点，如果该
元素没有父节点。或者父节点不是一个DOM元素。则
返回NULL。
兄弟节点关系
nextSlibling 只读属性，返回与该节点同级的下一个节点
如果没有返回null
previousSibling 只读属性，返回与该节点同级的上一个节点，
如果没有返回NULL。
nextElementSibling 只读属性，返回与该节点同级下一个元素
如果没有返回NULL。
注意点:nextElementSibling和previousElementSibling有兼容
问题。IE9以后才支持。
创建新节点的方法
document.createElment("div");创建元素节点
document.createAttribute("id");创建属性节点
document.createTextNode("");创建文本节点。
一般将创建的新节点存放在变量中，方便使用。
节点常用操作方法
DOM.appenChild(child);将一个节点添加到
指定父节点的子节点列表末尾。
DOM.replaceChild(newChild,oldChild);
用指定的节点，替换掉当前节点的一个子节点。
并返回被替换掉的节点。
DOM.insertBefore(newNode,referenceNode);
在参考子节点之前，插入一个子节点。
referenceNode必须设置。如果referenceElement
为null则newNode将被插入到子节点的末尾。
DOM.removeChild(child);移除当前节点的一个
子节点。这个子节点必须存在于当前节点中。
DOM.cloneNode();克隆一个节点，并且可以选择
是否克隆这个节点下的所有内容。
参数为布尔值。表示是否采用深度克隆。
如果为true，该节点的所有后代节点也都会被克隆。
如果为false，则只克隆该节点本身。
默认值为true,节点下的所有内容都会被克隆。
注意:克隆时，标签上的属性和属性值会被赋值。
卸载标签行内的时间可以被复制，但是通过js
动态绑定的事件，不会被复制。
节点判断方法
Node.hasChildNodes();没有参数
返回一个boolean值，来表示该元素是否包含有子节点。
Node.contains(child);返回一个boolean值。
来表示传入的节点是否为该节点的后代节点。
共有三种方法可以判断当前节点是否有子节点。
node.firstChild !== null;
node.childNodes.length>0;
Node.hasChildNodes();
禁止A标签跳转
href = "javascript:void(0)";
select下拉框多选
标签行内。添加属性multiple = "multiple"
注册事件的其他方法
element.addEventListener();方法
参数一:事件类型字符串(直接书写"click")
参数二:事件函数。
同一个元素可以多次绑定监听事件，同一个事件类型。
可以注册多个事件函数。
兼容性问题：不支持IE9以下的浏览器。
element.attachEvent();方法
参数一：事件类型字符串(需要加on)
参数二: 事件函数
只支持IE10以下。
IE8以及以下的浏览器处理事件队列时，会出现顺序混乱。
注册事件兼容写法
自定义一个注册事件函数
参数：事件源，事件类型（不加on），事件函数
IE9以及以上的浏览器使用addEventListener方法
IE9以下的浏览器使用，attachEven方法。
判断浏览器时，不需要判断它的版本。可以检测浏览器能力
浏览器能力检测：将某个方法的调用作为if语句判断的条件，
如果浏览器认识该方法返回true，否则返回false。
解除事件绑定方法
解除绑定事件方法。
elment.onlick = null;
将事件赋值为null
通过element.removeEventListener();方法
参数一:事件类型函数直接书写"click"，不需要加on
参数二:事件函数引用名。
注意:没有办法移除一个匿名函数，所以子啊注册事件时，需要
单独声明一个有函数的事件函数。
兼容性问题：不支持IE9以下浏览器。
通过element.detachEvent();方法
参数一:事件类型字符串(需要加on)
参数二: 事件函数
注意:没有办法移除一个匿名函数，所以在注册事件时需要单独声明
一个有函数名的事件函数。
兼容性问题：只支持IE10以及以下的浏览器。
dom事件流
一般执行DOM事件都是由内向外。这种执行方式称为冒泡执行过程。
element.addEventListener();可以在方法内写入第三个参数。
设置为捕获过程。由外向内执行。true表示执行捕获过程。值默认为false，冒泡执行。
第一个阶段: 事件捕获
第二个阶段：事件执行过程
第三个阶段：事件冒泡
addEvenListener();第三个参数为false时,事件冒泡。
addEvenListener();第三个参数为true时，时间捕获。
onclick类型:只能进行事件冒泡过程，没有捕获阶段。
attachEvent();方法:只能进行事件冒泡过程，没有捕获阶段。
事件委托
可以将一些子级公共类型的事件委托给他们的父级添加，在父级想办法
找到真正触发事件的最底层的事件源。获取元素
想要找到真正触发事件的子级元素，借用事件函数内部的一个参数e。
e是事件对象。只要触发事件，函数内部都可以得到一个事件对象。
对象中存储了关于事件的一系列数据。
e.target属性记录的就是真正触发事件的事件源。
事件对象
只要触发事件，就会有一个对象。内部存储了与事件相关的数据。
e在低版本浏览器中会有兼容问题。低版本浏览器使用的是windows.event
事件对象常用的属性:
e.eventPhase 查看事件触发时所处的阶段
（捕获阶段返回1、执行阶段返回2、冒泡阶段返回3）
e.target 用于获取触发事件的元素
e.srcElement 用于获取触发事件的元素，低版本浏览器使用。
e.currentTarget 用于获取绑定事件的事件源元素
e.type 获取事件类型
e.clientX/e.clientY 所有浏览器都支持,鼠标距离浏览器窗口左上角的距离。
e.pageX/e.pageY IE8以前不支持，鼠标距离整个HTML页面左上角顶点的距离。
兼容写法:
e(参数) = e || window.event;
let target = e.target || e.srcElement;
可以将所有一个元素绑定的事件的事件函数写在一个函数内。通过函数内部的e.type判断走不同的分支。避免添加多个函数，占用更多的内存。
注意点。type值，不加on。
取消默认行为和阻止事件传播的方式
e.preventDefault();取消默认行为
e.returnValue = false 取消默认行为，低版本浏览器使用
e.stopPropagation();阻止冒泡，标准方式
e.cancelBubbleBubble = true;阻止冒泡，IE低版本。标准中已废弃。
普通方法:函数内结束书写 return false;
偏移量属性
offsetParent 偏移参考父级。距离自己最近的有定位的父元素。如果都没有定位参考body
offsetLeft/offsetTop 偏移位置
offsetWidth/offsetHeight 偏移大小。参考元素自身border以内大小。
客户端大小
client 系列没有参考父级元素。
clientLeft/clientTop 边框区域尺寸,不常用
clientWidth/clientHeight 边框内部大小。
滚动偏移属性
scrollLeft/scrollTop 盒子内部滚动出去的尺寸
scrollWidth/scrollHeight 盒子内容的宽度和高度
BOM
BOM的概念
bom是指浏览器对象模型，浏览器对象模型提供了独立于内容的，可以与浏览器窗口进行互动
的对象结构。BOM由多个对象组成，其中代表浏览器窗口的windows对象是BOM的顶层对象。
其他对象都是该对象的子对象。
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理。比如: 刷新浏览器、后退、
前进、在浏览器中输入URL等。
window对象
window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window。
注意：window下两个特殊的属性 window.name、window.top
在全局作用域通过var定义的全局变量，都是window的一个属性。
top属性值，在window中，属性值指向的就是顶层对象window。这个属性是只读的。不能后期更改。
对话框
alert("hello");警示框
prompt("提示",value);提示框
<!-- 让用户进行确认，或者选择取消的对话框 -->
confirm("请问，您确定要删除这条数据吗？");
confirm 方法有返回值。根据按钮点击情况，返回布尔值。
onload事件
我们可以给window对象或者<img>等元素添加onload加载事件，表示只有绑定时间的元
素加载完毕才能触发事件，才能执行事件函数。
其中window对象加载完毕：指的是所有HTML结构加载完，并且外部引入资源(js,css,img视频)也加载完毕。
onload函数表示对象加载执行完毕后，执行的事件函数。
搭载计数器使用。
window.onload = function(){
<!-- 表示整个html文档加载完毕。获取元素不会出现错误 -->
};
window.onload 可以将所有代码放在html结构前面。
延时器
延时器是window对象的一个方法，类似于定时炸弹。
语法: window.setTimeout(func,time);
第一个参数:延时执行的函数，可以使匿名函数定义，或者是一个函数名引用。注意不要加()
第二个参数：延时的时间，以毫秒计数。1000毫秒 = 1s
功能：在指定的时间后，延迟执行一个函数。
<!-- 异步语句，单独开辟线程，不影响同步语句。 -->
<!-- 同步语句，先后顺序执行。 -->
清除延时器
window对象的一个方法
语法:window.clearTimeout(timeout);
参数:指定的延时器变量名引用
功能：清除指定的延时器
注意：清除的延时器需要存储道一个变量中，便于后期清除调用。
函数节流操作
函数内部需要判断，是否在指定的时间之外触发事件。
函数节流操作。
定义一个开关，给函数上一把锁，true表示锁住状态。不能执行后面的代码，false表示打开状态。
可以执行后面的代码。
初始状态锁是打开的。
执行完毕后，锁应该被锁住。
间隔两秒后，锁再次打开。
定时器
定时器是window对象的一个方法，想当于定时闹钟。每隔固定的时间响一次。
语法: window.setInterval(func,interval);
第一个参数: 每次执行的函数，可以是匿名函数定义，或者是一个函数名引用，注意不要加()
第二个参数: 时间间隔，以毫秒技术。1000毫秒等于1秒。
功能: 每隔一个指定的时间，周期性的执行一个函数。
清除定时器
语法: window.clearInterval(timer);
参数: 指定的定时器变量名引用。
功能: 清除指定的定时器。
注意: 清除的定时器需要存储到一个变量中，便于后期清除调用。
获取元素最终样式对象
window.getComputedStyle(box);
获取页面卷动距离
document.documentElment.scrollTop();body页面顶部卷动距离
页面卷动事件 window.onscroll = function(){
};
location对象
location对象是window对象下的一个属性，使用的时候可以省略window对象
location可以获取或者设置浏览器的URL
常用属性与方法：
location.href 为浏览器url地址属性
location.assign() 方法与href属性类似，可以设置页面跳转属性
location.replace();替换当前URl的地址，但是不记入历史。
location.reload 重新加载，类似于页面中的f5。
参数:
true强制从服务器获取页面。
false 如果浏览器有缓存，会直接从缓存中获取页面。
URL
统一资源定位符
URL的组成: scheme://host:port/path/?query#fragment
例如: http://www.lagou.com:80/a/b/index.html?name=zs&age=18#bottom
scheme: 通信协议，常用的http,ftp,maito
host: 主机,服务器计算机域名系统主机名或IP地址
port: 端口号,整数,可选,省略时使用方案默认端口,如http的默认端口为80。
path: 路劲,由零或多个"/"符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。
query: 查询,可选。用于给动态网页传递参数,可有多个参数用&符号隔开。每个参数的名与值用=隔开。
fragment: 信息片段,字符串,锚点
history对象
history对象是window对象下的一个属性，使用的时候可以省略window对象
history对象可以与浏览器历史记录进行交互，浏览器历史记录是对用户所访问页面按时间顺序进行的记录和保存。
back() 回退
forward() 前进
go() 前进多个页面,或者后退多个.1,-1
