JavaScript 常用函數(shù)庫(kù)詳解
更新時(shí)間:2009年10月21日 15:04:53 作者:
在WEB開(kāi)發(fā)中,javascript提供了許多函數(shù)供開(kāi)發(fā)人員使用,這些函數(shù)在Ajax流行前足夠了,但要構(gòu)建一個(gè)交互性強(qiáng)些的應(yīng)用恐怕就麻煩了。
為此,收集了自己平時(shí)常用到一些JavaScript函數(shù),它們?cè)谄渌腏S庫(kù)也常見(jiàn),現(xiàn)在整理并附上注釋?zhuān)奖悴殚啠M麑?duì)大家有所幫助。
注:假設(shè)以下所有函數(shù)都放在一個(gè)CC對(duì)象中,方便引用。
//這個(gè)方法相信是最常用的了,
//它雖然沒(méi)有選擇器那么強(qiáng)大,但也有個(gè)小增強(qiáng)版,可查指定結(jié)點(diǎn)下ID所在的子元素
function $(id, p) {
//id是否是字符串,還是一個(gè)HTML結(jié)點(diǎn)
var iss = id instanceof String || typeof id == "string";
if (iss && !p)
return document.getElementById(id);
//如果是結(jié)點(diǎn)的話就直接返回該結(jié)點(diǎn)
if(!iss)
return id;
//如果id與p是同一個(gè)元素,直接返回
if(p.id == id)
return p;
//往父結(jié)點(diǎn)搜索
var child = p.firstChild;
while (child) {
if (child.id == id)
return child;
//遞歸搜索
var v = this.$(id, child);
if (v)
return v;
child = child.nextSibling;
}
//的確找不到就返回null
return null;
}
each: function(object, callback, args) {
if (!object) {
return object;
}
if (args) {
if (object.length === undefined) {
for (var name in object)
if (callback.apply(object[name], args) === false) break;
} else for (var i = 0, length = object.length; i < length; i++)
if (callback.apply(object[i], args) === false) break;
} else {
if (object.length == undefined) {
for (var name in object)
if (callback.call(object[name], name, object[name]) === false) break;
} else for (var i = 0, length = object.length, value = object[0];
i < length && callback.call(value, i, value) !== false;
value = object[++i]) {}
}
return object;
}
//數(shù)組
function isArray(obj) {
return (typeof obj === "array" || obj instanceof Array);
},
//字符串
function isString(obj) {
return (typeof obj === "string" || obj instanceof String);
},
//函數(shù)
function isFunction(obj) {
return (typeof obj === "function" || obj instanceof Function);
},
//數(shù)字類(lèi)型
function isNumber(ob) {
return (typeof ob === "number" || ob instanceof Number );
}
// 返回表單可提交元素的提交字符串.
// 例如
// <form>
// <input type="text" name="user" value="rock" />
// <input type="text" name="password" value="123" />
// </form>
// 調(diào)用后就返回 user=rock&password=123
// 這些數(shù)據(jù)已經(jīng)過(guò)encodeURIComponent處理,對(duì)非英文字符友好.
// form元素中如果沒(méi)有name,則以id作為提供字符名.
function formQuery(f){
// f,一個(gè)Form表單.
var formData = "", elem = "", f = CC.$(f);
var elements = f.elements;
var length = elements.length;
for (var s = 0; s < length; ++s) {
elem = elements[s];
if (elem.tagName == 'INPUT') {
if ( (elem.type == 'radio' || elem.type == 'checkbox') && !elem.checked) {
continue;
}
}
if (formData != "") {
formData += "&";
}
formData += encodeURIComponent(elem.name||elem.id) + "="
+ encodeURIComponent(elem.value);
}
return formData;
}
/**
* 移除數(shù)組指定元素.
* 參數(shù)既可傳遞一個(gè)整形下標(biāo),也可傳遞一個(gè)數(shù)組數(shù)據(jù).
*/
Array.prototype.remove = (function(p) {
//參數(shù)為下標(biāo)
if (CC.isNumber(p)) {
if (p < 0 || p >= this.length) {
throw "Index Of Bounds:" + this.length + "," + p;
}
this.splice(p, 1)[0];
return this.length;
}
//參數(shù)為數(shù)組數(shù)據(jù),最終要找到下標(biāo)來(lái)操作
if (this.length > 0 && this[this.length - 1] == p) {
this.pop();
} else {
var pos = this.indexOf(p);
if (pos != -1) {
this.splice(pos, 1)[0];
}
}
return this.length;
});
Array.prototype.indexOf = (function(obj) {
for (var i = 0, length = this.length; i < length; i++) {
if (this[i] == obj) return i;
}
return - 1;
});
/**
* 萬(wàn)能而簡(jiǎn)單的表單驗(yàn)證函數(shù),這個(gè)函數(shù)利用了JS動(dòng)態(tài)語(yǔ)言特性,看上去很神秘,
* 實(shí)際是很形象的,查看個(gè)例子就清楚了.
*/
validate: function() {
var args = CC.$A(arguments),
form = null;
//form如果不為空元素,應(yīng)置于第一個(gè)參數(shù)中.
if (!CC.isArray(args[0])) {
form = CC.$(args[0]);
args.remove(0);
}
//如果存在設(shè)置項(xiàng),應(yīng)置于最后一個(gè)參數(shù)中.
//cfg.queryString = true|false;
//cfg.callback = function
//cfg.ignoreNull
//nofocus:true|false
var b = CC.isArray(b) ? {}: args.pop(),
d;
var queryStr = b.queryString,
ignoreNull = b.ignoreNull,
cb = b.callback;
var result = queryStr ? '': {};
CC.each(args,
function(i, v) {
//如果在fomr中不存在該name元素,就當(dāng)id來(lái)獲得
var obj = v[0].tagName ? v[0] : form ? form[v[0]] : CC.$(v[0]);
//console.debug('checking field:',v, 'current value:'+obj.value);
var value = obj.value,
msg = v[1],
d = CC.isFunction(v[2]) ? v[3] : v[2];
//選項(xiàng)
if (!d || typeof d != 'object') d = b;
//是否忽略空
if (!d.ignoreNull && (value == '' || value == null)) {
//如果不存在回調(diào)函數(shù),就調(diào)用alert來(lái)顯示錯(cuò)誤信息
if (!d.callback) CC.alert(msg, obj, form);
//如果存在回調(diào),注意傳遞的三個(gè)參數(shù)
//msg:消息,obj:該結(jié)點(diǎn),form:對(duì)應(yīng)的表單,如果存在的話
else d.callback(msg, obj, form);
//出錯(cuò)后是否聚集
if (!d.nofocus) obj.focus();
result = false;
return false;
}
//自定義驗(yàn)證方法
if (CC.isFunction(v[2])) {
var ret = v[2](value, obj, form);
var pass = (ret !== false);
if (CC.isString(ret)) {
msg = ret;
pass = false;
}
if (!pass) {
if (!d.callback) CC.alert(msg, obj, form);
//同上
else d.callback(msg, obj, form);
if (!d.nofocus) obj.focus();
result = false;
return false;
}
}
//如果不設(shè)置queryString并通過(guò)驗(yàn)證,不存在form,就返回一個(gè)對(duì)象,
//該對(duì)象包含形如{elementName|elementId:value}的數(shù)據(jù).
if (queryStr && !form) {
result += (result == '') ?
((typeof obj.name == 'undefined' || obj.name == '') ? obj.id: obj.name) +
'=' + value: '&' + v[0] + '=' + value;
} else if (!form) {
result[v[0]] = value;
}
});
//如果設(shè)置的queryString:true并通過(guò)驗(yàn)證,就返回form的提交字符串.
if (result !== false && form && queryStr) result = CC.formQuery(form);
return result;
}
/**
* 應(yīng)用對(duì)象替換模板內(nèi)容
* templ({name:'Rock'},'<html><title>{name}</title></html>');
* st:0,1:未找到屬性是是否保留
*/
templ: function(obj, str, st) {
return str.replace(/\{([\w_$]+)\}/g, function(c, $1) {
var a = obj[$1];
if (a === undefined || a === null) {
if (st === undefined) return '';
switch (st) {
case 0:
return '';
case 1:
return $1;
default:
return c;
}
}
return a;
});
}
注:假設(shè)以下所有函數(shù)都放在一個(gè)CC對(duì)象中,方便引用。
復(fù)制代碼 代碼如下:
//這個(gè)方法相信是最常用的了,
//它雖然沒(méi)有選擇器那么強(qiáng)大,但也有個(gè)小增強(qiáng)版,可查指定結(jié)點(diǎn)下ID所在的子元素
function $(id, p) {
//id是否是字符串,還是一個(gè)HTML結(jié)點(diǎn)
var iss = id instanceof String || typeof id == "string";
if (iss && !p)
return document.getElementById(id);
//如果是結(jié)點(diǎn)的話就直接返回該結(jié)點(diǎn)
if(!iss)
return id;
//如果id與p是同一個(gè)元素,直接返回
if(p.id == id)
return p;
//往父結(jié)點(diǎn)搜索
var child = p.firstChild;
while (child) {
if (child.id == id)
return child;
//遞歸搜索
var v = this.$(id, child);
if (v)
return v;
child = child.nextSibling;
}
//的確找不到就返回null
return null;
}
復(fù)制代碼 代碼如下:
each: function(object, callback, args) {
if (!object) {
return object;
}
if (args) {
if (object.length === undefined) {
for (var name in object)
if (callback.apply(object[name], args) === false) break;
} else for (var i = 0, length = object.length; i < length; i++)
if (callback.apply(object[i], args) === false) break;
} else {
if (object.length == undefined) {
for (var name in object)
if (callback.call(object[name], name, object[name]) === false) break;
} else for (var i = 0, length = object.length, value = object[0];
i < length && callback.call(value, i, value) !== false;
value = object[++i]) {}
}
return object;
}
復(fù)制代碼 代碼如下:
//數(shù)組
function isArray(obj) {
return (typeof obj === "array" || obj instanceof Array);
},
//字符串
function isString(obj) {
return (typeof obj === "string" || obj instanceof String);
},
//函數(shù)
function isFunction(obj) {
return (typeof obj === "function" || obj instanceof Function);
},
//數(shù)字類(lèi)型
function isNumber(ob) {
return (typeof ob === "number" || ob instanceof Number );
}
復(fù)制代碼 代碼如下:
// 返回表單可提交元素的提交字符串.
// 例如
// <form>
// <input type="text" name="user" value="rock" />
// <input type="text" name="password" value="123" />
// </form>
// 調(diào)用后就返回 user=rock&password=123
// 這些數(shù)據(jù)已經(jīng)過(guò)encodeURIComponent處理,對(duì)非英文字符友好.
// form元素中如果沒(méi)有name,則以id作為提供字符名.
function formQuery(f){
// f,一個(gè)Form表單.
var formData = "", elem = "", f = CC.$(f);
var elements = f.elements;
var length = elements.length;
for (var s = 0; s < length; ++s) {
elem = elements[s];
if (elem.tagName == 'INPUT') {
if ( (elem.type == 'radio' || elem.type == 'checkbox') && !elem.checked) {
continue;
}
}
if (formData != "") {
formData += "&";
}
formData += encodeURIComponent(elem.name||elem.id) + "="
+ encodeURIComponent(elem.value);
}
return formData;
}
復(fù)制代碼 代碼如下:
/**
* 移除數(shù)組指定元素.
* 參數(shù)既可傳遞一個(gè)整形下標(biāo),也可傳遞一個(gè)數(shù)組數(shù)據(jù).
*/
Array.prototype.remove = (function(p) {
//參數(shù)為下標(biāo)
if (CC.isNumber(p)) {
if (p < 0 || p >= this.length) {
throw "Index Of Bounds:" + this.length + "," + p;
}
this.splice(p, 1)[0];
return this.length;
}
//參數(shù)為數(shù)組數(shù)據(jù),最終要找到下標(biāo)來(lái)操作
if (this.length > 0 && this[this.length - 1] == p) {
this.pop();
} else {
var pos = this.indexOf(p);
if (pos != -1) {
this.splice(pos, 1)[0];
}
}
return this.length;
});
復(fù)制代碼 代碼如下:
Array.prototype.indexOf = (function(obj) {
for (var i = 0, length = this.length; i < length; i++) {
if (this[i] == obj) return i;
}
return - 1;
});
復(fù)制代碼 代碼如下:
/**
* 萬(wàn)能而簡(jiǎn)單的表單驗(yàn)證函數(shù),這個(gè)函數(shù)利用了JS動(dòng)態(tài)語(yǔ)言特性,看上去很神秘,
* 實(shí)際是很形象的,查看個(gè)例子就清楚了.
*/
validate: function() {
var args = CC.$A(arguments),
form = null;
//form如果不為空元素,應(yīng)置于第一個(gè)參數(shù)中.
if (!CC.isArray(args[0])) {
form = CC.$(args[0]);
args.remove(0);
}
//如果存在設(shè)置項(xiàng),應(yīng)置于最后一個(gè)參數(shù)中.
//cfg.queryString = true|false;
//cfg.callback = function
//cfg.ignoreNull
//nofocus:true|false
var b = CC.isArray(b) ? {}: args.pop(),
d;
var queryStr = b.queryString,
ignoreNull = b.ignoreNull,
cb = b.callback;
var result = queryStr ? '': {};
CC.each(args,
function(i, v) {
//如果在fomr中不存在該name元素,就當(dāng)id來(lái)獲得
var obj = v[0].tagName ? v[0] : form ? form[v[0]] : CC.$(v[0]);
//console.debug('checking field:',v, 'current value:'+obj.value);
var value = obj.value,
msg = v[1],
d = CC.isFunction(v[2]) ? v[3] : v[2];
//選項(xiàng)
if (!d || typeof d != 'object') d = b;
//是否忽略空
if (!d.ignoreNull && (value == '' || value == null)) {
//如果不存在回調(diào)函數(shù),就調(diào)用alert來(lái)顯示錯(cuò)誤信息
if (!d.callback) CC.alert(msg, obj, form);
//如果存在回調(diào),注意傳遞的三個(gè)參數(shù)
//msg:消息,obj:該結(jié)點(diǎn),form:對(duì)應(yīng)的表單,如果存在的話
else d.callback(msg, obj, form);
//出錯(cuò)后是否聚集
if (!d.nofocus) obj.focus();
result = false;
return false;
}
//自定義驗(yàn)證方法
if (CC.isFunction(v[2])) {
var ret = v[2](value, obj, form);
var pass = (ret !== false);
if (CC.isString(ret)) {
msg = ret;
pass = false;
}
if (!pass) {
if (!d.callback) CC.alert(msg, obj, form);
//同上
else d.callback(msg, obj, form);
if (!d.nofocus) obj.focus();
result = false;
return false;
}
}
//如果不設(shè)置queryString并通過(guò)驗(yàn)證,不存在form,就返回一個(gè)對(duì)象,
//該對(duì)象包含形如{elementName|elementId:value}的數(shù)據(jù).
if (queryStr && !form) {
result += (result == '') ?
((typeof obj.name == 'undefined' || obj.name == '') ? obj.id: obj.name) +
'=' + value: '&' + v[0] + '=' + value;
} else if (!form) {
result[v[0]] = value;
}
});
//如果設(shè)置的queryString:true并通過(guò)驗(yàn)證,就返回form的提交字符串.
if (result !== false && form && queryStr) result = CC.formQuery(form);
return result;
}
復(fù)制代碼 代碼如下:
/**
* 應(yīng)用對(duì)象替換模板內(nèi)容
* templ({name:'Rock'},'<html><title>{name}</title></html>');
* st:0,1:未找到屬性是是否保留
*/
templ: function(obj, str, st) {
return str.replace(/\{([\w_$]+)\}/g, function(c, $1) {
var a = obj[$1];
if (a === undefined || a === null) {
if (st === undefined) return '';
switch (st) {
case 0:
return '';
case 1:
return $1;
default:
return c;
}
}
return a;
});
}
您可能感興趣的文章:
- JS co 函數(shù)庫(kù)的含義和用法實(shí)例總結(jié)
- 在easyUI開(kāi)發(fā)中,出現(xiàn)jquery.easyui.min.js函數(shù)庫(kù)問(wèn)題的解決辦法
- 初步認(rèn)識(shí)JavaScript函數(shù)庫(kù)jQuery
- js 通用javascript函數(shù)庫(kù)整理
- 基于prototype擴(kuò)展的JavaScript常用函數(shù)庫(kù)
- 通用javascript腳本函數(shù)庫(kù) 方便開(kāi)發(fā)
- (推薦一個(gè)超好的JS函數(shù)庫(kù))S.Sams Lifexperience ScriptClassLib
- javascript函數(shù)庫(kù)-集合框架
- JavaScript常用工具函數(shù)庫(kù)匯總
相關(guān)文章
僅IE支持clearAttributes/mergeAttributes方法使用介紹
僅IE中HTMLElement元素具有clearAttributes/mergeAttributes方法,它們都是非標(biāo)準(zhǔn)的2012-05-05
通過(guò)flv.js播放監(jiān)控示例深入探究直播流技術(shù)
本文記錄一下在使用 flv.js 播放監(jiān)控視頻時(shí)踩過(guò)的各種各樣的坑,雖然官網(wǎng)給的?Getting Started?只有短短幾行代碼,跑一個(gè)能播視頻的 demo 很容易,但是播放時(shí)各種各樣的異常會(huì)搞到你懷疑人生,下面我將自己踩過(guò)的坑,以及踩坑過(guò)程中補(bǔ)充的相關(guān)知識(shí),詳細(xì)總結(jié)一下2023-10-10
Javascript客戶端將指定區(qū)域?qū)С龅絎ord、Excel的代碼
Javascript 瀏覽器客戶端導(dǎo)出指定區(qū)域到Word、Excel,非常不錯(cuò)的應(yīng)用實(shí)例2008-10-10
關(guān)于javascript DOM事件模型的兩件事
DOM事件模型的兩件事:事件捕捉(Event Capture)的實(shí)現(xiàn)問(wèn)題以及IE的高級(jí)事件處理模型的問(wèn)題。2010-07-07
HTML5+setCutomValidity()函數(shù)驗(yàn)證表單實(shí)例分享
本文給大家分享的是在HTML5中結(jié)合setCutomValidity()函數(shù)實(shí)現(xiàn)驗(yàn)證表單的實(shí)例,非常的時(shí)間實(shí)用,這里推薦給大家,有需要的小伙伴可以參考下。2015-04-04
bootstrap datetimepicker2.3.11時(shí)間插件使用
這篇文章主要為大家詳細(xì)介紹了bootstrap datetimepicker2.3.11時(shí)間插件使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11
ES6新語(yǔ)法Object.freeze和Object.seal基本使用
這篇文章主要為大家介紹了ES6新語(yǔ)法Object.freeze和Object.seal基本使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01

