javascript基础知识大集锦(一) 推荐收藏


Posted in Javascript onJanuary 13, 2011

next:js正则表达式,闭包,apply,callee,事件相关函数,Cookie等

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方法:
getAttribute(attributeName) String 返回指定属性的值
setAttribute(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.网上搜藏的一个map对象:
function HashMap()
{
/** Map 大小 **/
var size = 0;
/** 对象 **/
var entry = new Object();
/** 存 **/
this.put = function (key , value)
{
if(!this.containsKey(key))
{
size ++ ;
}
entry[key] = value;
}
/** 取 **/
this.get = function (key)
{
return this.containsKey(key) ? entry[key] : null;
}
/** 删除 **/
this.remove = function ( key )
{
if( this.containsKey(key) && ( delete entry[key] ) )
{
size --;
}
}
/** 是否包含 Key **/
this.containsKey = function ( key )
{
return (key in entry);
}
/** 是否包含 Value **/
this.containsValue = function ( value )
{
for(var prop in entry)
{
if(entry[prop] == value)
{
return true;
}
}
return false;
}
/** 所有 Value **/
this.values = function ()
{
var values = new Array();
for(var prop in entry)
{
values.push(entry[prop]);
}
return values;
}
/** 所有 Key **/
this.keys = function ()
{
var keys = new Array();
for(var prop in entry)
{
keys.push(prop);
}
return keys;
}
/** Map Size **/
this.size = function ()
{
return size;
}
/* 清空 */
this.clear = function ()
{
size = 0;
entry = new Object();
}
}
var map = new HashMap();
/*
map.put("A","1");
map.put("B","2");
map.put("A","5");
map.put("C","3");
map.put("A","4");
*/
/*
alert(map.containsKey("XX"));
alert(map.size());
alert(map.get("A"));
alert(map.get("XX"));
map.remove("A");
alert(map.size());
alert(map.get("A"));
*/
/** 同时也可以把对象作为 Key **/
/*
var arrayKey = new Array("1","2","3","4");
var arrayValue = new Array("A","B","C","D");
map.put(arrayKey,arrayValue);
var value = map.get(arrayKey);
for(var i = 0 ; i < value.length ; i++)
{
//alert(value[i]);
}
*/
/** 把对象做为Key时 ,自动调用了该对象的 toString() 方法 其实最终还是以String对象为Key**/
/** 如果是自定义对象 那自己得重写 toString() 方法 否则 . 就是下面的结果 **/
function MyObject(name)
{
this.name = name;
}
/**
function MyObject(name)
{
this.name = name;
this.toString = function ()
{
return this.name;
}
}
**/
var object1 = new MyObject("小张");
var object2 = new MyObject("小名");
map.put(object1,"小张");
map.put(object2,"小名");
alert(map.get(object1));
alert(map.get(object2));
map.remove("xxxxx");
alert(map.size());
/** 运行结果 小名 小名 size = 1 **/
/** 如果改成复写toString()方法的对象 , 效果就完全不一样了 **/
</script>
4.常用的数字函数:
·数字型(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.0
//注意: 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)

5.网上搜藏的js堆栈:
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的数组中,只不过无法访问罢了。目前
我也没想到好的办法解决。*/
}
}

6.最常用的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 ) ){ }

7.最常用字符串函数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()
8.数学函数:
·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)
9.浏览器特征函数:
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 ){ }
10.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(); // 雄性 
// 动物子类 鸟 
function bird(bSex){ 
animal.call(this, bSex); 
this.fly = function(iSpeed){ 
alert("飞行时速高达 " + iSpeed); 
} 
} 
// 动物子类 鱼 
function 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)

11.用面向对象的编程方式写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');

12.常用的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 
*/ 
function 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>
Javascript 相关文章推荐
JS解密入门 最终变量劫持
Jun 25 Javascript
Javascript this关键字使用分析
Oct 21 Javascript
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
js实现双色球效果
Aug 02 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 #Javascript
异步加载script的代码
Jan 12 #Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 #Javascript
js对数字的格式化使用说明
Jan 12 #Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 #Javascript
克隆javascript对象的三个方法小结
Jan 12 #Javascript
JavaScript中两种链式调用实现代码
Jan 12 #Javascript
You might like
PHP Document 代码注释规范
2009/04/13 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
jquery实现图片放大镜效果
2020/12/23 jQuery
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
python简单区块链模拟详解
2019/07/03 Python
Python实现某论坛自动签到功能
2019/08/20 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
Android interview questions
2016/12/25 面试题
瀑布模型都有哪些优缺点
2014/06/23 面试题
行政助理岗位职责
2013/11/10 职场文书
公司面试感谢信
2014/02/01 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
银行业务授权委托书
2014/10/10 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
收入证明申请书
2015/06/12 职场文书
国富论读书笔记
2015/06/26 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
基于JavaScript实现省市联动效果
2021/06/22 Javascript