JavaScript笔记知识点整理图文.doc

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) 不声明变量，直接使用： x=105. 数据类型：

2、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 类型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) Nu

4、mber 类型：数字型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) Obj

5、ect 类型：一组数据和功能的集合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 前缀修饰的变量，要通过对象来访问类属性：在函数中以函数名前缀修饰的变量， 类

6、属性是整个类的， 可以通过类（函数）来访问。局部变量：只能在函数里面访问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.

7、write （“你好” +name）+）2) 递归函数：3) Return 返回值：4) Arguments 对象：a) 是所在函数的一个内置类数组对象，可以用数组的 i 和.length 。b) Sdc) 重载：就是根据参数选择相同函数名而参数不同的函数11. 调用函数的三种方式1) 直接调用函数2) 以 call（）方法调用函数：需要动态传入一个函数引用（动态的调用函数）函数的引用 .call（调用者，参数 1，参数 2）3) 以 apply（）方法调用函数4) Apply（）和 call（）的区别：Call（）调用的时候，必须在括号内详细的列出每个参数Apply（）动态调用的时候，可以在

8、括号中用 arguments 来代表所有参数12. 对象的创建1) 使用 new 关键字调用构造器创建对象2) 使用 object 直接创建对象Js的对象都是 object 类的子类3) 使用 json 创建对象二、语句1. Foreach 循环： for（var 变量名 in 数组名） 2. For 循环： for（var 变量名；范围；变量 +/-） 13. If 语句14. While 语句15. Do while 语句16. Switch 语句17. Break：跳出整个循环（当前所在的循环）Continue：结束本次循环，进行下一次循环跳出外层循环：设置标签，如图三、DOM（docu

9、ment object model ）文档对象模型3. DOM HTML1) 改变 HTML 内容：Document.getElementById(id).innerHTML = new html;id.innerHTML= 新内容或者：2) 改变 HTML 属性Document.getEelementId(id).attribute = new value; id.属性=新的属性值18. DOM CSSDocument.getEelementId(id).style.property=new style; id.style.属性 =新的属性值19. DOM 事件1) Onclick 事件：在

10、 html 元素上点击执行 function ；2) Ondblclick 时间：双击触发3) Onload 事件/onunload 事件共同点：在用户进入或者离开页面的时候被触发；用于处理 cookie不同点： onload 检测发访问者的浏览器类型和版本，加载网页的正确版本4) Onchange 事件：对输入的字段进行验证5) Onmouseover/onmouseout 事件：鼠标放在元素上面 /移动的时候触发函数类似伪元素选择器： hover，不同在于这个触发函数6) Onmousedown/onmouseup 事件：点击按钮的时候触发事件 1，松开鼠标后，触发事件 2，最后结束的时候

11、，类似事件 onclick。7) Onfocus 事件：获得焦点8) Onblur 时间：失去焦点9) Onkeydown/onkeypress/onkeyup ：按下键盘某个键的时候触发 / 单机键盘某个键/ 松开键盘某个键10) Onreset：重置表单的时候触发Onsubmit ：提交11) Onsize：改变窗口大小20. DOM 节点1) 添加节点：第一步 :创建一个新的元素类型： createElement （）；第二步：在创建一个元素节点第三步：在元素的后面追加这个节点在已有的元素里面追加这个新的元素第四步：定义原有对象的元素名称第五步：向已有的元素后面追加新的元素2) 删除节点

12、：第一步：获取父元素 id第二步：获取将要删除元素的 id第三步：从父元素中删除子元素3) 修改 html 元素a) innerHTML：div/span/td 内容的呈现b) value：textarea 内容的呈现c) className：修改 HTML 的 css样式： class选择器名称d) style：修改 HTML 元素的内联 css样式e) optionsindex ：select 指定列表4) 复制当前节点： node cloneNode （boolean t/f ）：复制当前节点。当值为 true ，表示在复制当前节点的同时，复制该节点的全部及其后代当值为 false，表示

13、只复制当前节点5) 插入节点：InsertBefore （Node newNode ，Node refNode ）：在 refNode 节点之前插入newNode6) 替换节点： replaceChild（Node newNode ，Node oldNode ）；7) 为列表框和下拉菜单添加选项a) HTMLSelectElement 的 add 方法进行添加选项Add（option ，before）：在 before 选项之前添加 option 选项，before 指定为奴的时候可以将 option 选项添加到最后b) 直接为 select 的执行选项赋值appendChild（option

14、 ）；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：返回当前节点的前一个兄弟节点

15、c) nextSibling：返回当前节点的下一个兄弟节点d) childElementByTagName（tagName）：返回当前节点的具有指定标签名的所有子节点e) firstChild ：返回当前节点的第一个子节点f) lastChild：返回当前节点的最后一个子节点10) 访问表单控件 a) Action：表单提交的地址b) Element：返回表单内全部表单控件组成的数组c) Length：个数d) Methode) Target：_self,_blank,_parent,_top : 指定提交表单式的结果窗口f) Reset（）：重置表单g) Submit（）：提交表单11) 访

16、问列表框和下拉菜单的选项：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.Rowsindex：返回表格的第 index+1 行f) Cells:单元格组成的数组g) Rowindex：行索引13) 删除列表

17、框和下拉菜单的选项a) Remove（long index ）b) 直接将制定的选项赋值为 null14) 删除表格的行或者单元格15) 事件冒泡：当浏览器执行某个动作的时候，页面上有多个元素相应该事件传递方向：从下向上传递事件16) 重定向事件：不用按照 dom 数上溯，希望给在不同节点之间跳跃Target。fireEvent（String event，Event event）：将事件 event 事件重定向到 target对象重定向事件 function c(who)/ 打印写入放入内容document. getElementById ( re ). innerHTML +=who+ 被点

18、击了;/ 取消事件冒泡event . cancelBubble = true ;/ 将事件重定向到 id为forward 的元素document. getElementById ( forward ). fireEvent ( onclick , event );5. Dom 句柄1) 特点：句柄之间互不影响，不会覆盖可以减少多次修改2) AddEventListenter （事件， function ）：添加事件句柄3) RemoveEventListenter（事件， function ）：移除事件句柄；4) 注意：加红的 function ，后面不带括号四、对象4. 定义： javasc

19、ript 中的所有事物都是对象：字符串、数值、数组、函数 也可以自定义对象。5. 访问对象的属性： objectname.propertyname （对象名 .属性名）6. 访问对象的方法： objectname.methodname() （对象名 .方法 ()）21. 创建对象：1) 直接创建对象： person = new object （）；Person.name = “miliy ”;Person.age=44;Person.gender=”女 ”;Document.Write （”姓名： ”+person.name ）;2) 使用对象构造器： function person （nam

20、e，age，gender）This.name=name;This.age=age;This.gender=gender;Myfriend = new persion( “andy”,12,”男 ”)；22. 数字：1) 只有一种数字类型，不定义不同类型的数字八进制：数字的前缀是 0，默认是八进制十六进制：数字的前缀是 0x，默认为十六进制2) 对象方法： toString ：把数字转换为字符串；toLocalString：把数字转换为字符串，使用本地数字格式顺序toFixed：把数字转换为字符串，结果的小数点后有指定位数toOrecision ：把数字格式化为指定长度；valueOf：返回一个

21、 Number 对象的基本数字值23. 数组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) 删除第一个元素，返回第一个

22、元素： shift（）8) 从数组中选择元素重新组建数组： slice（开始位置，结束位置） ；9) 删除或者替换元素： splice（位置，多少，元素） ；10) 排序数组： sort（）；11) 倒序数组： reverse（）；12) 返回一个包含数组中所有元素的字符串，每个元素用逗号分隔： toString （）；24. 字符串25. 逻辑26. Math （算数）对象：1) Math.round （）:四舍五入2) Math.random （）：返回 0-1 之间的随机数3) Math.floor （）：舍去小数点后的，向下取，不进位4) Math.abs （x）：返回 x 的绝对值5

23、) Math.acos （x）：返回 x 的余弦值6) Math.sqrt （x）：返回 x 的平方根7) Math.pow （x）:返回 x 的平方27. 查找字符：1) charAt（位置）：字符串在指定位置处的字符2) indexOf（字符串， 起始位置 ）：从字符串对象指定开始的位置，从前到后查找字符串3) lastIndexOf（字符串）：从后到前查找子字符串在字符串对象中的位置4) substring（开始位置， 长度）：从开始位置开始截取指定长度的字符，返回截取的字符5) substring（开始位置，结束位置） ；6) split（分隔符）：分割字符串到一个数组中去，把字符串变

24、成数组7) replace（需要替代的字符，新的字符） ；28. 日期对象常用函数：1) Setxxx：设置日期和事件2) Getxxx：获取日期和时间；3) Toxxx：将日期转换成指定格式4) Date（）：返回当前的日期和时间5) GetDate（）：从 date 对象中返回某个月中的某一天6) getDay（）：从 date 中返回一周中的某一天 77) getTime（）：获取从 1970.1.1 到现在的毫秒数8) toTimeString ：把 date 对象的时间转换为字符串29. 访问时间对象：1) ClientX：返回发生鼠标事件在页面中的 x 坐标2) ClientY：返

25、回发生鼠标事件在页面中的 Y 坐标3) OffsetX：返回发生鼠标事件位置相对于事件源的 x坐标4) OffsetY：返回发生鼠标事件位置相对于事件源的 Y 坐标30. （RegExp）正则表达式：1) 作用：用来检索某个文本，使用一种模式来描述要减速的内容2) 定义：var a = new RegExp(“e”); 在字符串中检索的时候， 寻找的是字符 “e”3) 方法：a) test（）：检索字符串中的指定值，返回值是 true 或 falseb) exec（）：检索字符串中的指定值，返回的是被找到的值，如果没有匹配到，返回 null；c) compile（）：可以改变检索模式，也可以添

26、加或者删除第二个参数五、canvas：1. 语法：/ 获得canvas 区域var canvas = document. getElementById ( diagonal );/getContextvar context = canvas . getContext ( 2d );/ 开始绘制context . beginPath ();/ 起点位置 MoveTo（x,y)/ 终点位置 lineTo(x,y)context . moveTo( 70, 140);context . lineTo ( 140, 70);/ 把这个线绘制到 canvas 上context . stroke ();2

27、. 绘制矩形：fillRect(x,y,width,height): 矩形：（左上角 x 坐标，左上角 y 坐标，矩形宽度，矩形高度）3. 绘制圆：1) arc（原点，原点，半径，开始的弧度，定义画圆的方向）2) fill （）：填充3) stroke（）：描边var c = document. getElementById ( mycanvas );var ctx = c. getContext ( 2d );ctx . fillStyle =pink ;ctx . beginPath ();ctx . arc ( 70, 18, 15, 0, Math . PI *2, true );ct

28、x . closePath ();ctx . fill ();31. 绘制带阴影的图形var c = document . getElementById ( mycanvas );var ctx = c. getContext ( 2d );/ 阴影x 轴偏移ctx . shadowOffsetX =15;ctx . shadowOffsetY =15;/ 模糊半径ctx . shadowBlur = 10;ctx . shadowColor =#ddd ;ctx . fillStyle = #00f ;ctx . fillRect ( 20, 20, 150, 100);/ 模糊颜色32.

29、使用图像：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的位置范围中六、闭包7. 如何从外部读取局部变量（闭包） ：在一个函数内部，再定义一个函数

30、：第一步：定义一个普通函数 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 外部可以访问局部变量33. 闭包 ：当一个内部函数被其他函数之外的变量引用的时候，就形成了闭包。34. 闭包的特性：1) 函数嵌套函数2) 函

31、数内部可以引用外部的参数和变量3) 参数和变量不会被垃圾回收机制回收35. 闭包的用途：1) 可以直接读取函数内部定义的变量2) 让这些变量的值始终存在内存中36. 注意：1) 问题 1：闭包会使函数中的变量都被保存在内存中，内存消耗大，所以不能滥用，否则会导致网页的性能问题，内存泄漏解决方案：在退出函数的时候，将不使用的局部变量全部删除2) 问题 2：闭包会在复函数外部，改变复函数内部的变量值，如果把复函数当做对象使用，把闭包当做公用方法（ public），内部变量相当于私有属性（ privatevalue）-不嗯呢该随便改变复函数内部变量的值。七、Json8. JavaScript Obj

32、ect Notation ：对象表示法9. 格式： key：value10. Json常用内置类： array 数组类 /Date 日期类 /Function 函数类 /Math 数学类 /String 字符串类 /Object 对象类 /Number 数值类 /Error 错误类11. Json内置对象：12. 它使用 JavaScript 对象的格式来存储数据。 JSON 是灵活的，因为它允许 数据结构 是 字符串，数字，布尔值，字符串，和 对象 的任意组合。对象与对象之间要用 “，”隔开13. 访问对象属性：八、正则表达式（ RegExp）1. 声明表达式： var a = new Re

33、gExp（“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（）：分割字符串变成数组的时候经常会用到37. 数字选择器： /d/g 获取一个字符串的数字/d+/g 允许表达

34、式匹配一个或者更多的数字38. 单词选择器： /w/g 获取一个字符串中的单词39. Null 字符查找： /0/g40. 空白选择器： /s/g 查找字符串的空白这里的空白包括： (空格符 )r ( 回车符 )n (换行符 )t ( 制表符 )f ( 换页符 )41. 正则表达式的字符大写表示反义： 例如： S 表示非空白字符42. 方括号： 1) /abc/g: 对括号内的内容进行查找如： /1-9/g: 对 1-9 内的数值进行查找2) /abc/h ：对不在括号内的字符进行查找43. 量词：1) /n+/ ：匹配至少包含一个 n 字符串2) /n*/ ：匹配包含 0 个或者多个的 n

35、字符串3) /n?/: 匹配包含 0 个或者一个 n 字符串4) /nx/ ：匹配包含连续 x 个的 n 字符串5) /nx,y/ ：匹配包含连续 x 个到连续 y 个的 n 字符串6) /nx,/: 匹配至少含有 x 连续的 n 的字符串7) /n$/: 匹配以 n 结尾的字符串8) /n/: 匹配以 n 开头的字符串9) / 字符 1（?=字符 2）/ ：匹配字符后面紧跟字符 210) / 字符 1（?!字符 2）/ ：匹配字符后面没有紧跟字符 2九、DHTML14. DHTML：动态 HTML，JS：先获取页面的元素，修改属性 +htmlDOM：+css+html44. 动态定位：1)

36、pixelLeft：像素值2) pixelRight：45. 旋转：var canvas = document . getElementById ( canvas );var ctx = canvas. getContext ( 2d );/ 弧度转角度的公式： degree*Math.PI/180ctx . rotate ( 20* Math. PI / 180);/ 绘制的长方形(x,y,width,height)ctx . fillRect ( 50, 20, 100, 50);46. 缩放：var canvas = document . getElementById ( canvas

37、);var ctx = canvas. getContext ( 2d );ctx . strokeRect ( 5, 5, 25, 15);/scale(x 方向倍数，y 方向倍数)ctx . scale ( 2, 2) / 绘制的图形距离画布左上角 2 倍远的位置ctx . strokeRect ( 5, 5, 25, 15);ctx . scale ( 2, 3) / 绘制的图形距离画布左上角 2 倍远的位置47. Transform（a,b,c,d,e,f）：这个变换只会影响 tranform （）方法调用后的绘图，调用这个方法时，会在前一个变换矩阵基础上创建1) a：水平缩放绘图2)

38、 b：水平倾斜3) c：垂直倾斜4) d：垂直缩放5) e：水平移动6) f：垂直移动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 . tra

39、nsform ( 1, 0.5 ,- 0.5 , 1, 30, 10);ctx . fillStyle = blue ;ctx . fillRect ( 50, 20, 100, 50);48. translate（）：重新映射画布上（ 0,0）的位置translate（）之后调用 fillRexc（）之类的方法会添加到 x，y 坐标值上var canvas = document. getElementById ( canvas );var ctx = canvas. getContext ( 2d );ctx . fillRect ( 50, 20, 100, 50);ctx . trans

40、late ( 100, 100);ctx . fillRect ( 50, 20, 100, 50);ctx . translate ( 100, 100);ctx . fillRect ( 50, 20, 100, 50);49. 渐变：var canvas = document . getElementById ( canvas );var ctx = canvas. getContext ( 2d );var grd = ctx . createRadialGradient ( 75, 50, 5, 90, 60, 100 );grd. addColorStop ( 0, red );g

41、rd. addColorStop ( 1, white );/ 填充效果ctx . fillStyle = grd ;ctx . fillRect ( 50, 20, 500, 500);十、Js常用特效15. 跑马灯十一、 Window 对象1. Alert（）：警告框2. Confirm（）：确认对话框3. Prompt（）：提示输入框4. Close（）：关闭窗口5. Focus（）：聚焦； blur（）：失去焦点6. moveBy（）：moveTo（）：7. scollBy（）：滚动当前窗口中的 html 文档8. setInterval （），clearInterval （）：1)

42、setInterval （code，delay）:设置每个 delay 毫秒重复执行一次9. setTimeOut（），clearTimeOut （）:1) setTimeOut （code，delay）：在 delay 毫秒之后执行一次要放在当前函数内，才能一直执行。否则只能执行一次/定义一个定时器的变量var timer ;/ 保存页面运行的起始时间var cur = new Date(). getTime ();/ 方法function c()/ 获取 span的内容document. getElementById ( t ). innerHTML= new Date(). toLocaleString ();/ 如果当前时间比起始时间大于 6