JavaScript笔记知识点整理 图文

一、JavaScript基础

1.变量：区分大小写（html不区分大小写）

变量和作用域：

1)Js在函数内部直接读取全局变量

2)在函数外部无法读取函数内部的局部变量

3)在函数内部声明变量的时候，要使用var，如果不用，则认为声明的是全局变

量

2.标识符的命名：第一个字符必须是字母、下划线或$

第二个字符及以后：字母、数字、下划线或￥

3.保留字（不可以当做标识符）：

4.声明变量：

1)声明变量：var a；

2)赋值：a=10；

3)声明变量和初始化变量：var a=10；

4)声明多个变量：var x，y，z=10；

5)不声明变量，直接使用：x=10

5.数据类型：

1)Typeof操作符：用来检测变量的数据类型：

a)Undefined：未定义

b)Boolean：布尔型

c)String：字符串

d)Number：数值

e)Object：对象/null

f)Function：函数

g)例如：Var sun=“太阳”；

Alert（typeof sun）；

2)Undefined类型：定义了一个变量但是没有给这个变量赋值、使用一个为定义

的量、或者用了一个不存在的对象的属性的时候，返回undefined

3)Null类型：空字符，表示不存在的值

a)如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为

null。

b)养成编码的规范，不要忘记初始化变量。

4)Boolean类型：true/false（小写）

a)Var hello=“hello world”；

alert（typeof hello）//返回的是string类型

b)Var hello=Boolean（hello world；

alert（typeof hello）//返回的是boolean类型

c)If语句：Var hello=“hello world”

if ( hello ) {

alert(“如果条件为true，就执行这条语句”);

} else {

alert(“如果条件为false，就执行这条语句”);

}

d)

5)Number类型：数字型

a)整数或者实数，所有的数字都以浮点型来表示，如：var a=474；var b=54.23；

b)判定是否超过数字型的范围：isfinite（）函数，如果没有超过，返回true，

超过了返回false。

var box=10e1000;

alert(isFinite(box)); //返回false

c)处理整数：parseInt（）函数

6)String类型：表示由零或多个16位Unicode字符组成的字符序列，即字符串。

a)字符串可以由双引号(??)或单引号(‘’)表示。

b)Tostring（）函数：把值换成字符串

7)Object类型：一组数据和功能的集合

a)Var box = new object（）；

b)Object里可以任意传参，可以传数值、字符串、布尔值等。而且，还可

以进行相应的计算。

6.转义序列：

a)\n：换行

b)\t：制表

c)\b：空格

d)\r：回车

e)\f：换页

f)\\：斜杠

7.运算符：

8.数组：

1)Push（）：追加数组数据

2)Pop（）：删除数组最后一个数据

3)Shift（）：移除数组第一个数据

4)Unshift（）:把数据移到数组的第一位

9.实例属性和类属性：

实例属性：在函数中用this前缀修饰的变量，要通过对象来访问

类属性：在函数中以函数名前缀修饰的变量，类属性是整个类的，可以通过类（函数）来访问。

局部变量：只能在函数里面访问

10.函数：

1)函数的声明：

a)无参函数：function box（）{

Alert（‘只有函数被调用，我才会被执行’）

}

调用函数：box（）；

b)有参函数：function box（name，age）{

Alert（‘你的名字’+name+‘年龄’+age）

}

调用函数并且传参数：box（‘爆米花’，12）；

c)定义函数的三种方式：定义命名函数

定义匿名函数

使用function类匿名函数

var s = new Function（‘nume’，document.write（‘Function定义的函数’

+document.write（“你好”+name））+）

2)递归函数：

3)Return返回值：

4)Arguments对象：

a)是所在函数的一个内置类数组对象，可以用数组的[i]和.length。

b)Sd

c)重载：就是根据参数选择相同函数名而参数不同的函数

11.调用函数的三种方式

1)直接调用函数

2)以call（）方法调用函数：需要动态传入一个函数引用（动态的调用函数）

函数的引用.call（调用者，参数1，参数2）

3)以apply（）方法调用函数

4)Apply（）和call（）的区别：

Call（）调用的时候，必须在括号内详细的列出每个参数

Apply（）动态调用的时候，可以在括号中用arguments来代表所有参数

12.对象的创建

1)使用new关键字调用构造器创建对象

2)使用object直接创建对象

Js的对象都是object类的子类

3)使用json创建对象

二、语句

1.Foreach循环：for（var变量名in 数组名）{ }

2.For循环：for（var变量名；范围；变量++/--）{ }

3.If语句

4.While语句

5.Do while语句

6.Switch语句

7.Break：跳出整个循环（当前所在的循环）

Continue：结束本次循环，进行下一次循环

跳出外层循环：设置标签，如图

三、DOM（document object model）文档对象模型

1.DOM HTML

1)改变HTML内容：

Document.getElementById(id).innerHTML = new html;id.innerHTML=新内容

或者：

2)改变HTML属性

Document.getEelementId(id).attribute = new value; id.属性=新的属性值

2.DOM CSS

Document.getEelementId(id).style.property=new style; id.style.属性=新的属性值

3.DOM事件

1)Onclick事件：在html元素上点击执行function；

2)Ondblclick时间：双击触发

3)Onload事件/onunload事件

共同点：在用户进入或者离开页面的时候被触发；

用于处理cookie

不同点：onload检测发访问者的浏览器类型和版本，加载网页的正确版本

4)Onchange事件：对输入的字段进行验证

5)Onmouseover/onmouseout事件：鼠标放在元素上面/移动的时候触发函数

类似伪元素选择器：hover，不同在于这个触发函数

6)Onmousedown/onmouseup事件：点击按钮的时候触发事件1，松开鼠标后，

触发事件2，最后结束的时候，类似事件onclick。

7)Onfocus事件：获得焦点

8)Onblur时间：失去焦点

9)Onkeydown/onkeypress/onkeyup：按下键盘某个键的时候触发/单机键盘某个键

/松开键盘某个键

10)Onreset：重置表单的时候触发

Onsubmit：提交

11)Onsize：改变窗口大小

4.DOM 节点

1)添加节点：第一步:创建一个新的元素类型：createElement（）；

第二步：在创建一个元素节点

第三步：在元素的后面追加这个节点

在已有的元素里面追加这个新的元素

第四步：定义原有对象的元素名称

第五步：向已有的元素后面追加新的元素

2)删除节点：第一步：获取父元素id

第二步：获取将要删除元素的id

第三步：从父元素中删除子元素

3)修改html元素

a)innerHTML：div/span/td内容的呈现

b)value：textarea内容的呈现

c)className：修改HTML的css样式：class选择器名称

d)style：修改HTML元素的内联css样式

e)options[index]：select指定列表

4)复制当前节点：node cloneNode（boolean t/f）：复制当前节点。

当值为true，表示在复制当前节点的同时，复制该节点的全部及其后代

当值为false，表示只复制当前节点

5)插入节点：

InsertBefore（Node newNode，Node refNode）：在refNode节点之前插入

newNode

6)替换节点：replaceChild（Node newNode，Node oldNode）；

7)为列表框和下拉菜单添加选项

a)HTMLSelectElement的add方法进行添加选项

Add（option，before）：在before选项之前添加option选项，before指定

为奴的时候可以将option选项添加到最后

b)直接为select的执行选项赋值

appendChild（option）；

c)New option（text，value，defaultselected，selected）

Text：选项的文本

Value：选中该选项的值

DefaultSelect：默认是否选中选项

Selected：该选项当前是否被选中

8)动态添加表格内容：

a)insertRow（index）：在指定索引处插入一行

b)createCaption（）：为表格创建标题

c)insertCell（long index）：在指定索引处创建一个单元格

9)节点访问HTML元素：

a)ParentNode：返回当前节点的父节点

b)PreviousSibling：返回当前节点的前一个兄弟节点

c)nextSibling：返回当前节点的下一个兄弟节点

d)childElementByTagName（tagName）：返回当前节点的具有指定标签名的

所有子节点

e)firstChild：返回当前节点的第一个子节点

f)lastChild：返回当前节点的最后一个子节点

10)访问表单控件<

a)Action：表单提交的地址

b)Element：返回表单内全部表单控件组成的数组

c)Length：个数

d)Method

e)Target：_self,_blank,_parent,_top :指定提交表单式的结果窗口

f)Reset（）：重置表单

g)Submit（）：提交表单

11)访问列表框和下拉菜单的选项：

a)Form：返回当前列表框或下拉菜单所在的表单对象

b)Length：

c)Options：返回所有选项组成的数组

d)selectedIndex：返回选中选项的所有

e)type：

f)index：

g)selected：是否被选中

h)text：选项呈现的文本

i)value：每一个选项的value属性

12)访问表格子元素：

a)Caption：标题对象

b)Tfoot：

c)Thead：

d)Tbody：

e)Table.Rows[index]：返回表格的第index+1行

f)Cells:单元格组成的数组

g)Rowindex：行索引

13)删除列表框和下拉菜单的选项

a)Remove（long index）

b)直接将制定的选项赋值为null

14)删除表格的行或者单元格

15)事件冒泡：当浏览器执行某个动作的时候，页面上有多个元素相应该事件

传递方向：从下向上传递事件

16)重定向事件：不用按照dom数上溯，希望给在不同节点之间跳跃

Target。fireEvent（String event，Event event）：将事件event事件重定向到target

对象

---

5.Dom 句柄

1)特点：句柄之间互不影响，不会覆盖

可以减少多次修改

2)AddEventListenter（事件，function）：添加事件句柄

3)RemoveEventListenter（事件，function）：移除事件句柄；

4)注意：加红的function，后面不带括号

四、对象

1.定义：javascript中的所有事物都是对象：字符串、数值、数组、函数…也可以自定

义对象。

2.访问对象的属性：objectname.propertyname（对象名.属性名）

3.访问对象的方法：objectname.methodname()（对象名.方法()）

4.创建对象：

1)直接创建对象：person = new object（）；

https://www.360docs.net/doc/6c7757087.html, = “miliy”;

Person.age=44;

Person.gender=”女”;

Document.Write（”姓名：”+https://www.360docs.net/doc/6c7757087.html,）;

2)使用对象构造器：function person（name，age，gender）{

https://www.360docs.net/doc/6c7757087.html,=name;

This.age=age;

This.gender=gender;

}

Myfriend = new persion(“andy”,12,”男”)；

5.数字：

1)只有一种数字类型，不定义不同类型的数字

八进制：数字的前缀是0，默认是八进制

十六进制：数字的前缀是0x，默认为十六进制

2)对象方法：toString：把数字转换为字符串；

toLocalString：把数字转换为字符串，使用本地数字格式顺序

toFixed：把数字转换为字符串，结果的小数点后有指定位数

toOrecision：把数字格式化为指定长度；

valueOf：返回一个Number对象的基本数字值

6.数组

1)定义：var数组名= new Array（）；

Var数组名= new Array（n）；

Var数组名= new Array（元素1，元素2，元素3）；

数组变量[i] = 值；

2)数组长度：数组名.length

修改数组长度：数组名.length = 4（你想定义的长度）；

3)拼接数组concat（数组1，数组2，数组3,）；

4)数组转换成字符串：join（分隔符）；

5)删除数组最后一个元素，返回最后一个元素：pop（）；

6)添加元素，返回数组元素：push（）；

7)删除第一个元素，返回第一个元素：shift（）

8)从数组中选择元素重新组建数组：slice（开始位置，结束位置）；

9)删除或者替换元素：splice（位置，多少，元素）；

10)排序数组：sort（）；

11)倒序数组：reverse（）；

12)返回一个包含数组中所有元素的字符串，每个元素用逗号分隔：toString（）；

7.字符串

8.逻辑

9.Math（算数）对象：

1)Math.round（）:四舍五入

2)Math.random（）：返回0-1之间的随机数

3)Math.floor（）：舍去小数点后的，向下取，不进位

4)Math.abs（x）：返回x的绝对值

5)Math.acos（x）：返回x的余弦值

6)Math.sqrt（x）：返回x的平方根

7)Math.pow（x）:返回x的平方

10.查找字符：

1)charAt（位置）：字符串在指定位置处的字符

2)indexOf（字符串，[起始位置]）：从字符串对象指定开始的位置，从前到后查

找字符串

3)lastIndexOf（字符串）：从后到前查找子字符串在字符串对象中的位置

4)substring（开始位置，[长度]）：从开始位置开始截取指定长度的字符，返回截

取的字符

5)substring（开始位置，结束位置）；

6)split（分隔符）：分割字符串到一个数组中去，把字符串变成数组

7)replace（需要替代的字符，新的字符）；

11.日期对象常用函数：

1)Setxxx：设置日期和事件

2)Getxxx：获取日期和时间；

3)Toxxx：将日期转换成指定格式

4)Date（）：返回当前的日期和时间

5)GetDate（）：从date对象中返回某个月中的某一天

6)getDay（）：从date中返回一周中的某一天7

7)getTime（）：获取从1970.1.1到现在的毫秒数

8)toTimeString：把date对象的时间转换为字符串

12.访问时间对象：

1)ClientX：返回发生鼠标事件在页面中的x坐标

2)ClientY：返回发生鼠标事件在页面中的Y坐标

3)OffsetX：返回发生鼠标事件位置相对于事件源的x坐标

4)OffsetY：返回发生鼠标事件位置相对于事件源的Y坐标

13.（RegExp）正则表达式：

1)作用：用来检索某个文本，使用一种模式来描述要减速的内容

2)定义：var a = new RegExp(“e”); 在字符串中检索的时候，寻找的是字符“e”

3)方法：

a)test（）：检索字符串中的指定值，返回值是true或false

b)exec（）：检索字符串中的指定值，返回的是被找到的值，如果没有匹配

到，返回null；

c)compile（）：可以改变检索模式，也可以添加或者删除第二个参数

五、canvas：

1.语法：

//获得canvas区域

var canvas = document.getElementById("diagonal");

//getContext

var context = canvas.getContext("2d");

//开始绘制

context.beginPath();

//起点位置 MoveTo（x,y)

//终点位置 lineTo(x,y)

context.moveTo(70,140);

context.lineTo(140,70);

//把这个线绘制到canvas上

context.stroke();

2.绘制矩形：

fillRect(x,y,width,height):矩形：（左上角x坐标，左上角y坐标，矩形宽度，矩形高

度）

3.绘制圆：

1)arc（原点，原点，半径，开始的弧度，定义画圆的方向）

2)fill（）：填充

3)stroke（）：描边

4.绘制带阴影的图形

5.使用图像：

1)DrawImage（image，dx，dy）：接受一个图片，并将其绘制到canvas中

Dx：图片左上角坐标，dy图片左上角y坐标

2)DrawImage（image，dx，dy，dw，dh）：接受一个图片，将其缩放到宽度为

dw，高度为dh，把图片放在canvas中（da，dy）的位置

3)DrawImage（image，sx，sy，sw，sh，dx，dy，dw，dh）：接受一个范围，通

过（sx，sy，sw，sh）指定图片裁剪的范围，然后把裁剪过得图片放到canvas

的位置范围中

六、闭包

1.如何从外部读取局部变量（闭包）：

在一个函数内部，再定义一个函数：

第一步：定义一个普通函数f1（）；

第二步：在f1中定义一个普通函数f2（）；

第三步：在f1中返回f2（在f1中返回f2的引用）

第四步：执行f1，把f1的返回结果复制给变量c；

第五步：执行c（）；

函数A的内部函数B被函数A以外的一个变量C引用

Function f1（）{

Var n=99;

Function f2(){

Alert(n);

}

Return f2;

}

Var result =f1();

Result();//99外部可以访问局部变量

2.闭包：当一个内部函数被其他函数之外的变量引用的时候，就形成了闭包。

3.闭包的特性：

1)函数嵌套函数

2)函数内部可以引用外部的参数和变量

3)参数和变量不会被垃圾回收机制回收

4.闭包的用途：

1)可以直接读取函数内部定义的变量

2)让这些变量的值始终存在内存中

5.注意：

1)问题1：闭包会使函数中的变量都被保存在内存中，内存消耗大，所以不能滥

用，否则会导致网页的性能问题，内存泄漏

解决方案：在退出函数的时候，将不使用的局部变量全部删除

2)问题2：闭包会在复函数外部，改变复函数内部的变量值，如果把复函数当做

对象使用，把闭包当做公用方法（public），内部变量相当于私有属性（private

value）

---------不嗯呢该随便改变复函数内部变量的值。

七、Json

1.JavaScript Object Notation：对象表示法

2.格式：{key：value}

3.Json常用内置类：array数组类/Date日期类/Function函数类/Math数学类/String字

符串类/Object对象类/Number数值类/Error错误类

4.Json内置对象：

5.它使用JavaScript对象的格式来存储数据。JSON是灵活的，因为它允许数据结

构是字符串，数字，布尔值，字符串，和对象的任意组合。

对象与对象之间要用“，”隔开

6.访问对象属性：

八、正则表达式（RegExp）

1.声明表达式：var a = new RegExp（“hello”）；

Var a2 = /world/；

2.查找字符串：/字符串/gi

小写的g：global（全局）查找全部

小写的i：忽略大小写

3.方法：

1)Test（）：检测会否存在，返回值为true/false；

2)exec（）:检索指定的值，返回值是被找到的值，如果没有找到，返回null；

4.字符串正则：

1)match（）：匹配

2)search（）：字符串查找

3)replace（/换掉的字符/，“新字符”）：字符串替换

4)split（）：分割字符串

变成数组的时候经常会用到

5.数字选择器：/\d/g 获取一个字符串的数字

/\d+/g 允许表达式匹配一个或者更多的数字

6.单词选择器：/\w/g 获取一个字符串中的单词

7.Null字符查找：/\0/g

8.空白选择器：/\s/g 查找字符串的空白

这里的空白包括：" " (空格符)

\r (回车符)

\n (换行符)

\t (制表符)

\f (换页符)

9.正则表达式的字符大写表示反义：例如：\S表示非空白字符

10.方括号：[]

1)/[abc]/g:对括号内的内容进行查找

如：/[1-9]/g:对1-9内的数值进行查找

2)/[^abc]/h：对不在括号内的字符进行查找

11.量词：

1)/n+/：匹配至少包含一个n字符串

2)/n*/：匹配包含0个或者多个的n字符串

3)/n?/:匹配包含0个或者一个n字符串

4)/n{x}/：匹配包含连续x个的n字符串

5)/n{x,y}/：匹配包含连续x个到连续y个的n字符串

6)/n{x,}/:匹配至少含有x连续的n的字符串

7)/n$/:匹配以n结尾的字符串

8)/^n/:匹配以n开头的字符串

9)/字符1（?=字符2）/：匹配字符后面紧跟字符2

10)/字符1（?!字符2）/：匹配字符后面没有紧跟字符2

九、DHTML

1.DHTML：动态HTML，JS：先获取页面的元素，修改属性+html

DOM：+css+html

2.动态定位：

1)pixelLeft：像素值

2)pixelRight：

3.旋转：

4.缩放：

5.Transform（a,b,c,d,e,f）：这个变换只会影响tranform（）方法调用后的绘图，

调用这个方法时，会在前一个变换矩阵基础上创建

1)a：水平缩放绘图

2)b：水平倾斜

3)c：垂直倾斜

4)d：垂直缩放

5)e：水平移动

6)f：垂直移动