前端基础知识JS篇｜青训营一、js基础 1.alert(); 在浏览器窗口弹出一个警告框 2.document.wr

一、js基础

1.alert(); 在浏览器窗口弹出一个警告框

2.document.write()；向body写内容

3.console.log() ；向控制台写内容

二、js的编写位置

1.head里

2.body的标签里

3.外部文件，然后再引入

三、字面量和变量

1.可以用var定义变量

2.一般不会直接用字面量

四、标识符

1.在js中所有可以由我们自己命名的都可以称为标识符

2.标识符中可以含有字母、数字、下划线和$

3.标识符不可以由数字开头

4.标识符不可以是ES中的关键字或保留字

5.标识符的命名一般采用驼峰命名法

五、字符串

1.js中常用的6种数据类型，其中Object属于引用数据类型，其他的属于基本数据类型

String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象

2.在js中字符串需要用用引号引起来

双引号单引号不可以混着用
引号不要嵌套
在字符串中可以使用\作为转义字符，如：

\ " 表示“ \’ 表示‘ \t 表示制表符 \n表示换行

3.可以用typeof来检查一个变量的类型，如果是字符串，返回string，如果是数值，返回number

六、强制类型转换

1.转换成String

1.toString(),该方法不会改变原变量，只会将转换结果返回。但这种方法不使用于Null和Boolean

2.调用String函数

2.转换成Number

1.使用Number()函数

如果是纯数字的字符串，则直接将其转换成数字
如果有非数字内容，则转换成NaN
如果是一个空串或一个全是空格的字符，则转换为0
如果是布尔值，则true转换为1，false转换为0
如果是null，则转换为0
如果是undefined，则转换为数字NaN

2.使用parseInt()或parseFloat()

使用parseInt()可以将一个字符串的有效的整数部分取出来，然后转换为Number
parseFloat()与parseInt类似，不同的是它可以获得有效的小数内容
如果对非String使用上述两个函数，则会先将其转换为String，然后再操作
如果需要将a转换成x进制的Number,可以用paeseInt(a,x)

3.使用+,-,*1,/1

 a=+a;
 a=a-0;
 a=a*1;
 a=a/1;

3.转换成Boolean

1.数字转布尔

除了0和NaN是false,其他的都是true

2.字符串转布尔

除了空串是false,其他的都是true

3.null和undefined转布尔，结果都是false

4.对象也会转换为true

5.对一个值进行两次！运算，则会将其转换成布尔值。与使用Boolean()一样

七、其他进制的数字

十六进制：以0x开头
八进制：以0开头
二进制数字：以0或1开头

八、算数运算符（操作符）

1.当对非Number的值进行运算时，会将这些值转换为Number后再运算

2.如果对两个字符串进行加法运算，则会将两个字符串拼接成一个字符串

3.任何值和字符串相加都会转换成字符串，然后进行拼串

4.任何数做减乘除运算时都会先自动转换成Number

ps:*可以通过做 - 1 /1 来将一个值转换为Number

可以对一个其他类型的数据使用+，来将其转换为Number

5.一元运算符，只需要一个操作数

正号，不会对数字产生任何影响
负号，可以对数字进行负号的取反
对于非Number类型的值，会先将其转换为Number，然后再运算

九、promt()函数

1.prompt()可以弹出一个提示框，该提示框会带有一个文本框，用户可以在文本框中输入一段内容。该函数需要一个字符串作为参数，该字符串将会作为提示框的提示文字

2.函数的返回值是String类型的

十、对象

1.对象的分类：内建对象(在ES标准中定义的对象)，宿主对象(如BOM和DOM)，自定义对象(由开发人员自己创建的对象)。

2.创建对象：使用new关键字调用的函数，是构造函数constructor.构造函数是专门用来创建对象的函数。使用typeof检查对象时，会返回object。

3.向object中添加一个属性

 var obj=new Object();
 obj.name="yyqx";
 obj.gender="male";
 object.age="21";

4.修改对象的属性值

 obj.age="22";

5.删除对象的属性

delete obj.age;

6.对象的属性名不强制要求遵守标识符命名规范

7.如果要使用特殊的属性名，如123，不能采用.的方式，需要使用另一种方式,语法：对象["属性名"]=属性值

var obj=new Object();
obj.123="789";    //错误，不要这么写！！！！！
obj["123"]="789";
console.log(obj["123"]);

8.js对象的属性值可以是任何数据类型

9.in运算符：检查一个对象中是否有某属性值,有则返回true,无则返回false

10.存储：js中的变量都是保存到栈内存中的，基本数据类型的值直接在栈内存中存储；值和值之间是独立存在的，修改一个值不会影响另一个值；对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟一个新的空间，而变量保存的是对象的内存地址。如果两个对象是指向同一个地址的，这时当一个对象属性被修改时，另一个也会收到影响

11.当比较两个基本数据类型时，就是比较它们的值。但当比较两个对象时，是比较它们的内存地址，即使两个对象是一模一样的，但地址不同也会返回false。

十一、函数

1.创建一个函数对象，将要封装的代码以字符串的形式传递给构造函数。

var fun1=new Function(“console.log('这是一个函数');");
fun1();

2.使用函数声明来创建一个函数

function fun2(){
    console.log("这是一个函数");
}
fun2();

3.使用函数表达式来创建一个函数：

function(){
    console.log("这是一个匿名函数");
}

4.调用函数时，解析器不会检查实参的数量

如果实参数量大于形参，则多余实参不会被赋值
如果实参数量小于形参，则没有对应实参的形参将是undefined

5.函数的实参可以是任意的数据类型，也可以是一个对象或者函数

6.函数的返回值：renturn后的值将会作为函数的执行结果返回，可以定义一个变量，来接受该结果。return后的语句都不会执行，如果return语句后不跟任何值相当于返回一个undefined，如果函数中不写return，则也返回undefined。

7.立即执行函数:函数定义完立即调用

8.函数也可以作为对象的属性。如果一个函数作为对象的属性保存，那么称这个函数是这个对象的方法，调用函数就是调用对象的方法

9.for(var 变量 in 对象)语句：for ...in 语句中对象有几个属性，循环体就执行几次，每次执行时，会将对象中的一个属性的名字赋值给变量

10.使用var关键字声明的变量，会在所有的代码被执行前被声明（但是不会赋值），但是如果声明变量时不适用var关键字，则变量不会提前声明。

11.使用函数声明形式创建的函数，会在所有代码执行之前被创建。

12.函数表达式不会被提前声明

13.当在函数作用域中操作一个变量时，它会现在自身作用域中寻找。在函数作用域中也有声明提前的特性，使用var关键字声明的变量，会在函数中所有代码执行之前被声明

14.在函数作用域内的变量如果没有var关键字，则默认设置为windows.变量名的形式，即本质上是一个全局变量

十二、this

1.解析器在调用函数时每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this。this指向的是一个对象，这个对象称为函数执行的上下文对象

2.以不同的方式调用函数时，this的指向不同

用函数的形式调用，this是window
以方法的形式调用，this就是调用方法的对象
当以构造函数的形式调用时，this就是新创建的那个对象
使用call和apply调用时，this是指定的那个对象
在事件的响应函数中，事件是给谁绑定的，this就是谁

十三、使用工厂方法创建对象

十四、构造函数

1. 构造函数与普通函数的区别：

调用方式不同，普通函数时直接调用，构造函数要使用new关键字来调用

2.构造函数的执行流程

立刻创建一个新的对象
将新创建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象
逐行执行函数中的代码
将新建的对象作为返回值返回

3.将通过一个构造函数创建的对象，称为是该类的实例

4.使用instenceof可以检测一个对象是否是一个类的实例

语法:对象 instanceof 构造函数

十五、原型对象

1.原型（prototype）

我们所创建的每一个对象，解析器都会向函数中添加一个属性prototype。

2.如果函数作为普通函数调用prototype，没有任何作用；如果以构造函数的形式调用，他所创建的对象中都会有一个隐含的属性

3.原型对象相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容同意设置到原型对象中

4.当访问对象的一个属性或方法时，它会首先在自身寻找；如果有则直接使用，如果没有则在原型对象中寻找，如果找到则直接使用；如果没有找到则在原型的原型中寻找，直到找到Object对象的原型。Object对象的原型没有原型，如果在Object中依然没有找到，则返回

5.使用in检查对象中是否有某个元素时，如果对象中没有但原型中有，则依旧返回true

语法：属性 in name

6.使用对象的hasOwnProperty()来检查对象自身中是否含有某属性，使用该方法时只有当对象中含有该属性时才会返回true

ps:hasOwnProperty在原型的原型中

十六、toString()

1.当我们直接在页面中打印一个对象时，实际上是输出这个对象的toString()方法的返回值

2.此时可以对toString()函数进行修改，使其打印出对象的属性

十七、垃圾回收

当一个变量没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，此时这种对象就是一个垃圾。在JS中有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作。我们需要做的只是将不再使用的对象设置null即可。

十八、数组

1.数组的简介

数组也是一个对象。和普通对象功能类似，数组也是用来存储一些值的。不同的是普通对象是使用字符串作为属性名，而数组则使用数字来作为索引操作元素。

2.索引

从0开始的整数就是索引。如果读取不存在的索引，它不会报错而是返回undefined。

3.对于连续的数组，使用length可以获取数组的长度(元素的个数)

4.修改length

如果修改后的length大于原长度，则多出部分会空出来
如果修改后的length小于原长度，则多出的元素会被删除

5.向数组的最后一个位置添加元素

arr[arr.length]=50;//向数组的最后一个位置添加元素50

6.创建一个数组，数组中的元素可以是任意的数据类型

7.数组里也可以放数组

var arr=[[1,2,3],[4,5,6]];

8.Array对象方法

arr.push("yyqx");//向arr数组的末尾添加一个元素“yyqx"

slice()方法：该方法不会改变原数组，而是将截取到的数组封装到一个新的数组中返回；参数： 1.截取开始的位置的索引，包含开始索引 2.截取结束位置的索引，不包含结束索引(第二个参数可以省略不写，此时会截取从开始索引往后的所有元素)；索引可以传递一个负值，如-1代表倒数第一个，-2代表倒数第二个
splice()方法：可以用于删除数组中的指定元素，会影响到原数组，将指定元素从原数组中删除，并将删除的元素作为返回值返回；参数： 1.第一个表示开始位置的索引 2.第二个表示删除的数量第三个及以后代表传递一些新的元素，这些元素会自动插入到开始位置索引前边

以下的数组元素去重是splice()方法的应用：

concat()方法：连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响 join()方法：该方法可以将数组转换为一个字符串。该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回在join()中可以指定一个字符串作为参数，这个字符串将会作为数组中元素的连接符，如果不知道连接符，则默认使用，作为连接符
reverse()方法：该方法用来反转数组，会对原数组产生影响
sort()方法：可以用来对数组元素进行排序，默认按照Unicode编码进行排序，会影响到原数组 ps:即使对纯数字的数组进行排序也会默认按照Unicode编码进行排序，所以对数组进行排序时，可能会得到错误的结果我们可以自己来指定排序的规则：在sort()中添加一个回调函数来指导排序规则。回调函数中需要定义两个形参，浏览器会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素调用不确定，但肯定的是在数组中a一定在b前面。如果函数返回一个大于0的值，则元素会交换位置；否则不交换

9.遍历

for 循环遍历数组
forEach遍历数组：这种方法需要一个函数作为参数。像这种函数，由我们创建而不由我们执行的，称为回调函数。数组中有几个元素就执行几次，每次执行时浏览器会将遍历到的元素以实参的形式传递进来。浏览器会在回调函数中传递三个参数：第一个是当前正在遍历的元素；第二个是当前正在遍历的元素的索引；第三个是正在遍历的数组。

十九、call和apply

1.call() 和apply()都是函数对象的方法，需要通过函数对象来调用

2.当用函数调用call()和apply()时，都会调用函数执行

3.在调用call()和apply()时可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this

4.call()方法可以将实参在对象之后依次传递，而apply()方法需要将实参封装到一个数组中统一传递

5.使用call和apply调用时，this是指定的那个对象

二十、argument

1.在调用函数时，浏览器每次都会传递进两个隐含的参数

函数的上下文对象this
封装实参的对象arguments

2.arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度

3.在调用函数时，我们所传递的实参都会在arguments中保存

4.callee属性对应一个函数对象，就是当前正在指向的函数的对象

二十一、Date对象

1.在js中使用Date对象来表示一个时间

2.创建一个Date对象，如果直接使用构造函数来创建一个Date对象，则会封装为当前代码执行的时间；也可以创建一个指定的时间对象，此时需要在构造函数中传递一个表示时间的字符串作为参数，日期的格式：月份/日/年时：分：秒

3.getDate()：获取当前日期对象是几日；getDay()：获取当前日期对象是周几（会返回一个0-6的值）；getMonth()：获取当前日期对象的月份（会返回一个0-11的值）；getFullYear()：获取当前日期对象的年份（会返回一个0-11的值）；getTime()：获取当前时间对象的时间戳（即从1970年1月1日0时0分0秒到当前日期所花费的毫秒数）

二十二、Math

1.Math与其他对象不同，它不是一个构造函数，它属于一个工具类，不需要创建对象，它里面封装了数学运算相关的属性和方法。

2.Math的对象方法

Math.round(Math.random()*(y-x)+x);//生成一个x到y之间的随机数
Math.pow(x,y);//x的y次幂

二十三、包装类

1.方法和属性只能添加给对象，不能添加给基本数据类型。

2.当我们对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，再调用对象的属性和方法。调用完后，再将其转换为基本数据类型。

二十四、String的属性和方法

1.length:

返回字符串的长度

2.charAt():

返回指定位置的字符(根据索引获取指定的字符)

3.charCodeAt():

获取指定位置字符的字符编码(Unicode)

4.String.formCharCode():

根据字符编码去获取字符

5.concat()

可以用来连接两个或多个字符串

6.indexOf():

可以用来检索一个字符串中是否含有指定内容，如果有，则返回第一次出现的索引；如果没有，则返回-1

可以指定第二个参数，表示开始查找的位置

7.lastIndexOf():

该方法的用法与indexOf()一样，不同的是indexOf()是从前往后找，而lastIndexOf()是从后往前找

8.slice():

可以从字符串中截取指定的内容

第一个参数代表开始位置的索引（包括开始位置），第二个参数代表结束位置的索引（不包括结束位置）

9.substring():

可以用来截取一个字符串，与slice()类似，不同的是这个方法不能接受负值,而且这个方法还会自动调整参数的位置，如果第一个参数大于第二个，则自动交换。

10.split():

可以将一个字符串拆分为一个数组

参数：需要一个字符串作为参数，根据该字符串去拆分数组；如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素

11.toUpperCase():

将一个字符串转换为大写并返回

12.toLowerCase():

将一个字符串转换为小写并返回

二十五、正则表达式

1.简介：正则表达式用于定义一些字符串的规则。计算机可以根据其判断一个字符串是否复合规则或者将复合规则的部分提取出来。

2.创建正则表达式的对象----语法：

var 变量=new RegExp("正则表达式","匹配模式");//使用构造函数创建更加灵活
var 变量=/正则表达式/匹配模式;//使用字面量创建更加简单

使用typeof检查正则对象会返回object
第二个参数可以是：i(表示忽略大小写)，g(表示全局匹配模式)
可以为一个正则表达式设置多个匹配模式，且顺序无所谓

3.正则表达式的方法：

test():使用这个方法可以检查一个字符串是否符号正则表达式的规则，符号返回true,不符合返回false

4.

创建一个正则表达式，判断字符串中是否有a或b

var reg=/a|b/i;    //|表示或的意思
//也可以是“var reg=/[a,b]/i;”,[]也表示或的意思
console.log(reg.test("abD"));//返回true

创建一个正则表达式，判断字符串中是否有字母

var reg=/[a-z]/i;
//也可以是"var reg=[A-z];"
console.log("12237379a8872");//返回true

检查一个字符串中是否有abc或acc

var reg=/a/[bc]c;
console.log(reg.test("aDc"));//返回fasle

[^]表示"除了"

var reg=/[^ab]/;
console.log(reg.test("abc"));//返回true
console.log(reg.test("ab"));//返回false

检查一个字符串中是否有数字

var reg=/[0-9]/;
console.log(reg.test("hhsd1jdhd"));//返回true

5.字符串和数组相关的方法:

split():该方法可以把正则表达式作为参数，根据参数拆分数组。默认全局匹配
search():该方法可以用来搜索字符串中是否有指定内容，如果有，则返回第一次出现的索引；如果没有，则返回-1。只会查找第一个，即使全局匹配也没用
match():可以从字符串中根据正则表达式将符号条件的内容提取出来。默认情况下只会找到第一个符合要求的内容，找到后便会停止搜索。可以通过设置正则表达式为全局匹配模式，这样就会匹配到所有的内容。这个方法会将匹配内容封装到数组中返回
replace():可以将指定内容替换为新的内容。默认只会匹配第一个

6.量词：通过量词可以设置一个内容出现的次数

量词只对它前面的一个内容起作用
{n}表示正好出现n次
{m,n}表示出现m~n次
{m,}表示m次以上
{+，}表示至少出现一次，相当于{1，}
{ ，}表示0个或多个，相当于{ ，}
{？，}表示0个或1个，相当于{0，1}

7.检查一个字符串是否以a开头

8.检查一个字符串是否以a结尾

9.创建一个正则表达式，判断一个字符串是否为手机号

手机号的规则： 1.以1开头 ^1；2.第二位是3-9的任意数字 [3-9]；3.之后是9个任意数字 [0-9]{9}$

var phoneStr=/^1[3-9][0-9]{9}$/;
console.log(phoneStr.test(13925650279));//返回true

10.

检查一个字符串中是否有“.”,需要用转义字符

var reg=/./;

\W 表示除了数字、字母、下划线
\w 表示任意数字、字母、下划线
\D 表示除了数字
\d 表示任意数字
\S 表示除了空格
\S 表示空格
\B 表示除了单词边界
\b 表示单词边界

11.创建一个正则表达式，判断一个字符串是否为邮件

邮件的规则：任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母（2~5位）

\w{3,} (.\w+)* @ [A-z0-9]+ (.[A-z]{2,5}){1,2}

二十六、DOM

1.简介：DOM，全称Document Model文档对象模型

文档表示的是整个的HTML网页文档
对象表示的是将网页中的每一个部分都转换为了一个对象
模型，指的是使用模型来表示对象之间的关系，这样方便我们获取对象

2.节点（Node):构成HTNL文档最基本的单元，常用的节点分为4类

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

3.事件

（1）简介：事件是文档或浏览器窗口中发生的一些特定的交互瞬间。常见的有：点击某个元素，将鼠标移到某个元素上方，按下键盘上某个键等等

（2）如果将js代码写到head里，因为网页是自上而下加载的，所以在代码执行时，页面还未加载完毕，会无法获取到DOM对象，影响到功能的实现。可以通过为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成后执行，这样就可以确保代码运行时所有的DOM对象都加载完毕

4.获取元素节点（通过document对象调用）

getElementById() 通过id属性获取一个元素节点对象
getElementsByTagName() 通过标签名获取一组元素节点对象。这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中
getElementsByName() 通过name属性获取一组元素节点对象

5.innerHTML用于获取元素内部的HTML代码，对于自结束标签没有意义。innerText与其相似，不同的是它会自动将html去除

6.如果需要读取元素节点的属性，直接使用元素.属性名。例如：元素.id 元素.name 元素.value。但要注意，class属性不能采用这种方式，而应使用元素.className

7.通过按钮实现图片切换（切换图片就是要修改img标签的src属性）

8.获取元素节点的子字节

通过具体的元素节点调用

（1）getElementsByTagName() 方法，返回当前节点的指定标签名后代节点

（2）childNodes() 属性，表示当前节点的所有子节点。会获取包括文本节点在内的所有节点。根据DOM标签，标签间空白也会被当成文本节点。注意：在IE8及以下的浏览器中不会将空白文本当成子节点

（3）children 属性，获取当前元素的所有子元素（不包括空白文本节点）

（4）firstChild() 属性，表示当前节点的第一个子节点（包括空白文本元素）

（5）firstElementChild 属性，获取当前元素的第一个子元素（不包括空白文本节点），不支持IE8及以下浏览器

（6）lastChild() 属性，表示当前节点的最后一个子节点

9.获取父节点和兄弟节点

通过具体的节点调用

（1）parentNode 属性，表示当前节点的父节点

（2）previousSibling 属性，表示当前节点的前一个兄弟节点。（会可能会获取空白文本）

（3）previousElementSibling 属性，表示获取到前一个兄弟元素（不包括空白文本）

（3）nextSibling 属性，表示当前节点的后一个兄弟节点

10.定义一个函数，专门用来为指定元素绑定单击响应事件

 //参数idStr代表要绑定的单击响应函数的对象的id属性值
 //参数fun代表事件的回调函数，当单击元素时，该函数将会被触发
 function myclick(idStr,fun){
     var btn=document.getElementById(idStr);
     btn.onclick=fun;
 }

11.获取body标签

 var body=document.getElementsByTagName("body")[0];//第一种
 var body=document.body;//第二种（在document中有一个属性body，它保存的是html根标签）

12.根据元素的class属性值查询一组元素节点对象，应使用getElementsByClassName(),但该方法不支持IE8及以下的浏览器

13.document.querySelector() 需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象。使用该方法总会返回唯一的一个元素，如果有多个符合也只返回一个

14.document.querySelectorAll() 该方法与上一个相似，不同的是它会将符合条件的元素封装到一个数组中返回

15.document.createElement() 可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回

16.document.createTextNode() 可以用于创建一个文本节点对象，它需要一个文本内容作为参数，将会根据该内容创建文本节点对象，并将创建好的节点作为返回值返回

17.appendChild() 向一个父节点中添加一个新的子节点

语法：父节点.appendChild(子节点);

18.insertBefore() 在指定的子节点前面插入新的节点

语法：父节点.insertBefore(新节点，旧节点)

19.replaceChild() 替换子节点

语法：父节点.replaceChild(新节点，旧节点)

20.removeChild() 删除一个子节点

语法：父节点.removeChild(子节点)

二十七、操作内联样式

1.通过js修改元素的样式（css）

语法：元素.style.样式名=样式值

注意！！！如果css的样式名中含有—，这种名称在js中是不合法的。比如：background-color。需要将这种样式名修改为驼峰命名法，如：backgroundColor

2.通过style属性设置的样式往往都是内联样式，而内联样式具有较高的优先级，所有通过js修改的样式往往会立即显示

3.通过style属性读取的是内联样式，无法读取样式表里的样式

二十八、读取元素的样式

1.获取元素当前显示的样式

语法：元素.currentstyle.样式名（只有IE支持）
在其他的浏览器中，可以使用 getComputedStyle( )方法，这个方法是window的方法，可以直接使用。这个方法需要两个参数，第一个是要获取样式的元素，第二个可以传递一个伪元素，一般传null。该方法会返回一个对象，对象中封装了当前元素对应的样式（不支持IE8及以下的浏览器）
通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性

2.自定义一个函数，用来获取元素的元素

3.其他样式相关的属性（这些属性都是只读的，不能修改）

clientWidth 可以获取元素的可见宽度（包括内容区和内边距），返回的是数字，不带px,可以直接进行计算
clientHeight 可以获取元素的可见高度（包括内容区和内边距），返回的是数字，不带px,可以直接进行计算
offsetWidth 可以获取元素的可见宽度（包括内容区和内边距和边框），返回的是数字，不带px,可以直接进行计算
offsetHeight 可以获取元素的可见高度（包括内容区和内边距和边框），返回的是数字，不带px,可以直接进行计算
offsetParent 可以获取当前元素的定位父元素
offsetLeft 当前元素相对于其定位元素的水平偏移量
offsetTop 当前元素相对于其定位元素的垂直偏移量
scrollWidth /scrollHeight 可以获取元素整个滚动区域的宽度/高度
scrollLeft /scrollTop 可以获取水平/垂直滚动条滚动的距离
clientX 可以获取鼠标指针在当前可见窗口的水平坐标
clientY 可以获取鼠标指针在当前可见窗口的垂直坐标
pageX/pageY 可以获取鼠标相对于当前页面的坐标（在IE8中不支持）

ps：当满足 scrollHeight - scrollTop == clientHeight 时，说明垂直滚动条滚动到底了；当满足 scrollWidth - scrollLeft == clientWidth 时，说明水平滚动条滚动到底了

disabled 可以设置一个元素是否禁用，如果设置为true·，则元素禁用

二十九、事件对象

1.当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数

2.在IE8中，响应函数被触发时，浏览器不会传递对象；在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的

三十、事件的冒泡

1.冒泡指的是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

2.在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡，可以通过事件对象来取消冒泡

 event.cancelBubble=true;

三十一、事件的委派

1.将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件被触发时，会一直冒泡到祖先元素

2.事件委派利用了冒泡，通过委派可以减少事件绑定的次数

3. event的target表示触发事件的对象

三十二、事件的绑定

1.使用对象.事件=函数的形式绑定响应函数时，不可以绑定多个函数

2. addEventListener() 通过这个方法也可以为元素绑定响应函数,且可以绑定多个，先绑定的先执行。不支持IE8及以下的浏览器。参数：（1）事件的字符串，不要on; （2）回调函数，当事件触发时会被调用；（3）是否在捕获阶段触发事件，需要一个布尔值，一般都传false

 btn01.addEventListener("click",function(){
     alert(1);
 },false);

3.attachEvent() 在IE8中可以使用attachEvent()来绑定事件，且可以绑定多个，后绑定先执行。参数：（1）事件的字符串，不要on;（2）回调函数

4.创建一个函数，为元素绑定事件

三十三、事件的传播

1.捕获阶段：

从最外层的祖先元素向目标元素进行事件的捕获，但是默认此时不会触发事件

2.目标阶段:

事件捕获到目标元素，捕获结束开始在目标元素上触发事件

3.冒泡阶段：

事件从目标元素向祖先元素传递，依次触发祖先元素上的事件

ps:如果希望在捕获阶段就触发事件，可以把addEventListener()的第三个参数设置为true,一般情况下不用。在IE8及以下的浏览器中没有捕获阶段

三十四、BOM

1.BOM：浏览器对象模型。BOM可以使我们通过js来操作浏览器

2.在BOM中为我们提供了一组对象，用来完成对浏览器的操作。BOM对象：

Window 代表的是整个浏览器的窗口，同时也是网页中的全局对象
Navigator 代表的是当前浏览器的信息，通过该对象可以识别不同的浏览器。一般我们只会使用userAgent来判断浏览器信息
Location 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
History 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录。由于隐私的原因，该对象不能获取具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问中有效
Screen 代表用户的屏幕的信息，通过该对象可以获取到用户的具体的显示器的相关信息

前端基础知识JS篇 ｜ 青训营