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>