`
psy_yd
  • 浏览: 23171 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
  • henchong: 我想实现这个功能。。。控制地图的显示范围。。但不知道地图的级别 ...
    地图实现原理

js数组,数字函数,字符串函数,表单验证,hashMap,堆栈,日期函数,call函数 等。

    博客分类:
  • JS
阅读更多
1.javascript的数组API



Js代码 
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,-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.//concat:返回一个新数组,是将参数添加到原数组中构成的  
26.var 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:[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.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|3|4|5"  



2.dom最常用API



Js代码 
1.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方法:  
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 移除指定结点的子结点  
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 指向结点的父结点的引用  
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.     /** 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.         entry[key] = value;    
16.     }    
17.         
18.     /** 取 **/   
19.     this.get = function (key)    
20.     {    
21.         return this.containsKey(key) ? entry[key] : null;    
22.     }    
23.         
24.     /** 删除 **/   
25.     this.remove = function ( key )    
26.     {    
27.         if( this.containsKey(key) && ( delete entry[key] ) )    
28.         {    
29.             size --;    
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.         {    
44.             if(entry[prop] == 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(entry[prop]);    
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);    
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 = 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());  
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 < value.length ; i++)  
114. {  
115.     //alert(value[i]);  
116. }  
117. */   
118. /** 把对象做为Key时 ,自动调用了该对象的 toString() 方法 其实最终还是以String对象为Key**/   
119.     
120. /** 如果是自定义对象 那自己得重写 toString() 方法 否则 . 就是下面的结果 **/   
121.     
122. function MyObject(name)    
123. {    
124.     this.name = 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.get(object2));    
145. map.remove("xxxxx");    
146. alert(map.size());    
147.     
148. /** 运行结果 小名 小名 size = 1 **/   
149.     
150. /** 如果改成复写toString()方法的对象 , 效果就完全不一样了 **/   
151.     
152. </script>   



4.常用的数字函数:



Js代码 
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  
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.数字型比较  
25.    //此知识与[字符串比较]相同  
26. 
27.  5.小数转整数  
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.    //格式化为五位数字的浮点数(从左到右五位数字,不够补零)  
40.    var str = i.toPrecision(5); //结果: "3.1415"  
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 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.unit[this.top]=pushvalue; 
10.            this.top+=1;             
11.      } 
12.      this.readAllElements=function(){ 
13.      //定义读取所有数据的方法 
14.            if(this.top==0){ 
15.                  alert("当前栈空,无法读取数据"); 
16.                  return(""); 
17.            } 
18.            var count=0; 
19.            var outStr=""; 
20.                         
21.            for(count=0;count<this.top;count++){ 
22.                  outStr+=this.unit[count]+","; 
23.            }             
24.            return(outStr); 
25.      } 
26.      this.pop=function(){ 
27.      //定义弹出堆栈的方法 
28.            if(this.top==0){ 
29.                  alert("当前栈空,无法弹出数据"); 
30.                  return(""); 
31.            } 
32.            var      popTo=this.unit[this.top-1]; 
33.            this.top--; 
34.            return(popTo); 
35.            /* 从堆栈弹出数据,顶部指针减一,不过这里没有做到资源的释放,也
36.            就是说数据仍然存在于this.unit的数组中,只不过无法访问罢了。目前
37.            我也没想到好的办法解决。*/ 
38.      } 
39.} 



6.最常用的JavaScript日期函数:



Js代码 
1.·日期型(Date)  
2.  1.声明  
3.    var myDate = new Date();    //系统当前时间   
4.    var myDate = new Date(yyyy, mm, dd, hh, mm, ss);  
5.    var myDate = new Date(yyyy, mm, dd);  
6.    var myDate = new Date("monthName dd, yyyy hh:mm:ss");  
7.    var myDate = new Date("monthName dd, yyyy");  
8.    var myDate = new Date(epochMilliseconds);  
9. 
10.  2.获取时间的某部份  
11.    var myDate = new Date();  
12.    myDate.getYear();       //获取当前年份(2位)  
13.    myDate.getFullYear();   //获取完整的年份(4位,1970-????)  
14.    myDate.getMonth();      //获取当前月份(0-11,0代表1月)  
15.    myDate.getDate();       //获取当前日(1-31)  
16.    myDate.getDay();        //获取当前星期X(0-6,0代表星期天)    
17.    myDate.getTime();       //获取当前时间(从1970.1.1开始的毫秒数)   时间戳!! 
18.    myDate.getHours();      //获取当前小时数(0-23)  
19.    myDate.getMinutes();    //获取当前分钟数(0-59)  
20.    myDate.getSeconds();    //获取当前秒数(0-59)  
21.    myDate.getMilliseconds();   //获取当前毫秒数(0-999)  
22.    myDate.toLocaleDateString();    //获取当前日期  
23.    myDate.toLocaleTimeString();    //获取当前时间  
24.    myDate.toLocaleString( );       //获取日期与时间  
25. 
26.  3.计算之前或未来的时间  
27.    var myDate = new Date();  
28.    myDate.setDate(myDate.getDate() + 10);  //当前时间加10天  
29.    //类似的方法都基本相同,以set开头,具体参考第2点  
30. 
31.  4.计算两个日期的偏移量  
32.    var i = daysBetween(beginDate,endDate); //返回天数  
33.    var i = beginDate.getTimezoneOffset(endDate); //返回分钟数  
34. 
35.  5.检查有效日期  
36.    //checkDate() 只允许"mm-dd-yyyy"或"mm/dd/yyyy"两种格式的日期  
37.    if( checkDate("2006-01-01") ){ }  
38.     
39.    //正则表达式(自己写的检查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四种)  
40.    var r = /^(\d{2}|\d{4})[\/-]\d{1,2}[\/-]\d{1,2}$/;  
41.    if( r.test( myString ) ){ }  





7.最常用字符串函数API:



Js代码 
1.·字符串(String)  
2.  1.声明  
3.    var myString = new String("Every good boy does fine.");  
4.    var myString = "Every good boy does fine.";  
5. 
6.  2.字符串连接  
7.    var myString = "Every " + "good boy " + "does fine.";  
8.    var myString = "Every ";  myString += "good boy does fine.";  
9. 
10.  3.截取字符串  
11.    //截取第 6 位开始的字符  
12.    var myString = "Every good boy does fine.";  
13.    var section = myString.substring(6);    //结果: "good boy does fine."  
14.     
15.    //截取第 0 位开始至第 10 位为止的字符  
16.    var myString = "Every good boy does fine.";  
17.    var section = myString.substring(0,10); //结果: "Every good"  
18.     
19.    //截取从第 11 位到倒数第 6 位为止的字符  
20.    var myString = "Every good boy does fine.";  
21.    var section = myString.slice(11,-6);    //结果: "boy does"  
22.     
23.    //从第 6 位开始截取长度为 4 的字符  
24.    var myString = "Every good boy does fine.";  
25.    var section = myString.substr(6,4);     //结果: "good"  
26. 
27.  4.转换大小写  
28.    var myString = "Hello";  
29.    var lcString = myString.toLowerCase();  //结果: "hello"  
30.    var ucString = myString.toUpperCase();  //结果: "HELLO"  
31. 
32.  5.字符串比较  
33.    var aString = "Hello!";  
34.    var bString = new String("Hello!");  
35.    if( aString == "Hello!" ){ }    //结果: true  
36.    if( aString == bString ){ }     //结果: true  
37.    if( aString === bString ){ }    //结果: false (两个对象不同,尽管它们的值相同)  
38. 
39.  6.检索字符串  
40.    var myString = "hello everybody.";  
41.    // 如果检索不到会返回-1,检索到的话返回在该串中的起始位置  
42.    if( myString.indexOf("every") > -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.将字符转换成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);     //结果: "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.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) : 返回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 : 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的平方根(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 = ( 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.userLanguage ){ 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.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){ 
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.用面向对象的编程方式写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 = 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 = "{"; 
8.        for (prop in json) { 
9.                str += prop + ":" + json[prop] + ","; 
10.        } 
11.        str = str.substr(0, str.length - 1); 
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 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+=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.function $(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 arr[0]; 
75.        else 
76.                return null; 
77.} 
78. 
79./***************以下方法和表单验证相关*************************************************/ 
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.                return 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); 
108.                                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 = $(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 + "]" + "长度最大为" + 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}
157. */ 
158.function checkIfEmpty(textId, msg) { 
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.function 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.        //接下来的验证是否有两个以上的‘.’号,有的话就是错的! 
193.        var first = strEmail.indexOf('.');   
194.        if (strEmail.indexOf('@')== -1) { 
195.                return 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; 
204.        } 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./**
225. * 判断某个文本框是否含有非法字符.
226. * @param {文本框的id} textId
227. * @param {文本框描述内容} msg
228. * @return {有错就返回false否则返回true}
229. */ 
230.function checkIsValid(textId, msg) { 
231.        obj = $(textId); 
232.        if (!_isValidString(obj.value, '[' + msg + ']不得含有非法字符。')) { 
233.                obj.focus(); 
234.                return false; 
235.        } 
236.        return true; 
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 < voidChar.length; i++) { 
248.                aChar = voidChar.substring(i, i + 1); 
249.                if (szStr.indexOf(aChar) > -1){ 
250.                        alert(errMsg) 
251.                        return false; 
252.                } 
253.        } 
254.        return true; 
255.}  
256. 
257./*************** 以下方法和下拉菜单相关*************************************************/ 
258./**
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);  
267.        if (obj.value == notNull(nullValue,'-1')) { 
268.                alert('[' + msg + ']必选!'); 
269.                obj.focus(); 
270.                return false; 
271.        } else 
272.                return true; 
273.} 
274. 
275./**
276. * 得到下拉菜单的显示的文字.
277. * @param {下拉菜单dom对象} selectObj
278. * @return {返回下拉菜单的显示的"文本"}
279. */ 
280.function getSelectText(selectObj) { 
281.       return selectObj.options[selectObj.selectedIndex].text; 
282.} 
283. 
284./**
285. * 得到下拉菜单的显示的值.
286. * @param {下拉菜单dom对象} selectObj
287. * @return {得到下拉菜单的显示的"值"}
288. */ 
289.function getSelectValue(selectObj) { 
290.        return selectObj.options[selectObj.selectedIndex].value; 
291.} 
292. 
293./**
294. * 设置下拉菜单的选择状态到指定的值.
295. * @param {下拉菜单对象} obj
296. * @param {要选择的值} value
297. */ 
298.function setSelectValue(obj, value) { 
299.        /*for (i = obj.options.length - 1; i >= 0; i--) {
300.                if (obj.options[i].value == value) {
301.                        obj.options[i].selected = true;
302.                        return;
303.                }
304.        }
305.*/ 
306.      obj.value= value; 
307.} 
308. 
309./**
310. * 根据键值串的内容进行下拉菜单的动态组装
311. * @param {要进行下拉菜单组装的dom对象} obj
312. * @param {键值对用,和;分割,例如'1,男;2,女;3,未知'} valAndText
313. */ 
314.function setSelectContent(obj,valAndText){ 
315.        if(trim(valAndText)==''){ 
316.                alert('没有要进行组装下拉菜单的数据!'); 
317.                return false;                 
318.        } 
319.        clearSelect(obj); 
320.        var keyandvalues = valAndText.split(';'); 
321.        for(var i=0;i<keyandvalues.length;i++){ 
322.                var arr = keyandvalues[i].split(','); 
323.                if(arr){ 
324.                        var value =arr[0];  
325.                        var text =arr[1];  
326.                        var objOption = new Option(text,value); 
327.                        obj.add(objOption); 
328.                } 
329.        } 
330.} 
331. 
332./**
333. * 清空下拉菜单里面的内容.
334. * @param {下拉菜单对象} obj
335. */ 
336.function clearSelect(obj) {  
337.    for (var i=obj.options.length; i >0; i--) { 
338.        obj.remove(0);  
339.    }         
340.}  
341. 
342./*************** 以下方法和多选框相关*************************************************/ 
343./**
344. * 返回选中的checks的id组成的字符串,逗号隔开.
345. * @param {checks数组} checks
346. * @return 选择的id组成的字符串
347. */ 
348.function getCheckedIds(checks){ 
349.        var selectedValue = ''; 
350.        var len = checks.length; 
351.        for(var index=0; index<len; index++) { 
352.        if(checks[index].checked==true) { 
353.            selectedValue +=  checks[index].value+",";  
354.        } 
355.    } 
356.        if(selectedValue.length>0) 
357.                return selectedValue.substring(0,selectedValue.length-1); 
358.    return selectedValue; 
359.} 

将上面的js保存之后,使用下面的html进行测试:



Html代码 
1.<HTML> 
2.        <HEAD> 
3.                <script language="javascript" src="aaaaa.js"></script> 
4.        </HEAD> 
5.        <SCRIPT LANGUAGE="JavaScript"> 
6.<!-- 
7./** 
8. * 表单验证的示例js方法. 
9. */ 
10.function check(){ 
11.        if(checkIfEmpty('a','非空校验') 
12.                &&checkIsMail('b','邮箱校验') 
13.                &&checkIsNum('c','数字校验') 
14.                &&checkIsValid('d','合法性校验') 
15.                &&compareTwoDate('e','f','小日期与大日期关系错误!') 
16.                &&checkLength('g',5,'长度校验') 
17.                &&checkChooseSelect('h','下拉菜单非空','-1') 
18.                &&compareTwoNum('k','l','大小数目关系不正确!')){ 
19.                alert('校验通过!'); 
20.                return true;         
21.        }else{ 
22.                return false; 
23.        } 
24.} 
25. 
26./** 
27. * 取下拉菜单的值和文本的示例js方法. 
28. */ 
29.function getSelect(){ 
30.        var sss = $('h'); 
31.        alert('下拉菜单选择的文本是:'+getSelectText(sss)+'\n' 
32.                        +'下拉菜单选择的值是:'+getSelectValue(sss)); 
33.} 
34. 
35./** 
36. * 根据键值字符串设置下拉菜单的显示内容. 
37. */ 
38.function setSelect(){ 
39.        var sss = $('i').value; 
40.        setSelectContent($('h'),sss); 
41.} 
42. 
43./** 
44. * 返回多选框数组选择状态的id的字符串,结果以逗号隔开. 
45. */ 
46.function getMulti(){  
47.        alert('多选选择的id是:'+getCheckedIds(document.getElementsByName('j'))); 
48.} 
49.//--> 
50.</SCRIPT> 
51.        <BODY> 
52.                <table> 
53.                        <tr> 
54.                                <td> 
55.                                        非空: 
56.                                        <input id='a'> 
57.                                </td> 
58.                                <td> 
59.                                        checkIfEmpty('a','非空校验') 
60.                                </td> 
61.                        </tr> 
62.                        <tr> 
63.                                <td> 
64.                                        邮箱: 
65.                                        <input id='b' value='323232@2323.com'> 
66.                                </td> 
67.                                <td> 
68.                                        checkIsMail('b','邮箱校验') 
69.                                </td> 
70.                        </tr> 
71.                        <tr> 
72.                                <td> 
73.                                        数字: 
74.                                        <input id='c' value='aaaa'> 
75.                                </td> 
76.                                <td> 
77.                                        checkIsNum('c','数字校验') 
78.                                </td> 
79.                        </tr> 
80.                        <tr> 
81.                                <td> 
82.                                        合法字符: 
83.                                        <input id='d' value='@$@$#$#!%%#'> 
84.                                </td> 
85.                                <td> 
86.                                        checkIsValid('d','合法性校验') 
87.                                </td> 
88.                        </tr> 
89.                        <tr> 
90.                                <td> 
91.                                        小的日期: 
92.                                        <input id='e' value='2010-1-1'> 
93.                                        大的日期: 
94.                                        <input id='f' value='2011-1-1'> 
95.                                </td> 
96.                                <td> 
97.                                        compareTwoDate('e','f','小日期与大日期关系错误!') 
98.                                </td> 
99.                        </tr> 
100.                        <tr> 
101.                                <td> 
102.                                        小的数: 
103.                                        <input id='k' value='12.3'> 
104.                                        大的数: 
105.                                        <input id='l' value='4564'> 
106.                                </td> 
107.                                <td> 
108.                                        compareTwoNum('k','l','大小数目关系不正确!') 
109.                                </td> 
110.                        </tr> 
111.                        <tr> 
112.                                <td> 
113.                                        字符长度校验(<5): 
114.                                        <input id='g'> 
115.                                </td> 
116.                                <td> 
117.                                        checkLength('g',5,'长度校验') 
118.                                </td> 
119.                        </tr> 
120.                        <tr> 
121.                                <td> 
122.                                        下拉菜单非空校验: 
123.                                        <select id='h'> 
124.                                                <option value='-1'> 
125.                                                        请选择 
126.                                                </option> 
127.                                                <option value='1'> 
128.                                                        立项 
129.                                                </option> 
130.                                                <option value='2'> 
131.                                                        可研 
132.                                                </option> 
133.                                        </select> 
134.                                </td> 
135.                                <td> 
136.                                        checkChooseSelect('h','下拉菜单非空','-1') 
137.                                </td> 
138.                        </tr> 
139.                        <tr> 
140.                                <td colspan='2'> 
141.                                        <button onclick='check()'> 
142.                                                测试表单校验方法 
143.                                        </button> 
144.                                </td> 
145.                        </tr> 
146.                        <tr> 
147.                                <td> 
148. 
149.                                        <button onclick='getSelect()'> 
150.                                                得到下拉菜单的值 
151.                                        </button> 
152.                                </td> 
153.                                <td> 
154.                                        getSelectText(sss)和getSelectValue(sss) 
155.                                </td> 
156.                        </tr> 
157.                        <tr> 
158.                                <td> 
159.                                        输入下拉菜单的键值字符串(如右所示) 
160.                                        <input id='i' value='1,男;2,女;3,未知'> 
161.                                        <button onclick='setSelect()'> 
162.                                                设置下拉菜单的值 
163.                                        </button> 
164.                                </td> 
165.                                <td> 
166.                                        setSelectContent($('h'),sss) 
167.                                </td> 
168.                        </tr> 
169.                        <tr> 
170.                                <td> 
171. 
172.                                        <input type='checkbox' name='j' value='aaa1'> 
173.                                        <input type='checkbox' name='j' value='aaa2'> 
174.                                        <input type='checkbox' name='j' value='aaa3'> 
175.                                        <input type='checkbox' name='j' value='aaa4'> 
176.                                        <button onclick='getMulti()'> 
177.                                                得到多选选择的id 
178.                                        </button> 
179.                                </td> 
180.                                <td> 
181.                                        getCheckedIds(document.getElementsByName('j')) 
182.                                </td> 
183.                        </tr> 
184.                </table> 
185.        </BODY> 
186.</HTML> 
分享到:
评论

相关推荐

    公式解析类(字符串公式,自定义函数公式)

    ### 公式解析类(字符串公式,自定义函数公式) #### 概述 本文将详细介绍一个公式解析类,该类能够处理字符串公式以及自定义函数公式。此类在数学计算、数据分析等领域有着广泛的应用,比如在电子表格软件或编程语言...

    Java语言程序设计课件第四章 数组、字符串、向量和哈希表

    在Java语言程序设计中,数组、字符串、向量和哈希表是处理集合数据的重要结构。本章节将详细介绍这些概念和它们的用法。 首先,数组是一种数据结构,它包含一系列相同类型的数据项,通过连续的内存地址进行存储。...

    学习笔记:三数组实现的HashMap

    "学习笔记:三数组实现的HashMap"这篇博客文章可能讨论了一种非标准但有趣的HashMap实现,使用了三个数组来代替标准的哈希表结构。这里我们将深入探讨这种三数组实现HashMap的原理和可能的优势。 1. **基本概念**:...

    Java基础-模拟HashMap集合(基于数组和链表) 数组和链表.pdf

    Java基础-模拟HashMap集合(基于数组和链表) 在本文中,我们将详细介绍如何模拟Java的HashMap集合,使用数组和链表来实现Hash表的存储。我们将从基本概念开始,逐步深入到HashMap的实现细节中。 什么是HashMap? ...

    查找字符串中出现重复次数最多的字符

    在编程领域,尤其是在面试环节,字符串处理问题是常见的一类题目,因为它们涉及到基础的数据结构、算法和逻辑思维。本主题关注的是如何查找一个字符串中出现重复次数最多的字符。这是一个典型的字符串处理问题,对于...

    Java开发常用的方法

    资源为Java源代码,内含系列常用静态方法,可以直接拿来使用,如:拼合一维数组为字符串;产生在start和end之间的num个随机整数,返回值存在HashMap中;获取当前时间,返回时间格式(如果调用参数为true时返回yyyy-MM...

    计算机软件及应用数组字符串向量和哈希表PPT课件.pptx

    本PPT课件主要讲解数组、字符串、向量和哈希表等数据结构的概念和应用,旨在帮助学生掌握编程语言的基本数据类型和数据结构。 一、数组 数组是一种复合数据类型,由相同类型的数据元素按顺序组成。数组的元素在...

    基于JavaScript的HashMap实现

    然而,JavaScript的对象有一些限制,比如键必须是字符串或Symbol,这可能不满足所有HashMap的需求。因此,我们需要构建一个更完善的HashMap类,支持任意类型的键,并提供更丰富的功能,如容量控制、负载因子、扩容...

    Java数组+链表简单实现HashMap的put和get 数组和链表.pdf

    这个简单的实现虽然没有涵盖Java SDK中HashMap的所有特性,如动态扩容、负载因子等,但它清晰地展示了哈希表的基本工作原理:使用数组存储,通过哈希函数定位,利用链表解决冲突。这种实现方式对于理解HashMap的内部...

    删除数组元素实用的PHP数组函数

    如果不是数组而是字符串,则会使用trim函数去除字符串两端的空白字符。如果处理后的字符串为空,则使用unset函数删除该数组元素。如果不为空,则根据$trim参数的值决定是否保留该元素。如果$trim为false,则即使字符...

    树tree、动态数组dyArray、hashMap、拼图算法.zip

    本压缩包文件涵盖了四个关键概念:树(Tree)、动态数组(Dynamic Array)、哈希映射(HashMap)以及拼图算法(Puzzle Algorithm)。接下来,我们将详细探讨这些知识点。 1. **树(Tree)**: 树是一种非线性的...

    js 版 java hashmap

    7. **键的类型支持**:JavaScript的HashMap实现可能需要支持各种类型的键,包括字符串、数字、对象等,这就需要处理不同类型的键如何哈希和比较的问题。 8. **性能优化**:为了提高性能,可能需要对一些常见操作...

    Java用数组和链表的方式简单实现HashMap的增删改功能 数组和链表.pdf

    在Java中,HashMap的实现方式有多种,本文将介绍使用数组和链表的方式简单实现HashMap的增删改功能。 HashMap的数据结构 HashMap的数据结构主要由三个部分组成:数组、链表和红黑树。数组用于存储键值对,链表用于...

    一个基于js的HashMap

    在JavaScript中,由于对象属性的键通常是字符串,我们可以简单地使用`toString()`方法将非字符串键转换为字符串。 2. **添加键值对**:在HashMap类中,我们需要一个方法来添加键值对。这通常涉及调用哈希函数,然后...

    hashmap中hash函数的构造问题

    接下来我们将介绍几种典型的哈希函数构造方法,包括SDBMHash、RSHash、JSHash、PJWHash、ELFHash、BKDRHash、DJBHash和APHash等。这些函数都具有良好的性能特点,可以作为学习和实践的参考。 ##### 1. SDBMHash ``...

    计算机软件及应用数组字符串向量和哈希表PPT学习教案.pptx

    字符串、向量和哈希表是更复杂的数据结构,字符串是字符序列,而向量(在Java中常指的是ArrayList)提供了动态增长的数组功能,哈希表(如Java中的HashMap)则提供基于键值对的快速查找和存储。这些数据结构在实际...

    java求数组元素重复次数和java字符串比较大小示例

    在Java编程中,数组是基本的...总的来说,这两个方法提供了处理数组元素重复次数和字符串比较的基本功能,适用于需要进行此类操作的Java程序。理解并掌握这些代码可以帮助开发者更好地处理数组数据和字符串比较问题。

    字符串处理算法

    在当今的计算机科学领域,字符串处理是一个极其重要的课题,尤其在算法竞赛如ACM(ACM国际大学生程序设计竞赛)中,高效的字符串处理算法是解决许多问题的关键。本文将介绍一些常见的字符串处理算法:Hash、KMP、...

    dataStructuresWith[removed]数组,字符串,哈希表,链接列表,堆栈,队列,树和图

    本篇将深入探讨数组、字符串、哈希表、链表、堆栈、队列、树以及图这八大数据结构,并结合JavaScript进行讲解。 1. **数组**:数组是最基本的数据结构,它存储一组相同类型的元素。在JavaScript中,数组是一种动态...

Global site tag (gtag.js) - Google Analytics