《javascript基础知识大集锦(1) - JavaScript - web - Ja.pdf》由会员分享，可在线阅读，更多相关《javascript基础知识大集锦(1) - JavaScript - web - Ja.pdf（39页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、 猎头职位:安徽:安徽:合肥,杭州：高薪诚聘前端开发工程师您还未登录!我的应用 登录 注册论坛首页 Web前端技术版 JavaScript javascript基础知识大集锦(1)javascript基础知识大集锦(1)全部 JavaScript EXT AJAX UI CSS prototype dojo YUI DWR GWT JQuery JavaFX Web综合 甘特图、网络图、日历图、项目管理中间件甘特图、网络图、日历图、项目管理中间件 上一页 1 2 3 下一页 浏览 7555 次主题：javascript基础知识大集锦(1)主题：javascript基础知识大集锦(1)精华帖(2
2、):良好帖(10):新手帖(0):隐藏帖(13)精华帖(2):良好帖(10):新手帖(0):隐藏帖(13)作者正文 发表时间：2011-01-10 最后修改：2011-01-13附件为微软js指南.相关文章:javaScript通用数据类型校验表单验证 Validator v4.0常用JS代码实例推荐圈子:JSF 更多相关推荐2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ 主要知识点：js数组，数字函数，字符串函数，表单验证，hashMap，堆栈，日期函数，call函数 等。next：js正则表达式，闭包，apply，callee，事件相
3、关函数，Cookie等 1.javascript的数组APIJs代码 1./定义数组 2.var pageIds=new Array();3.pageIds.push(A);4.5.数组长度 6.pageIds.length;7.8./shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回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
4、,-1,1,2,3,4,5 b：7 15./注：在IE6.0下测试返回值总为undefined，FF2.0下测试返回值为7，所以这个方法的返回值不可靠，需要用返回值时可用splice代替本方法来使用。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
5、./concat：返回一个新数组，是将参数添加到原数组中构成的 2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ a=1,2,3,4,5;27.var b=a.concat(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：
6、3,4 32.var b=a.splice(0,1);/同shift 33.a.splice(0,0,-2,-1);var b=a.length;/同unshift 34.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
7、.var a=1,2,3,4,5;43.var b=a.sort();/a：1,2,3,4,5 b：1,2,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|
8、3|4|5 2.dom最常用APIJs代码 1.document方法：2.getElementById(id)Node 返回指定结点的引用 2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ 返回文档中所有匹配的元素的集合 4.createElement(name)Node Node 5.createTextNode(text)Node 创建一个纯文本结点 6.ownerDocument Document 指向这个节点所属的文档 7.documentElement Node 返回html节点 8.document.body Node 返回bo
9、dy节点 9.10.element方法：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
10、移除指定结点的子结点 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 Node 指向结点的父结点的
11、引用 28.childNodes NodeList 指向子结点的引用的集合 29.firstChild Node 指向子结点结合中的第一个子结点的引用 30.lastChild Node 指向子结点结合中的最后一个子结点的引用 31.previousSibling Node 指向前一个兄弟节点；如果这个节点就是兄弟节点，那么该值为null 32.nextSibling Node 指向后一个兄弟节点；如果这个节点就是兄弟节点，那么该值为null 3.网上搜藏的一个map对象:Js代码 2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ Hash
12、Map()2.3./*Map 大小*/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;22.23.24./*删除*/25.this.remove=function(key)2
13、6.27.if(this.containsKey(key)&(delete entrykey)28.29.size-;30.31.32.33./*是否包含 Key*/34.this.containsKey=function(key)35.36.return(key in entry);37.2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ Value*/40.this.containsValue=function(value)41.42.for(var prop in entry)43.44.if(entryprop=value)45.46
14、.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()65.66.var keys=new Array();67.for(var prop in entry)68.69.keys.push(prop);
15、70.71.return keys;72.73.74./*Map Size*/2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ size;78.79.80./*清空*/81.this.clear=function()82.83.size=0;84.entry=new Object();85.86.87.88.var map=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.
16、/*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();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);2
17、011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ value=map.get(arrayKey);113.for(var i=0;i value.length;i+)114.115./alert(valuei);116.117.*/118./*把对象做为Key时，自动调用了该对象的 toString()方法 其实最终还是以String对象为Key*/119.120./*如果是自定义对象 那自己得重写 toString()方法 否则.就是下面的结果*/121.122.function MyObject(name)123.124.this.nam
18、e=name;125.126.127./*128.function MyObject(name)129.130.this.name=name;131.132.this.toString=function()133.134.return this.name;135.136.137.*/138.var object1=new MyObject(小张);139.var object2=new MyObject(小名);140.141.map.put(object1,小张);142.map.put(object2,小名);143.alert(map.get(object1);144.alert(map
19、.get(object2);145.map.remove(xxxxx);146.alert(map.size();147.148./*运行结果 小名 小名 size=1*/2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ 1.数字型(Number)2.1.声明 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
20、 11.i=parseFloat(str);/结果:1.0 12.13./注意:parseInt,parseFloat会把一个类似于32G的字符串,强制转换成32 14.15.3.判断是否为有效的数字 16.var 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.数字型比较
21、 25./此知识与字符串比较相同 26.2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ 28.var f=1.5;29.var i=Math.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./格式化为五位数字的
22、浮点数(从左到右五位数字,不够补零)40.var str=i.toPrecision(5);/结果:3.1415 41.42.7.X进制数字的转换 43./不是很懂-.-44.var i=parseInt(0 x1f,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.
23、function stack()2.if(this.top=undefined)3./初始化堆栈的顶部指针和数据存放域 4.this.top=0;2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ 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.ale
24、rt(当前栈空，无法读取数据);16.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:回车符 52.:双引号 :单引号 53.:反斜杆 54.55.9.将字符转
25、换成Unicode编码 56.var myString=hello;57.var code=myString.charCodeAt(3);/返回l的Unicode编码(整型)58.var char=String.fromCharCode(66);/返回Unicode为66的字符 2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ 61.var myString=hello all;62.var code=encodeURI(myString);/结果:hello%20all 63.var str=decodeURI(code);/结果:hel
26、lo 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.atan2(y,x):返回y除以x的商的反正切值 7.6.Math.ceil(num):返回大于num的最小整数 8.7.Math.cos(num):返回num的余弦值 9.8.Math.e
27、xp(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):返回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的正
28、弦值 18.17.Math.sqrt(num):返回num的平方根 19.18.Math.tan(num):返回num的正切值 20.19.Math.E:自然数(2.718281828459045)21.20.Math.LN2: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)2011-1-18javascrip
29、t基础知识大集锦(1)-JavaScript-web-http:/ 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=(navigator.userAgent.indexOf(Mac)!=-1)
30、;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.userLanguage)var l=navigator.userLanguage.toUpperCase();21.22.6.检查浏览器是否支持Cookies 23.i
31、f(navigator.cookieEnabled)10.JavaScript面向对象的方法实现继承:call方法2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ 1./动物类 animal 2.function animal(bSex)3.this.sex=bSex 4.this.getSex=function()5.return this.sex 6.7.8./类静态变量(如果你不修改它的话)9.animal.SEX_G=new Object();/雌性 10.animal.SEX_B=new Object();/雄性 11./动物子类
32、 鸟 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)22.alert(游动时速高达 +iSpeed)23.24.25./鱼 鸟 杂交品种。26.function crossBF(bSex)27.bird.call(this,bSex);28.fish.ca
33、ll(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)2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ 1.MyTool=new function()2./*3.*返回非空字符串,如果有默认值就返回默认字符串.4.*/5.this.notNull=function(str,defaultStr)6.if(typeof(st
34、r)=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=MyTool.notNull(rootId,001000);12.常用的js方法,包括表单校验的一些方法,下拉菜单常用的方法等等:Js代码 1./*2.*对JSON对象转换为字符串.3.*param json对象 json 4.*return json字符串 5.*/6.function jsonObj2Str(json)7.var str=;
35、8.for(prop in json)9.str+=prop+:+jsonprop+,;2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ 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
36、 位置值 29.*/30.function 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)offset+=getTo
37、p(e.offsetParent);44.return offset;45.46.2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ 原始字符串 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.function$(str)63.return document.getE
38、lementById(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./*以下方法和表单验证相关*/80./*81.*返回非空字符串,如果有默认值就返回默认字符串.82.*param 要进行转换的原字符串 str 83.*param
39、 默认值 defaultStr 2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ 返回结果 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.return str;94.95.96.97./*98.*比较两个日期大小.99.*param 较小日期的文本框id smallDate 100.*para
40、m 较大日期的文本框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);108.v2.focus();109.return false;110.111.return true;112.113.114./*115.*比较两个金额大小的方法.116.*param 较小的金额 smallNum 117.*
41、param 较大的金额 bigNum 118.*param 出错提示信息 msg 119.*return Boolean 120.*/2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ compareTwoNum(smallNum,bigNum,msg)122.var v1=$(smallNum).value;123.var v2=$(bigNum).value;124.if(parseFloat(v1)=parseFloat(v2)125.alert(msg);126.v2.focus();127.return false;128.129.
42、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(real
43、Len len)145.alert(+msg+长度最大为+len+位,+请重新输入！n注意：一个汉字占2位。);146.obj.focus();147.return false;148.else 149.return true;150.151.152./*153.*判断某个文本框不可以为空.154.*param 文本框id textId 155.*param 文本框描述内容 msg 156.*return 有错就返回false,否则返回true 2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ checkIfEmpty(textId,msg
44、)159.var textObj=$(textId);160.var textValue=textObj.value;161.if(trim(textValue)=)162.alert(+msg+不得为空！);163.textObj.focus();164.return false;165.else 166.return true;167.168.169.170./*171.*判断指定文本框内容必须为邮件.172.*param 文本框id textId 173.*param 文本框描述 msg 174.*return 如果是邮件内容就返回true否则返回false 175.*/176.func
45、tion checkIsMail(textId,msg)177.var obj=$(textId);178.if(!_isEmail(obj.value)179.alert(+msg+不是合法的邮件地址！);180.obj.focus();181.return false;182.else 183.return true;184.185.186./*187.*验证是不是邮件.188.*param 要验证的字符串 strEmail 189.*return Boolean 190.*/191.function _isEmail(strEmail)192./接下来的验证是否有两个以上的.号，有的话就
46、是错的！193.var first=strEmail.indexOf(.);2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ false;196.197.var tempStr=strEmail.substring(first+1);198.if(tempStr.indexOf(.)!=-1)199.return false;200.201.if(strEmail 202.search(/w+(-w+)|(.w+)*A-Za-z0-9+(.|-)A-Za-z0-9+)*.A-Za-z0-9+$/)!=-1)203.return true;2
47、04.else 205.return false;206.207.208./*209.*判断某个文本框是否数字.210.*param 文本框id textId 211.*param 文本框描述内容 msg 212.*return Boolean 213.*/214.function checkIsNum(textId,msg)215.obj=$(textId);216.if(isNaN(obj.value)217.alert(+msg+必须为数字。);218.obj.focus();219.return false;220.else 221.return true;222.223.224./*
48、225.*判断某个文本框是否含有非法字符.226.*param 文本框的id textId 227.*param 文本框描述内容 msg 228.*return 有错就返回false否则返回true 229.*/2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ checkIsValid(textId,msg)231.obj=$(textId);232.if(!_isValidString(obj.value,+msg+不得含有非法字符。)233.obj.focus();234.return false;235.236.return true
49、;237.238.239./*240.*判断是不是合法字符串.241.*param 要进行判断的字符串 szStr 242.*param 文本描述 errMsg 243.*return 合法则返回true否则返回false 244.*/245.function _isValidString(szStr,errMsg)246.voidChar=!#$%&()（）！￥？?“”*;247.for(var i=0;i -1)250.alert(errMsg)251.return false;252.253.254.return true;255.256.257./*以下方法和下拉菜单相关*/258./
50、*259.*控制下拉菜单不可以为-1(未选择情况value=-1)260.*param 下拉菜单id selectId 261.*param 下拉菜单描述内容 msg 262.*param 下拉菜单的空值对应的value,默认为-1 nullValue 263.*return Boolean 264.*/265.function checkChooseSelect(selectId,msg,nullValue)266.var obj=$(selectId);2011-1-18javascript基础知识大集锦(1)-JavaScript-web-http:/ false;271.else 27