1. 1.javascript的数组API
  2.  
  3. Js代码 收藏代码
  4. //定义数组
  5. var pageIds = new Array();
  6. pageIds.push('A');
  7.  
  8. 数组长度
  9. pageIds.length;
  10.  
  11. //shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined
  12. var a = [1,2,3,4,5];
  13. var b = a.shift(); //a:[2,3,4,5] b:1
  14.  
  15. //unshift:将参数添加到原数组开头,并返回数组的长度
  16. var a = [1,2,3,4,5];
  17. var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5] b:7
  18. //注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7,所以这个方法的返回值不可靠,需要用返回值时可用splice代替本方法来使用。
  19.  
  20. //pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined
  21. var a = [1,2,3,4,5];
  22. var b = a.pop(); //a:[1,2,3,4] b:5
  23.  
  24. //push:将参数添加到原数组末尾,并返回数组的长度
  25. var a = [1,2,3,4,5];
  26. var b = a.push(6,7); //a:[1,2,3,4,5,6,7] b:7
  27.  
  28. //concat:返回一个新数组,是将参数添加到原数组中构成的
  29. var a = [1,2,3,4,5];
  30. var b = a.concat(6,7); //a:[1,2,3,4,5] b:[1,2,3,4,5,6,7]
  31.  
  32. //splice(start,deleteCount,val1,val2,):从start位置开始删除deleteCount项,并从该位置起插入val1,val2,
  33. var a = [1,2,3,4,5];
  34. var b = a.splice(2,2,7,8,9); //a:[1,2,7,8,9,5] b:[3,4]
  35. var b = a.splice(0,1); //同shift
  36. a.splice(0,0,-2,-1); var b = a.length; //同unshift
  37. var b = a.splice(a.length-1,1); //同pop
  38. a.splice(a.length,0,6,7); var b = a.length; //同push
  39.  
  40. //reverse:将数组反序
  41. var a = [1,2,3,4,5];
  42. var b = a.reverse(); //a:[5,4,3,2,1] b:[5,4,3,2,1]
  43.  
  44. //sort(orderfunction):按指定的参数对数组进行排序
  45. var a = [1,2,3,4,5];
  46. var b = a.sort(); //a:[1,2,3,4,5] b:[1,2,3,4,5]
  47.  
  48. //slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组
  49. var a = [1,2,3,4,5];
  50. var b = a.slice(2,5); //a:[1,2,3,4,5] b:[3,4,5]
  51.  
  52. //join(separator):将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符
  53. var a = [1,2,3,4,5];
  54. var b = a.join("|"); //a:[1,2,3,4,5] b:"1|2|3|4|5"
  55.  
  56. 2.dom最常用API
  57.  
  58. Js代码 收藏代码
  59. document方法:
  60. getElementById(id) Node 返回指定结点的引用
  61. getElementsByTagName(name) NodeList 返回文档中所有匹配的元素的集合
  62. createElement(name) Node Node
  63. createTextNode(text) Node 创建一个纯文本结点
  64. ownerDocument Document 指向这个节点所属的文档
  65. documentElement Node 返回html节点
  66. document.body Node 返回body节点
  67.  
  68. element方法:
  69. getAttribute(attributeName) String 返回指定属性的值
  70. setAttribute(attributeName,value) String 给属性赋值
  71. removeAttribute(attributeName) String 移除指定属性和它的值
  72. getElementsByTagName(name) NodeList 返回结点内所有匹配的元素的集合
  73.  
  74. node方法:
  75. appendChild(child) Node 给指定结点添加一个新的子结点
  76. removeChild(child) Node 移除指定结点的子结点
  77. replaceChild(newChild,oldChild) Node 替换指定结点的子结点
  78. insertBefore(newChild,refChild) Node 在同一层级的结点前面插入新结点
  79. hasChildNodes() Boolean 如果结点有子结点则返回true
  80.  
  81. node属性:
  82. nodeName String 以字符串的格式存放结点的名称
  83. nodeType String 以整型数据格式存放结点的类型
  84. nodeValue String 以可用的格式存放结点的值
  85. parentNode Node 指向结点的父结点的引用
  86. childNodes NodeList 指向子结点的引用的集合
  87. firstChild Node 指向子结点结合中的第一个子结点的引用
  88. lastChild Node 指向子结点结合中的最后一个子结点的引用
  89. previousSibling Node 指向前一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null
  90. nextSibling Node 指向后一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null
  91.  
  92. 3.网上搜藏的一个map对象:
  93.  
  94. Js代码 收藏代码
  95. function HashMap()
  96. {
  97. /** Map 大小 **/
  98. var size = 0;
  99. /** 对象 **/
  100. var entry = new Object();
  101.  
  102. /** 存 **/
  103. this.put = function (key , value)
  104. {
  105. if(!this.containsKey(key))
  106. {
  107. size ++ ;
  108. }
  109. entry[key] = value;
  110. }
  111.  
  112. /** 取 **/
  113. this.get = function (key)
  114. {
  115. return this.containsKey(key) ? entry[key] : null;
  116. }
  117.  
  118. /** 删除 **/
  119. this.remove = function ( key )
  120. {
  121. if( this.containsKey(key) && ( delete entry[key] ) )
  122. {
  123. size --;
  124. }
  125. }
  126.  
  127. /** 是否包含 Key **/
  128. this.containsKey = function ( key )
  129. {
  130. return (key in entry);
  131. }
  132.  
  133. /** 是否包含 Value **/
  134. this.containsValue = function ( value )
  135. {
  136. for(var prop in entry)
  137. {
  138. if(entry[prop] == value)
  139. {
  140. return true;
  141. }
  142. }
  143. return false;
  144. }
  145.  
  146. /** 所有 Value **/
  147. this.values = function ()
  148. {
  149. var values = new Array();
  150. for(var prop in entry)
  151. {
  152. values.push(entry[prop]);
  153. }
  154. return values;
  155. }
  156.  
  157. /** 所有 Key **/
  158. this.keys = function ()
  159. {
  160. var keys = new Array();
  161. for(var prop in entry)
  162. {
  163. keys.push(prop);
  164. }
  165. return keys;
  166. }
  167.  
  168. /** Map Size **/
  169. this.size = function ()
  170. {
  171. return size;
  172. }
  173.  
  174. /* 清空 */
  175. this.clear = function ()
  176. {
  177. size = 0;
  178. entry = new Object();
  179. }
  180. }
  181.  
  182. var map = new HashMap();
  183.  
  184. /*
  185. map.put("A","1");
  186. map.put("B","2");
  187. map.put("A","5");
  188. map.put("C","3");
  189. map.put("A","4");
  190. */
  191. /*
  192. alert(map.containsKey("XX"));
  193. alert(map.size());
  194. alert(map.get("A"));
  195. alert(map.get("XX"));
  196. map.remove("A");
  197. alert(map.size());
  198. alert(map.get("A"));
  199. */
  200.  
  201. /** 同时也可以把对象作为 Key **/
  202. /*
  203. var arrayKey = new Array("1","2","3","4");
  204. var arrayValue = new Array("A","B","C","D");
  205. map.put(arrayKey,arrayValue);
  206. var value = map.get(arrayKey);
  207. for(var i = 0 ; i < value.length ; i++)
  208. {
  209. //alert(value[i]);
  210. }
  211. */
  212. /** 把对象做为Key时 ,自动调用了该对象的 toString() 方法 其实最终还是以String对象为Key**/
  213.  
  214. /** 如果是自定义对象 那自己得重写 toString() 方法 否则 . 就是下面的结果 **/
  215.  
  216. function MyObject(name)
  217. {
  218. this.name = name;
  219. }
  220.  
  221. /**
  222. function MyObject(name)
  223. {
  224. this.name = name;
  225.  
  226. this.toString = function ()
  227. {
  228. return this.name;
  229. }
  230. }
  231. **/
  232. var object1 = new MyObject("小张");
  233. var object2 = new MyObject("小名");
  234.  
  235. map.put(object1,"小张");
  236. map.put(object2,"小名");
  237. alert(map.get(object1));
  238. alert(map.get(object2));
  239. map.remove("xxxxx");
  240. alert(map.size());
  241.  
  242. /** 运行结果 小名 小名 size = 1 **/
  243.  
  244. /** 如果改成复写toString()方法的对象 , 效果就完全不一样了 **/
  245.  
  246. </script>
  247.  
  248. 4.常用的数字函数:
  249.  
  250. Js代码 收藏代码
  251. ·数字型(Number)
  252. 1.声明
  253. var i = 1;
  254. var i = new Number(1);
  255.  
  256. 2.字符串与数字间的转换
  257. var i = 1;
  258. var str = i.toString(); //结果: "1"
  259. var str = new String(i); //结果: "1"
  260. i = parseInt(str); //结果: 1
  261. i = parseFloat(str); //结果: 1.0
  262.  
  263. //注意: parseInt,parseFloat会把一个类似于"32G"的字符串,强制转换成32
  264.  
  265. 3.判断是否为有效的数字
  266. var i = 123; var str = "string";
  267. if( typeof i == "number" ){ } //true
  268.  
  269. //某些方法(如:parseInt,parseFloat)会返回一个特殊的值NaN(Not a Number)
  270. //请注意第2点中的[注意],此方法不完全适合判断一个字符串是否是数字型!!
  271. i = parseInt(str);
  272. if( isNaN(i) ){ }
  273.  
  274. 4.数字型比较
  275. //此知识与[字符串比较]相同
  276.  
  277. 5.小数转整数
  278. var f = 1.5;
  279. var i = Math.round(f); //结果:2 (四舍五入)
  280. var i = Math.ceil(f); //结果:2 (返回大于f的最小整数)
  281. var i = Math.floor(f); //结果:1 (返回小于f的最大整数)
  282.  
  283. 6.格式化显示数字
  284. var i = 3.14159;
  285.  
  286. //格式化为两位小数的浮点数
  287. var str = i.toFixed(2); //结果: "3.14"
  288.  
  289. //格式化为五位数字的浮点数(从左到右五位数字,不够补零)
  290. var str = i.toPrecision(5); //结果: "3.1415"
  291.  
  292. 7.X进制数字的转换
  293. //不是很懂 -.-
  294. var i = parseInt("0x1f",16);
  295. var i = parseInt(i,10);
  296. var i = parseInt("11010011",2);
  297.  
  298. 8.随机数
  299. //返回0-1之间的任意小数
  300. var rnd = Math.random();
  301. //返回0-n之间的任意整数(不包括n)
  302. var rnd = Math.floor(Math.random() * n)
  303.  
  304. 5.网上搜藏的js堆栈:
  305.  
  306. Js代码 收藏代码
  307. function stack(){
  308. if(this.top==undefined){
  309. //初始化堆栈的顶部指针和数据存放域
  310. this.top=0;
  311. this.unit=new Array();
  312. }
  313. this.push=function(pushvalue){
  314. //定义压入堆栈的方法
  315. this.unit[this.top]=pushvalue;
  316. this.top+=1;
  317. }
  318. this.readAllElements=function(){
  319. //定义读取所有数据的方法
  320. if(this.top==0){
  321. alert("当前栈空,无法读取数据");
  322. return("");
  323. }
  324. var count=0;
  325. var outStr="";
  326.  
  327. for(count=0;count<this.top;count++){
  328. outStr+=this.unit[count]+",";
  329. }
  330. return(outStr);
  331. }
  332. this.pop=function(){
  333. //定义弹出堆栈的方法
  334. if(this.top==0){
  335. alert("当前栈空,无法弹出数据");
  336. return("");
  337. }
  338. var popTo=this.unit[this.top-1];
  339. this.top--;
  340. return(popTo);
  341. /* 从堆栈弹出数据,顶部指针减一,不过这里没有做到资源的释放,也
  342. 就是说数据仍然存在于this.unit的数组中,只不过无法访问罢了。目前
  343. 我也没想到好的办法解决。*/
  344. }
  345. }
  346.  
  347. 6.最常用的JavaScript日期函数:
  348.  
  349. Js代码 收藏代码
  350. ·日期型(Date)
  351. 1.声明
  352. var myDate = new Date(); //系统当前时间
  353. var myDate = new Date(yyyy, mm, dd, hh, mm, ss);
  354. var myDate = new Date(yyyy, mm, dd);
  355. var myDate = new Date("monthName dd, yyyy hh:mm:ss");
  356. var myDate = new Date("monthName dd, yyyy");
  357. var myDate = new Date(epochMilliseconds);
  358.  
  359. 2.获取时间的某部份
  360. var myDate = new Date();
  361. myDate.getYear(); //获取当前年份(2位)
  362. myDate.getFullYear(); //获取完整的年份(4位,1970-????)
  363. myDate.getMonth(); //获取当前月份(0-11,0代表1月)
  364. myDate.getDate(); //获取当前日(1-31)
  365. myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
  366. myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) 时间戳!!
  367. myDate.getHours(); //获取当前小时数(0-23)
  368. myDate.getMinutes(); //获取当前分钟数(0-59)
  369. myDate.getSeconds(); //获取当前秒数(0-59)
  370. myDate.getMilliseconds(); //获取当前毫秒数(0-999)
  371. myDate.toLocaleDateString(); //获取当前日期
  372. myDate.toLocaleTimeString(); //获取当前时间
  373. myDate.toLocaleString( ); //获取日期与时间
  374.  
  375. 3.计算之前或未来的时间
  376. var myDate = new Date();
  377. myDate.setDate(myDate.getDate() + 10); //当前时间加10天
  378. //类似的方法都基本相同,以set开头,具体参考第2点
  379.  
  380. 4.计算两个日期的偏移量
  381. var i = daysBetween(beginDate,endDate); //返回天数
  382. var i = beginDate.getTimezoneOffset(endDate); //返回分钟数
  383.  
  384. 5.检查有效日期
  385. //checkDate() 只允许"mm-dd-yyyy"或"mm/dd/yyyy"两种格式的日期
  386. if( checkDate("2006-01-01") ){ }
  387.  
  388. //正则表达式(自己写的检查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四种)
  389. var r = /^(\d{2}|\d{4})[\/-]\d{1,2}[\/-]\d{1,2}$/;
  390. if( r.test( myString ) ){ }
  391.  
  392. 7.最常用字符串函数API:
  393.  
  394. Js代码 收藏代码
  395. ·字符串(String)
  396. 1.声明
  397. var myString = new String("Every good boy does fine.");
  398. var myString = "Every good boy does fine.";
  399.  
  400. 2.字符串连接
  401. var myString = "Every " + "good boy " + "does fine.";
  402. var myString = "Every "; myString += "good boy does fine.";
  403.  
  404. 3.截取字符串
  405. //截取第 6 位开始的字符
  406. var myString = "Every good boy does fine.";
  407. var section = myString.substring(6); //结果: "good boy does fine."
  408.  
  409. //截取第 0 位开始至第 10 位为止的字符
  410. var myString = "Every good boy does fine.";
  411. var section = myString.substring(0,10); //结果: "Every good"
  412.  
  413. //截取从第 11 位到倒数第 6 位为止的字符
  414. var myString = "Every good boy does fine.";
  415. var section = myString.slice(11,-6); //结果: "boy does"
  416.  
  417. //从第 6 位开始截取长度为 4 的字符
  418. var myString = "Every good boy does fine.";
  419. var section = myString.substr(6,4); //结果: "good"
  420.  
  421. 4.转换大小写
  422. var myString = "Hello";
  423. var lcString = myString.toLowerCase(); //结果: "hello"
  424. var ucString = myString.toUpperCase(); //结果: "HELLO"
  425.  
  426. 5.字符串比较
  427. var aString = "Hello!";
  428. var bString = new String("Hello!");
  429. if( aString == "Hello!" ){ } //结果: true
  430. if( aString == bString ){ } //结果: true
  431. if( aString === bString ){ } //结果: false (两个对象不同,尽管它们的值相同)
  432.  
  433. 6.检索字符串
  434. var myString = "hello everybody.";
  435. // 如果检索不到会返回-1,检索到的话返回在该串中的起始位置
  436. if( myString.indexOf("every") > -1 ){ } //结果: true
  437.  
  438. 7.查找替换字符串
  439. var myString = "I is your father.";
  440. var result = myString.replace("is","am"); //结果: "I am your father."
  441.  
  442. 8.特殊字符:
  443. \b : 后退符 \t : 水平制表符
  444. \n : 换行符 \v : 垂直制表符
  445. \f : 分页符 \r : 回车符
  446. \" : 双引号 \' : 单引号
  447. \\ : 反斜杆
  448.  
  449. 9.将字符转换成Unicode编码
  450. var myString = "hello";
  451. var code = myString.charCodeAt(3); //返回"l"的Unicode编码(整型)
  452. var char = String.fromCharCode(66); //返回Unicode为66的字符
  453.  
  454. 10.将字符串转换成URL编码
  455. var myString = "hello all";
  456. var code = encodeURI(myString); //结果: "hello%20all"
  457. var str = decodeURI(code); //结果: "hello all"
  458. //相应的还有: encodeURIComponent() decodeURIComponent()
  459.  
  460. 8.数学函数:
  461.  
  462. Js代码 收藏代码
  463. ·Math对象
  464. 1. Math.abs(num) : 返回num的绝对值
  465. 2. Math.acos(num) : 返回num的反余弦值
  466. 3. Math.asin(num) : 返回num的反正弦值
  467. 4. Math.atan(num) : 返回num的反正切值
  468. 5. Math.atan2(y,x) : 返回y除以x的商的反正切值
  469. 6. Math.ceil(num) : 返回大于num的最小整数
  470. 7. Math.cos(num) : 返回num的余弦值
  471. 8. Math.exp(x) : 返回以自然数为底,x次幂的数
  472. 9. Math.floor(num) : 返回小于num的最大整数
  473. 10.Math.log(num) : 返回num的自然对数
  474. 11.Math.max(num1,num2) : 返回num1num2中较大的一个
  475. 12.Math.min(num1,num2) : 返回num1num2中较小的一个
  476. 13.Math.pow(x,y) : 返回xy次方的值
  477. 14.Math.random() : 返回01之间的一个随机数
  478. 15.Math.round(num) : 返回num四舍五入后的值
  479. 16.Math.sin(num) : 返回num的正弦值
  480. 17.Math.sqrt(num) : 返回num的平方根
  481. 18.Math.tan(num) : 返回num的正切值
  482. 19.Math.E : 自然数(2.718281828459045)
  483. 20.Math.LN2 : 2的自然对数(0.6931471805599453)
  484. 21.Math.LN10 : 10的自然对数(2.302585092994046)
  485. 22.Math.LOG2E : log 2 为底的自然数(1.4426950408889634)
  486. 23.Math.LOG10E : log 10 为底的自然数(0.4342944819032518)
  487. 24.Math.PI : π(3.141592653589793)
  488. 25.Math.SQRT1_2 : 1/2的平方根(0.7071067811865476)
  489. 26.Math.SQRT2 : 2的平方根(1.4142135623730951)
  490.  
  491. 9.浏览器特征函数:
  492.  
  493. Js代码 收藏代码
  494. 1.浏览器名称
  495. //IE : "Microsoft Internet Explorer"
  496. //NS : "Netscape"
  497. var browserName = navigator.appName;
  498.  
  499. 2.浏览器版本
  500. bar browserVersion = navigator.appVersion;
  501.  
  502. 3.客户端操作系统
  503. var isWin = ( navigator.userAgent.indexOf("Win") != -1 );
  504. var isMac = ( navigator.userAgent.indexOf("Mac") != -1 );
  505. var isUnix = ( navigator.userAgent.indexOf("X11") != -1 );
  506.  
  507. 4.判断是否支持某对象,方法,属性
  508. //当一个对象,方法,属性未定义时会返回undefined或null等,这些特殊值都是false
  509. if( document.images ){ }
  510. if( document.getElementById ){ }
  511.  
  512. 5.检查浏览器当前语言
  513. if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); }
  514.  
  515. 6.检查浏览器是否支持Cookies
  516. if( navigator.cookieEnabled ){ }
  517.  
  518. 10.JavaScript面向对象的方法实现继承:call方法
  519.  
  520. Js代码 收藏代码
  521. // 动物类 animal
  522. function animal(bSex){
  523. this.sex = bSex
  524. this.getSex = function(){
  525. return this.sex
  526. }
  527. }
  528. // 类静态变量 (如果你不修改它的话~~)
  529. animal.SEX_G = new Object(); // 雌性
  530. animal.SEX_B = new Object(); // 雄性
  531. // 动物子类 鸟
  532. function bird(bSex){
  533. animal.call(this, bSex);
  534. this.fly = function(iSpeed){
  535. alert("飞行时速高达 " + iSpeed);
  536. }
  537. }
  538. // 动物子类 鱼
  539. function fish(bSex){
  540. animal.call(this, bSex);
  541. this.swim = function(iSpeed){
  542. alert("游动时速高达 " + iSpeed)
  543. }
  544. }
  545. // 鱼 鸟 杂交品种。。。
  546. function crossBF(bSex){
  547. bird.call(this, bSex);
  548. fish.call(this, bSex);
  549. }
  550. var oPet = new crossBF(animal.SEX_G); // 雌性 鱼鸟
  551. alert(oPet.getSex() == animal.SEX_G ? "雌性" : "雄性");
  552. oPet.fly(124)
  553. oPet.swim(254)
  554.  
  555. 11.用面向对象的编程方式写JavaScript:
  556.  
  557. Js代码 收藏代码
  558. MyTool = new function(){
  559. /**
  560. * 返回非空字符串,如果有默认值就返回默认字符串.
  561. */
  562. this.notNull = function(str,defaultStr){
  563. if(typeof(str)=="undefined"||str==null||str==''){
  564. if(defaultStr)
  565. return defaultStr;
  566. else
  567. return '';
  568. }
  569. else{
  570. return str;
  571. }
  572. }
  573. }
  574.  
  575. rootId = MyTool.notNull(rootId,'001000');
  576.  
  577. 12.常用的js方法,包括表单校验的一些方法,下拉菜单常用的方法等等:
  578.  
  579. Js代码 收藏代码
  580. /**
  581. * 对JSON对象转换为字符串.
  582. * @param {json对象} json
  583. * @return {json字符串}
  584. */
  585. function jsonObj2Str(json) {
  586. var str = "{";
  587. for (prop in json) {
  588. str += prop + ":" + json[prop] + ",";
  589. }
  590. str = str.substr(0, str.length - 1);
  591. str += "}";
  592. return str;
  593. }
  594.  
  595. /**
  596. * 将json字符串转换为json对象.
  597. * @param {json字符串} jsonstr
  598. * @return {json对象}
  599. */
  600. function jsonStr2Obj(jsonstr) {
  601. return eval("("+jsonstr+")");
  602. }
  603.  
  604. /**
  605. * 得到一个元素的left坐标值.
  606. * @param {dom对象} obj
  607. * @return {位置值}
  608. */
  609. function getLeft(obj){
  610. var offset=e.offsetLeft;
  611. if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
  612. return offset;
  613. }
  614.  
  615. /**
  616. * 得到一个元素的绝对位置的top坐标值.
  617. * @param {dom对象} obj
  618. * @return {位置值}
  619. */
  620. function getTop(obj){
  621. var offset=e.offsetTop;
  622. if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
  623. return offset;
  624. }
  625.  
  626. /**
  627. * 删除一个字符串的左右空格.
  628. * @param {原始字符串} str
  629. * @return {删除空格之后的字符串}
  630. */
  631. function trim(str)
  632. {
  633. return str.replace(/(^\s*)|(\s*$)/g,"");
  634. }
  635.  
  636. /**
  637. * 根据id取出一个元素.
  638. * @param {元素id值} str
  639. * @return {dom对象}
  640. */
  641. function $(str) {
  642. return document.getElementById(str);
  643. }
  644.  
  645. /**
  646. * 按name获取一个对象.
  647. * @param {元素name值} str
  648. * @return {根据name返回的第一个对象}
  649. */
  650. function $byName(str) {
  651. var arr = document.getElementsByName(str);
  652. if (arr)
  653. return arr[0];
  654. else
  655. return null;
  656. }
  657.  
  658. /***************以下方法和表单验证相关*************************************************/
  659. /**
  660. * 返回非空字符串,如果有默认值就返回默认字符串.
  661. * @param {要进行转换的原字符串} str
  662. * @param {默认值} defaultStr
  663. * @return {返回结果}
  664. */
  665. function notNull(str, defaultStr) {
  666. if (typeof(str) == "undefined" || str == null || str == '') {
  667. if (defaultStr)
  668. return defaultStr;
  669. else
  670. return '';
  671. } else {
  672. return str;
  673. }
  674. }
  675.  
  676. /**
  677. * 比较两个日期大小.
  678. * @param {较小日期的文本框id} smallDate
  679. * @param {较大日期的文本框id} bigDate
  680. * @param {出错的提示信息} msg
  681. */
  682. function compareTwoDate(smallDate, bigDate, msg) {
  683. var v1 = $(smallDate).value;
  684. var v2 = $(bigDate).value;
  685. if (v1 >= v2) {
  686. alert(msg);
  687. v2.focus();
  688. return false;
  689. }
  690. return true;
  691. }
  692.  
  693. /**
  694. * 比较两个金额大小的方法.
  695. * @param {较小的金额} smallNum
  696. * @param {较大的金额} bigNum
  697. * @param {出错提示信息} msg
  698. * @return {Boolean}
  699. */
  700. function compareTwoNum(smallNum, bigNum, msg) {
  701. var v1 = $(smallNum).value;
  702. var v2 = $(bigNum).value;
  703. if (parseFloat(v1) >= parseFloat(v2)) {
  704. alert(msg);
  705. v2.focus();
  706. return false;
  707. }
  708. return true;
  709. }
  710.  
  711. /**
  712. * 检查文本框的长度是否超出指定长度.
  713. * @param {文本id} textId
  714. * @param {文本框的最大长度} len
  715. * @param {文本框描述内容} msg
  716. * @return {有错就返回false,否则返回true}
  717. */
  718. function checkLength(textId, len, msg) {
  719. obj = $(textId);
  720. str = obj.value;
  721. str = str.replace(/[^\x00-\xff]/g, "**");
  722. realLen = str.length;
  723. if (realLen > len) {
  724. alert("[" + msg + "]" + "长度最大为" + len + "位," + "请重新输入!\n注意:一个汉字占2位。");
  725. obj.focus();
  726. return false;
  727. } else
  728. return true;
  729. }
  730.  
  731. /**
  732. * 判断某个文本框不可以为空.
  733. * @param {文本框id} textId
  734. * @param {文本框描述内容} msg
  735. * @return {有错就返回false,否则返回true}
  736. */
  737. function checkIfEmpty(textId, msg) {
  738. var textObj = $(textId);
  739. var textValue = textObj.value;
  740. if (trim(textValue) == '') {
  741. alert('[' + msg + ']不得为空!');
  742. textObj.focus();
  743. return false;
  744. } else {
  745. return true;
  746. }
  747. }
  748.  
  749. /**
  750. * 判断指定文本框内容必须为邮件.
  751. * @param {文本框id} textId
  752. * @param {文本框描述} msg
  753. * @return {如果是邮件内容就返回true否则返回false}
  754. */
  755. function checkIsMail(textId, msg) {
  756. var obj = $(textId);
  757. if (!_isEmail(obj.value)) {
  758. alert('[' + msg + ']不是合法的邮件地址!');
  759. obj.focus();
  760. return false;
  761. } else
  762. return true;
  763. }
  764.  
  765. /**
  766. * 验证是不是邮件.
  767. * @param {要验证的字符串} strEmail
  768. * @return {Boolean}
  769. */
  770. function _isEmail(strEmail) {
  771. //接下来的验证是否有两个以上的‘.’号,有的话就是错的!
  772. var first = strEmail.indexOf('.');
  773. if (strEmail.indexOf('@')== -1) {
  774. return false;
  775. }
  776. var tempStr = strEmail.substring(first + 1);
  777. if (tempStr.indexOf('.') != -1) {
  778. return false;
  779. }
  780. if (strEmail
  781. .search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1) {
  782. return true;
  783. } else
  784. return false;
  785. }
  786.  
  787. /**
  788. * 判断某个文本框是否数字.
  789. * @param {文本框id} textId
  790. * @param {文本框描述内容} msg
  791. * @return {Boolean}
  792. */
  793. function checkIsNum(textId, msg) {
  794. obj = $(textId);
  795. if (isNaN(obj.value)) {
  796. alert('[' + msg + ']必须为数字。');
  797. obj.focus();
  798. return false;
  799. } else
  800. return true;
  801. }
  802.  
  803. /**
  804. * 判断某个文本框是否含有非法字符.
  805. * @param {文本框的id} textId
  806. * @param {文本框描述内容} msg
  807. * @return {有错就返回false否则返回true}
  808. */
  809. function checkIsValid(textId, msg) {
  810. obj = $(textId);
  811. if (!_isValidString(obj.value, '[' + msg + ']不得含有非法字符。')) {
  812. obj.focus();
  813. return false;
  814. }
  815. return true;
  816. }
  817.  
  818. /**
  819. * 判断是不是合法字符串.
  820. * @param {要进行判断的字符串} szStr
  821. * @param {文本描述} errMsg
  822. * @return {合法则返回true否则返回false}
  823. */
  824. function _isValidString(szStr,errMsg) {
  825. voidChar = "'\"><`~!@#$%^&\(\)()!¥……??“”‘’*";
  826. for (var i = 0; i < voidChar.length; i++) {
  827. aChar = voidChar.substring(i, i + 1);
  828. if (szStr.indexOf(aChar) > -1){
  829. alert(errMsg)
  830. return false;
  831. }
  832. }
  833. return true;
  834. }
  835.  
  836. /*************** 以下方法和下拉菜单相关*************************************************/
  837. /**
  838. * 控制下拉菜单不可以为-1(未选择情况value=-1)
  839. * @param {下拉菜单id} selectId
  840. * @param {下拉菜单描述内容} msg
  841. * @param {下拉菜单的空值对应的value,默认为-1} nullValue
  842. * @return {Boolean}
  843. */
  844. function checkChooseSelect(selectId, msg ,nullValue) {
  845. var obj = $(selectId);
  846. if (obj.value == notNull(nullValue,'-1')) {
  847. alert('[' + msg + ']必选!');
  848. obj.focus();
  849. return false;
  850. } else
  851. return true;
  852. }
  853.  
  854. /**
  855. * 得到下拉菜单的显示的文字.
  856. * @param {下拉菜单dom对象} selectObj
  857. * @return {返回下拉菜单的显示的"文本"}
  858. */
  859. function getSelectText(selectObj) {
  860. return selectObj.options[selectObj.selectedIndex].text;
  861. }
  862.  
  863. /**
  864. * 得到下拉菜单的显示的值.
  865. * @param {下拉菜单dom对象} selectObj
  866. * @return {得到下拉菜单的显示的"值"}
  867. */
  868. function getSelectValue(selectObj) {
  869. return selectObj.options[selectObj.selectedIndex].value;
  870. }
  871.  
  872. /**
  873. * 设置下拉菜单的选择状态到指定的值.
  874. * @param {下拉菜单对象} obj
  875. * @param {要选择的值} value
  876. */
  877. function setSelectValue(obj, value) {
  878. /*for (i = obj.options.length - 1; i >= 0; i--) {
  879. if (obj.options[i].value == value) {
  880. obj.options[i].selected = true;
  881. return;
  882. }
  883. }
  884. */
  885. obj.value= value;
  886. }
  887.  
  888. /**
  889. * 根据键值串的内容进行下拉菜单的动态组装
  890. * @param {要进行下拉菜单组装的dom对象} obj
  891. * @param {键值对用,和;分割,例如'1,男;2,女;3,未知'} valAndText
  892. */
  893. function setSelectContent(obj,valAndText){
  894. if(trim(valAndText)==''){
  895. alert('没有要进行组装下拉菜单的数据!');
  896. return false;
  897. }
  898. clearSelect(obj);
  899. var keyandvalues = valAndText.split(';');
  900. for(var i=0;i<keyandvalues.length;i++){
  901. var arr = keyandvalues[i].split(',');
  902. if(arr){
  903. var value =arr[0];
  904. var text =arr[1];
  905. var objOption = new Option(text,value);
  906. obj.add(objOption);
  907. }
  908. }
  909. }
  910.  
  911. /**
  912. * 清空下拉菜单里面的内容.
  913. * @param {下拉菜单对象} obj
  914. */
  915. function clearSelect(obj) {
  916. for (var i=obj.options.length; i >0; i--) {
  917. obj.remove(0);
  918. }
  919. }
  920.  
  921. /*************** 以下方法和多选框相关*************************************************/
  922. /**
  923. * 返回选中的checks的id组成的字符串,逗号隔开.
  924. * @param {checks数组} checks
  925. * @return 选择的id组成的字符串
  926. */
  927. function getCheckedIds(checks){
  928. var selectedValue = '';
  929. var len = checks.length;
  930. for(var index=0; index<len; index++) {
  931. if(checks[index].checked==true) {
  932. selectedValue += checks[index].value+",";
  933. }
  934. }
  935. if(selectedValue.length>0)
  936. return selectedValue.substring(0,selectedValue.length-1);
  937. return selectedValue;
  938. }
  939. 将上面的js保存之后,使用下面的html进行测试:
  940.  
  941. Html代码 收藏代码
  942. <HTML>
  943. <HEAD>
  944. <script language="javascript" src="aaaaa.js"></script>
  945. </HEAD>
  946. <SCRIPT LANGUAGE="JavaScript">
  947. <!--
  948. /**
  949. * 表单验证的示例js方法.
  950. */
  951. function check(){
  952. if(checkIfEmpty('a','非空校验')
  953. &&checkIsMail('b','邮箱校验')
  954. &&checkIsNum('c','数字校验')
  955. &&checkIsValid('d','合法性校验')
  956. &&compareTwoDate('e','f','小日期与大日期关系错误!')
  957. &&checkLength('g',5,'长度校验')
  958. &&checkChooseSelect('h','下拉菜单非空','-1')
  959. &&compareTwoNum('k','l','大小数目关系不正确!')){
  960. alert('校验通过!');
  961. return true;
  962. }else{
  963. return false;
  964. }
  965. }
  966.  
  967. /**
  968. * 取下拉菜单的值和文本的示例js方法.
  969. */
  970. function getSelect(){
  971. var sss = $('h');
  972. alert('下拉菜单选择的文本是:'+getSelectText(sss)+'\n'
  973. +'下拉菜单选择的值是:'+getSelectValue(sss));
  974. }
  975.  
  976. /**
  977. * 根据键值字符串设置下拉菜单的显示内容.
  978. */
  979. function setSelect(){
  980. var sss = $('i').value;
  981. setSelectContent($('h'),sss);
  982. }
  983.  
  984. /**
  985. * 返回多选框数组选择状态的id的字符串,结果以逗号隔开.
  986. */
  987. function getMulti(){
  988. alert('多选选择的id是:'+getCheckedIds(document.getElementsByName('j')));
  989. }
  990. //-->
  991. </SCRIPT>
  992. <BODY>
  993. <table>
  994. <tr>
  995. <td>
  996. 非空:
  997. <input id='a'>
  998. </td>
  999. <td>
  1000. checkIfEmpty('a','非空校验')
  1001. </td>
  1002. </tr>
  1003. <tr>
  1004. <td>
  1005. 邮箱:
  1006. <input id='b' value='323232@2323.com'>
  1007. </td>
  1008. <td>
  1009. checkIsMail('b','邮箱校验')
  1010. </td>
  1011. </tr>
  1012. <tr>
  1013. <td>
  1014. 数字:
  1015. <input id='c' value='aaaa'>
  1016. </td>
  1017. <td>
  1018. checkIsNum('c','数字校验')
  1019. </td>
  1020. </tr>
  1021. <tr>
  1022. <td>
  1023. 合法字符:
  1024. <input id='d' value='@$@$#$#!%%#'>
  1025. </td>
  1026. <td>
  1027. checkIsValid('d','合法性校验')
  1028. </td>
  1029. </tr>
  1030. <tr>
  1031. <td>
  1032. 小的日期:
  1033. <input id='e' value='2010-1-1'>
  1034. 大的日期:
  1035. <input id='f' value='2011-1-1'>
  1036. </td>
  1037. <td>
  1038. compareTwoDate('e','f','小日期与大日期关系错误!')
  1039. </td>
  1040. </tr>
  1041. <tr>
  1042. <td>
  1043. 小的数:
  1044. <input id='k' value='12.3'>
  1045. 大的数:
  1046. <input id='l' value='4564'>
  1047. </td>
  1048. <td>
  1049. compareTwoNum('k','l','大小数目关系不正确!')
  1050. </td>
  1051. </tr>
  1052. <tr>
  1053. <td>
  1054. 字符长度校验(<5):
  1055. <input id='g'>
  1056. </td>
  1057. <td>
  1058. checkLength('g',5,'长度校验')
  1059. </td>
  1060. </tr>
  1061. <tr>
  1062. <td>
  1063. 下拉菜单非空校验:
  1064. <select id='h'>
  1065. <option value='-1'>
  1066. 请选择
  1067. </option>
  1068. <option value='1'>
  1069. 立项
  1070. </option>
  1071. <option value='2'>
  1072. 可研
  1073. </option>
  1074. </select>
  1075. </td>
  1076. <td>
  1077. checkChooseSelect('h','下拉菜单非空','-1')
  1078. </td>
  1079. </tr>
  1080. <tr>
  1081. <td colspan='2'>
  1082. <button onclick='check()'>
  1083. 测试表单校验方法
  1084. </button>
  1085. </td>
  1086. </tr>
  1087. <tr>
  1088. <td>
  1089.  
  1090. <button onclick='getSelect()'>
  1091. 得到下拉菜单的值
  1092. </button>
  1093. </td>
  1094. <td>
  1095. getSelectText(sss)和getSelectValue(sss)
  1096. </td>
  1097. </tr>
  1098. <tr>
  1099. <td>
  1100. 输入下拉菜单的键值字符串(如右所示)
  1101. <input id='i' value='1,男;2,女;3,未知'>
  1102. <button onclick='setSelect()'>
  1103. 设置下拉菜单的值
  1104. </button>
  1105. </td>
  1106. <td>
  1107. setSelectContent($('h'),sss)
  1108. </td>
  1109. </tr>
  1110. <tr>
  1111. <td>
  1112.  
  1113. <input type='checkbox' name='j' value='aaa1'>
  1114. <input type='checkbox' name='j' value='aaa2'>
  1115. <input type='checkbox' name='j' value='aaa3'>
  1116. <input type='checkbox' name='j' value='aaa4'>
  1117. <button onclick='getMulti()'>
  1118. 得到多选选择的id
  1119. </button>
  1120. </td>
  1121. <td>
  1122. getCheckedIds(document.getElementsByName('j'))
  1123. </td>
  1124. </tr>
  1125. </table>
  1126. </BODY>
  1127. </HTML>

js数组,数字函数,字符串函数,表单验证,hashMap,堆栈,日期函数,call函数的更多相关文章

  1. ★★★【卡法 常用js库】: js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度

    [卡法 常用js库]: js汇合 表单验证  cookie设置  日期格式  电话手机号码  email  整数  小数  金额   检查参数长度 // +---------------------- ...

  2. JS常见操作,日期操作,字符串操作,表单验证等

    复制代码 //第一篇博文,希望大家多多支持 /***** BasePage.js 公共的 脚本文件 部分方法需引用jquery库 *****/ //#region 日期操作 //字符串转化为时间. f ...

  3. bootstrapValidator.js,最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  4. bootstrapValidator.js,最好用的bootstrap表单验证插件 简单实用方法

    实用方法 1.引入 在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件 2. 按照bootstrap的表单组件 ...

  5. 利用js编写一个简单的html表单验证,验证通过时提交数据(附源码)

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  6. 表单验证之validform.js使用方法

    一.validform有什么用? 网页上有大量的input需要你进行验证的时候,如果是弹窗的话,需要不停地判断,如果为空,弹窗.如果不是数字,弹窗. 所以要将这么多验证交给一个js去验证. 二.我现在 ...

  7. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  8. Validform表单验证总结

    近期项目里用到了表单的验证,选择了Validform_v5.3.2. 先来了解一下一些基本的参数: 通用表单验证方法:Demo: $(".demoform").Validform( ...

  9. jQuery-easyui和validate表单验证实例

    jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...

随机推荐

  1. 简明python教程五----数据结构(下)

    引用 当你创建一个对象并给它赋一个变量的时候,这个变量仅仅引用那个对象,而不是表示这个对象本身!即,变量名指向你计算机中存储那个对象的内存. print 'Simple Assignment' sho ...

  2. python并发编程之IO模型(Day38)

    一.IO模型介绍 为了更好的学习IO模型,可以先看同步,异步,阻塞,非阻塞 http://www.cnblogs.com/linhaifeng/articles/7430066.html#_label ...

  3. C# 并行 反射 去掉实体属性多余空格

          有时会遇到很多不合理的数据附件到实体后有大量空格需要处理,这里提供一个方法,通过并行反射的方式高效清理空格.   Code: //清除字符串空格 public static object ...

  4. CSS 中文字体 Unicode 编码表

    CSS 中文字体 Unicode 编码表 在 CSS 中设置字体名称,直接写中文是可以的.但是在文件编码(GB2312.UTF-8 等)不匹配时会产生乱码的错误. 为此,在 CSS 直接使用 Unic ...

  5. pycharm 常用配置

    lz提示一下,pycharm中的设置是可以导入和导出的,file>export settings可以保存当前pycharm中的设置为jar文件,重装时可以直接import settings> ...

  6. C# int32与int64的区别 附加:字符字节关系

    int32 =int int64 =long 1byte=8bit unicode 占2btye int32 占 1 btye long 占 4 btye

  7. Python数据处理实例

    使用python进行数据处理的实例(数据为某公司HR部门关于员工信息的部分摘录,kaggle上面的一次赛题) https://www.kaggle.com/c/kfru-dbm-hr-analytic ...

  8. React-Native 常用组件学习资料链接

    以下链接是自己开发RN工程时参考的一些不错的资料,给喜欢学习的朋友分享以下. React-Native组件用法详解之ListViewhttp://www.jianshu.com/p/1293bb8ac ...

  9. [Android]AndFix使用说明

    AndFix使用说明 AndFix,全称是Android hot-fix.是阿里开源的一个热补丁框架,允许APP在不重新发布版本的情况下修复线上的bug.支持Android 2.3 到 6.0,并且支 ...

  10. m2eclipse插件——添加依赖不显示搜索结果

    使用Eclipse,安装m2eclipse插件之后,选中Maven项目的pom文件,添加依赖,点击“Add Dependency”的时候,输入要检索的jar包名称,search result却一直为空 ...