`
zqding
  • 浏览: 93242 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

javascript使用大杂烩

阅读更多

javascript使用大杂烩

1.Javascript 数组API

//定义数组  

var pageIds = new Array();  

pageIds.push('A');  

//数组长度  

pageIds.length;  

//shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined   

var a = [1,2,3,4,5];   

var b = a.shift(); //a:[2,3,4,5]   b:1   

//unshift:将参数添加到原数组开头,并返回数组的长度   

var a = [1,2,3,4,5];   

var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5]   b:7   

//注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7,所以这个方法的返回值不可靠,需要用返回值时可用splice代替本方法来使用。   

//pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined   

var a = [1,2,3,4,5];   

var b = a.pop(); //a:[1,2,3,4]   b:5   

//push:将参数添加到原数组末尾,并返回数组的长度   

var a = [1,2,3,4,5];   

var b = a.push(6,7); //a:[1,2,3,4,5,6,7]   b:7   

//concat:返回一个新数组,是将参数添加到原数组中构成的   

var a = [1,2,3,4,5];   

var b = a.concat(6,7); //a:[1,2,3,4,5]   b:[1,2,3,4,5,6,7]   

//splice(start,deleteCount,val1,val2,):从start位置开始删除deleteCount项,并从该位置起插入val1,val2,   

var a = [1,2,3,4,5];   

var b = a.splice(2,2,7,8,9); //a:[1,2,7,8,9,5]   b:[3,4]   

var b = a.splice(0,1); //同shift   

a.splice(0,0,-2,-1); var b = a.length; //同unshift   

var b = a.splice(a.length-1,1); //同pop   

a.splice(a.length,0,6,7); var b = a.length; //同push   

//reverse:将数组反序   

var a = [1,2,3,4,5];   

var b = a.reverse(); //a:[5,4,3,2,1]   b:[5,4,3,2,1]   

//sort(orderfunction):按指定的参数对数组进行排序   

var a = [1,2,3,4,5];   

var b = a.sort(); //a:[1,2,3,4,5]   b:[1,2,3,4,5]   

//slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组   

var a = [1,2,3,4,5];   

var b = a.slice(2,5); //a:[1,2,3,4,5]   b:[3,4,5]   

//join(separator):将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符   

var a = [1,2,3,4,5];   

var b = a.join("|"); //a:[1,2,3,4,5]   b:"1|2|3|4|5"   

2.Dom最常用的API

document方法:   

getElementById(id) Node 返回指定结点的引用   

getElementsByTagName(name) NodeList 返回文档中所有匹配的元素的集合   

createElement(name) Node Node   

createTextNode(text) Node 创建一个纯文本结点   

ownerDocument Document 指向这个节点所属的文档   

documentElement Node 返回html节点   

document.body Node 返回body节点   

element方法:   

etAttribute(attributeName) String 返回指定属性的值   

etAttribute(attributeName,value) String 给属性赋值   

removeAttribute(attributeName) String 移除指定属性和它的值   

getElementsByTagName(name) NodeList 返回结点内所有匹配的元素的集合   

node方法:   

appendChild(child) Node 给指定结点添加一个新的子结点   

removeChild(child) Node 移除指定结点的子结点   

replaceChild(newChild,oldChild) Node 替换指定结点的子结点   

insertBefore(newChild,refChild) Node 在同一层级的结点前面插入新结点   

hasChildNodes() Boolean 如果结点有子结点则返回true   

node属性:   

nodeName String 以字符串的格式存放结点的名称   

nodeType String 以整型数据格式存放结点的类型   

nodeValue String 以可用的格式存放结点的值   

parentNode Node 指向结点的父结点的引用   

childNodes NodeList 指向子结点的引用的集合   

firstChild Node 指向子结点结合中的第一个子结点的引用   

lastChild Node 指向子结点结合中的最后一个子结点的引用   

previousSibling Node 指向前一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null   

nextSibling Node 指向后一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null 

3.常用的数字函数

·数字型(Number)   

  1.声明   

    var i = 1;   

    var i = new Number(1);   

  2.字符串与数字间的转换   

    var i = 1;   

    var str = i.toString();     //结果: "1"   

    var str = new String(i);    //结果: "1"   

    i = parseInt(str);          //结果: 1   

   i = parseFloat(str);        //结果: 1   

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

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

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

   if( typeof i == "number" ){ }   //true   

   //某些方法(如:parseInt,parseFloat)会返回一个特殊的值NaN(Not a Number)   

    //请注意第2点中的[注意],此方法不完全适合判断一个字符串是否是数字型!!   

   i = parseInt(str);   

    if( isNaN(i) ){ }   

  4.数字型比较   

    //此知识与[字符串比较]相同   

  5.小数转整数   

    var f = 1.5;   

    var i = Math.round(f);  //结果:2 (四舍五入)   

    var i = Math.ceil(f);   //结果:2 (返回大于f的最小整数)   

   var i = Math.floor(f);  //结果:1 (返回小于f的最大整数)   

  6.格式化显示数字   

    var i = 3.14159;   

    //格式化为两位小数的浮点数   

    var str = i.toFixed(2);     //结果: "3.14"   

    //格式化为五位数字的浮点数(从左到右五位数字,不够补零)   

    var str = i.toPrecision(5); //结果: "3.1415"   

  7.X进制数字的转换   

    //不是很懂 -.-   

    var i = parseInt("0x1f",16);   

    var i = parseInt(i,10);   

  var i = parseInt("11010011",2);   

8.随机数   

  //返回0-1之间的任意小数   

   var rnd = Math.random();   

  //返回0-n之间的任意整数(不包括n)      

  var rnd = Math.floor(Math.random() * n) 

 

4.网上收藏的javascript堆栈

function stack(){  

      if(this.top==undefined){  

      //初始化堆栈的顶部指针和数据存放域  

            this.top=0;  

            this.unit=new Array();  

      }  

      this.push=function(pushvalue){  

      //定义压入堆栈的方法              

            this.unit[this.top]=pushvalue;  

            this.top+=1;              

     }  

     this.readAllElements=function(){  

     //定义读取所有数据的方法  

           if(this.top==0){  

                 alert("当前栈空,无法读取数据");  

                 return("");  

           }  

           var count=0;  

           var outStr="";  

           for(count=0;count<this.top;count++){  

                  outStr+=this.unit[count]+",";  

            }              

            return(outStr);  

      }  

      this.pop=function(){  

      //定义弹出堆栈的方法  

            if(this.top==0){  

                  alert("当前栈空,无法弹出数据");  

                  return("");  

           }  

            var      popTo=this.unit[this.top-1];  

            this.top--;  

            return(popTo);  

            /* 从堆栈弹出数据,顶部指针减一,不过这里没有做到资源的释放,也 

            就是说数据仍然存在于this.unit的数组中,只不过无法访问罢了。目前 

            我也没想到好的办法解决。*/  

      }  

}  

5.最常用的javascript日期函数

·日期型(Date)   

  1.声明   

    var myDate = new Date();    //系统当前时间    

    var myDate = new Date(yyyy, mm, dd, hh, mm, ss);   

    var myDate = new Date(yyyy, mm, dd);   

    var myDate = new Date("monthName dd, yyyy hh:mm:ss");   

    var myDate = new Date("monthName dd, yyyy");   

    var myDate = new Date(epochMilliseconds);   

  2.获取时间的某部份   

   var myDate = new Date();   

    myDate.getYear();       //获取当前年份(2位)   

    myDate.getFullYear();   //获取完整的年份(4位,1970-????)   

    myDate.getMonth();      //获取当前月份(0-11,0代表1月)   

    myDate.getDate();       //获取当前日(1-31)   

    myDate.getDay();        //获取当前星期X(0-6,0代表星期天)     

    myDate.getTime();       //获取当前时间(从1970.1.1开始的毫秒数)   时间戳!!  

    myDate.getHours();      //获取当前小时数(0-23)   

    myDate.getMinutes();    //获取当前分钟数(0-59)   

    myDate.getSeconds();    //获取当前秒数(0-59)   

    myDate.getMilliseconds();   //获取当前毫秒数(0-999)   

    myDate.toLocaleDateString();    //获取当前日期   

    myDate.toLocaleTimeString();    //获取当前时间   

    myDate.toLocaleString( );       //获取日期与时间   

  3.计算之前或未来的时间   

    var myDate = new Date();   

    myDate.setDate(myDate.getDate() + 10);  //当前时间加10天   

    //类似的方法都基本相同,以set开头,具体参考第2点   

  4.计算两个日期的偏移量   

    var i = daysBetween(beginDate,endDate); //返回天数   

    var i = beginDate.getTimezoneOffset(endDate); //返回分钟数   

  5.检查有效日期   

    //checkDate() 只允许"mm-dd-yyyy"或"mm/dd/yyyy"两种格式的日期   

    if( checkDate("2006-01-01") ){ }   

    //正则表达式(自己写的检查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四种)   

    var r = /^(\d{2}|\d{4})[\/-]\d{1,2}[\/-]\d{1,2}$/;   

    if( r.test( myString ) ){ }  

6.最常用字符窜函数API

·字符串(String)   

  1.声明   

    var myString = new String("Every good boy does fine.");   

    var myString = "Every good boy does fine.";   

  2.字符串连接   

    var myString = "Every " + "good boy " + "does fine.";   

    var myString = "Every ";  myString += "good boy does fine.";   

  3.截取字符串   

   //截取第 6 位开始的字符   

   var myString = "Every good boy does fine.";   

   var section = myString.substring(6);    //结果: "good boy does fine."   

   //截取第 0 位开始至第 10 位为止的字符   

   var myString = "Every good boy does fine.";   

   var section = myString.substring(0,10); //结果: "Every good"   

   //截取从第 11 位到倒数第 6 位为止的字符   

    var myString = "Every good boy does fine.";   

   var section = myString.slice(11,-6);    //结果: "boy does"   

    //从第 6 位开始截取长度为 4 的字符   

    var myString = "Every good boy does fine.";   

    var section = myString.substr(6,4);     //结果: "good"   

  4.转换大小写   

    var myString = "Hello";   

    var lcString = myString.toLowerCase();  //结果: "hello"   

    var ucString = myString.toUpperCase();  //结果: "HELLO"   

  5.字符串比较   

    var aString = "Hello!";   

    var bString = new String("Hello!");   

    if( aString == "Hello!" ){ }    //结果: true   

    if( aString == bString ){ }     //结果: true   

    if( aString === bString ){ }    //结果: false (两个对象不同,尽管它们的值相同)   

  6.检索字符串   

    var myString = "hello everybody.";   

   // 如果检索不到会返回-1,检索到的话返回在该串中的起始位置   

    if( myString.indexOf("every") > -1 ){ } //结果: true   

  7.查找替换字符串   

    var myString = "I is your father.";   

    var result = myString.replace("is","am");   //结果: "I am your father."   

  8.特殊字符:   

    \b : 后退符         \t : 水平制表符   

    \n : 换行符         \v : 垂直制表符   

   \f : 分页符         \r : 回车符   

    \" : 双引号         \' : 单引号   

    \\ : 反斜杆   

  9.将字符转换成Unicode编码   

    var myString = "hello";   

    var code = myString.charCodeAt(3);  //返回"l"的Unicode编码(整型)   

    var char = String.fromCharCode(66); //返回Unicode为66的字符   

  10.将字符串转换成URL编码   

   var myString = "hello all";   

    var code = encodeURI(myString);     //结果: "hello%20all"   

    var str = decodeURI(code);          //结果: "hello all"   

    //相应的还有:  encodeURIComponent()  decodeURIComponent() 

7.数字函数

·Math对象   

  1. Math.abs(num) : 返回num的绝对值   

  2. Math.acos(num) : 返回num的反余弦值   

  3. Math.asin(num) : 返回num的反正弦值   

  4. Math.atan(num) : 返回num的反正切值   

  5. Math.atan2(y,x) : 返回y除以x的商的反正切值   

  6. Math.ceil(num) : 返回大于num的最小整数   

  7. Math.cos(num) : 返回num的余弦值   

  8. Math.exp(x) : 返回以自然数为底,x次幂的数   

  9. Math.floor(num) : 返回小于num的最大整数   

 10.Math.log(num) : 返回num的自然对数   

 11.Math.max(num1,num2) : 返回num1和num2中较大的一个   

 12.Math.min(num1,num2) : 返回num1和num2中较小的一个   

 13.Math.pow(x,y) : 返回x的y次方的值   

 14.Math.random() : 返回0到1之间的一个随机数   

 15.Math.round(num) : 返回num四舍五入后的值   

 16.Math.sin(num) : 返回num的正弦值   

 17.Math.sqrt(num) : 返回num的平方根   

 18.Math.tan(num) : 返回num的正切值   

  19.Math.E : 自然数(2.718281828459045)   

 20.Math.LN2 : 2的自然对数(0.6931471805599453)   

  21.Math.LN10 : 10的自然对数(2.302585092994046)   

  22.Math.LOG2E : log 2 为底的自然数(1.4426950408889634)   

  23.Math.LOG10E : log 10 为底的自然数(0.4342944819032518)   

  24.Math.PI : π(3.141592653589793)   

  25.Math.SQRT1_2 : 1/2的平方根(0.7071067811865476)   

  26.Math.SQRT2 : 2的平方根(1.4142135623730951)

8.浏览器特征函数

1.浏览器名称   

   //IE : "Microsoft Internet Explorer"   

   //NS : "Netscape"   

   var browserName = navigator.appName;   

 2.浏览器版本   

   bar browserVersion = navigator.appVersion;   

 3.客户端操作系统   

   var isWin = ( navigator.userAgent.indexOf("Win") != -1 );   

  var isMac = ( navigator.userAgent.indexOf("Mac") != -1 );   

  var isUnix = ( navigator.userAgent.indexOf("X11") != -1 );   

4.判断是否支持某对象,方法,属性   

  //当一个对象,方法,属性未定义时会返回undefined或null等,这些特殊值都是false   

  if( document.images ){ }   

  if( document.getElementById ){ }   

5.检查浏览器当前语言   

   if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); }   

 6.检查浏览器是否支持Cookies   

   if( navigator.cookieEnabled ){ } 

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

// 动物类 animal  

function animal(bSex){  

    this.sex = bSex  

    this.getSex = function(){  

        return this.sex  

    }  

}  

// 类静态变量 (如果你不修改它的话~~)  

animal.SEX_G = new Object();    // 雌性  

animal.SEX_B = new Object();    // 雄性  

// 动物子类 鸟  

unction bird(bSex){  

   animal.call(this, bSex);  

   this.fly = function(iSpeed){  

       alert("飞行时速高达 " + iSpeed);  

   }  

}  

// 动物子类 鱼  

unction fish(bSex){  

    animal.call(this, bSex);  

   this.swim = function(iSpeed){  

        alert("游动时速高达 " + iSpeed)  

    }  

}  

// 鱼 鸟 杂交品种。。。  

function crossBF(bSex){  

    bird.call(this, bSex);  

    fish.call(this, bSex);  

}  

var oPet = new crossBF(animal.SEX_G);    // 雌性 鱼鸟  

   alert(oPet.getSex() == animal.SEX_G ? "雌性" : "雄性");  

    oPet.fly(124)  

    oPet.swim(254)  

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

MyTool = new function(){  

        /** 

         * 返回非空字符串,如果有默认值就返回默认字符串. 

         */  

        this.notNull = function(str,defaultStr){  

                if(typeof(str)=="undefined"||str==null||str==''){  

                        if(defaultStr)  

                                return defaultStr;  

                        else  

                                return '';  

               }  

                else{  

                        return str;  

                }  

        }  

}  

rootId = MyTool.notNull(rootId,'001000');    

11.常用的js方法,包括表单校验的一些方法,下拉菜单常用的方法等等:

/** 

 * 对JSON对象转换为字符串. 

 * @param {json对象} json 

 * @return {json字符串} 

 */  

function jsonObj2Str(json) {  

        var str = "{";  

        for (prop in json) {  

                str += prop + ":" + json[prop] + ",";  

        }  

       str = str.substr(0, str.length - 1);  

        str += "}";   

        return str;  

}  

/** 

 * 将json字符串转换为json对象. 

 * @param {json字符串} jsonstr 

 * @return {json对象} 

 */  

function jsonStr2Obj(jsonstr) {  

         return eval("("+jsonstr+")");  

}  

/** 

 * 得到一个元素的left坐标值. 

 * @param {dom对象} obj 

 * @return {位置值} 

 */  

function getLeft(obj){   

        var offset=e.offsetLeft;   

        if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);   

        return offset;   

}   

/** 

 * 得到一个元素的绝对位置的top坐标值. 

 * @param {dom对象} obj 

 * @return {位置值} 

 */  

function getTop(obj){   

        var offset=e.offsetTop;   

        if(e.offsetParent!=null) offset+=getTop(e.offsetParent);   

        return offset;   

}   

/** 

 * 删除一个字符串的左右空格. 

 * @param {原始字符串} str 

 * @return {删除空格之后的字符串} 

 */  

function  trim(str)  

{    

   return  str.replace(/(^\s*)|(\s*$)/g,"");    

}  

/** 

 * 根据id取出一个元素. 

 * @param {元素id值} str 

 * @return {dom对象} 

 */  

function $(str) {  

        return document.getElementById(str);  

}  

/** 

 * 按name获取一个对象. 

 * @param {元素name值} str 

 * @return {根据name返回的第一个对象} 

 */  

function $byName(str) {  

        var arr = document.getElementsByName(str);  

        if (arr)  

                return arr[0];  

        else  

                return null;  

}  

/***************以下方法和表单验证相关*************************************************/  

/** 

 * 返回非空字符串,如果有默认值就返回默认字符串. 

 * @param {要进行转换的原字符串} str 

 * @param {默认值} defaultStr 

 * @return {返回结果} 

 */  

function notNull(str, defaultStr) {  

        if (typeof(str) == "undefined" || str == null || str == '') {  

                if (defaultStr)  

                        return defaultStr;  

                else  

                        return '';  

        } else {  

                return str;  

        }  

}    

/** 

 * 比较两个日期大小. 

 * @param {较小日期的文本框id} smallDate 

-> * @param {较大日期的文本框id} bigDate 

-> * @param {出错的提示信息} msg 

-> */  

function compareTwoDate(smallDate, bigDate, msg) {  

        var v1 = $(smallDate).value;  

        var v2 = $(bigDate).value;  

        if (v1 >= v2) {  

                alert(msg);  

                v2.focus();  

                return false;  

        }  

        return true;  

}  

/** 

 * 比较两个金额大小的方法. 

 * @param {较小的金额} smallNum 

 * @param {较大的金额} bigNum 

 * @param {出错提示信息} msg 

 * @return {Boolean} 

 */  

function compareTwoNum(smallNum, bigNum, msg) {  

        var v1 = $(smallNum).value;  

        var v2 = $(bigNum).value;   

        if (parseFloat(v1) >= parseFloat(v2)) {  

                alert(msg);  

                                v2.focus();  

                return false;  

        }  

        return true;  

}  

/** 

 * 检查文本框的长度是否超出指定长度. 

 * @param {文本id} textId 

 * @param {文本框的最大长度} len 

 * @param {文本框描述内容} msg 

 * @return {有错就返回false,否则返回true} 

 */  

function checkLength(textId, len, msg) {  

        obj = $(textId);  

       str = obj.value;  

        str = str.replace(/[^\x00-\xff]/g, "**");  

        realLen = str.length;  

        if (realLen > len) {  

                alert("[" + msg + "]" + "长度最大为" + len + "位," + "请重新输入!\n注意:一个汉字占2位。");  

                obj.focus();  

                return false;  

        } else  

                return true;  

}  

/** 

 * 判断某个文本框不可以为空. 

 * @param {文本框id} textId 

 * @param {文本框描述内容} msg 

 * @return {有错就返回false,否则返回true} 

 */  

function checkIfEmpty(textId, msg) {  

        var textObj = $(textId);  

        var textValue = textObj.value;  

       if (trim(textValue) == '') {  

                alert('[' + msg + ']不得为空!');  

                textObj.focus();  

                return false;  

        } else {  

                return true;  

        }  

}  

/** 

* 判断指定文本框内容必须为邮件. 

 * @param {文本框id} textId 

 * @param {文本框描述} msg 

 * @return {如果是邮件内容就返回true否则返回false} 

 */  

function checkIsMail(textId, msg) {  

        var obj = $(textId);  

        if (!_isEmail(obj.value)) {  

                alert('[' + msg + ']不是合法的邮件地址!');  

                obj.focus();  

               return false;  

        } else  

                return true;  

}  

/** 

 * 验证是不是邮件. 

 * @param {要验证的字符串} strEmail 

 * @return {Boolean} 

 */  

function _isEmail(strEmail) {  

        //接下来的验证是否有两个以上的‘.’号,有的话就是错的!  

       var first = strEmail.indexOf('.');    

       if (strEmail.indexOf('@')== -1) {  

               return false;  

       }  

       var tempStr = strEmail.substring(first + 1);  

        if (tempStr.indexOf('.') != -1) {  

               return false;  

        }  

       if (strEmail  

                        .search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1) {  

                return true;  

        } else  

                return false;  

}  

/** 

 * 判断某个文本框是否数字. 

 * @param {文本框id} textId 

 * @param {文本框描述内容} msg 

 * @return {Boolean} 

 */  

function checkIsNum(textId, msg) {  

        obj = $(textId);  

        if (isNaN(obj.value)) {  

                alert('[' + msg + ']必须为数字。');  

                obj.focus();  

                return false;  

        } else  

                return true;  

}  

/** 

 * 判断某个文本框是否含有非法字符. 

 * @param {文本框的id} textId 

 * @param {文本框描述内容} msg 

 * @return {有错就返回false否则返回true} 

 */  

function checkIsValid(textId, msg) {  

        obj = $(textId);  

        if (!_isValidString(obj.value, '[' + msg + ']不得含有非法字符。')) {  

                obj.focus();  

                return false;  

        }  

        return true;  

}  

/** 

 * 判断是不是合法字符串. 

 * @param {要进行判断的字符串} szStr 

 * @param {文本描述} errMsg  

 * @return {合法则返回true否则返回false} 

 */  

function _isValidString(szStr,errMsg) {  

        voidChar = "'\"><`~!@#$%^&\(\)()!¥……??“”‘’*";  

        for (var i = 0; i < voidChar.length; i++) {  

                aChar = voidChar.substring(i, i + 1);  

                if (szStr.indexOf(aChar) > -1){  

                        alert(errMsg)  

                       return false;  

                }  

        }  

        return true;  

}   

/*************** 以下方法和下拉菜单相关*************************************************/  

/** 

 * 控制下拉菜单不可以为-1(未选择情况value=-1) 

 * @param {下拉菜单id} selectId 

* @param {下拉菜单描述内容} msg 

 * @param {下拉菜单的空值对应的value,默认为-1} nullValue 

 * @return {Boolean} 

 */  

function checkChooseSelect(selectId, msg ,nullValue) {  

        var obj = $(selectId);   

        if (obj.value == notNull(nullValue,'-1')) {  

                alert('[' + msg + ']必选!');  

                obj.focus();  

                return false;  

       } else  

                return true;  

}  

/** 

 * 得到下拉菜单的显示的文字. 

 * @param {下拉菜单dom对象} selectObj 

 * @return {返回下拉菜单的显示的"文本"} 

 */  

function getSelectText(selectObj) {  

       return selectObj.options[selectObj.selectedIndex].text;  

}  

/** 

 * 得到下拉菜单的显示的值. 

 * @param {下拉菜单dom对象} selectObj 

 * @return {得到下拉菜单的显示的"值"} 

 */  

function getSelectValue(selectObj) {  

        return selectObj.options[selectObj.selectedIndex].value;  

}  

/** 

 * 设置下拉菜单的选择状态到指定的值. 

 * @param {下拉菜单对象} obj 

 * @param {要选择的值} value 

 */  

function setSelectValue(obj, value) {  

        /*for (i = obj.options.length - 1; i >= 0; i--) { 

                if (obj.options[i].value == value) { 

                       obj.options[i].selected = true; 

                        return; 

                } 

        } 

*/  

      obj.value= value;  

}  

/** 

 * 根据键值串的内容进行下拉菜单的动态组装 

* @param {要进行下拉菜单组装的dom对象} obj 

 * @param {键值对用,和;分割,例如'1,男;2,女;3,未知'} valAndText 

 */  

unction setSelectContent(obj,valAndText){  

       if(trim(valAndText)==''){  

               alert('没有要进行组装下拉菜单的数据!');  

               return false;                  

       }  

       clearSelect(obj);  

        var keyandvalues = valAndText.split(';');  

       for(var i=0;i<keyandvalues.length;i++){  

                var arr = keyandvalues[i].split(',');  

                if(arr){  

                        var value =arr[0];   

                        var text =arr[1];   

                        var objOption = new Option(text,value);  

                        obj.add(objOption);  

                }  

        }  

}  

/** 

 * 清空下拉菜单里面的内容. 

 * @param {下拉菜单对象} obj 

 */  

function clearSelect(obj) {   

    for (var i=obj.options.length; i >0; i--) {  

        obj.remove(0);   

    }          

}   

/*************** 以下方法和多选框相关*************************************************/  

/** 

 * 返回选中的checks的id组成的字符串,逗号隔开. 

 * @param {checks数组} checks 

 * @return 选择的id组成的字符串 

 */  

function getCheckedIds(checks){  

        var selectedValue = '';  

        var len = checks.length;  

       for(var index=0; index<len; index++) {  

        if(checks[index].checked==true) {  

            selectedValue +=  checks[index].value+",";   

        }  

    }  

        if(selectedValue.length>0)  

                return selectedValue.substring(0,selectedValue.length-1);  

    return selectedValue;  

}  

校验以上JS,代入html进行测试

<HTML>  

        <HEAD>  

                <script language="javascript" src="aaaaa.js"></script>  

        </HEAD>  

        <SCRIPT LANGUAGE="JavaScript">  

<!--

            /**  

            * 表单验证的示例js方法.  

            */

            function check() {

                if (checkIfEmpty('a', '非空校验')

                && checkIsMail('b', '邮箱校验')

                && checkIsNum('c', '数字校验')

                && checkIsValid('d', '合法性校验')

                && compareTwoDate('e', 'f', '小日期与大日期关系错误!')

                && checkLength('g', 5, '长度校验')

                && checkChooseSelect('h', '下拉菜单非空', '-1')

                && compareTwoNum('k', 'l', '大小数目关系不正确!')) {

                    alert('校验通过!');

                    return true;

                } else {

                    return false;

                }

            }

            /**  

            * 取下拉菜单的值和文本的示例js方法.  

            */

            function getSelect() {

                var sss = $('h');

                alert('下拉菜单选择的文本是:' + getSelectText(sss) + '\n'

                        + '下拉菜单选择的值是:' + getSelectValue(sss));

            }

            /**  

            * 根据键值字符串设置下拉菜单的显示内容.  

            */

            function setSelect() {

                var sss = $('i').value;

                setSelectContent($('h'), sss);

            }

            /**  

            * 返回多选框数组选择状态的id的字符串,结果以逗号隔开.  

            */

            function getMulti() {

                alert('多选选择的id是:' + getCheckedIds(document.getElementsByName('j')));

            }  

//-->  

</SCRIPT>  

        <BODY>  

                <table>  

                        <tr>  

                                <td>  

                                        非空:  

                                        <input id='a'>  

                                </td>  

                                <td>  

                                        checkIfEmpty('a','非空校验')  

                                </td>  

                        </tr>  

                        <tr>  

                                <td>  

                                        邮箱:  

                                        <input id='b' value='323232@2323.com'>  

                                </td>  

                                <td>  

                                        checkIsMail('b','邮箱校验')  

                                </td>  

                        </tr>  

                        <tr>  

                                <td>  

                                        数字:  

                                        <input id='c' value='aaaa'>  

                                </td>  

                                <td>  

                                        checkIsNum('c','数字校验')  

                                </td>  

                        </tr>  

                        <tr>  

                                <td>  

                                        合法字符:  

                                        <input id='d' value='@$@$#$#!%%#'>  

                                </td>  

                                <td>  

                                        checkIsValid('d','合法性校验')  

                                </td>  

                        </tr>  

                        <tr>  

                                <td>  

                                        小的日期:  

                                        <input id='e' value='2010-1-1'>  

                                        大的日期:  

                                        <input id='f' value='2011-1-1'>  

                                </td>  

                                <td>  

                                        compareTwoDate('e','f','小日期与大日期关系错误!')  

                                </td>  

                        </tr>  

                        <tr>  

                                <td>  

                                        小的数:  

                                        <input id='k' value='12.3'>  

                                        大的数:  

                                        <input id='l' value='4564'>  

                                </td>  

                                <td>  

                                        compareTwoNum('k','l','大小数目关系不正确!')  

                                </td>  

                        </tr>  

                        <tr>  

                                <td>  

                                        字符长度校验(<5):  

                                        <input id='g'>  

                                </td>  

                                <td>  

                                        checkLength('g',5,'长度校验')  

                                </td>  

                        </tr>  

                        <tr>  

                                <td>  

                                        下拉菜单非空校验:  

                                        <select id='h'>  

                                                <option value='-1'>  

                                                        请选择  

                                                </option>  

                                                <option value='1'>  

                                                        立项  

                                                </option>  

                                                <option value='2'>  

                                                        可研  

                                                </option>  

                                        </select>  

                                </td>  

                                <td>  

                                        checkChooseSelect('h','下拉菜单非空','-1')  

                                </td>  

                        </tr>  

                        <tr>  

                                <td colspan='2'>  

                                        <button onclick='check()'>  

                                                测试表单校验方法  

                                        </button>  

                                </td>  

                        </tr>  

                        <tr>  

                                <td>  

                                        <button onclick='getSelect()'>  

                                                得到下拉菜单的值  

                                        </button>  

                                </td>  

                                <td>  

                                        getSelectText(sss)和getSelectValue(sss)  

                                </td>  

                        </tr>  

                        <tr>  

                                <td>  

                                        输入下拉菜单的键值字符串(如右所示)  

                                        <input id='i' value='1,男;2,女;3,未知'>  

                                        <button onclick='setSelect()'>  

                                                设置下拉菜单的值  

                                        </button>  

                                </td>  

                                <td>  

                                        setSelectContent($('h'),sss)  

                                </td>  

                        </tr>  

                        <tr>  

                                <td>  

                                        <input type='checkbox' name='j' value='aaa1'>  

                                        <input type='checkbox' name='j' value='aaa2'>  

                                        <input type='checkbox' name='j' value='aaa3'>  

                                        <input type='checkbox' name='j' value='aaa4'>  

                                        <button onclick='getMulti()'>  

                                                得到多选选择的id  

                                        </button>  

                                </td>  

                                <td>  

                                        getCheckedIds(document.getElementsByName('j'))  

                                </td>  

                        </tr>  

                </table>  

        </BODY>  

</HTML>  

引自:http://www.jileiba.com/2012/04/27/javascript%e4%bd%bf%e7%94%a8%e5%a4%a7%e6%9d%82%e7%83%a9/
分享到:
评论

相关推荐

    javascript日历大杂烩

    javascript日历大杂烩。提供了5个js日历,说不定有你喜欢的:)

    免费的Javascript日期输入及选择控件集合

    免费的Javascript日期输入及选择控件大杂烩!

    js-boilerplate:这是我大多数基于Javascript的应用程序的基本样板

    这是我在大多数前端项目中使用的较新库的大杂烩。 目录结构和应用程序结构有些偏颇,这是我一直在各个项目之间进行调整的内容。 非常感谢您的反馈,并始终愿意改进与我合作的内容。 通过的开源库/框架 Backbone('...

    FootballData:JSON和CSV FootballSoccer数据大杂烩

    足球/足球数据供任何人使用。 找到它们或建立文件时,将它们保存在这里。 数据大部分为csv和json格式。 有关在线提供的足球数据的完整列表,请参阅 。 文件和数据集将移动,架构将更改。 如果需要快照,请分叉该...

    simplejee-面向j2ee初学者的开源项目

    * simplejee 是很多例子的大杂烩,用来演示j2ee开发的常用技术。 * 包括jsp,servlet,html,javascript,css等,以及springmvc+jdbcTemplate和 struts2+hibernate+spring, struts2+ibatis+spring 实现的登陆,...

    zoom-monitor:用于自动记录Zoom会议出席率的大杂烩

    它将基于Python-Selenium的Zoom代理,一组JavaScript函数(用于更方便地将数据从Selenium实例中拉出)和GoLang服务器捆绑在一起,以捕获来自Python Zoom代理的POST请求。 所有这些都通过一些shell脚本粘合在一起。...

    umbraco-hodgepodge:[INACTIVE]大杂烩-各种Umbraco杂物的集合

    我的建议是挑选要在自己的项目中使用的组件。 如果某个时候Umbraco社区对这种组件集合产生了需求,那么我可以考虑发布它。 关于对此集合的贡献,请随时发送任何请求请求。 我很乐意讨论。 执照 版权所有:copyright...

    hodgepodge:自2015年以来解决hapi插件依赖性

    大杂烩自2015年以来解决hapi插件依赖性 首席维护者 - 安装npm install hodgepodge用法另请参阅Hodgepodge旨在与hapi v19 +和nodejs v12 +一起使用(有关较低的支持,请参阅v3)。 该模块目前处于,这意味着它完全...

    各种语言教程.zip

    今天来个大杂烩,来个各种语言教程.zip bootstrap C语言 CZlojure PHP Codeigniter我们都叫它CI CSS教程 Electron Elixir Erlang Eslint Express web框架 Git教程 go语言 http html Immutable javascript Lodash ...

    GearX:一个使JS生活更加轻松的图书馆

    实际上,这是语法快捷方式和方法的大杂烩,根据项目的需要,这些快捷方式和方法可能对您有利。 这主要是为了我为了通用方便而制作的程序和游戏而构建的。 我知道也许有更好的方法来制作这样的库,但是它已经并且将...

    rubric:Ruby 的 D3 可视化

    该数据集是 YAML、JSON 和 CSV 文件的大杂烩,它们表示核心库中 Ruby 类之间的关系。 原始信息是从并使用多个自定义rake任务进行处理。 可视化 目前,有四种: 1.和弦布局 说明 Ruby 核心类的类-超类关系。 每个类...

    姿态解算matlab代码-GitScience:GitHub和邻近县中与科学和工程相关的存储库的精选列表

    -处理海洋数据集的有用命令的大杂烩 收音机 啪! ... ... 美国之音...-Linux的端口 ITU-R模型... 轨道力学 -在带有浏览器或Node.js引擎的任何系统上都能很好地运行。 -在太空操作和天文学中使用的许多例程。 ... ......

    开源bbs源码java-enjoy-php:小白PHP修炼秘笈

    PHP烹饪技巧之大杂烩 这是一个小白(就是我啦)学习PHP的笔记,我将把学习的过程记录下来,一来是老了可以缅怀逝去的青春,二来是温故而知新,三来则是希望能帮助更多的小白少走弯路。 群芳斗艳 很多朋友都经常问一...

    vui:继承自jQuery UI底层类,丰富了UI生命周期,轻松地自定义UI皮肤

    A和B使用不同的技巧开发UI组件,前端系统成了一个大杂烩 A或者B离职后,其所开发的组件无人能接手 新入职的C难以掌握A或者B当时的开发理念及技巧 产品部门需要“企业级”的产品交付 归根结底在于“三个一致”: 规格...

    My-Actions

    我的动作个人收集并适应Github Actions的分类签到大杂烩本项目已可以实现自动同步上游更改!使用方式右上角叉本仓库点击设置-&gt;秘密-&gt;点击绿色按钮(如无绿色按钮说明已激活。直接到第三步。)新增新的秘密并设置秘密...

    WEB设计大全

    可用性、反馈和支持 &lt;br&gt;6.3.1 可用的链接 &lt;br&gt;6.3.2 滚动 &lt;br&gt;6.3.3 理解用户的期望 &lt;br&gt;6.4 使用范围注释 &lt;br&gt;6.4.1 TITLE属性 &lt;br&gt;6.4.2 滚动信息 &lt;br&gt;6.4.3 状态条信息 &lt;br&gt;6.5...

    WEB设计大全(part2)

    可用性、反馈和支持 &lt;br&gt;6.3.1 可用的链接 &lt;br&gt;6.3.2 滚动 &lt;br&gt;6.3.3 理解用户的期望 &lt;br&gt;6.4 使用范围注释 &lt;br&gt;6.4.1 TITLE属性 &lt;br&gt;6.4.2 滚动信息 &lt;br&gt;6.4.3 状态条信息 &lt;br&gt;6.5...

    CodeBlog:Code代码博客

    Blog 开发过程中的疑率以及学习中碰到的精华整理成的博客。(如果发现问题请提交issue:beaming_face_with_smiling_eyes:)。 写在前面 文中大部分的代码都在这个rep中。...Flutter大杂烩 服务端相关

    WalkBlacksburg-Scripts:WalkBlacksburg帮助程序脚本

    safe_walk_blacksburg 支持WalkBlacksburg应用程序和数据后端的脚本大杂烩该应用旨在提高弗吉尼亚州布莱克斯堡(Blacksburg)周围步行的安全性,尤其是在夜间,通过显示提供人行道和街道照明的路线以及历史犯罪数据...

    亮剑.NET深入体验与实战精要2

    第3章 ASP.NET开发大杂烩 113 3.1 页面生命周期 114 3.1.1 独立页面生命周期事件顺序 114 3.1.2 具有Master页的生命周期事件顺序 116 3.1.3 ASP.NET生命周期详解 118 3.2 页面状态管理 120 3.2.1 Cookie 121 3.2.2...

Global site tag (gtag.js) - Google Analytics