从基础开始建立一个JS代码库第2/2页

/*
* toJSONObject函数用于将一个JSON字符串转换成对象字面量
*/
function toJSONObject(s){
return s ? eval("(" + s + ")") : null;
}
window["Susa"]["toJSONObject"] = toJSONObject;

/*
* 读写和删除cookie的三个函数
* 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设置的信息和deleteCookit需要的信息一样，可以直接使用setCookie并传入一个过去的失效的时间（这里是1970/1/1)
function deleteCookie(sName, sPath, sDomain){ //原创
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位置的辅助函数
*/
function pageX(elem){
elem = transformLabelID(elem); //保证elem为DOM节点元素
//查看是否位于根元素
return elem.offsetParent ? //如果能继续得到上一个元素，增加当前的偏移量并继续向上递归
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;

/*
* 确定元素相对于父亲的位置的两个函数
*/
function parentX(elem){
elem = transformLabelID(elem); //保证elem为DOM节点元素
//如果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位置的辅助函数,当元素的CSS属性position设置为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;

/*
* 设置元素x和y位置（与当前位置无关）的一对函数,当元素的CSS属性position设置为absolute或者relative的时候才有意义
*/
function setX(elem, pos){
elem = transformLabelID(elem);
elem.style.left = pos + "px"; //使用像素设置元素的left属性
}
function setY(elem, pos){
elem = transformLabelID(elem);
elem.style.top = pos + "px"; //使用像素设置元素的top属性
}
window["Susa"]["setX"] = setX;
window["Susa"]["setY"] = setY;

/*
* 调整元素相对于当前位置的距离的一对函数,当元素的CSS属性position设置为absolute或者relative的时候才有意义
*/
function addX(elem, pos){
elem = transformLabelID(elem);
setX(elem, posX(elem) + pos); //在原来left属性值的基础上加上pos
}
function addY(elem, pos){
elem = transformLabelID(elem);
setY(elem, posY(elem) + pos); //在原来top属性值的基础上加上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"));
}

/*
* 即使隐藏，亦能分别获取它潜在的完整高度和宽度的两个函数
* 注意：如果隐藏，即display为none，而没有设置height属性，则返回NAN
*/
function fullHeight(elem){
elem = transformLabelID(elem);
//如果元素是显示的，那么使用offsetHeight就能得到高度，或者使用getHeight（）
if (getStyle(elem, display ) != none ) {
return elem.offsetHeight || getStyle(elem, height );
}

//否则，必须处理display为none的元素，所以重置他的css属性以获取更精确的读数
var old = resetCSS(elem, {
display: ,
visibility: hidden ,
position: absolute
});
//使用clientHeight找出元素的完整的高度，如果不生效，则使用getHeight函数
var h = elem.clientHeight || getHeight(elem);
//最后恢复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;
}
//两个辅助函数
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) { //恢复css属性值
elem.style[i] = prop[i];
}
}
window["Susa"]["fullHeight"] = fullHeight;
window["Susa"]["fullWidth"] = fullWidth;

/*
* 使用CSS的display属性来切换元素可见性的一组函数
*/
function hide(elem){
elem = transformLabelID(elem);
var curDisplay = getStyle(elem, display );
if (curDisplay != "none") {
elem.$oldDisplay = curDisplay; //记录它的display状态
elem.style.display = none ;
}
}
function show(elem){
elem = transformLabelID(elem);
//设置display属性的原始值，如果没有记录原始值，则使用block
elem.style.display = elem.$oldDisplay || block ;
}
window["Susa"]["hide"] = hide;
window["Susa"]["show"] = show;

/*
* 调节元素的透明度的函数，level从0-100，0表示完全透明，100则相反
*/
function setOpacity(elem, level){
elem = transformLabelID(elem);
if (elem.filters) { //IE中设置Alpha滤镜
elem.style.filter = alpha(opacity= + level + ) ;
}
else { //W3C的opacity属性
elem.style.opacity = level / 100;
}
}
window["Susa"]["setOpacity"] = setOpacity;

/*
* 通过在短时间内增加和减少高度逐步显示隐藏元素的函数,可以自定义速度,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); //恢复原来的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){ //(原创)
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); //注意时间的设置
})();
}
elem.$old = resetCSS(elem, {
border: "none"
}); //如果DOM元素含有border属性，则去掉border
}
window["Susa"]["slideDown"] = slideDown;
window["Susa"][ slideUp ] = slideUp;

/*
* 通过在短时间内增加和减少透明度逐步显示隐藏的元素的函数，可以自定义速度，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){ //(原创)
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); //注意时间的设置
})();
}
//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;


/*
* 检查一个必填字段是否被修改，包括复选框和单选框
*/
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元素的数组
results.numChecked = 0; //追踪被选中元素的数量
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函数用于切换鼠标移到一个图片上的两种情况 （原创）
*/
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函数用于切换鼠标移到一个文本上是的两种情况 （原创）
*/
function textToggle(elem, prop){
elem = transformLabelID(elem);
elem.onmouseover = function(){
for (var o in prop) {
elem["style"][o] = prop[o]; //设置style属性值
}
};
elem.onmouseout = function(){
for (var o in prop) {
elem["style"][o] = null;
}
}
}
window["Susa"]["textToggle"] = textToggle;

/*
* 可同时设置几个HTML标签的css属性setCSS函数 （原创）
*/
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的方法
/*
* 重复某个字符串的函数,比如： a .repeat(5)，将返回 aaaaa
*/
if (!String.repeat) {
String.prototype.repeat = function(l){
return new Array(l + 1).join(this); //注意数组的含义
}
}

/*
* 删除字符串前后的空格
*/
if (!String.trim) {
String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g, ); //学习正则的候选的语法
}
}

/*
* serialize函数遍历访问this对象的所有成员并将他们的值组织为一个字符串输出
*/
function serialize(){
var output = [];
for (o in this) {
output.push(o + ":" + this[o]);
}
return output.join(",");
}

/*
* 检测DOM何时加载完并且执行代码的DOM对象 （原创）
*/
var DOM = {
done: false,
clearID: 0,
fn: [], //初始化函数的参数集合
ready: function(){ //初始化函数
for (var i = 0; i < arguments.length; i++) {
if (typeof arguments[i] == function ) {
DOM.fn.push(arguments[i]);
}
else {
continue;
}
}
if (DOM.done) { //如果加载完成，则执行初始化函数的全部函数参数
for (var i = 0; i < this.fn.length; i++) {
DOM.fn[i]();
}
DOM.done = false;
}
else {
DOM.Interval();
}
},
Interval: function(){ //重复调用check函数
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;
}
}
}
};

最新评论