`
阅读更多
注释:来自http://www.csssea.com/?p=771#more-771

收集了一点JS基础的知识,主要知识点:js数组,数字函数,字符串函数,表单验证,hashMap,堆栈,日期函数,call函数,正则表达式 call(),apply(),callee,caller,cookie方法,setInterval(),clearInterval(),setTimeout() ,clearTimeout() 等。
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()方法的对象 , 效果就完全不一样了 **/

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的数组中,只不过无法访问罢了。目前
 我也没想到好的办法解决。*/
 }
 
}
 
[php]
 
6.最常用的JavaScript日期函数:
 
代码如下:
 
[php]
 
·日期型(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;
}

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>

13.关于cookie的函数
代码如下:
/**
 * cookie操作工具.
 * 使用方法:保存值:CookieTool('name','1',{expires: 7})  //表示保存一个cookie值为1,键值为name,失效时间7天以后
 *         取值:CookieTool('name')                    //返回1
 * @param {} name
 * @param {} value
 * @param {} options
 * @return {}
 */
CookieTool = function(name, value, options) {
 if (typeof value != 'undefined') {
 options = options || {};
 if (value === null) {
 value = '';
 options.expires = -1;
 }
 var expires = '';
 if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
 var date;
 if (typeof options.expires == 'number') {
 date = new Date();
 date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
 } else {
 date = options.expires;
 }
 expires = '; expires=' + date.toUTCString();
 }
 var path = options.path ? '; path=' + (options.path) : '';
 var domain = options.domain ? '; domain=' + (options.domain) : '';
 var secure = options.secure ? '; secure' : '';
 document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
 } else {
 var cookieValue = null;
 if (document.cookie && document.cookie != '') {
 var cookies = document.cookie.split(';');
 for (var i = 0; i < cookies.length; i++) {
 var cookie = trim(cookies[i]);
 if (cookie.substring(0, name.length + 1) == (name + '=')) {
 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
 break;
 }
 }
 }
 return cookieValue;
 }
};


14.关于一个可以查看js对象的js函数,很酷的方法:
代码如下:
/**
 * 用来查看一个对象的属性
 */
function debugObjectInfo(obj){
 traceObject(obj);
 
 function traceObject(obj){
 var str = '';
 if(obj.tagName&&obj.name&&obj.id)
 str="<table border='1' width='100%'><tr><td colspan='2' bgcolor='#ffff99'>traceObject   tag: &lt;"+obj.tagName+"&gt;   name = \""+obj.name+"\"   id = \""+obj.id+"\" </td></tr>";
 else{
 str="<table border='1' width='100%'>";
 }
 var key=[];
 for(var i in obj){
 key.push(i);
 }
 key.sort();
 for(var i=0;i<key.length;i++){
 var v= new String(obj[key[i]]).replace(/</g,"&lt;").replace(/>/g,"&gt;");
 str+="<tr><td valign='top'>"+key[i]+"</td><td>"+v+"</td></tr>";
 }
 str=str+"</table>";
 writeMsg(str);
 }
 function trace(v){
 var str="<table border='1' width='100%'><tr><td bgcolor='#ffff99'>";
 str+=String(v).replace(/</g,"&lt;").replace(/>/g,"&gt;");
 str+="</td></tr></table>";
 writeMsg(str);
 }
 function writeMsg(s){
 traceWin=window.open("","traceWindow","height=600, width=800,scrollbars=yes");
 traceWin.document.write(s);
 }
}

15.正则表达式:
g 代表全局匹配
m 代表可以进行多行匹配
i 代表不区分大小写匹配
^ 匹配输入字符串的开始位置
$ 匹配输入字符串的结束位置
* 匹配前面的子表达式零次或多次. 等价于{0,}
+ 匹配前面的子表达式一次或多次. 等价于{1,}
? 匹配前面的子表达式零次或一次. 等价于[0,1} , 当该字符跟在任何一个其他限制符(*, +, ?, {n}, {n,}, {n,m}) 后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串 "oooo",'o+?' 将匹配单个 "o",而 'o+' 将匹配所有 'o'。
\d 匹配一个数字字符. 等价于 [0-9]
\D 匹配一个非数字符. 等价于 [^0-9]
\w  ,等价于 “[A-Za-z0-9_]”
\W 匹配任何非单词字符,等价于 “[^A-Za-z0-9]”
\s 匹配任何空白字符, 包括空格 制表符 换页符 等等. 等价于[\f\n\r\t\v]
\S 匹配任何非空白字符. 等价于 [^\f\r\n\t\v]
\b 匹配一个单词边界,也就是指单词和空格间的位置。
\B 匹配非单词边界。

正则表达式常用js方法:
/**
 * 在源字符串中查找满足要求的子串.
 * @return {}
 */
function MatchDemo() {
 var r, re; // 声明变量。
 var s = "The rain in Spain falls mainly in the plain";
 re = new RegExp("ain", "g"); // 创建正则表达式对象。
 r = s.match(re); // 在字符串 s 中查找匹配。
 return (r);
}
 /**
 * 返回在源字符串中的满足正则表达式的全部的字串和位置信息.
 */
function RegExpTest() {
 var ver = Number(ScriptEngineMajorVersion() + "."
 + ScriptEngineMinorVersion())
 var ans = '';
 if (ver >= 5.5) { // 测试 JScript 的版本。
 var src = "The rain in Spain falls mainly in the plain.";
 var re = /\w+/g; // 创建正则表达式模式。
 var arr;
 while ((arr = re.exec(src)) != null)
 ans += arr.index + "-" + arr.lastIndex + arr + "\t";
 } else {
 ans = "请使用 JScript 的更新版本";
 }
 return ans;
}
 /**
 * 对源字符串进行正则表达式检查,看是不是符合正则表达式.
 */
function TestDemo() {
 var s1;
 var source = "abcdefg";
 var regex = /\w+/g; // 创建正则表达式模式。
 if (regex.test(source))
 s1 = " contains ";
 else
 s1 = " does not contain ";
 return ("'" + source + "'" + s1 + "'" + regex.source + "'");
}
 /**
 * 在源字符串中查找正则表达式的字串.
 * @return {}
 */
function SearchDemo() {
 var r, re;
 var s = "The rain in Spain falls mainly in the plain.";
 re = /falls/i;
 r = s.search(re);
 return (r);
}


16.call()方法
代码如下:

call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

简单的例子:
function add(a,b)
{
 alert(a+b);
}
function sub(a,b)
{
 alert(a-b);
}
 add.call(sub,3,1);
//这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);


稍微复杂的例子:
function Class1()
{
 this.name = "class1";
 this.showNam = function()
 {
 alert(this.name);
 }
}
 function Class2()
{
 this.name = "class2";
}
 var c1 = new Class1();
var c2 = new Class2();
 c1.showNam.call(c2);
//call 的意思是把 c1 的方法放到c2上执行,原来c2是没有showNam() 方法,现在是把c1 的showNam()方法放到 c2 上来执行,所以this.name 应该是 class2,执行的结果就是 :alert("class2");
 
[php]
多重继承的例子:
 
[php]
 
function Class10()
{
 this.showSub = function(a,b)
 {
 alert(a-b);
 }
}
 function Class11()
{
 this.showAdd = function(a,b)
 {
 alert(a+b);
 }
}
 function Class2()
{
 Class10.call(this);
 Class11.call(this);
 
}

17.apply函数:
Function.apply(obj,args)方法能接收两个参数
obj:这个对象将代替Function类里this对象
args:这个是数组,它将作为参数传给Function(args–>arguments)

实现类似call的继承的效果:
function Person(name,age){   //定义一个类,人类
 this.name=name;     //名字
 this.age=age;       //年龄
 this.sayhello=function(){alert("hello")};
}
function Print(){            //显示类的属性
 this.funcName="Print";
 this.show=function(){
 var msg=[];
 for(var key in this){
 if(typeof(this[key])!="function"){
 msg.push([key,":",this[key]].join(""));
 }
 }
 alert(msg.join(" "));
 };
}
function Student(name,age,grade,school){    //学生类
 Person.apply(this,arguments);
 Print.apply(this,arguments);
 this.grade=grade;                //年级
 this.school=school;                 //学校
}
var p1=new Person("jake",10);
p1.sayhello();
var s1=new Student("tom",13,6,"清华小学");
s1.show();
s1.sayhello();
alert(s1.funcName);

使用apply进行数组参数的函数的优化,很酷的方法:
Math.max后面可以接任意个参数,最后返回所有参数中的最大值。
 比如
alert(Math.max(5,8))   //8
alert(Math.max(5,7,9,3,1,6))   //9
 但是在很多情况下,我们需要找出数组中最大的元素。
var arr=[5,7,9,1]
alert(Math.max(arr))    // 这样却是不行的。一定要这样写
 function getMax(arr){
 var arrLen=arr.length;
 for(var i=0,ret=arr[0];i<arrLen;i++){
 ret=Math.max(ret,arr[i]);
 }
 return ret;
}
 用 apply呢,看代码:
function getMax2(arr){
 return Math.max.apply(null,arr);
 
}

下面是另外一个例子,用来合并两个数组:
再比如数组的push方法。
var arr1=[1,3,4];
var arr2=[3,4,5];
如果我们要把 arr2展开,然后一个一个追加到arr1中去,最后让arr1=[1,3,4,3,4,5]
arr1.push(arr2)显然是不行的。 因为这样做会得到[1,3,4,[3,4,5]]
 我们只能用一个循环去一个一个的push(当然也可以用arr1.concat(arr2),但是concat方法并不改变arr1本身)
var arrLen=arr2.length
for(var i=0;i<arrLen;i++){
 arr1.push(arr2[i]);
 
}

使用apply的话:
Array.prototype.push.apply(arr1,arr2)

//js默认弹出对话框
window.alert(); 
window.confirm(); 
window.prompt(); 
window.createPopup(); 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

Global site tag (gtag.js) - Google Analytics