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的數組中，只不過無法訪問罷了。目前
我也沒想到好的辦法解決。*/
}
}
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.浏覽器版本
var 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標簽裡，並在head裡調用上面的js：
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<<<<<<<<<<<調用上面的js>>>>>>>>>-->
</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>
以上所述就是本文的全部內容了，希望大家能夠喜歡。