Javascript 使用 "大杂烩"

转载 2013年12月02日 22:14:40

.之前一直在使用jquery,现在工作上需要摒弃jquery用原生的javascript,感觉到有点吃力,收藏下来好好看看!

Dom最常用的API

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.常用的数字函数

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   

12.      

13.    //注意: parseInt,parseFloat会把一个类似于"32G"的字符串,强制转换成32   

14.  

15.  3.判断是否为有效的数字   

16.    var i = 123;  var str = "string";   

17.    iftypeof 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.1416"   

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) 

4.网上收藏的javascript堆栈

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.}  

5.最常用的javascript日期函数

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 ) ){ }  

6.最常用字符窜函数API

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); //返回Unicode66的字符   

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() 

7.数字函数

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)   

8.浏览器特征函数

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.   //当一个对象,方法,属性未定义时会返回undefinednull,这些特殊值都是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 ){ }   

9.Javascript面向对象的方法实现继承:call方法

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)  

10.用面向对象的编程方式写javascript

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');    

11.常用的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.   * 返回选中的checksid组成的字符串,逗号隔开. 

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进行测试

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>  


javascript日历大杂烩

  • 2008年09月19日 10:23
  • 23KB
  • 下载

面向对象在javascript中的实践之大杂烩

实践一:原型中的引用类型的属性是共享的 var Person = function(){}; Person.prototype = { info:{ "name":"Tom"...

IDA Pro使用技巧及大杂烩

IDA Pro基本简介 IDA加载完程序后,3个立即可见的窗口分别为IDA-View,Named,和消息输出窗口(output Window)。 IDA图形视图会有执行流,Yes箭头默认为绿色...

项目一:各个控件使用大杂烩(说明:这不是一个真正的项目,是分开的16个工程)

一、说明:        该项目是对控件使用的集合整理,并不是真正意义上的项目,但从代码量来说差不多了。哈哈,上传的目的也是为了自己的复习、并分享给大家。这个项目使用到的知识可以看以下截图,注意,工程...

【IDA】使用技巧及大杂烩

IDA Pro基本简介  IDA加载完程序后,3个立即可见的窗口分别为IDA-View,Named,和消息输出窗口(output Window)。 IDA图...

Android软键盘(输入法)使用大杂烩:避免进入页面EditText自动弹出软键盘-2013.11.08更新

有的时候当我们进入一个有EditText控件的界面时,会自动弹出软键盘,有的时候会给我们带来不便,有人说可以让EditText不获得焦点,虽然同样可以实现,但是我们有以下两个个更好的方式去实现这个效果...

各种流程设计大杂烩

  • 2012年05月03日 11:08
  • 52.25MB
  • 下载

专业方面的资源 网址大杂烩

  • 2012年02月27日 16:43
  • 114KB
  • 下载

tensorflow学习笔记(六):TF.contrib.learn大杂烩

这一节介绍一个常用的高级API:tf.contrib_learn。这个API使配置、训练和计算变得更简单。现在依然是依照官方教程进行一些学习和补充。而且程序依然会放在github里。而且从这里开始一直...

各个控件大杂烩(项目)

  • 2015年12月01日 22:13
  • 34.71MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Javascript 使用 "大杂烩"
举报原因:
原因补充:

(最多只允许输入30个字)