javascript基础知识集锦.doc

1、目录Js 基础知识集锦（一） .1Javascript 文件上传时检测文件大小 27js 遍历 json 数组 28Js 基础知识集锦（一）主要知识点：js 数组，数字函数，字符串函数，表单验证， hashMap，堆栈，日期函数，call 函数 等。next：js 正则表达式，闭包，apply ，callee，事件相关函数，Cookie 等 1.javascript 的数组 APIJs 代码 1. /定义数组 2. var pageIds = new Array(); 3. pageIds.push(A); 4. 5. 数组长度 6. pageIds.length; 7. 8. /shift：

2、删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 9. var a = 1,2,3,4,5; 10. var b = a.shift(); /a：2,3,4,5 b：1 11. 12. /unshift：将参数添加到原数组开头，并返回数组的长度 13. var a = 1,2,3,4,5; 14. var b = a.unshift(-2,-1); /a：-2,-1,1,2,3,4,5 b：7 15. /注：在 IE6.0 下测试返回值总为 undefined，FF2.0 下测试返回值为 7，所以这个方法的返回值不可靠，需要用返回值时可用 splice 代替本方法来使

3、用。 16. 17. /pop：删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined 18. var a = 1,2,3,4,5; 19. var b = a.pop(); /a：1,2,3,4 b：5 20. 21. /push：将参数添加到原数组末尾，并返回数组的长度 22. var a = 1,2,3,4,5; 23. var b = a.push(6,7); /a：1,2,3,4,5,6,7 b：7 24. 25. /concat：返回一个新数组，是将参数添加到原数组中构成的 26. var a = 1,2,3,4,5; 27. var b = a.concat

4、(6,7); /a： 1,2,3,4,5 b：1,2,3,4,5,6,7 28. 29. /splice(start,deleteCount,val1,val2,)：从 start 位置开始删除 deleteCount 项，并从该位置起插入 val1,val2, 30. var a = 1,2,3,4,5; 31. var b = a.splice(2,2,7,8,9); /a：1,2,7,8,9,5 b：3,4 32. var b = a.splice(0,1); /同 shift 33. a.splice(0,0,-2,-1); var b = a.length; /同 unshift 3

5、4. var b = a.splice(a.length-1,1); /同 pop 35. a.splice(a.length,0,6,7); var b = a.length; /同 push 36. 37. /reverse：将数组反序 38. var a = 1,2,3,4,5; 39. var b = a.reverse(); /a：5,4,3,2,1 b：5,4,3,2,1 40. 41. /sort(orderfunction)：按指定的参数对数组进行排序 42. var a = 1,2,3,4,5; 43. var b = a.sort(); /a：1,2,3,4,5 b：1,2

6、,3,4,5 44. 45. /slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组 46. var a = 1,2,3,4,5; 47. var b = a.slice(2,5); /a：1,2,3,4,5 b：3,4,5 48. 49. /join(separator)：将数组的元素组起一个字符串，以 separator 为分隔符，省略的话则用默认用逗号为分隔符 50. var a = 1,2,3,4,5; 51. var b = a.join(“|“); /a：1,2,3,4,5 b：“1|2|3|4|5“ 2.dom 最常用 APIJs 代码 1.

7、 document 方法： 2. getElementById(id) Node 返回指定结点的引用 3. getElementsByTagName(name) NodeList 返回文档中所有匹配的元素的集合 4. createElement(name) Node Node 5. createTextNode(text) Node 创建一个纯文本结点 6. ownerDocument Document 指向这个节点所属的文档 7. documentElement Node 返回 html 节点 8. document.body Node 返回 body 节点 9. 10. element 方

8、法： 11. getAttribute(attributeName) String 返回指定属性的值 12. setAttribute(attributeName,value) String 给属性赋值 13. removeAttribute(attributeName) String 移除指定属性和它的值 14. getElementsByTagName(name) NodeList 返回结点内所有匹配的元素的集合 15. 16. node 方法： 17. appendChild(child) Node 给指定结点添加一个新的子结点 18. removeChild(child) Node 移

9、除指定结点的子结点 19. replaceChild(newChild,oldChild) Node 替换指定结点的子结点 20. insertBefore(newChild,refChild) Node 在同一层级的结点前面插入新结点 21. hasChildNodes() Boolean 如果结点有子结点则返回 true 22. 23. node 属性： 24. nodeName String 以字符串的格式存放结点的名称 25. nodeType String 以整型数据格式存放结点的类型 26. nodeValue String 以可用的格式存放结点的值 27. parentNode

10、Node 指向结点的父结点的引用 28. childNodes NodeList 指向子结点的引用的集合 29. firstChild Node 指向子结点结合中的第一个子结点的引用 30. lastChild Node 指向子结点结合中的最后一个子结点的引用 31. previousSibling Node 指向前一个兄弟节点；如果这个节点就是兄弟节点，那么该值为 null 32. nextSibling Node 指向后一个兄弟节点；如果这个节点就是兄弟节点，那么该值为null 3.网上搜藏的一个 map 对象:Js 代码 1. function HashMap() 2. 3. /* Ma

11、p 大小 */ 4. var size = 0; 5. /* 对象 */ 6. var entry = new Object(); 7. 8. /* 存 */ 9. this.put = function (key , value) 10. 11. if(!this.containsKey(key) 12. 13. size + ; 14. 15. entrykey = value; 16. 17. 18. /* 取 */ 19. this.get = function (key) 20. 21. return this.containsKey(key) ? entrykey : null;

12、22. 23. 24. /* 删除 */ 25. this.remove = function ( key ) 26. 27. if( this.containsKey(key) 30. 31. 32. 33. /* 是否包含 Key */ 34. this.containsKey = function ( key ) 35. 36. return (key in entry); 37. 38. 39. /* 是否包含 Value */ 40. this.containsValue = function ( value ) 41. 42. for(var prop in entry) 43.

13、44. if(entryprop = value) 45. 46. return true; 47. 48. 49. return false; 50. 51. 52. /* 所有 Value */ 53. this.values = function () 54. 55. var values = new Array(); 56. for(var prop in entry) 57. 58. values.push(entryprop); 59. 60. return values; 61. 62. 63. /* 所有 Key */ 64. this.keys = function () 6

14、5. 66. var keys = new Array(); 67. for(var prop in entry) 68. 69. keys.push(prop); 70. 71. return keys; 72. 73. 74. /* Map Size */ 75. this.size = function () 76. 77. return size; 78. 79. 80. /* 清空 */ 81. this.clear = function () 82. 83. size = 0; 84. entry = new Object(); 85. 86. 87. 88. var map =

15、new HashMap(); 89. 90. /* 91. map.put(“A“,“1“); 92. map.put(“B“,“2“); 93. map.put(“A“,“5“); 94. map.put(“C“,“3“); 95. map.put(“A“,“4“); 96. */ 97. /* 98. alert(map.containsKey(“XX“); 99. alert(map.size(); 100. alert(map.get(“A“); 101. alert(map.get(“XX“); 102. map.remove(“A“); 103. alert(map.size();

16、 104. alert(map.get(“A“); 105. */ 106. 107. /* 同时也可以把对象作为 Key */ 108. /* 109. var arrayKey = new Array(“1“,“2“,“3“,“4“); 110. var arrayValue = new Array(“A“,“B“,“C“,“D“); 111. map.put(arrayKey,arrayValue); 112. var value = map.get(arrayKey); 113. for(var i = 0 ; i 4.常用的数字函数:Js 代码 1. 数字型(Number) 2. 1

17、.声明 3. var i = 1; 4. var i = new Number(1); 5. 6. 2.字符串与数字间的转换 7. var i = 1; 8. var str = i.toString(); /结果: “1“ 9. var str = new String(i); /结果: “1“ 10. i = parseInt(str); /结果: 1 11. i = parseFloat(str); /结果: 1.0 12. 13. /注意: parseInt,parseFloat 会把一个类似于“32G“的字符串,强制转换成 32 14. 15. 3.判断是否为有效的数字 16. va

18、r i = 123; var str = “string“; 17. if( typeof i = “number“ ) /true 18. 19. /某些方法(如:parseInt,parseFloat)会返回一个特殊的值 NaN(Not a Number) 20. /请注意第 2 点中的注意 ,此方法不完全适合判断一个字符串是否是数字型! 21. i = parseInt(str); 22. if( isNaN(i) ) 23. 24. 4.数字型比较 25. /此知识与 字符串比较 相同 26. 27. 5.小数转整数 28. var f = 1.5; 29. var i = Math.

19、round(f); /结果:2 (四舍五入) 30. var i = Math.ceil(f); /结果:2 (返回大于 f 的最小整数) 31. var i = Math.floor(f); /结果:1 (返回小于 f 的最大整数) 32. 33. 6.格式化显示数字 34. var i = 3.14159; 35. 36. /格式化为两位小数的浮点数 37. var str = i.toFixed(2); /结果: “3.14“ 38. 39. /格式化为五位数字的浮点数( 从左到右五位数字, 不够补零) 40. var str = i.toPrecision(5); /结果: “3.14

20、15“ 41. 42. 7.X 进制数字的转换 43. /不是很懂 -.- 44. var i = parseInt(“0x1f“,16); 45. var i = parseInt(i,10); 46. var i = parseInt(“11010011“,2); 47. 48. 8.随机数 49. /返回 0-1 之间的任意小数 50. var rnd = Math.random(); 51. /返回 0-n 之间的任意整数(不包括 n) 52. var rnd = Math.floor(Math.random() * n) 5.网上搜藏的 js 堆栈:Js 代码 1. function

21、 stack() 2. if(this.top=undefined) 3. /初始化堆栈的顶部指针和数据存放域 4. this.top=0; 5. this.unit=new Array(); 6. 7. this.push=function(pushvalue) 8. /定义压入堆栈的方法 9. this.unitthis.top=pushvalue; 10. this.top+=1; 11. 12. this.readAllElements=function() 13. /定义读取所有数据的方法 14. if(this.top=0) 15. alert(“当前栈空，无法读取数据“); 16

22、. return(“); 17. 18. var count=0; 19. var outStr=“; 20. 21. for(count=0;count -1 ) /结果: true 43. 44. 7.查找替换字符串 45. var myString = “I is your father.“; 46. var result = myString.replace(“is“,“am“); /结果: “I am your father.“ 47. 48. 8.特殊字符: 49. b : 后退符 t : 水平制表符 50. n : 换行符 v : 垂直制表符 51. f : 分页符 r : 回车

23、符 52. “ : 双引号 : 单引号 53. : 反斜杆 54. 55. 9.将字符转换成 Unicode 编码 56. var myString = “hello“; 57. var code = myString.charCodeAt(3); /返回“l“的 Unicode 编码(整型) 58. var char = String.fromCharCode(66); /返回 Unicode 为 66 的字符 59. 60. 10.将字符串转换成 URL 编码 61. var myString = “hello all“; 62. var code = encodeURI(myString

24、); /结果: “hello%20all“ 63. var str = decodeURI(code); /结果: “hello all“ 64. /相应的还有: encodeURIComponent() decodeURIComponent() 8.数学函数:Js 代码 1. Math 对象 2. 1. Math.abs(num) : 返回 num 的绝对值 3. 2. Math.acos(num) : 返回 num 的反余弦值 4. 3. Math.asin(num) : 返回 num 的反正弦值 5. 4. Math.atan(num) : 返回 num 的反正切值 6. 5. Math

25、.atan2(y,x) : 返回 y 除以 x 的商的反正切值 7. 6. Math.ceil(num) : 返回大于 num 的最小整数 8. 7. Math.cos(num) : 返回 num 的余弦值 9. 8. Math.exp(x) : 返回以自然数为底 ,x 次幂的数 10. 9. Math.floor(num) : 返回小于 num 的最大整数 11. 10.Math.log(num) : 返回 num 的自然对数 12. 11.Math.max(num1,num2) : 返回 num1 和 num2 中较大的一个 13. 12.Math.min(num1,num2) : 返回

26、num1 和 num2 中较小的一个 14. 13.Math.pow(x,y) : 返回 x 的 y 次方的值 15. 14.Math.random() : 返回 0 到 1 之间的一个随机数 16. 15.Math.round(num) : 返回 num 四舍五入后的值 17. 16.Math.sin(num) : 返回 num 的正弦值 18. 17.Math.sqrt(num) : 返回 num 的平方根 19. 18.Math.tan(num) : 返回 num 的正切值 20. 19.Math.E : 自然数(2.718281828459045) 21. 20.Math.LN2 :

27、2 的自然对数(0.6931471805599453) 22. 21.Math.LN10 : 10 的自然对数 (2.302585092994046) 23. 22.Math.LOG2E : log 2 为底的自然数(1.4426950408889634) 24. 23.Math.LOG10E : log 10 为底的自然数(0.4342944819032518) 25. 24.Math.PI : (3.141592653589793) 26. 25.Math.SQRT1_2 : 1/2 的平方根(0.7071067811865476) 27. 26.Math.SQRT2 : 2 的平方根 (

28、1.4142135623730951) 9.浏览器特征函数:Js 代码 1. 1.浏览器名称 2. /IE : “Microsoft Internet Explorer“ 3. /NS : “Netscape“ 4. var browserName = navigator.appName; 5. 6. 2.浏览器版本 7. bar browserVersion = navigator.appVersion; 8. 9. 3.客户端操作系统 10. var isWin = ( navigator.userAgent.indexOf(“Win“) != -1 ); 11. var isMac =

29、( navigator.userAgent.indexOf(“Mac“) != -1 ); 12. var isUnix = ( navigator.userAgent.indexOf(“X11“) != -1 ); 13. 14. 4.判断是否支持某对象, 方法, 属性 15. /当一个对象 ,方法,属性未定义时会返回 undefined 或 null 等,这些特殊值都是false 16. if( document.images ) 17. if( document.getElementById ) 18. 19. 5.检查浏览器当前语言 20. if( navigator.userLang

30、uage ) var l = navigator.userLanguage.toUpperCase(); 21. 22. 6.检查浏览器是否支持 Cookies 23. if( navigator.cookieEnabled ) 10.JavaScript 面向对象的方法实现继承:call 方法Js 代码 1. / 动物类 animal 2. function animal(bSex) 3. this.sex = bSex 4. this.getSex = function() 5. return this.sex 6. 7. 8. / 类静态变量 (如果你不修改它的话 ) 9. animal

31、.SEX_G = new Object(); / 雌性 10. animal.SEX_B = new Object(); / 雄性 11. / 动物子类 鸟 12. function bird(bSex) 13. animal.call(this, bSex); 14. this.fly = function(iSpeed) 15. alert(“飞行时速高达 “ + iSpeed); 16. 17. 18. / 动物子类 鱼 19. function fish(bSex) 20. animal.call(this, bSex); 21. this.swim = function(iSpeed

32、) 22. alert(“游动时速高达 “ + iSpeed) 23. 24. 25. / 鱼 鸟 杂交品种。 。 。 26. function crossBF(bSex) 27. bird.call(this, bSex); 28. fish.call(this, bSex); 29. 30. var oPet = new crossBF(animal.SEX_G); / 雌性 鱼鸟 31. alert(oPet.getSex() = animal.SEX_G ? “雌性“ : “雄性“); 32. oPet.fly(124) 33. oPet.swim(254) 11.用面向对象的编程方式

33、写 JavaScript:Js 代码 1. MyTool = new function() 2. /* 3. * 返回非空字符串, 如果有默认值就返回默认字符串. 4. */ 5. this.notNull = function(str,defaultStr) 6. if(typeof(str)=“undefined“|str=null|str=) 7. if(defaultStr) 8. return defaultStr; 9. else 10. return ; 11. 12. else 13. return str; 14. 15. 16. 17. 18. rootId = MyToo

34、l.notNull(rootId,001000); 12.常用的 js 方法 ,包括表单校验的一些方法 ,下拉菜单常用的方法等等:Js 代码 1. /* 2. * 对 JSON 对象转换为字符串 . 3. * param json 对象 json 4. * return json 字符串 5. */ 6. function jsonObj2Str(json) 7. var str = “; 8. for (prop in json) 9. str += prop + “:“ + jsonprop + “,“; 10. 11. str = str.substr(0, str.length - 1

35、); 12. str += “; 13. return str; 14. 15. 16. /* 17. * 将 json 字符串转换为 json 对象. 18. * param json 字符串 jsonstr 19. * return json 对象 20. */ 21. function jsonStr2Obj(jsonstr) 22. return eval(“(“+jsonstr+“)“); 23. 24. 25. /* 26. * 得到一个元素的 left 坐标值. 27. * param dom 对象 obj 28. * return 位置值 29. */ 30. function

36、 getLeft(obj) 31. var offset=e.offsetLeft; 32. if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); 33. return offset; 34. 35. 36. /* 37. * 得到一个元素的绝对位置的 top 坐标值. 38. * param dom 对象 obj 39. * return 位置值 40. */ 41. function getTop(obj) 42. var offset=e.offsetTop; 43. if(e.offsetParent!=null) offs

37、et+=getTop(e.offsetParent); 44. return offset; 45. 46. 47. /* 48. * 删除一个字符串的左右空格. 49. * param 原始字符串 str 50. * return 删除空格之后的字符串 51. */ 52. function trim(str) 53. 54. return str.replace(/(s*)|(s*$)/g,“); 55. 56. 57. /* 58. * 根据 id 取出一个元素. 59. * param 元素 id 值 str 60. * return dom 对象 61. */ 62. functio

38、n $(str) 63. return document.getElementById(str); 64. 65. 66. /* 67. * 按 name 获取一个对象. 68. * param 元素 name 值 str 69. * return 根据 name 返回的第一个对象 70. */ 71. function $byName(str) 72. var arr = document.getElementsByName(str); 73. if (arr) 74. return arr0; 75. else 76. return null; 77. 78. 79. /*以下方法和表单验

39、证相关*/ 80. /* 81. * 返回非空字符串,如果有默认值就返回默认字符串 . 82. * param 要进行转换的原字符串 str 83. * param 默认值 defaultStr 84. * return 返回结果 85. */ 86. function notNull(str, defaultStr) 87. if (typeof(str) = “undefined“ | str = null | str = ) 88. if (defaultStr) 89. return defaultStr; 90. else 91. return ; 92. else 93. retu

40、rn str; 94. 95. 96. 97. /* 98. * 比较两个日期大小. 99. * param 较小日期的文本框 id smallDate 100. * param 较大日期的文本框 id bigDate 101. * param 出错的提示信息 msg 102. */ 103. function compareTwoDate(smallDate, bigDate, msg) 104. var v1 = $(smallDate).value; 105. var v2 = $(bigDate).value; 106. if (v1 = v2) 107. alert(msg); 10

41、8. v2.focus(); 109. return false; 110. 111. return true; 112. 113. 114. /* 115. * 比较两个金额大小的方法. 116. * param 较小的金额 smallNum 117. * param 较大的金额 bigNum 118. * param 出错提示信息 msg 119. * return Boolean 120. */ 121. function compareTwoNum(smallNum, bigNum, msg) 122. var v1 = $(smallNum).value; 123. var v2 =

42、 $(bigNum).value; 124. if (parseFloat(v1) = parseFloat(v2) 125. alert(msg); 126. v2.focus(); 127. return false; 128. 129. return true; 130. 131. 132. /* 133. * 检查文本框的长度是否超出指定长度. 134. * param 文本 id textId 135. * param 文本框的最大长度 len 136. * param 文本框描述内容 msg 137. * return 有错就返回 false,否则返回 true 138. */ 139. function checkLength(textId, len, msg) 140. obj = $(textId); 141. str = obj.value; 142. str = str.replace(/x00-xff/g, “*“); 143. realLen = str.length; 144. if (realLen len) 145. alert(“ + msg + “ + “长