JavaScript笔记知识点整理-图文

1、文档可能无法思考全面，请浏览后下载! 一、 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) 不声明变量，直接使

2、用：x=105. 数据类型：1) Typeof操作符：用来检测变量的数据类型：a) Undefined：未定义b) Boolean：布尔型c) String：字符串d) Number：数值e) Object：对象/nullf) Function：函数g) 例如：Var sun=“太阳”；Alert（typeof sun）；2) Undefined类型：定义了一个变量但是没有给这个变量赋值、使用一个为定义的量、或者用了一个不存在的对象的属性的时候，返回undefined3) Null类型：空字符，表示不存在的值a) 如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null。b) 养

3、成编码的规范，不要忘记初始化变量。4) Boolean类型：true/false（小写）a) Var hello=“hello world”；alert（typeof hello）/返回的是string类型24 / 26b) 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类型：数字型

4、a) 整数或者实数，所有的数字都以浮点型来表示，如：var a=474；var b=54.23；b) 判定是否超过数字型的范围：isfinite（）函数，如果没有超过，返回true，超过了返回false。var box=10e1000;alert(isFinite(box);/返回falsec) 处理整数：parseInt（）函数6) String类型：表示由零或多个16位Unicode字符组成的字符序列，即字符串。a) 字符串可以由双引号(“”)或单引号()表示。b) Tostring（）函数：把值换成字符串7) Object类型：一组数据和功能的集合a) Var box = new obj

5、ect（）；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)

6、 函数的声明：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) 是

7、所在函数的一个内置类数组对象，可以用数组的i和.length。b) Sdc) 重载：就是根据参数选择相同函数名而参数不同的函数11. 调用函数的三种方式1) 直接调用函数2) 以call（）方法调用函数：需要动态传入一个函数引用（动态的调用函数）函数的引用.call（调用者，参数1，参数2）3) 以apply（）方法调用函数4) Apply（）和call（）的区别：Call（）调用的时候，必须在括号内详细的列出每个参数Apply（）动态调用的时候，可以在括号中用arguments来代表所有参数12. 对象的创建1) 使用new关键字调用构造器创建对象2) 使用object直接创建对象Js的对象

8、都是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 HTML1) 改变HTML内容：Document.getElementById(id).innerHTML = new ht

9、ml; id.innerHTML=新内容或者：2) 改变HTML属性Document.getEelementId(id).attribute = new value; id.属性=新的属性值2. DOM CSSDocument.getEelementId(id).perty=new style; id.style.属性=新的属性值3. DOM事件1) Onclick事件：在html元素上点击执行function；2) Ondblclick时间：双击触发3) Onload事件/onunload事件共同点：在用户进入或者离开页面的时候被触发； 用于处理cookie 不同点：onl

10、oad检测发访问者的浏览器类型和版本，加载网页的正确版本4) Onchange事件：对输入的字段进行验证5) Onmouseover/onmouseout事件：鼠标放在元素上面/移动的时候触发函数 类似伪元素选择器：hover，不同在于这个触发函数6) Onmousedown/onmouseup事件：点击按钮的时候触发事件1，松开鼠标后， 触发事件2，最后结束的时候，类似事件onclick。7) Onfocus事件：获得焦点8) Onblur时间：失去焦点9) Onkeydown/onkeypress/onkeyup：按下键盘某个键的时候触发/单机键盘某个键/松开键盘某个键10) Onrese

11、t：重置表单的时候触发Onsubmit：提交11) Onsize：改变窗口大小4. DOM 节点1) 添加节点：第一步:创建一个新的元素类型：createElement（）； 第二步：在创建一个元素节点 第三步：在元素的后面追加这个节点 在已有的元素里面追加这个新的元素 第四步：定义原有对象的元素名称 第五步：向已有的元素后面追加新的元素 2) 删除节点：第一步：获取父元素id 第二步：获取将要删除元素的id 第三步：从父元素中删除子元素3) 修改html元素a) innerHTML：div/span/td内容的呈现b) value：textarea内容的呈现c) className：修改HT

12、ML的css样式：class选择器名称d) style：修改HTML元素的内联css样式e) optionsindex：select指定列表4) 复制当前节点： node cloneNode（boolean t/f）：复制当前节点。当值为true，表示在复制当前节点的同时，复制该节点的全部及其后代当值为false，表示只复制当前节点5) 插入节点：InsertBefore（Node newNode，Node refNode）：在refNode节点之前插入newNode6) 替换节点：replaceChild（Node newNode，Node oldNode）；7) 为列表框和下拉菜单添加选项

13、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)

14、 createCaption（）：为表格创建标题c) insertCell（long index）：在指定索引处创建一个单元格9) 节点访问HTML元素：a) ParentNode：返回当前节点的父节点b) PreviousSibling：返回当前节点的前一个兄弟节点c) nextSibling：返回当前节点的下一个兄弟节点d) childElementByTagName（tagName）：返回当前节点的具有指定标签名的所有子节点e) firstChild：返回当前节点的第一个子节点f) lastChild：返回当前节点的最后一个子节点10) 访问表单控件<a) Action：表单提交的

15、地址b) Element：返回表单内全部表单控件组成的数组c) Length：个数d) Methode) 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：每一个选项的val

16、ue属性12) 访问表格子元素：a) Caption：标题对象b) Tfoot：c) Thead：d) Tbody：e) Table.Rowsindex：返回表格的第index+1行f) Cells:单元格组成的数组g) Rowindex：行索引13) 删除列表框和下拉菜单的选项a) Remove（long index）b) 直接将制定的选项赋值为null14) 删除表格的行或者单元格15) 事件冒泡：当浏览器执行某个动作的时候，页面上有多个元素相应该事件传递方向：从下向上 传递事件16) 重定向事件：不用按照dom数上溯，希望给在不同节点之间跳跃Target。fireEvent（String

17、 event，Event event）：将事件event事件重定向到target对象<head> <meta charset="UTF-8"> <title>重定向事件</title> </head> <body onclick="c('tb元素')"> <table onclick="c('tr元素')"> <tr onclick="c('td元素')"> <td

18、onclick="c('p元素')"> <p onclick="c('btn元素')"> <input type="button" value="点击我" onclick=""> </p> </td> </tr> </table> <hr> <input type="button" id="forward" value="

19、;被转发的事件" onclick="c('被转发的事件按钮')"> <div id="re"> </div> <script> function c(who) /打印写入放入内容 document.getElementById("re").innerHTML +=who+"被点击了" /取消事件冒泡 event.cancelBubble = true; /将事件重定向到id为forward的元素 document.getElementById(&q

20、uot;forward").fireEvent("onclick",event); </script> </body>5. Dom 句柄1) 特点：句柄之间互不影响，不会覆盖 可以减少多次修改2) AddEventListenter（事件，function）：添加事件句柄3) RemoveEventListenter（事件，function）：移除事件句柄；4) 注意：加红的function，后面不带括号四、 对象1. 定义：javascript中的所有事物都是对象：字符串、数值、数组、函数也可以自定 义对象。2. 访问对象的属性：obje

21、pertyname（对象名.属性名）3. 访问对象的方法：objectname.methodname()（对象名.方法()）4. 创建对象：1) 直接创建对象：person = new object（）； P = “miliy”; Person.age=44; Person.gender=”女”; Document.Write（”姓名：”+）;2) 使用对象构造器：function person（name，age，gender）T=name;This.age=age;This.gender=gender;Myfrie

22、nd = new persion(“andy”,12,”男”)；5. 数字：1) 只有一种数字类型，不定义不同类型的数字八进制：数字的前缀是0，默认是八进制十六进制：数字的前缀是0x，默认为十六进制2) 对象方法：toString：把数字转换为字符串； toLocalString：把数字转换为字符串，使用本地数字格式顺序 toFixed：把数字转换为字符串，结果的小数点后有指定位数 toOrecision：把数字格式化为指定长度； valueOf：返回一个Number对象的基本数字值6. 数组1) 定义：var 数组名 = new Array（）； Var 数组名 = new Array（n）

23、； 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（

24、）；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) index

25、Of（字符串，起始位置）：从字符串对象指定开始的位置，从前到后查找字符串3) lastIndexOf（字符串）：从后到前查找子字符串在字符串对象中的位置4) substring（开始位置，长度）：从开始位置开始截取指定长度的字符，返回截取的字符5) substring（开始位置，结束位置）；6) split（分隔符）：分割字符串到一个数组中去，把字符串变成数组7) replace（需要替代的字符，新的字符）；11. 日期对象常用函数：1) Setxxx：设置日期和事件2) Getxxx：获取日期和时间；3) Toxxx：将日期转换成指定格式4) Date（）：返回当前的日期和时间5) GetD

26、ate（）：从date对象中返回某个月中的某一天6) getDay（）：从date中返回一周中的某一天77) 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

27、a = new RegExp(“e”); 在字符串中检索的时候，寻找的是字符“e”3) 方法：a) test（）：检索字符串中的指定值，返回值是true或falseb) exec（）：检索字符串中的指定值，返回的是被找到的值，如果没有匹配到，返回null；c) compile（）：可以改变检索模式，也可以添加或者删除第二个参数五、 canvas：1. 语法：/获得canvas区域var canvas = document.getElementById("diagonal"); /getContext var context = canvas.getContext("

28、;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（）：描边<canvas id=&quo

29、t;mycanvas" width="200" height="200"style="border: 1px solid black"></canvas><script> var c = document.getElementById("mycanvas"); var ctx = c.getContext("2d"); ctx.fillStyle="pink" ctx.beginPath(); ctx.arc(70,18,15,0,Ma

30、th.PI*2,true); ctx.closePath(); ctx.fill();</script>4. 绘制带阴影的图形<canvas id="mycanvas" width="200" height="200"style="border: 1px solid black"></canvas><script> var c = document.getElementById("mycanvas"); var ctx = c.getContext

31、("2d"); /阴影x轴偏移 ctx.shadowOffsetX=15; ctx.shadowOffsetY=15; /模糊半径 ctx.shadowBlur = 10; ctx.shadowColor="#ddd" ctx.fillStyle = "#00f" ctx.fillRect(20,20,150,100); /模糊颜色 </script>5. 使用图像：1) DrawImage（image，dx，dy）：接受一个图片，并将其绘制到canvas中 Dx：图片左上角坐标，dy图片左上角y坐标2) DrawImag

32、e（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

33、（）；函数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：闭包会使函数中的变量都被保存在内存中，内存消耗大，所以不能滥

34、用，否则会导致网页的性能问题，内存泄漏解决方案：在退出函数的时候，将不使用的局部变量全部删除2) 问题2：闭包会在复函数外部，改变复函数内部的变量值，如果把复函数当做对象使用，把闭包当做公用方法（public），内部变量相当于私有属性（private value）-不嗯呢该随便改变复函数内部变量的值。七、 Json1. JavaScript Object Notation：对象表示法2. 格式：key：value3. Json常用内置类：array数组类/Date日期类/Function函数类/Math数学类/String字 符串类/Object对象类/Number数值类/Error错误类4.

35、 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（）:

36、检索指定的值，返回值是被找到的值，如果没有找到，返回null；4. 字符串正则：1) match（）：匹配2) search（）：字符串查找3) replace（/换掉的字符/，“新字符”）：字符串替换4) split（）：分割字符串 变成数组的时候经常会用到5. 数字选择器：/d/g 获取一个字符串的数字 /d+/g 允许表达式匹配一个或者更多的数字6. 单词选择器：/w/g 获取一个字符串中的单词7. Null字符查找：/0/g8. 空白选择器：/s/g 查找字符串的空白这里的空白包括：" " (空格符)r (回车符)n (换行符) t&#

37、160;(制表符) 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) /nx/：匹配包含连续x个的n字符串5) /nx,y/：匹配包含连续x个到连续y个的n字符串6) /nx,/: 匹配至少含有x连续的n的字符串7) /n$/:匹配以n结尾的字符串8) /n/:匹配以n

38、开头的字符串9) /字符1（?=字符2）/：匹配字符后面紧跟字符210) /字符1（?!字符2）/：匹配字符后面没有紧跟字符2九、 DHTML1. DHTML：动态HTML，JS：先获取页面的元素，修改属性+html DOM：+css+html2. 动态定位：1) pixelLeft：像素值2) pixelRight：3. 旋转：<script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); /弧度转角度的公式：degree

39、*Math.PI/180 ctx.rotate(20*Math.PI/180); /绘制的长方形(x,y,width,height) ctx.fillRect(50,20,100,50);</script>4. 缩放：<script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.strokeRect(5,5,25,15); /scale(x方向倍数，y方向倍数) ctx.scale(2,2)/绘制的图形

40、距离画布左上角2倍远的位置 ctx.strokeRect(5,5,25,15); ctx.scale(2,3)/绘制的图形距离画布左上角2倍远的位置</script>5. Transform（a,b,c,d,e,f）：这个变换只会影响tranform（）方法调用后的绘图，调用这个方法时，会在前一个变换矩阵基础上创建1) a：水平缩放绘图2) b：水平倾斜3) c：垂直倾斜4) d：垂直缩放5) e：水平移动6) f：垂直移动<canvas id="canvas" style="border: 1px solid pink"> &l

41、t;script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "yellow" ctx.fillRect(50,20,100,50); ctx.transform(1,0.5,-0.5,1,30,10); ctx.fillStyle = "pink" ctx.fillRect(50,20,100,50); ctx.transform(1,0.5,-0.5,

42、1,30,10); ctx.fillStyle = "blue" ctx.fillRect(50,20,100,50); </script>6. translate（）：重新映射画布上（0,0）的位置 translate（）之后调用fillRexc（）之类的方法会添加到x，y坐标值上<body><canvas id="canvas" style="border: 1px solid pink" width="500px" height="800px"> <

43、;script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillRect(50,20,100,50); ctx.translate(100,100); ctx.fillRect(50,20,100,50); ctx.translate(100,100); ctx.fillRect(50,20,100,50); </script></body>7. 渐变： <script> var

44、 canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); /填充效果 ctx.fillStyle = grd; ctx.fillRect(50,20,500,500); </script>十、 Js常用特效1. 跑马灯十一、 Window对象1. Alert（）：警告框2. Confirm（）：确认对话框3. P