欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript常用功能匯總

 更新時(shí)間:2015年07月05日 09:57:51   投稿:hebedich  
本文給大家總結(jié)了12個(gè)javascript常用的基本功能,十分的實(shí)用,這里推薦給大家,需要的朋友可以參考下

1.javascript的數(shù)組API:

//定義數(shù)組 
var pageIds = new Array(); 
pageIds.push('A'); 
數(shù)組長(zhǎng)度 
pageIds.length; 
//shift:刪除原數(shù)組第一項(xiàng),并返回刪除元素的值;如果數(shù)組為空則返回undefined 
var a = [1,2,3,4,5]; 
var b = a.shift(); //a:[2,3,4,5] b:1 
//unshift:將參數(shù)添加到原數(shù)組開(kāi)頭,并返回?cái)?shù)組的長(zhǎng)度 
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下測(cè)試返回值總為undefined,F(xiàn)F2.0下測(cè)試返回值為7,所以這個(gè)方法的返回值不可靠,需要用返回值時(shí)可用splice代替本方法來(lái)使用。 
//pop:刪除原數(shù)組最后一項(xiàng),并返回刪除元素的值;如果數(shù)組為空則返回undefined 
var a = [1,2,3,4,5]; 
var b = a.pop(); //a:[1,2,3,4] b:5 
//push:將參數(shù)添加到原數(shù)組末尾,并返回?cái)?shù)組的長(zhǎng)度 
var a = [1,2,3,4,5]; 
var b = a.push(6,7); //a:[1,2,3,4,5,6,7] b:7 
//concat:返回一個(gè)新數(shù)組,是將參數(shù)添加到原數(shù)組中構(gòu)成的 
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位置開(kāi)始刪除deleteCount項(xiàng),并從該位置起插入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:將數(shù)組反序 
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):按指定的參數(shù)對(duì)數(shù)組進(jìn)行排序 
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):返回從原數(shù)組中指定開(kāi)始下標(biāo)到結(jié)束下標(biāo)之間的項(xiàng)組成的新數(shù)組 
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):將數(shù)組的元素組起一個(gè)字符串,以separator為分隔符,省略的話(huà)則用默認(rèn)用逗號(hào)為分隔符 
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 返回指定結(jié)點(diǎn)的引用 
getElementsByTagName(name) NodeList 返回文檔中所有匹配的元素的集合 
createElement(name) Node Node 
createTextNode(text) Node 創(chuàng)建一個(gè)純文本結(jié)點(diǎn) 
ownerDocument Document 指向這個(gè)節(jié)點(diǎn)所屬的文檔 
documentElement Node 返回html節(jié)點(diǎn) 
document.body Node 返回body節(jié)點(diǎn) 
//element方法: 
getAttribute(attributeName) String 返回指定屬性的值 
setAttribute(attributeName,value) String 給屬性賦值 
removeAttribute(attributeName) String 移除指定屬性和它的值 
getElementsByTagName(name) NodeList 返回結(jié)點(diǎn)內(nèi)所有匹配的元素的集合 
//node方法: 
appendChild(child) Node 給指定結(jié)點(diǎn)添加一個(gè)新的子結(jié)點(diǎn) 
removeChild(child) Node 移除指定結(jié)點(diǎn)的子結(jié)點(diǎn) 
replaceChild(newChild,oldChild) Node 替換指定結(jié)點(diǎn)的子結(jié)點(diǎn) 
insertBefore(newChild,refChild) Node 在同一層級(jí)的結(jié)點(diǎn)前面插入新結(jié)點(diǎn) 
hasChildNodes() Boolean 如果結(jié)點(diǎn)有子結(jié)點(diǎn)則返回true 
//node屬性: 
nodeName String 以字符串的格式存放結(jié)點(diǎn)的名稱(chēng) 
nodeType String 以整型數(shù)據(jù)格式存放結(jié)點(diǎn)的類(lèi)型 
nodeValue String 以可用的格式存放結(jié)點(diǎn)的值 
parentNode Node 指向結(jié)點(diǎn)的父結(jié)點(diǎn)的引用 
childNodes NodeList 指向子結(jié)點(diǎn)的引用的集合 
firstChild Node 指向子結(jié)點(diǎn)結(jié)合中的第一個(gè)子結(jié)點(diǎn)的引用 
lastChild Node 指向子結(jié)點(diǎn)結(jié)合中的最后一個(gè)子結(jié)點(diǎn)的引用 
previousSibling Node 指向前一個(gè)兄弟節(jié)點(diǎn);如果這個(gè)節(jié)點(diǎn)就是兄弟節(jié)點(diǎn),那么該值為null 
nextSibling Node 指向后一個(gè)兄弟節(jié)點(diǎn);如果這個(gè)節(jié)點(diǎn)就是兄弟節(jié)點(diǎn),那么該值為null

3.網(wǎng)上搜藏的一個(gè)map對(duì)象:

function HashMap() 
{ 
/** Map 大小 **/ 
var size = 0; 
/** 對(duì)象 **/ 
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")); 
*/ 
/** 同時(shí)也可以把對(duì)象作為 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]); 
} 
*/ 
/** 把對(duì)象做為Key時(shí) ,自動(dòng)調(diào)用了該對(duì)象的 toString() 方法 其實(shí)最終還是以String對(duì)象為Key**/ 
/** 如果是自定義對(duì)象 那自己得重寫(xiě) toString() 方法 否則 . 就是下面的結(jié)果 **/ 
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()); 
/** 運(yùn)行結(jié)果 小名 小名 size = 1 **/ 
/** 如果改成復(fù)寫(xiě)toString()方法的對(duì)象 , 效果就完全不一樣了 **/ 

4.常用的數(shù)字函數(shù):

//·數(shù)字型(Number) 
//1.聲明 
var i = 1; 
var i = new Number(1); 
//2.字符串與數(shù)字間的轉(zhuǎn)換 
var i = 1; 
var str = i.toString(); //結(jié)果: "1" 
var str = new String(i); //結(jié)果: "1" 
i = parseInt(str); //結(jié)果: 1 
i = parseFloat(str); //結(jié)果: 1.0 
//注意: parseInt,parseFloat會(huì)把一個(gè)類(lèi)似于"32G"的字符串,強(qiáng)制轉(zhuǎn)換成32 
//3.判斷是否為有效的數(shù)字 
var i = 123; var str = "string"; 
if( typeof i == "number" ){ } //true 
//某些方法(如:parseInt,parseFloat)會(huì)返回一個(gè)特殊的值NaN(Not a Number) 
//請(qǐng)注意第2點(diǎn)中的[注意],此方法不完全適合判斷一個(gè)字符串是否是數(shù)字型!! 
i = parseInt(str); 
if( isNaN(i) ){ } 
//4.數(shù)字型比較 
//此知識(shí)與[字符串比較]相同 
///5.小數(shù)轉(zhuǎn)整數(shù) 
var f = 1.5; 
var i = Math.round(f); //結(jié)果:2 (四舍五入) 
var i = Math.ceil(f); //結(jié)果:2 (返回大于f的最小整數(shù)) 
var i = Math.floor(f); //結(jié)果:1 (返回小于f的最大整數(shù)) 
//6.格式化顯示數(shù)字 
var i = 3.14159; 
//格式化為兩位小數(shù)的浮點(diǎn)數(shù) 
var str = i.toFixed(2); //結(jié)果: "3.14" 
//格式化為五位數(shù)字的浮點(diǎn)數(shù)(從左到右五位數(shù)字,不夠補(bǔ)零) 
var str = i.toPrecision(5); //結(jié)果: "3.1415" 
//7.X進(jìn)制數(shù)字的轉(zhuǎn)換 
//不是很懂 -.- 
var i = parseInt("0x1f",16); 
var i = parseInt(i,10); 
var i = parseInt("11010011",2); 
//8.隨機(jī)數(shù) 
//返回0-1之間的任意小數(shù) 
var rnd = Math.random(); 
//返回0-n之間的任意整數(shù)(不包括n) 
var rnd = Math.floor(Math.random() * n) 

5.網(wǎng)上搜藏的js堆棧:

function stack(){ 
if(this.top==undefined){ 
//初始化堆棧的頂部指針和數(shù)據(jù)存放域 
this.top=0; 
this.unit=new Array(); 
} 
this.push=function(pushvalue){ 
//定義壓入堆棧的方法 
this.unit[this.top]=pushvalue; 
this.top+=1; 
} 
this.readAllElements=function(){ 
//定義讀取所有數(shù)據(jù)的方法 
if(this.top==0){ 
alert("當(dāng)前???,無(wú)法讀取數(shù)據(jù)"); 
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("當(dāng)前??眨瑹o(wú)法彈出數(shù)據(jù)"); 
return(""); 
} 
var popTo=this.unit[this.top-1]; 
this.top--; 
return(popTo); 
/* 從堆棧彈出數(shù)據(jù),頂部指針減一,不過(guò)這里沒(méi)有做到資源的釋放,也 
就是說(shuō)數(shù)據(jù)仍然存在于this.unit的數(shù)組中,只不過(guò)無(wú)法訪(fǎng)問(wèn)罷了。目前 
我也沒(méi)想到好的辦法解決。*/ 
} 
} 

6.最常用的JavaScript日期函數(shù):

//·日期型(Date) 
//1.聲明 
var myDate = new Date(); //系統(tǒng)當(dāng)前時(shí)間 
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.獲取時(shí)間的某部份 
var myDate = new Date(); 
myDate.getYear(); //獲取當(dāng)前年份(2位) 
myDate.getFullYear(); //獲取完整的年份(4位,1970-????) 
myDate.getMonth(); //獲取當(dāng)前月份(0-11,0代表1月) 
myDate.getDate(); //獲取當(dāng)前日(1-31) 
myDate.getDay(); //獲取當(dāng)前星期X(0-6,0代表星期天) 
myDate.getTime(); //獲取當(dāng)前時(shí)間(從1970.1.1開(kāi)始的毫秒數(shù)) 時(shí)間戳!! 
myDate.getHours(); //獲取當(dāng)前小時(shí)數(shù)(0-23) 
myDate.getMinutes(); //獲取當(dāng)前分鐘數(shù)(0-59) 
myDate.getSeconds(); //獲取當(dāng)前秒數(shù)(0-59) 
myDate.getMilliseconds(); //獲取當(dāng)前毫秒數(shù)(0-999) 
myDate.toLocaleDateString(); //獲取當(dāng)前日期 
myDate.toLocaleTimeString(); //獲取當(dāng)前時(shí)間 
myDate.toLocaleString( ); //獲取日期與時(shí)間 
//3.計(jì)算之前或未來(lái)的時(shí)間 
var myDate = new Date(); 
myDate.setDate(myDate.getDate() + 10); //當(dāng)前時(shí)間加10天 
//類(lèi)似的方法都基本相同,以set開(kāi)頭,具體參考第2點(diǎn) 
//4.計(jì)算兩個(gè)日期的偏移量 
var i = daysBetween(beginDate,endDate); //返回天數(shù) 
var i = beginDate.getTimezoneOffset(endDate); //返回分鐘數(shù) 
//5.檢查有效日期 
//checkDate() 只允許"mm-dd-yyyy"或"mm/dd/yyyy"兩種格式的日期 
if( checkDate("2006-01-01") ){ } 
//正則表達(dá)式(自己寫(xiě)的檢查 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.最常用字符串函數(shù)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 位開(kāi)始的字符 
var myString = "Every good boy does fine."; 
var section = myString.substring(6); //結(jié)果: "good boy does fine." 
//截取第 0 位開(kāi)始至第 10 位為止的字符 
var myString = "Every good boy does fine."; 
var section = myString.substring(0,10); //結(jié)果: "Every good" 
//截取從第 11 位到倒數(shù)第 6 位為止的字符 
var myString = "Every good boy does fine."; 
var section = myString.slice(11,-6); //結(jié)果: "boy does" 
//從第 6 位開(kāi)始截取長(zhǎng)度為 4 的字符 
var myString = "Every good boy does fine."; 
var section = myString.substr(6,4); //結(jié)果: "good" 
//4.轉(zhuǎn)換大小寫(xiě) 
var myString = "Hello"; 
var lcString = myString.toLowerCase(); //結(jié)果: "hello" 
var ucString = myString.toUpperCase(); //結(jié)果: "HELLO" 
//5.字符串比較 
var aString = "Hello!"; 
var bString = new String("Hello!"); 
if( aString == "Hello!" ){ } //結(jié)果: true 
if( aString == bString ){ } //結(jié)果: true 
if( aString === bString ){ } //結(jié)果: false (兩個(gè)對(duì)象不同,盡管它們的值相同) 
//6.檢索字符串 
var myString = "hello everybody."; 
// 如果檢索不到會(huì)返回-1,檢索到的話(huà)返回在該串中的起始位置 
if( myString.indexOf("every") > -1 ){ } //結(jié)果: true 
////7.查找替換字符串 
var myString = "I is your father."; 
var result = myString.replace("is","am"); //結(jié)果: "I am your father." 
//8.特殊字符: 
//\b : 后退符 \t : 水平制表符 
//\n : 換行符 \v : 垂直制表符 
//\f : 分頁(yè)符 \r : 回車(chē)符 
//\" : 雙引號(hào) \' : 單引號(hào) 
//\\ : 反斜桿 
//9.將字符轉(zhuǎn)換成Unicode編碼 
var myString = "hello"; 
var code = myString.charCodeAt(3); //返回"l"的Unicode編碼(整型) 
var char = String.fromCharCode(66); //返回Unicode為66的字符 
//10.將字符串轉(zhuǎn)換成URL編碼 
var myString = "hello all"; 
var code = encodeURI(myString); //結(jié)果: "hello%20all" 
var str = decodeURI(code); //結(jié)果: "hello all" 
//相應(yīng)的還有: encodeURIComponent() decodeURIComponent() 

8.數(shù)學(xué)函數(shù):

·Math對(duì)象 
1. Math.abs(num) : 返回num的絕對(duì)值 
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的最小整數(shù) 
7. Math.cos(num) : 返回num的余弦值 
8. Math.exp(x) : 返回以自然數(shù)為底,x次冪的數(shù) 
9. Math.floor(num) : 返回小于num的最大整數(shù) 
10.Math.log(num) : 返回num的自然對(duì)數(shù) 
11.Math.max(num1,num2) : 返回num1和num2中較大的一個(gè) 
12.Math.min(num1,num2) : 返回num1和num2中較小的一個(gè) 
13.Math.pow(x,y) : 返回x的y次方的值 
14.Math.random() : 返回0到1之間的一個(gè)隨機(jī)數(shù) 
15.Math.round(num) : 返回num四舍五入后的值 
16.Math.sin(num) : 返回num的正弦值 
17.Math.sqrt(num) : 返回num的平方根 
18.Math.tan(num) : 返回num的正切值 
19.Math.E : 自然數(shù)(2.718281828459045) 
20.Math.LN2 : 2的自然對(duì)數(shù)(0.6931471805599453) 
21.Math.LN10 : 10的自然對(duì)數(shù)(2.302585092994046) 
22.Math.LOG2E : log 2 為底的自然數(shù)(1.4426950408889634) 
23.Math.LOG10E : log 10 為底的自然數(shù)(0.4342944819032518) 
24.Math.PI : π(3.141592653589793) 
25.Math.SQRT1_2 : 1/2的平方根(0.7071067811865476) 
26.Math.SQRT2 : 2的平方根(1.4142135623730951) 

9.瀏覽器特征函數(shù):

//1.瀏覽器名稱(chēng) 
//IE : "Microsoft Internet Explorer" 
//NS : "Netscape" 
var browserName = navigator.appName; 
//2.瀏覽器版本 
var browserVersion = navigator.appVersion; 
//3.客戶(hù)端操作系統(tǒng) 
var isWin = ( navigator.userAgent.indexOf("Win") != -1 ); 
var isMac = ( navigator.userAgent.indexOf("Mac") != -1 ); 
var isUnix = ( navigator.userAgent.indexOf("X11") != -1 ); 
//4.判斷是否支持某對(duì)象,方法,屬性 
//當(dāng)一個(gè)對(duì)象,方法,屬性未定義時(shí)會(huì)返回undefined或null等,這些特殊值都是false 
if( document.images ){ } 
if( document.getElementById ){ } 
//5.檢查瀏覽器當(dāng)前語(yǔ)言 
if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); } 
//6.檢查瀏覽器是否支持Cookies 
if( navigator.cookieEnabled ){ } 

10.JavaScript面向?qū)ο蟮姆椒▽?shí)現(xiàn)繼承:call方法

// 動(dòng)物類(lèi) animal 
function animal(bSex){ 
this.sex = bSex 
this.getSex = function(){ 
return this.sex 
} 
} 
// 類(lèi)靜態(tài)變量 (如果你不修改它的話(huà)~~) 
animal.SEX_G = new Object(); // 雌性 
animal.SEX_B = new Object(); // 雄性 
// 動(dòng)物子類(lèi) 鳥(niǎo) 
function bird(bSex){ 
animal.call(this, bSex); 
this.fly = function(iSpeed){ 
alert("飛行時(shí)速高達(dá) " + iSpeed); 
} 
} 
// 動(dòng)物子類(lèi) 魚(yú) 
function fish(bSex){ 
animal.call(this, bSex); 
this.swim = function(iSpeed){ 
alert("游動(dòng)時(shí)速高達(dá) " + iSpeed) 
} 
} 
// 魚(yú) 鳥(niǎo) 雜交品種。。。 
function crossBF(bSex){ 
bird.call(this, bSex); 
fish.call(this, bSex); 
} 
var oPet = new crossBF(animal.SEX_G); // 雌性 魚(yú)鳥(niǎo) 
alert(oPet.getSex() == animal.SEX_G ? "雌性" : "雄性"); 
oPet.fly(124) 
oPet.swim(254) 

11.用面向?qū)ο蟮木幊谭绞綄?xiě)JavaScript:

MyTool = new function(){ 
/** 
* 返回非空字符串,如果有默認(rèn)值就返回默認(rèn)字符串. 
*/ 
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方法,包括表單校驗(yàn)的一些方法,下拉菜單常用的方法等等:

/** 
* 對(duì)JSON對(duì)象轉(zhuǎn)換為字符串. 
* @param {json對(duì)象} 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字符串轉(zhuǎn)換為json對(duì)象. 
* @param {json字符串} jsonstr 
* @return {json對(duì)象} 
*/ 
function jsonStr2Obj(jsonstr) { 
return eval("("+jsonstr+")"); 
} 
/** 
* 得到一個(gè)元素的left坐標(biāo)值. 
* @param {dom對(duì)象} obj 
* @return {位置值} 
*/ 
function getLeft(obj){ 
var offset=e.offsetLeft; 
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); 
return offset; 
} 
/** 
* 得到一個(gè)元素的絕對(duì)位置的top坐標(biāo)值. 
* @param {dom對(duì)象} obj 
* @return {位置值} 
*/ 
function getTop(obj){ 
var offset=e.offsetTop; 
if(e.offsetParent!=null) offset+=getTop(e.offsetParent); 
return offset; 
} 
/** 
* 刪除一個(gè)字符串的左右空格. 
* @param {原始字符串} str 
* @return {刪除空格之后的字符串} 
*/ 
function trim(str) 
{ 
return str.replace(/(^\s*)|(\s*$)/g,""); 
} 
/** 
* 根據(jù)id取出一個(gè)元素. 
* @param {元素id值} str 
* @return {dom對(duì)象} 
*/ 
function $(str) { 
return document.getElementById(str); 
} 
/** 
* 按name獲取一個(gè)對(duì)象. 
* @param {元素name值} str 
* @return {根據(jù)name返回的第一個(gè)對(duì)象} 
*/ 
function $byName(str) { 
var arr = document.getElementsByName(str); 
if (arr) 
return arr[0]; 
else 
return null; 
} 
/***************以下方法和表單驗(yàn)證相關(guān)*************************************************/ 
/** 
* 返回非空字符串,如果有默認(rèn)值就返回默認(rèn)字符串. 
* @param {要進(jìn)行轉(zhuǎn)換的原字符串} str 
* @param {默認(rèn)值} defaultStr 
* @return {返回結(jié)果} 
*/ 
function notNull(str, defaultStr) { 
if (typeof(str) == "undefined" || str == null || str == '') { 
if (defaultStr) 
return defaultStr; 
else 
return ''; 
} else { 
return str; 
} 
} 
/** 
* 比較兩個(gè)日期大小. 
* @param {較小日期的文本框id} smallDate 
* @param {較大日期的文本框id} bigDate 
* @param {出錯(cuò)的提示信息} 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; 
} 
/** 
* 比較兩個(gè)金額大小的方法. 
* @param {較小的金額} smallNum 
* @param {較大的金額} bigNum 
* @param {出錯(cuò)提示信息} 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; 
} 
/** 
* 檢查文本框的長(zhǎng)度是否超出指定長(zhǎng)度. 
* @param {文本id} textId 
* @param {文本框的最大長(zhǎng)度} len 
* @param {文本框描述內(nèi)容} msg 
* @return {有錯(cuò)就返回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 + "]" + "長(zhǎng)度最大為" + len + "位," + "請(qǐng)重新輸入!\n注意:一個(gè)漢字占2位。"); 
obj.focus(); 
return false; 
} else 
return true; 
} 
/** 
* 判斷某個(gè)文本框不可以為空. 
* @param {文本框id} textId 
* @param {文本框描述內(nèi)容} msg 
* @return {有錯(cuò)就返回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; 
} 
} 
/** 
* 判斷指定文本框內(nèi)容必須為郵件. 
* @param {文本框id} textId 
* @param {文本框描述} msg 
* @return {如果是郵件內(nèi)容就返回true否則返回false} 
*/ 
function checkIsMail(textId, msg) { 
var obj = $(textId); 
if (!_isEmail(obj.value)) { 
alert('[' + msg + ']不是合法的郵件地址!'); 
obj.focus(); 
return false; 
} else 
return true; 
} 
/** 
* 驗(yàn)證是不是郵件. 
* @param {要驗(yàn)證的字符串} strEmail 
* @return {Boolean} 
*/ 
function _isEmail(strEmail) { 
//接下來(lái)的驗(yàn)證是否有兩個(gè)以上的‘.'號(hào),有的話(huà)就是錯(cuò)的! 
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; 
} 
/** 
* 判斷某個(gè)文本框是否數(shù)字. 
* @param {文本框id} textId 
* @param {文本框描述內(nèi)容} msg 
* @return {Boolean} 
*/ 
function checkIsNum(textId, msg) { 
obj = $(textId); 
if (isNaN(obj.value)) { 
alert('[' + msg + ']必須為數(shù)字。'); 
obj.focus(); 
return false; 
} else 
return true; 
} 
/** 
* 判斷某個(gè)文本框是否含有非法字符. 
* @param {文本框的id} textId 
* @param {文本框描述內(nèi)容} msg 
* @return {有錯(cuò)就返回false否則返回true} 
*/ 
function checkIsValid(textId, msg) { 
obj = $(textId); 
if (!_isValidString(obj.value, '[' + msg + ']不得含有非法字符。')) { 
obj.focus(); 
return false; 
} 
return true; 
} 
/** 
* 判斷是不是合法字符串. 
* @param {要進(jìn)行判斷的字符串} 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; 
} 
/*************** 以下方法和下拉菜單相關(guān)*************************************************/ 
/** 
* 控制下拉菜單不可以為-1(未選擇情況value=-1) 
* @param {下拉菜單id} selectId 
* @param {下拉菜單描述內(nèi)容} msg 
* @param {下拉菜單的空值對(duì)應(yīng)的value,默認(rèn)為-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對(duì)象} selectObj 
* @return {返回下拉菜單的顯示的"文本"} 
*/ 
function getSelectText(selectObj) { 
return selectObj.options[selectObj.selectedIndex].text; 
} 
/** 
* 得到下拉菜單的顯示的值. 
* @param {下拉菜單dom對(duì)象} selectObj 
* @return {得到下拉菜單的顯示的"值"} 
*/ 
function getSelectValue(selectObj) { 
return selectObj.options[selectObj.selectedIndex].value; 
} 
/** 
* 設(shè)置下拉菜單的選擇狀態(tài)到指定的值. 
* @param {下拉菜單對(duì)象} 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; 
} 
/** 
* 根據(jù)鍵值串的內(nèi)容進(jìn)行下拉菜單的動(dòng)態(tài)組裝 
* @param {要進(jìn)行下拉菜單組裝的dom對(duì)象} obj 
* @param {鍵值對(duì)用,和;分割,例如'1,男;2,女;3,未知'} valAndText 
*/ 
function setSelectContent(obj,valAndText){ 
if(trim(valAndText)==''){ 
alert('沒(méi)有要進(jìn)行組裝下拉菜單的數(shù)據(jù)!'); 
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); 
} 
} 
} 
/** 
* 清空下拉菜單里面的內(nèi)容. 
* @param {下拉菜單對(duì)象} obj 
*/ 
function clearSelect(obj) { 
for (var i=obj.options.length; i >0; i--) { 
obj.remove(0); 
} 
} 
/*************** 以下方法和多選框相關(guān)*************************************************/ 
/** 
* 返回選中的checks的id組成的字符串,逗號(hào)隔開(kāi). 
* @param {checks數(shù)組} 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標(biāo)簽里,并在head里調(diào)用上面的js:

<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<<<<<<<<<<<調(diào)用上面的js>>>>>>>>>-->
</HEAD>
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
/** 
* 表單驗(yàn)證的示例js方法. 
*/ 
function check(){ 
if(checkIfEmpty('a','非空校驗(yàn)') 
&&checkIsMail('b','郵箱校驗(yàn)') 
&&checkIsNum('c','數(shù)字校驗(yàn)') 
&&checkIsValid('d','合法性校驗(yàn)') 
&&compareTwoDate('e','f','小日期與大日期關(guān)系錯(cuò)誤!') 
&&checkLength('g',5,'長(zhǎng)度校驗(yàn)') 
&&checkChooseSelect('h','下拉菜單非空','-1') 
&&compareTwoNum('k','l','大小數(shù)目關(guān)系不正確!')){ 
alert('校驗(yàn)通過(guò)!'); 
return true; 
}else{ 
return false; 
} 
} 
/** 
* 取下拉菜單的值和文本的示例js方法. 
*/ 
function getSelect(){ 
var sss = $('h'); 
alert('下拉菜單選擇的文本是:'+getSelectText(sss)+'\n' 
+'下拉菜單選擇的值是:'+getSelectValue(sss)); 
} 
/** 
* 根據(jù)鍵值字符串設(shè)置下拉菜單的顯示內(nèi)容. 
*/ 
function setSelect(){ 
var sss = $('i').value; 
setSelectContent($('h'),sss); 
} 
/** 
* 返回多選框數(shù)組選擇狀態(tài)的id的字符串,結(jié)果以逗號(hào)隔開(kāi). 
*/ 
function getMulti(){ 
alert('多選選擇的id是:'+getCheckedIds(document.getElementsByName('j'))); 
} 
//--> 
</SCRIPT>
<BODY>
<table>
 <tr>
  <td> 非空:
   <input id='a'></td>
  <td> checkIfEmpty('a','非空校驗(yàn)') </td>
 </tr>
 <tr>
  <td> 郵箱:
   <input id='b' value='323232@2323.com'></td>
  <td> checkIsMail('b','郵箱校驗(yàn)') </td>
 </tr>
 <tr>
  <td> 數(shù)字:
   <input id='c' value='aaaa'></td>
  <td> checkIsNum('c','數(shù)字校驗(yàn)') </td>
 </tr>
 <tr>
  <td> 合法字符:
   <input id='d' value='@$@$#$#!%%#'></td>
  <td> checkIsValid('d','合法性校驗(yàn)') </td>
 </tr>
 <tr>
  <td> 小的日期:
   <input id='e' value='2010-1-1'>
   大的日期:
   <input id='f' value='2011-1-1'></td>
  <td> compareTwoDate('e','f','小日期與大日期關(guān)系錯(cuò)誤!') </td>
 </tr>
 <tr>
  <td> 小的數(shù):
   <input id='k' value='12.3'>
   大的數(shù):
   <input id='l' value='4564'></td>
  <td> compareTwoNum('k','l','大小數(shù)目關(guān)系不正確!') </td>
 </tr>
 <tr>
  <td> 字符長(zhǎng)度校驗(yàn)(<5):
   <input id='g'></td>
  <td> checkLength('g',5,'長(zhǎng)度校驗(yàn)') </td>
 </tr>
 <tr>
  <td> 下拉菜單非空校驗(yàn):
   <select id='h'>
    <option value='-1'> 請(qǐng)選擇 </option>
    <option value='1'> 立項(xiàng) </option>
    <option value='2'> 可研 </option>
   </select></td>
  <td> checkChooseSelect('h','下拉菜單非空','-1') </td>
 </tr>
 <tr>
  <td colspan='2'><button onclick='check()'> 測(cè)試表單校驗(yàn)方法 </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()'> 設(shè)置下拉菜單的值 </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>

以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。

相關(guān)文章

  • js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64)

    js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64)

    這篇文章主要給大家介紹了關(guān)于js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64)的相關(guān)資料,主要記錄一下比較常見(jiàn)的圖片格式(File、Blob、base64)在不同的場(chǎng)景他們之間的相互轉(zhuǎn)換的方法,需要的朋友可以參考下
    2023-04-04
  • javascript iFrame研究

    javascript iFrame研究

    iFrame小應(yīng)用
    2008-12-12
  • 淺談Javascript鼠標(biāo)和滾輪事件

    淺談Javascript鼠標(biāo)和滾輪事件

    淺談Javascript鼠標(biāo)和滾輪事件,鼠標(biāo)事件也許是web頁(yè)面當(dāng)中最常用到的事件,因?yàn)槭髽?biāo)是最常用的導(dǎo)航設(shè)備
    2012-06-06
  • TypeScript?使用?Tuple?Union?聲明函數(shù)重載

    TypeScript?使用?Tuple?Union?聲明函數(shù)重載

    這篇文章主要介紹了TypeScript?使用?Tuple?Union?聲明函數(shù)重載,TypeScript 中為函數(shù)添加多個(gè)簽名后,依然需要添加相應(yīng)的代碼來(lái)判斷并從不同的簽名參數(shù)列表中獲取對(duì)應(yīng)的參數(shù),下文就來(lái)探索方法和技巧吧
    2022-04-04
  • JS常見(jiàn)疑難點(diǎn)分析之match,charAt,charCodeAt,map,search用法分析

    JS常見(jiàn)疑難點(diǎn)分析之match,charAt,charCodeAt,map,search用法分析

    這篇文章主要介紹了JS常見(jiàn)疑難點(diǎn)分析之match,charAt,charCodeAt,map,search用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了match,charAt,charCodeAt,map,search的功能,使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2016-12-12
  • js中Image對(duì)象以及對(duì)其預(yù)加載處理示例

    js中Image對(duì)象以及對(duì)其預(yù)加載處理示例

    現(xiàn)在的網(wǎng)頁(yè)中經(jīng)常會(huì)有一些圖像連接,當(dāng)鼠標(biāo)指向它的時(shí)候,圖像換成另外一幅圖像,它們都是先預(yù)讀圖像的,下面也有個(gè)不錯(cuò)的實(shí)例,感興趣的朋友可以參考下
    2013-11-11
  • 原生javascript單例模式的應(yīng)用實(shí)例分析

    原生javascript單例模式的應(yīng)用實(shí)例分析

    這篇文章主要介紹了原生javascript單例模式的應(yīng)用,結(jié)合實(shí)例形式分析了JavaScript單例模式的基本功能、原理、應(yīng)用及操作注意事項(xiàng),需要的朋友可以參考下
    2020-02-02
  • 教學(xué)演示-UBB,剪貼板,textRange及其他

    教學(xué)演示-UBB,剪貼板,textRange及其他

    教學(xué)演示-UBB,剪貼板,textRange及其他...
    2006-07-07
  • ES6之Proxy的get方法詳解

    ES6之Proxy的get方法詳解

    這篇文章主要介紹了ES6之Proxy的get方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-10-10
  • 一文詳解Electron 電源狀態(tài)管理

    一文詳解Electron 電源狀態(tài)管理

    這篇文章主要為大家介紹了Electron 電源狀態(tài)管理示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03

最新評(píng)論