JS基础到结束知识详细大汇总

甜宝小妮儿

已于 2022-03-16 18:08:54 修改

阅读量2k

点赞数

分类专栏： JS知识全部汇总文章标签： javascript 前端开发语言

于 2022-03-16 18:07:06 首次发布

本文链接：https://blog.csdn.net/weixin_61465262/article/details/123525325

版权

JS知识全部汇总专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第二章数据类型

1：什么是数据类型？

数据类型是js的重要组成部分，它是一种值。

2：数据类型的分类？

简单类型：

        字符串类型数字类型布尔类型未定义空/空对象唯一

                String Number Boolean undefined null symbol

复杂类型：

        对象 Object 数组Array 函数Function

3：操作符 typeof

作用：返回变量的数据类型

经验：2个及2个以上的操作符返回一个变量的数据类型的结果统统都是string（字符串类型）

4:数字类型 Number：

1. 只要在js中是数字，那么他就是数字类型（数字不加引号）

      举例： 1 2 3....

2. *数字类型的方法

        Number()作用：

                把其他类型强制转换成数字类型。

        parseInt()作用：

                1：把其他类型强制转换成数字类型。

                2：取整（小数取整）

        parseFloat()作用：

                1：把其他类型强制转换成数字类型。

                2：取小数（取浮点数）

3.*NaN not a number

        *NaN是一个特殊的数字类型（他不是一个数字类型，他是一个特殊的数字类型）

        *isNaN() is not a number 是不是一个数字

        *isNaN()方法中方的是变量有数字的话，那么返回的结果就是false，否则返回的就是true

5:字符串类型 string：

1.*在js中只要被引号包围值就是字符串类型。

2.*字符串类型的方法：

                                String() toString()

                以上两个方法都具有强制转换功能，把其他类型转换成字符串类型。

   *length 属性这个属性的作用获取字符串的长度

*字符串中，空格也占位置

6:布尔类型 Boolean

*布尔类型有2个状态值： true false == 真/对假/错 == 1 0

*布尔方法：

Boolean() 这个方法的作用是：判断方法中的值是true还是false.

7:未定义类型 undefined：

申明变量但是不赋值，输出结果就是undefined;

举例：

var a;

alert(a)

8:空类型 null

null类型代表这个变量什么都没有。

9.symbol 唯一

代表即使值相同也不想等

10：等号

= 一个等号叫赋值，等号右边永远赋值等号左边

== 二个等号叫比较，比较的是双方的值，不比较类型

=== 三个等号叫全等，即比较的是双方的值，又比较双方的类型

第三章运算符

1：运算符有6种：

算术运算符比较运算符逻辑运算符赋值运算符条件运算符逗号运算符

2：算术运算符

+ 加号

        *加号具有隐形转义的功能，主要针对是字符串数据,任何数据类型和字符串相加都是字符串拼接

        *两个++号可以将字符串数字转义成number类型

        alert(1+ +'2');//3

- 减号

        *减号具有隐形转义的功能，主要针对是字符串数据，任何数字字符串相减就会变成number类型

        *负负得正 alert(1--1)//1+1//2

* 乘号

/ 除号 % 余号

        大余小,正常解,小余大,取小

ps: 0 余% 字符串 ,undefined ,null, 0, false 的答案都是NaN,余其他数都是0

        任何数余0都是NAN

        a%b的结果,先看a是大数还是小数,在看a是正数还是负数!

        -7%2

        a是大数正常解,a是小数,取小,再看正负!

++ 自增

        在运算过程中,符号在后先不做运算,符号在前先做运算!

        后面的变量去看前面相同变量的全部!

        var c = a++ + b + a;

        1+ 1+ 2

-- 自减

3:比较运算符

比较运算符的基本操作过程是：

 首先对操作数进行比较，

 该操作数可以是数字也可以是字符串，

 然后返回一个布尔值true或false。

 < 4<5 true

 > 4>5 false

 <= 5<=5 true

 =>

PS:=>和<= 这两个符号条件满足一个即为true

= 赋值（等号右边是值，左边是变量，右边永远赋值给左边）

== 等于（只比较双方的值，不比较类型）

=== 全等（即比较双方的值，又比较类型）

!= 不等于

!== 严格不等于（忽略）

在比较运算符里面会把布尔值看成数字 0/1

4:赋值运算符

+= a+=b 等价于 a=a+b

-= a-=b 等价于 a=a-b

*= a*=b 等价于 a=a*b

/= a/=b 等价于 a=a/b

%= a%=b 等价于 a=a%b

这些符号既有赋值功能又有运算功能!

&= a&=b 等价于 a=a&b（&是逻辑与运算）

|= a|=b 等价于 a=a|b（|是逻辑或运算）

对于最后2个，平常不经常用，忽略掉算了。

5:toFixed()定义和用法

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。语法

NumberObject.toFixed(num)参数描述

num 必需。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将用 0 代替。返回值

返回 NumberObject 的字符串表示，不采用指数计数法，小数点后有固定的 num 位数字。如果必要，该数字会被舍入，也可以用 0 补足，以便它达到指定的长度。如果 num 大于 le+21，则该方法只调用 NumberObject.toString()，返回采用指数计数法表示的字符串。抛出

当 num 太小或太大时抛出异常 RangeError。0 ~ 20 之间的值不会引发该异常。有些实现支持更大范围或更小范围内的值。当调用该方法的对象不是 Number 时抛出 TypeError 异常。

6:逻辑运算符

逻辑运算符通常用于执行布尔运算，

它们常常和比较运算符一起使用来表示复杂比较运算，

这些运算涉及的变量通常不止一个，而且常用于if、while和for语句中。

&& 逻辑与，

若两边表达式的值都为true，则返回true；

任意一个值为false,则返回false

|| 逻辑或，

只有表达式的值都为false，才返回false，其他情况返回true

! 逻辑非，

若表达式的值为true，则返回false；

若表达式的值为false，则返回true

7：条件运算符

条件运算符(三目运算法)

语法：条件 ? 表达式1(真) : 表达式2(假);

正确的情况下，返回表达式1，

错误的情况下，返回表达式2。

第四章分支语句

1：分支的分类？

①：if语句

②：switch语句

2：if语句的基本结构？

单分支：条件判断正确会执行花括号里面的代码，否则不会执行

if(条件判断){ 执行语句 }

双分支：

if(条件判断){ 真区/执行语句 }else{ 假/执行语句 }

多分支语句：

if(条件判断){ 执行语句 }else if(条件判断){ 执行语句 }else if(条件判断){ 执行语句

}else if(条件判断){ 执行语句 }...else{ 执行语句 }

3:if语句的嵌套

if(){

if(){ }else if(){ }

}

4:switch() 语句

switch(条件判断){

   case value:

                执行语句；

        break;

        ...

        default:

                执行语句：

}

case 记号

break 停止

default 否则

value 值

5：获取元素（标签）的方法

onclick 点击事件

function 函数

-------------------------------------------------------------------------------------------

document.get 页面

Element 获取

ById(); 元素/标签 id名字

这句话找的是叫ID名字的标签

获取页面中一个id名叫xxx的标签

document.getElementsByClassName()[数字]; 获取第几个数字下标的class名字的标签

document.getElementsByTagName()[数字] 获取标签名字的标签

document.getElementsByName()[数字] 获取name属性的标签

ie8以下浏览器不兼容

document.querySelector() 获取一个元素

document.querySelectorAll() 获取多个元素

属性

value 获取input框里面的值

ClassName 给标签动态添加样式

innerHTML 可以改变标签里面的文本内容

innerHTML innerText outerHTML outerText

window.οnlοad=function(){

如果你的js写在body上面，那么window.onload必须加，js内容写在window 里面如果你的js写在body下面，那么可加可不加这句话告诉浏览器，先加载局内容，最后加载js内容

}

第五章 循环

1：循环语句的分类？

for 循环

* for in 循环

* forEatch()

while 循环

do...while 循环

2:for循环语句

for(初始变量;条件判断;自增/自减){ 执行语句; }

举例：

for(var i=1; i<10; i++){ alert(i) }

3:经验总结

*条件判断不成立，循环要停止。

4:for循环嵌套

举例：

for(var i=1; i<5; i++){

 for(var j=1; j<=i; j++){

 执行语句

 }

}

5:for嵌套经验总结

*条件判断不成立，循环要停止。

*外面的for循环一次，里面循环一周

6:基本结构

while(条件判断){

执行语句

}

举例：

var a=1;

while(a<=10){

alert(a); a++;

}

条件判断里面可以放布尔值 true false/1 0

7:while的嵌套

举例：

var i=1;

while( i<=5){

 var j=1;

 while( j<=i){

 document.write("*");

 j++;

}

 i++;

 document.write(' ')

}

8：do...while

基本结构：

do{

执行语句；

自增/自减

}

while(条件判断)

举例：

var a=1;

do{

alert(a); a++;

}

while(a<=10)

经验总结：不管条件是否成立，都要执行一次

9:do...while的嵌套

举例：

var a=1;

do{

 var b=1;

 do{

 document.write('*');

 b++;

 }

 while(b<=a);

 a++;

 document.write(' ');

}

while(a<=5);

第六章 function函数

第七章 Math

1.Math对象的方法

方法说明

ceil(x) 对数进行上舍入

floor(x) 对数进行下舍入

random() 返回0~1之间的随机数

round(x) 把数四舍五入为最接近的整数

max(x,y) 返回x和y中的最大值

min(x,y) 返回x和y中的最小值

valueOf() 返回Math对象的原始值

abs(x) 返回数的绝对值

pow(x,y) 返回x的y次幂

log(x) 返回数的自然对数(底为e)

acos(x) 返回数的反余弦值

asin(x) 返回数的反正弦值

atan(x) 以介于-π/2与π/2弧度之间的数值来返回x的反正切值

atan2(y,x) 返回从x轴到点（x,y）的角度（介于-π/2与π/2弧度之间）

cos(x) 返回数的余弦

exp(x) 返回e的指数

sin(x) 返回数的正弦

sqrt(x) 返回数的平方根

tan(x) 返回角的正切

toSource() 返回该对象的源代码

第八章数组

1.概念(什么叫数组)：

数组是一个可以存储一组或一系列相关数据的容器。

2.数组元素（数组的内容）：

是指存储在数组中并赋予唯一索引号（下标）的数据段。

数组元素的数据类型可以不相同。

通过下标或者索引号能获取到数组相对应得内容。

3.作用：

为了解决大量相关数据的存储和使用的问题。

4：创建数组的方法：

格1：通过关键字new 创建数组

                var arr=new Array(0,1,2,3)

格2：通过字面量创建数组（通过中括号创建数组）

                var arr=[0,1,2,3];

不同点：

        (1)创建方式和形式不同

        (2)数组中如果是一个数字的话，就是一个值

        eg:var arr=[4];这个数组中只有一个数字的话,就是一个数

        var arr=new Arrary(4);这个数组中只有一个数字的话,表示分配的空间

5:获取数组的长度属性 length

6:instanceof 用于判断一个变量是否是某个对象的实例

例如下:

var a=["静夜思","野草","忆江南","浣溪沙"];

var a=45;

alert(a instanceof Array);

7: new Array()对象方法

slice()       获取数组中的某段数组元素

(取值是以下标开始，0代表第一个值，从前往后算，-1代表最后一个值，从后往前算)

unshift()    在数组开头添加元素

push() 在数组末尾添加元素

shift() 删除数组中的第一个元素

pop() 删除数组中的最后一个元素

toString() 将数组转换为字符串

join() 将数组元素连接成字符串

concat() 多个数组连接成字符串

sort() 数组元素正排序

reverse() 数组元素反向排序

splice()        删除数组元素/替换数组元素

indexOf() 指定数组中元素首次出现的下标，找不到元素返回-1

8：多维数组输出

var arr=[

[

[],

[],

[]

],

[

[],

[],

[]

],

[

[],

[],

[]

]

]

9:数组去重

var arr=[1,1,2,2,3,5,8,4,3,6,0,9];//1 2 3 5 8 4 6 0 9

10:数组排序

11：数组去重+排序

var arr=[66,10,66,45,13,54,21,13,45];//10 13 21 45 54 66

第九章日期

1:创建日期对象的方法:

日期对象被创建以后，会获得本地（电脑上的时间）系统时间

var dat=new Date();

document.write(new Date())

2:to开头的方法是将时间转换为字符串

toString() 将日期时间转换为普通字符串

toUTCString() 将日期时间转换为世界时间格式的字符串

toLocaleString() 将日期时间转换为本地时间格式的字符串

var dat=new Date();

document.write(dat.toString()+' ')

document.write(dat.toUTCString()+' ')

document.write(dat.toLocaleString()+' ')

3:get开头的方法是获取时间和日期值

getFullYear() 获取年

getMonth() 获取月份（0-11）

getDate() 获取日期/天(1-31)

getHours() 获取小时（0-23）

getMinutes() 获取分钟（0-59）

getSeconds() 获取秒取秒数（0-59）

getMilliseconds();获取毫秒（0-999）

getDay();获取星期几（0~6）

getTime()获取从1970-1-1到现在表示的时间相差的毫秒数

valueOf();获取从1970-1-1到现在表示的时间相差的毫秒数

4:日期转换方法

元角分

1元 10角 100分

分

2500分 250角 25元

年月日时分秒毫秒

1 12 31 24 60 60 1000

1年=12月

1月=31天(30天/28/29)

1天=24小时

1小时=60分钟

1分钟=60秒

1秒=1000毫秒

5天=120小时

5天=5*24*60=分钟数

5天=5*24*60*60=秒数

5*24*60*60*1000

123456毫秒换算多少天?

123456/1000/60/60/24=

5:set开头的方法是设置时间和日期值

setFullYear() 设置年

setMonth() 设置月份（0-11）

setDate() 设置日期/天(1-31)

setHours() 设置小时（0-23）

setMinutes()    设置分钟（0-59）

setSeconds()    设置秒数（0-59）

setMilliseconds();设置毫秒（0-999）

setDay();设置星期几（0~6）

setTime()设置从1970-1-1到现在表示的时间相差的毫秒数

设置日期对象

var dat=new Date("2018,11,6");

document.write(dat);

var dat=new Date("2018/11/6");

document.write(dat);

var dat=new Date("May 3,2015");

document.write(dat);

6:window对象下面的定时器方法:

第1种:间歇调用

        setInterval(函数,时间(毫秒数))

举例:

        setInterval(function(){ alert(1) },1000)

        取消间歇调用:                clearInterval()

第2种:延迟调用

        setTimeout(函数,时间(毫秒数))

举例:

        setTimeout(function(){  alert(1) },1000)

        取消延迟调用:        clearTimeout()

7.求相差的时间;

先用var dat=new Date()求出现在的时间;

var x= dat.valueOf();求现在表示的时间相差的毫秒数

var d= u.valueOf();求现在表示的时间相差的毫秒数

var da=d-x;求与现在相差的毫秒

* parseInt(da/86300000);//天的公式

* parseInt(da/3600000%24);//时的公式

* parseInt(da/600000%60);//分的公式

* parseInt(da/1000%60);//秒的公式

第十章字符串

1.创建方式：

1：通过关键字new 创建

        var str=new String();

        alert(typeof str)

2:通过字面量创建

        var str='';

2.方法：

1：length 长度

2：match()方法可以从字符串内索引指定的值(如果有返回本身，否则返回null)

match()方法类似于indexOf()方法，但是它返回的是指定的值，而不是字符串的位置

match()方法就是用来检索一个字符串是否存在。如果存在的话，返回要检索的字符串；如果不存在的话，返回null

3：search() 方法用于检索字符串中指定的字符找到返回该字符的下标否则返回-1

4:indexOf() 方法返回字符串值在字符串中首次出现的位置(下标)（如果没有查到，返回-1）

5:replace()方法常常用于在字符串中用一些字符替换另一些字符 replace('被替换的值','要替换的值')

6:charAt()方法来获取字符串中的某一个字符( 通过下标值找到对应的字符)

7:toLowerCase()方法将大写字符串转换为小写字符串

8:toUpperCase()将小写字符串转换为大写字符串

toLocaleLowerCase()和toLocaleUpperCase()也可以转换大小写

9：concat()方法来连接2个或多个字符串

11:split()方法把一个字符串分割成字符串数组

12:substring()方法来提取字符串中的某一部分字符串

开始位置是一个非负的整数，表示从哪个位置开始截取。结束位置也是一个非负的整数，表示在哪里结束截取

13:lastIndexOf()字符串的值最后出现的位置,从后向前搜索

****** 14: charCodeAt() 该方法会返回下标所对应的字符的ascii码

****** 15：fromCharCode()该方法返回ascii码所对应的字符

16:substr() 截取指定起始位置和长度的子字符串

17:trim() 去掉字符串前后的所有空格

第十一章正则

1：正则创建方式

var reg=new RegExp('要匹配的元素','修饰符')

var reg=//;

alert(typeof reg) Object

2:正则的方法

test() input框里的值通过test方法去匹配一个正则，匹配成功返回true否则返回false。

exec()找到则返回匹配的文本，若没有匹配到，则返回null。

3:字符串的方法

字符串对象调用的函数（支持正则）

1)search():搜索,返回第一次搜索到的元素的下标，找不到返回-1

2)match()：匹配,返回匹配成功的字符串,组成的数组，未匹配成功则返回null，以数组的形式返回结果

match函数既可以匹配普通字符串，也可以匹配正则表达式所表示的字符串

3)replace()：替换：既可以替换普通字符串，也可以替换正则表达式所表示的字符串,对全局g敏感

4)split()：分割：把字符串按指定参数进行拆分，返回拆分后形成的数组，对全局g不敏感

4:焦点方法

onblur 失去焦点

onfocus 获得焦点

5：元字符

\d:数字字符'0'~'9'

\D:非数字字符

\w:数字、字母、下划线字符：即单词字符

\W:非单词字符

\s:空格字符

\S:非空格字符

\b:单词边界//匹配的只是一个位置这个位置的一侧是构成单词的字符另一侧为非单词字符字符串的开始和结束位置

\B:非单词边界

.:表示任意单个字符，除了换行 \n

2、中括号/方括号：某个指定范围的若干字符

[abcde]:匹配这个集合中的任何一个字符,其中之一

[^abcdef]:不匹配这个集合中的任何一个字符

^[abcdef]:匹配这个集合中的任何一个字符（这个字符必须开头）

[0-9]:任意一个数字字符'0'~'9'

[a-z]:任意一个小字字母

[A-Z]:任意一个大字字母

[A-z]:任意一个字母(包括大小写及部分标点[\]_`^)

[选项1 | 选项2 | 选项3]：三个选项其中之一

6、量词：c表示字符串，m和n表示个数

c+：表示c的个数至少1个

c*：表示c的个数至少0个

c?：表示c的个数是0个或者1个

c{m}：表示c的个数是m个

c{m,n}:表示c的个数是m个~n个范围内

c{m,}:表示c的个数至少m个

c$:表示以c结尾的字符串

^c:表示以c开头的字符串

0(?=c):表示0后紧跟c的字符串

XXX(?!c):表示XXX其后没有紧跟c的字符串

7:修饰符

i：检索时不区分大小写

g: 执行全局检索（检索时，会查找所有匹配的字符串，并不是找到一个就结束查找）在调用特定函数时有效

m：执行多行匹配加^和$符效果明显

数字验证 var reg=/^[0-9]{6,10}$/g;

汉字验证/^[\u4e00-\u9fa5]{2,5}$/

第十二章 dom对象

1：什么是dom对象？

dom对象就是html页面，dom对象的全称叫document object model(文档对象模型)

2：dom对象的作用是什么呢？

dom对象就是通过一些方法和属性来操作标签，

这么操作标签？

将标签元素进行添加、移动、改变或移除

3：标签==标记==元素==节点

4: dom节点的分类？

dom节点分为3种类型

        1：标签节点

        2：文本节点

                属于标签下面的子节点

        3：属性节点

5：返回节点类型值

nodeName 该节点的名字，和tagName方法一样

nodeValue 该节点的文本

nodeType 该节点的编码标签节点返回数字1,属性节点返回数字2，文本节点返回数字3

6:查找子节点

childNodes[0] 返回当前元素节点的所有子节点

firstChild 获取该节点的第一个子节点

lastChild 获取该节点的最后一个子节点

parentNode 获取该节点的父节点

previousSibling 获取该节点的前一个节点

nextSibling 获取该节点的下一个节点

children[0] 获取该节点的子标签节点

firstElementChild 第一个子标签属性

lastElementChild 最后一个子标签属性

nextElementSibling 下一个兄弟元素节点

previousElementSibling 前一个兄弟元素节点

childElementCount 子元素节点个数量

7:查找属性节点

attributes 属性

8:操作属性节点

document.getAttribute()//获取特定元素节点属性的值/通过属性获取到对应的属性值

document.setAttribute(要设置的属性，属性值)//设置特定元素节点属性的值/通过属性设置对应的属性值

document.removeAttribute()//移除特定元素节点属性的值

9:操作节点

createElement()//创建标签

createTextNode()//创建文本

appendChild(创建的标签名，当前的标签名)//把标签或者文本插入/添加到另一个节点里面不加引号

insertBefore()//在当前节点前面创建一个节点

用insertBefore方法创建节点必须先找到当前节点的父节点后，在创建方法里面不加引号

replaceChild(新节点，旧节点)//把节点替换成指定的节点

cloneNode(false/true)//克隆/复制节点 true克隆的是标签+文本如果是false 只会克隆标签

removeChild()//删除节点

10：移入移出事件

onmousemove 移入事件

onmouseout 移出事件

onmouseover 移入事件

第十三章 bom对象

1：什么是bom？

bom就是浏览器对象！

简单来说，就是学习一些操作浏览器窗口的方法和属性等！

2：window对象是BOM的核心，也是BOM里面的顶级对象。

window对象也有很多内置方法（alert(1)）

window对象既是ECMAScript规范中的Global对象，也是BOM中的顶级对象；

document对象既是BOM对象的一个属性，也是DOM模型中的顶级核心

location对象既是window对象的属性，同时也是dom对象的属性。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

3: open('路径'，'打开的方式','设置属性') 打开窗口

举例：

_self 当前窗口打开

_blank 新窗口打开

open('img/1.jpg','_self','width=400,height=400,top=100,left=100')

4: close() 关闭窗口

5: moveTo(x,y) 窗口移动到的位置窗口移动的尺寸 moveBy(x,y)

6: 窗口宽高尺寸 resizeTo(x,y) 窗口宽高变化尺寸 resizeBy(x,y)

7: location 对象提供了与当前窗口中加载的文档有关的信息以及一些导航功能;

8: navigator 对象用来描述浏览器本身，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息.

9: history 对象保存着从窗口被打开起的历史记录，每个浏览器窗口、标签页、框架都有自己的 history 对象。

10: 获取浏览器的可视窗口的宽高兼容写法:(主要兼容低版本的IE 8,7,6)

var h=windowa.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;

11：屏幕宽高

document.write(" "+window.screen.height);//显示屏的高度

document.write(" "+window.screen.width);//显示屏的宽度

document.write(" "+window.screen.availHeight);//显示屏的可用高度

document.write(" "+window.screen.availWidth);//显示屏的可用宽度

12：获取滚动条的高

document.documentElement.scrollTop

document.body.scrollTop

兼容写法：

var sc = document.documentElement.scrollTop + document.body.scrollTop;

var sc = document.documentElement.scrollLeft + document.body.scrollLeft;

13:window.onscroll onscroll：滚动事件

第十四章 Event对象

1：什么是event？

1：event存在的环境是绑定事件中；

2：event是一个对象，代表事件的状态；

3：event==evet==evt==e;

2:event的兼容写法：

var e=evt||window.event;

3: 事件源的兼容

target 是event对象下面的属性，这个属性指向事件源

event.target 是w3c的写法，ie浏览器不支持

event.srcElement 这是IE的写法(兼容低版本IE)

兼容写法

event:标准写法

window.event：IE写法（兼容低版本）

var e=event.target||event.srcElement;

4：获取鼠标在可视窗口的位置

clientX 鼠标在x轴的位置

clientY 鼠标在y轴的位置

5:获取鼠标在页面的坐标位置

pageX 鼠标在页面x轴的位置

pageY 鼠标在页面y轴的位置

6:获取鼠标在屏幕坐标位置

screenX 鼠标在屏幕的x轴的位置

screenY 鼠标在屏幕的y轴的位置

7:获取到鼠标在当前div(元素)上的坐标位置

offsetY

offsetX 火狐浏览器不兼容

layerX 火狐浏览器兼容

layerY

8:获取可视窗口的宽高/获取屏幕窗口的宽高

可视：clientWidth/clientHeight

屏幕：screenWidth/screenHeight

第十五章鼠标跟随

1： offsetLeft 获取元素到左边的距离

offsetTop 获取元素到上边的距离

offsetWidth 获取元素的宽

offsetHeight 获取元素的高

2: document.documentElement.clientWidth 获取可视窗口的宽度

document.documentElement.clientHeight 获取可视窗口的高度

Element.clientWidth

Element.clientHeight

3: scrollLeft 横滚动条的值

scrollTop 竖滚动条的值

第十六章事件

1：什么是事件？

人与机的交互就是事件。

2：事件类型：

ui事件

        *onscroll 滚动条事件

        onload 页面加载触发

        unload 页面关闭触发

        onresize 改变浏览器窗口触发

        onabort 图像加载被中断触发

        error 错误信息时触发

焦点事件（表单事件）

        *onfocus 获得焦点事件（没有冒泡，浏览器都支持）

        *onblur 失去焦点事件（没有冒泡，浏览器都支持）

        onfocusin 获得焦点事件（有冒泡，IE支持）

        onfocusout 失去焦点事件（有冒泡，IE支持）

        onselect 选中文本时触发

        *onchange 当改变一个元素的值且失去焦点时

鼠标事件

        *onclick 当用户单击对象时

        *ondblclick 当用户双击对象时

        *onmouseout 移出事件

        *onmouseover 移入事件

        *onmousemove 移入元素的内部不断的移动时触发

        onmousedown 在用户按下了任意鼠标按钮时触发

        onmouseup 在用户释放鼠标按钮时触发

键盘事件

        onKeydown：当用户按下键盘上的任意键时触发。

        onKeypress：当用户按下键盘上的字符键时触发。

        onKeyup：当用户释放键盘上的键时触发。

        keyCode 返回键盘键对应的编码

3：事件的传播机制？

事件分为2种传播机制（事件流）：

1：冒泡（IE提出的事件流是冒泡）

2：捕获（谷歌和火狐提出的事件流是捕获）

4：什么是冒泡事件？

1:冒泡事件是由微软公司提出的，从触发底部事件一直延续到最外层，这个现象就是冒泡！

2:只有嵌套关系的标签和都是一样的事件才可能产生冒泡！

5：阻止冒泡事件的方法：

1：evt.stopPropagation() 无法阻止 IE 低版本事件冒泡；

2: evt.cancelBubble = true;兼容 IE 低版本冒泡；

6:阻止冒泡事件的兼容写法：

if(evt.cancelBubble=true){

evt.cancelBubble=true;

}else{

evt.stopPropagation();

}

7:封装阻止冒泡事件方法：

function stopBubble(event){

        if(event.stopPropagation){

            event.stopPropagation();

        }else{

            event.cancelBubble = true;

        }

    }

8：DOM0事件处理程序：

1：简单来说就是所有的事件叫DOM0事件。

举例：onclick,onmouseover,onmouseout....

2：DOM就是文档对象模型，0是指这个事件的最初版本

9:DOM2事件处理程序：

1：addEventListener(事件，函数，布尔值) 绑定事件方法 IE不支持

举例：

addEventListener('click',function(){ },false)

2：是 true 的话是捕获事件，是 false 的话是冒泡事件；

3：removeEventListener() 删除事件方法 IE不支持

10: IE的DOM2方法：

attachEvent('事件'，函数)

detachEvent('事件'，函数)

11：事件委托

利用冒泡的原理，把事件加到父级上，触发执行效果。

把该是自己的事件交给其他标签来完成，就是事件委托！

把li的事件委托给父元素ul来完成。

事件委托只能是把子元素的事件委托给父元素。

12：事假委托的优点：

1：提高代码性能，运行速度加快

2：节省内存空间

13: 事件源的兼容

target 是event对象下面的属性，这个属性指向事件源

event.target 是w3c的写法，ie浏览器不支持

event.srcElement 这是IE的写法(兼容低版本IE)

兼容写法

var targt=e.target||e.srcElement;

第十七章拖拽

1：鼠标在元素上的坐标位置

offsetX

offsetY

2:鼠标在浏览器（可视窗口）上的坐标位置

clientX

clientY

3：事件

onmousedown 鼠标按下

onmousemove 鼠标移动

onmouseup 鼠标弹起

4:可视窗口的宽度和高度

document.documentElement.clientWidth

document.documentElement.clientHeight

5:获取元素的宽高

offsetWidth

offsetHeight

6:获取元素到浏览器窗口的距离

offsetLeft

offsetTop

7:函数封装

<1>:被函数包裹的可以重复使用的代码就叫函数的封装

8:函数封装作用和特点

<1>:可以减少代码量，减少冗余重复代码，提高代码运行速度，提高工作效率

9:函数封装思路

<1>:把重复提取出来，用函数包裹

<2>:找出代码中相同的元素，用形参代替

<3>:改错

第十八章高级函数

1:基本类型和引用类型？

基本：number string boolean null undefined

var a=1;

引用： object,函数

var arr=[];

function fun(){

}

2：基本类型和引用类型的区别？

基本类型是值的传递，引用类型是地址的传递。

3:js的内存方式？

当在js中写完一句js代码的时候，js会自动开辟内存空间。

内存分为2种：

栈内存：

存储的是基本类型

堆内存：

存储的是引用类型

4：浏览器解析js代码的时候的顺序?

1.首先全局判断查找错误语句.

2.对关键字 var function 声明定义的语句,进行预解析

        2.1变量的预解析：

                先声明，后定义。

        2.2函数的预解析：

                声明和定义同时执行。

3.按照从上到下,从左到右的顺序执行js代码

5：函数内部的属性：

函数的属性分为3种：this,arguments,prototype

this的功能：

this的功能具有指向性！

分析this的指向功能：

1:如果在绑定事件函数中，this指向事件前对象。

举例：

btn.οnclick=function(){ alert(this) }

2:在其他函数中，谁调用这个函数，this就指向谁！

6：匿名函数：

自己自我调用的函数就是匿名函数,函数没有命名也是匿名函数

举例：

()()

var a=function(){}

匿名函数的优点：

1：减少函数命名，节省代码和内存空间

2：防止函数命名冲突

3：内部变量不容易被获取。

匿名函数的缺点：

1:内部变量不容易被获取。

7：全局变量和局部变量，全局作用域和局部作用域

全局变量：

        函数外有关键字 var声明的变量

        window对象下声明的属性

        不加关键字var 的变量

        全局变量作用域全局window下，只能下面的代码获取。

局部变量：

在函数中加var关键字的变量或函数的形参，对象的属性都是局部变量。

全局作用域:

变量声明在windon下，所有作用于全局。

局部作用域:

变量是私有的，作用当前的函数或对象内部。

8：作用域链

创建好一个函数时，会自动生成一个链条，函数中查找某个属性时，

第一链条有这个属性或者变量，就会直接执行找到，没有就会向上查找，直到找到，

全局也找不到，就会抛出异常（报错），这个过程就是作用域链！

9：闭包函数

1：闭包就是能够读取其他函数内部变量的函数。

这种写法就可以获取到函数内部的局部变量,b函数就是闭包

function a(){

         var n=9;

        function b(){

                alert(n)

        }

        return b;

}

var num=a();

num();

2：闭包的用途

        闭包可以用在许多地方。

        它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，

        另一个就是让这些变量的值始终保持在内存中。

3：闭包的缺点：

        使用闭包的注意点由于闭包会使得函数中的变量都被保存在内存中，

        内存消耗很大，所以不能滥用闭包，

        否则会造成网页的性能问题，

        在 IE 中可能导致内存泄露。

解决方法是，在退出函数之前，

        将不使用的局部变量全部删除。

        闭包会在父函数外部，改变父函数内部变量的值。

        所以，如果你把父函数当作对象（object）使用，

        把闭包当作它的公用方法（Public Method），

        把内部变量当作它的私有属性（private value），

这时一定要小心，不要随便改变父函数内部变量的值。

10:垃圾回收机制

垃圾回收机制，就是变量释放自己内存空间的过程。

局部变量的释放是当函数执行完成一次以后，就会释放自己的内存空间，

全局变量的释放就是关闭浏览器后，会释放自己的内存空间

第十九章面向对象

1：什么是对象obj？

对象是有若干个键值对组成的，他是一种数据集合。

2:对象的创建方式：

2.1：字面量创建

var o={};

2.2: 关键字创建

var o=new Object();

3:对象的写法格式和注意点：

格式1:

var o={

        name:'甜宝小妮',

        age:18,

        job:'student',

        fun:function(){

        alert(this.name+this.age+this.job)

}

}

格式2:

var o=new Object();

o.name='老栗';

o.age=18;

o.job='student';

o.fun=function(){

alert(this.name+this.age+this.job)

}

PS:注意:冒号前叫键，冒号后叫值，通过键去找值。

4:什么是面向对象？

#我们以前写代码的过程叫，面向过程的写法，现在我们要学习面向对象的写法。

#我们学习完，面向对象以后，会按照面向对象的写法，写这个案例。

面向对象是一种思想（oop）。

5：面向对象的特点：

5.1：封装 5.2：多态 5.3：抽象 5.4：继承

#我们学习完面向对象的特点以后，会按照面向对象的思想指导去写我们的demo案例。

#我们到到位以后重要的，常用的框架或者一些重要的库，里面的地产架构都有面向对象在里面。

6：面向对象要学习的知识点：

6.1工厂模式的写法：

6.1.1：为什么学习工厂模式？

工厂模式解决了，多个相同对象代码冗余的问题。

工厂可以提高我们的工作效率，减少代码量。

6.1.2：工厂模式写法步骤：

1:创建一个函数

2:函数里面创建一个对象

3:把函数的形参赋值给对象的属性

4:返回对象

5:把函数赋值给一个变量,调用对象方法

例子如下:

        function createStudent(name,age){
                var o=new Object();
                  o.name=name;
                o.age=age;
                  o.myName=function(){  alert(this.name) };
                  return o;
        }
var student1_ = createStudent('aaa',15);
var student2_ = createStudent('bbb',18)

6.1.3：工厂模式写法缺点：

不能识别对象实例化。

7：构造函数模式的写法:

7.1：构造函数解决了不能识别对象实例化的问题。

7.2：构造函数里的this是指向构造函数的。

7.3：new Crea()这个函数就变成了对象类型。

7.4：构造函数名首字母应该大写。

举例：

function Crea(name,age){

        this.a=name;

        this.b=age;

        this.f=function(){ alert(this.a+this.b); alert(this) //[object Object] }

}

var t1=new Crea('tom',12)

var t2=new Crea('jicak',123)

8.构造函数模式与工厂函数的区别:

构造函数也是函数定义函数首字母大写,里面通过this去绑定,以对象的格式去调用.
没有用new调用的会返回undefined因为是普通函数调用,普通函数没有返回值所以返回undefined
工厂函数需要return返回

9:instanceof 是判断变量是否是这个对象的实例化对象。（判断这个变量是否和这个对象是同源的）

10：实例化和类，对象的概念

function a(){ }

var o=new a();

对象：函数被关键字 new 以后就变成了实例化对象

类：函数被关键字new完以后这个整体（new a()）被称之为类

类的作用就是一个模具，通过这个模具可以复制很多对象。

实例化：函数被关键字 new完以后，赋值给一个变量的过程叫实例化对象 var o=new a();

变量被实例化后，就拥有了函数对象里面的属性和方法。

11:什么是原型对象？

1：prototype翻译过来叫原型，他本身的类型是对象。本的中文和类型加起来简称==原型对象

2：原型对象它存在实例对象和函数中。

12:原型对象的作用：就是可以共享属性和方法。

13：实例对象函数原型对象之间的关系？

函数通过关键new赋值给一个变量，这个变量就变成了实例对象。（说白了实例对象是函数new出来的）

函数通过原型prototype生成原型对象（原型对象也是从函数出来的）

原型对象通过constructor可以找到函数

实例对象通过__proto__可以找到原型对象

14：prototype proto constructor的作用？

prototype是对象类型，存储函数当中，作用是共享属性和方法

__proto__是存储实例对象中，作用：实例对象同__proto__可以获取原型对象的属性和方法。

constructor是原型对象下面的属性，作用：指向了函数

15:写面向对象的步骤

把面向过程的js代码改写成面向对象思维js代码

* 1：不能有函数的嵌套，如果有把嵌套的函数全部提出来

* 2：可以有全局变量

* 3：把onload改成构造函数

* 4:把全局变量变成属性

* 5：把函数变成方法(在这里指的是Tab)

* 6:不能把获取属性的值写死

* 7:改错

16：删除属性的唯一方法是使用 delete 操作符；设置属性为 undefined 或者 null 并不能真正的删除属性，而仅仅是移除了属性和值的关联。

17: hasOwnProperty()方法和 in 操作符的用法

hasOwnProperty() 方法用来判断某个对象是否含有指定的自身属性

第二十章继承

1：什么是继承，继承的概念：

继承是指一个对象直接使用另一对象的属性和方法，继承可以使得子类具有父类的各种属性和方法。

2：继承的称呼：

父类 == 超类型 == 基类

子类 == 派生类

3：继承的方法：

1：原型链继承

        原型链继承的缺点：

                1：创建子类实例时不能向超类传参

                2：引用类型不能保持独立

2：构造继承

       借用构造函数的继承解决了：

                1：引用类型保持独立

                2：可以传参

        借用构造函数的继承（又叫：冒充继承）

                方法：call()

                构造继承缺点：

                        对象冒充只能继承构造实例中的属性和方法，不能继承原型中的属性和方法！