從基礎(chǔ)開始建立一個JS代碼庫
更新時間:2009年07月22日 00:10:47 作者:
從基礎(chǔ)開始建立一個JS代碼庫,更新中 有心人會領(lǐng)技術(shù)走的更遠
/*
* toJSONObject函數(shù)用于將一個JSON字符串轉(zhuǎn)換成對象字面量
*/
function toJSONObject(s){
return s ? eval("(" + s + ")") : null;
}
window["Susa"]["toJSONObject"] = toJSONObject;
/*
* 讀寫和刪除cookie的三個函數(shù)
* sName:cookie的名稱;
* sValue;cookie的值;
* oExpires:cookie的有效時間;
* sPath:cookie的路徑;
* sDomain:cookie的域
* bSecure:安全標志
*/
function setCookie(sName, sValue, oExpires, sPath, sDomain, bSecure){
var oCookie = sName + "=" + encodeURIComponent(sValue);
if (oExpires)
oCookie = "; expires=" + oExpires.toGMTString();
if (sPath)
oCookie = "; path=" + sPath;
if (sDomain)
oCookie = "; domain=" + sDomain;
if (bSecure)
oCookie = "; secure";
document.cookie = oCookie;
}
function getCookie(sName){
var re = "(?:;)?" + sName + "=([^;]*);?";
var oRe = new RegExp(re);
if (oRe.test(document.cookie)) {
return decodeURIComponent(RegExp["$1"]);
}
else {
return null;
}
}
//因為setCookie設(shè)置的信息和deleteCookit需要的信息一樣,可以直接使用setCookie并傳入一個過去的失效的時間(這里是1970/1/1)
function deleteCookie(sName, sPath, sDomain){ //原創(chuàng)
exp = FRI,02-Jan-1970 00:00:00 GMT ;
document.cookie = sName + "=" + encodeURIComponent(sName) + "; expires=FRI,02-Jan-1970 00:00:00 GMT";
}
window["Susa"][ setCookie ] = setCookie;
window["Susa"][ getCookie ] = getCookie;
window["Susa"][ deleteCookie ] = deleteCookie;
/*
* 兩個確定元素相對于整個文檔的x和y位置的輔助函數(shù)
*/
function pageX(elem){
elem = transformLabelID(elem); //保證elem為DOM節(jié)點元素
//查看是否位于根元素
return elem.offsetParent ? //如果能繼續(xù)得到上一個元素,增加當前的偏移量并繼續(xù)向上遞歸
elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
}
function pageY(elem){
elem = transformLabelID(elem);
return elem.offsetParent ? elem.offsetTop + pageX(elem.offsetParent) : elem.offsetTop;
}
window["Susa"]["pageX"] = pageX;
window["Susa"]["pageY"] = pageY;
/*
* 確定元素相對于父親的位置的兩個函數(shù)
*/
function parentX(elem){
elem = transformLabelID(elem); //保證elem為DOM節(jié)點元素
//如果offsetParent是元素的父元素,則返回offsetLeft,否則需要找到元素的父親相對于整個頁面位置,并計算他們之間的差值
return elem.parentNode == elem.offsetParent ? elem.offsetLeft : pageX(elem) - pageX(elem.parentNode);
}
function parentY(elem){
elem = transformLabelID(elem);
return elem.parentNode == elem.offsetParent ? elem.offsetTop : pageY(elem) - pageY(elem.parentNode);
}
window["Susa"]["parentX"] = parentX;
window["Susa"]["parentY"] = parentY;
/*
* 獲取元素的CSS位置的輔助函數(shù),當元素的CSS屬性position設(shè)置為absolute或者relative的時候才有意義
*/
function posX(elem){
elem = transformLabelID(elem);
return parseInt(getStyle(elem, "left")); //得到元素的left屬性的值
}
function posY(elem){
elem = transformLabelID(elem);
return parseInt(getStyle(elem, "top")); //得到元素的top屬性的值
}
window["Susa"]["posX"] = posX;
window["Susa"]["posY"] = posY;
/*
* 設(shè)置元素x和y位置(與當前位置無關(guān))的一對函數(shù),當元素的CSS屬性position設(shè)置為absolute或者relative的時候才有意義
*/
function setX(elem, pos){
elem = transformLabelID(elem);
elem.style.left = pos + "px"; //使用像素設(shè)置元素的left屬性
}
function setY(elem, pos){
elem = transformLabelID(elem);
elem.style.top = pos + "px"; //使用像素設(shè)置元素的top屬性
}
window["Susa"]["setX"] = setX;
window["Susa"]["setY"] = setY;
/*
* 調(diào)整元素相對于當前位置的距離的一對函數(shù),當元素的CSS屬性position設(shè)置為absolute或者relative的時候才有意義
*/
function addX(elem, pos){
elem = transformLabelID(elem);
setX(elem, posX(elem) + pos); //在原來left屬性值的基礎(chǔ)上加上pos
}
function addY(elem, pos){
elem = transformLabelID(elem);
setY(elem, posY(elem) + pos); //在原來top屬性值的基礎(chǔ)上加上pos
}
window["Susa"]["addX"] = addX;
window["Susa"]["addY"] = addY;
/*
* 獲取元素當前的高度和寬度
*/
function getHeight(elem){
return parseInt(getStyle(elem, "height"));
}
function getWidth(elem){
return parseInt(getStyle(elem, "width"));
}
/*
* 即使隱藏,亦能分別獲取它潛在的完整高度和寬度的兩個函數(shù)
* 注意:如果隱藏,即display為none,而沒有設(shè)置height屬性,則返回NAN
*/
function fullHeight(elem){
elem = transformLabelID(elem);
//如果元素是顯示的,那么使用offsetHeight就能得到高度,或者使用getHeight()
if (getStyle(elem, display ) != none ) {
return elem.offsetHeight || getStyle(elem, height );
}
//否則,必須處理display為none的元素,所以重置他的css屬性以獲取更精確的讀數(shù)
var old = resetCSS(elem, {
display: ,
visibility: hidden ,
position: absolute
});
//使用clientHeight找出元素的完整的高度,如果不生效,則使用getHeight函數(shù)
var h = elem.clientHeight || getHeight(elem);
//最后恢復(fù)css的原有屬性
restoreCSS(elem, old);
//并返回完整的高度
return h;
}
function fullWidth(elem){
elem = transformLabelID(elem);
if (getStyle(elem, display ) != none ) {
return elem.offsetWidth || getStyle(elem, width );
}
var old = resetCSS(elem, {
display: ,
visibility: hidden ,
position: absolute
});
var w = elem.clientWidth || getStyle(elem, width );
restoreCSS(elem, old);
return w;
}
//兩個輔助函數(shù)
function resetCSS(elem, prop){
var old = {}; //記錄舊的屬性值
for (var i in prop) {
old[i] = elem.style[i];
elem.style[i] = prop[i];
}
return old;
}
function restoreCSS(elem, prop){
for (var i in prop) { //恢復(fù)css屬性值
elem.style[i] = prop[i];
}
}
window["Susa"]["fullHeight"] = fullHeight;
window["Susa"]["fullWidth"] = fullWidth;
/*
* 使用CSS的display屬性來切換元素可見性的一組函數(shù)
*/
function hide(elem){
elem = transformLabelID(elem);
var curDisplay = getStyle(elem, display );
if (curDisplay != "none") {
elem.$oldDisplay = curDisplay; //記錄它的display狀態(tài)
elem.style.display = none ;
}
}
function show(elem){
elem = transformLabelID(elem);
//設(shè)置display屬性的原始值,如果沒有記錄原始值,則使用block
elem.style.display = elem.$oldDisplay || block ;
}
window["Susa"]["hide"] = hide;
window["Susa"]["show"] = show;
/*
* 調(diào)節(jié)元素的透明度的函數(shù),level從0-100,0表示完全透明,100則相反
*/
function setOpacity(elem, level){
elem = transformLabelID(elem);
if (elem.filters) { //IE中設(shè)置Alpha濾鏡
elem.style.filter = alpha(opacity= + level + ) ;
}
else { //W3C的opacity屬性
elem.style.opacity = level / 100;
}
}
window["Susa"]["setOpacity"] = setOpacity;
/*
* 通過在短時間內(nèi)增加和減少高度逐步顯示隱藏元素的函數(shù),可以自定義速度,speed越大,增加的越慢
*/
function slideDown(elem, speed){
speed = speed || 100;
elem = transformLabelID(elem);
var h = fullHeight(elem); //找到元素的完整的潛在高度
elem.style.height = "0px"; //高度從0開始滑動
//alert(elem.style.height);return;
restoreCSS(elem, elem.$old || null); //恢復(fù)原來的CSS的border樣式
show(elem); //先顯示元素
for (var i = 0; i <= speed; i += 5) {
(function(){
var pos = i;
setTimeout(function(){
elem.style.height = (pos / speed) * h + "px";
}, (pos + 1) * 10);
})();
}
}
function slideUp(elem, speed){ //(原創(chuàng))
speed = speed || 100;
elem = transformLabelID(elem);
var h = fullHeight(elem);
show(elem);
for (var i = 100; i >= 0; i -= 5) {
(function(){
var pos = i;
setTimeout(function(){
elem.style.height = (pos / speed) * h + "px";
}, (100 - pos + 1) * 10); //注意時間的設(shè)置
})();
}
elem.$old = resetCSS(elem, {
border: "none"
}); //如果DOM元素含有border屬性,則去掉border
}
window["Susa"]["slideDown"] = slideDown;
window["Susa"][ slideUp ] = slideUp;
/*
* 通過在短時間內(nèi)增加和減少透明度逐步顯示隱藏的元素的函數(shù),可以自定義速度,speed越大,增加的越慢
*/
function fadeIn(elem, speed){
speed = speed || 5;
elem = transformLabelID(elem);
setOpacity(elem, 0); //從0透明度開始
show(elem); //先顯示元素
for (var i = 0; i <= 100; i += speed) {
(function(){
var pos = i;
setTimeout(function(){
setOpacity(elem, pos);
}, (pos + 1) * 10);
})();
}
}
function fadeOut(elem, speed){ //(原創(chuàng))
elem = transformLabelID(elem);
speed = speed || 1;
setOpacity(elem, 100);
show(elem);
for (var i = 100; i >= 0; i -= speed) {
(function(){
var pos = i;
setTimeout(function(){
setOpacity(elem, pos);
}, (100 - pos + 1) * 10); //注意時間的設(shè)置
})();
}
//hide(elem);
}
window["Susa"]["fadeIn"] = fadeIn;
window["Susa"]["fadeOut"] = fadeOut;
/*
* 用以獲取鼠標相對于整個頁面的當前位置
*/
function getX(e){
e = e || window.event;
return e.pageX || e.clientX + document.body.scrollLeft;
}
function getY(e){
e = e || window.event;
return e.pageY || e.clientY + document.body.scrollTop;
}
window["Susa"]["getX"] = getX;
window["Susa"]["getY"] = getY;
/*
* 檢查一個必填字段是否被修改,包括復(fù)選框和單選框
*/
function required(elem){
if (elem.type == checkbox || elem.tyle == "radio") {
return getInputsByName(elem.name).numChecked;
}
else {
return elem.value.length > 0 && elem.value != elem.defaultValue;
}
}
function getInputsByName(name){
var results = []; //匹配的input元素的數(shù)組
results.numChecked = 0; //追蹤被選中元素的數(shù)量
var input = document.getElementsByTagName( input );
for (var i = 0; i < input.length; i++) {
if (input[i].name == name) {
results.push(input[i]);
if (input[i].checked) { //如果選中,則增加numChecked的值
results.numChecked++; //注意這個用法
}
}
}
return results;
}
window["Susa"]["required"] = required;
/*
* imgToggle函數(shù)用于切換鼠標移到一個圖片上的兩種情況 (原創(chuàng))
*/
function imgToggle(elem, url){
elem = transformLabelID(elem);
elem.onmouseover = function(){
this.oldsrc = this.src;
this.src = url;
};
elem.onmouseout = function(){
this.src = this.oldsrc;
};
}
window["Susa"]["imgToggle"] = imgToggle;
/*
* textToggle函數(shù)用于切換鼠標移到一個文本上是的兩種情況 (原創(chuàng))
*/
function textToggle(elem, prop){
elem = transformLabelID(elem);
elem.onmouseover = function(){
for (var o in prop) {
elem["style"][o] = prop[o]; //設(shè)置style屬性值
}
};
elem.onmouseout = function(){
for (var o in prop) {
elem["style"][o] = null;
}
}
}
window["Susa"]["textToggle"] = textToggle;
/*
* 可同時設(shè)置幾個HTML標簽的css屬性setCSS函數(shù) (原創(chuàng))
*/
function setCSS(ids, props){
for (var i = 0, len = ids.length; i < len; i++) {
for (var o in props) {
document.getElementById(ids[i]).style[o] = props[o];
}
}
}
})();
// 擴展String的方法
/*
* 重復(fù)某個字符串的函數(shù),比如: a .repeat(5),將返回 aaaaa
*/
if (!String.repeat) {
String.prototype.repeat = function(l){
return new Array(l + 1).join(this); //注意數(shù)組的含義
}
}
/*
* 刪除字符串前后的空格
*/
if (!String.trim) {
String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g, ); //學(xué)習(xí)正則的候選的語法
}
}
/*
* serialize函數(shù)遍歷訪問this對象的所有成員并將他們的值組織為一個字符串輸出
*/
function serialize(){
var output = [];
for (o in this) {
output.push(o + ":" + this[o]);
}
return output.join(",");
}
/*
* 檢測DOM何時加載完并且執(zhí)行代碼的DOM對象 (原創(chuàng))
*/
var DOM = {
done: false,
clearID: 0,
fn: [], //初始化函數(shù)的參數(shù)集合
ready: function(){ //初始化函數(shù)
for (var i = 0; i < arguments.length; i++) {
if (typeof arguments[i] == function ) {
DOM.fn.push(arguments[i]);
}
else {
continue;
}
}
if (DOM.done) { //如果加載完成,則執(zhí)行初始化函數(shù)的全部函數(shù)參數(shù)
for (var i = 0; i < this.fn.length; i++) {
DOM.fn[i]();
}
DOM.done = false;
}
else {
DOM.Interval();
}
},
Interval: function(){ //重復(fù)調(diào)用check函數(shù)
DOM.clearID = window.setInterval(DOM.check, 20);
},
check: function(){ //檢測是否加載成功
if (DOM.done) {
clearInterval(DOM.clearID);
DOM.ready();
}
else {
if (document.body && document && document.getElementsByTagName && document.getElementById) {
DOM.done = true;
}
}
}
};
您可能感興趣的文章:
- 寫入cookie的JavaScript代碼庫 cookieLibrary.js
- java FastJson的簡單用法
- JavaScript 中斷請求幾種方案詳解
- Vue.js性能優(yōu)化N個技巧(值得收藏)
- angularJS實現(xiàn)表格部分列展開縮起示例代碼
- JavaScript實現(xiàn)簡易放大鏡最全代碼解析(ES5)
- JavaScript實現(xiàn)簡易輪播圖最全代碼解析(ES6面向?qū)ο?
- JavaScript實現(xiàn)簡易輪播圖最全代碼解析(ES5)
- JavaScript實現(xiàn)簡易購物車最全代碼解析(ES6面向?qū)ο?
- 5種方法告訴你如何使JavaScript 代碼庫更干凈
相關(guān)文章
CryptoJS中AES實現(xiàn)前后端通用加解密技術(shù)
這篇文章主要為大家詳細介紹了CryptoJS中AES實現(xiàn)前后端通用加解密技術(shù),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-12-12TypeScript聯(lián)合類型,交叉類型和類型保護
這篇文章主要介紹了TypeScript聯(lián)合類型,交叉類型和類型保護,聯(lián)合類型就是定義一些類型,定義的變量只需要滿足任意一種類型即可,交叉類型就是需要滿足所有類型,交叉類型使用,更多內(nèi)容我們來看看下面文章詳細內(nèi)容吧2021-12-12微信小程序登錄數(shù)據(jù)解密及狀態(tài)維持實例詳解
這篇文章主要介紹了微信小程序登錄數(shù)據(jù)解密及狀態(tài)維持,結(jié)合實例形式分析了微信小程序解密敏感信息及獲取session保持登陸狀態(tài)的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05用js的document.write輸出的廣告無阻塞加載的方法
這篇文章主要介紹了用js的document.write輸出的廣告無阻塞加載的方法,需要的朋友可以參考下2014-06-06javascript實現(xiàn)日歷控件(年月日關(guān)閉按鈕)
經(jīng)常使用google的朋友一定對google絢麗的日歷控件記憶猶新吧,那我們也來實現(xiàn)一個,雖然功能和效果比不上,但重要的是實現(xiàn)的過程2012-12-12JS+CSS實現(xiàn)的漂亮漸變背景特效代碼(6個漸變效果)
這篇文章主要介紹了JS+CSS實現(xiàn)的漂亮漸變背景特效代碼,包含6個漸變效果,涉及JavaScript針對頁面元素屬性動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-03-03