从基础开始建立一个JS代码库，更新中 有心人会领技术走的更远 由于后台程序会过滤掉单引号，所以有些地方如果出现莫民奇妙的空格，就表示单引号，特此说明。
/**
* @author Super Sha
* QQ:770104121
* Email:[email protected]
* All Rights Reserved!
*/
(function(){ //原创
function $(s){
if (!s)
return false;
return s.constructor == String ? document.getElementById(s) : s;
}
window.$ = $;
})();
(function(){ //匿名封装函数并自执行，在这个函数内定义的函数或者变量可以通用，函数外不可以访问，除非你声明在命名空间下
if (!window.Susa)
window[ Susa ] = {}; //声明Susa命名空间
/*
* 得到元素的引用
*/
function $(){
var elems = new Array();
for (var i = 0; i < arguments.length; i++) {
var elem = arguments[i];
if (typeof arguments[i] == "string") { //进行类型检查
elem = document.getElementById(arguments[i]);
}
//这里具有双关的含义：如果传入的是字符串并且只有一个参数，或者传入的是DOM引用，都返回DOM节点引用
if (arguments.length == 1) {
return elem;
}
else {
elems.push(elem);
}
}
return elems;
}
window[ Susa ][ $ ] = $;
/*
* 返回特定元素内的子元素，或者是document
*/
function tag(type, elem){
elem = elem || document;
type = type || "*"; //如果没有参数，则返回文档的全部元素的引用
return elem.getElementsByTagName(type);
}
window[ Susa ][ tag ] = tag;
/*
* 返回输入框的值
*/
function value(id){
var elem = $(id); //调用匿名函数内定义的方法
if (elem != null && (elem.nodeName == INPUT || elem.nodeName == TEXTAREA )) {
return elem.value;
}
}
window[ Susa ][ value ] = value;
/*
* 可以快速连接字符串的StringBuilder对象 //(原创)
*/
var StringBuilder = {
_arr: new Array,
append: function(str){
if (typeof str == "string") {
this._arr.push(str);
}
return this;
},
toString: function(){
if (this._arr.length != 0) {
var strs = this._arr.join( , );
this._arr = []; //解决返回重复添加的技巧
return strs;
}
else {
return null;
}
}
}
//function appendString(){
// for(var i=0;i<3;i++){
// StringBuilder.append("test");
// }
// return StringBuilder.toString();
//}
//window[ Susa ][ str ]=appendString;
/*
* addEvent和romoveEvent方法
*/
function addEvent(elem, type, fn){
if (elem != $(elem) || elem == null)
return false;
if (type == null || fn == null)
return false;
if (elem.addEventListener) { //W3C的方法
elem.addEventListener(type, fn, false);
return true;
}
else
if (elem.attachEvent) {// IE的方法
//node[ e +type+fn]=fn;
///node[type+fn]=function(){
// node[ e +type+fn](window.event); //不知道为什么要这样
//}
//node.attachEvent( on +type,node[type+fn]);
//return this;
elem.attachEvent( on + type, function(){
fn.call(elem)
});
//注意：在这里用一个匿名函数来防止IE中this对象的指向错误的情况
return this;
}
else {
elem["on" + type] = function(){
fn.call(elem)
};
}
}
function removeEvent(elem, type, fn){
if (elem != $(elem) || elem == null)
return false;
if (type == null || fn == null)
return false;
if (elem.removeEventListener) {//W3C的方法
elem.removeEventListener(type, fn, false);
return true;
}
else
if (elem.detachEvent) // IE的方法
{
//node.detachEvent( on +type,node[type+fn]);
elem.detachEvent( on + type, fn);
return this;
}
}
window[ Susa ][ addEvent ] = addEvent;
window[ Susa ][ removeEvent ] = removeEvent;
/*
* getElementsByClassName方法返回符合某个特定类的全部的元素的引用,tag和elem参数都是可选的
*/
function getElementsByClassName(classname, tag, elem){
elem = elem || document;
if (elem != $(elem) || elem == null)
return false;
//注意这个函数的parent.all的用法，它是用于确认parent是否是document的,并且区分了IE和Mozilia
if (!tag)
tag = "*";
var allTags = (tag == * && elem.all) ? elem.all : elem.getElementsByTagName(tag);
//创建一个正则，来检测是否包含指定的类名
classname = classname.replace(/\-/g, "\\-");
var regex = new RegExp("(^|\\s*)" + classname + "(\\s*|$)");
var matchElements = new Array();
var elem;
for (var i = 0; i < allTags.length; i++) {
elem = allTags[i];
if (regex.test(elem.className)) { //根据正则来检测类名
matchElements.push(elem);
}
}
return matchElements;
}
window[ Susa ][ getElementsByClassName ] = getElementsByClassName;
/*
* toggleDisplay方法,切换HTML标签的可见性
*/
function toggleDisplay(id, value){
var elem = $(id);
if (elem != $(elem) || elem == null || elem.nodeType != 1)
return false;
if (elem.style.display != "none") {
elem.style.display = "none";
}
else {
elem.style.display = value || ;
}
return true;
}
window[ Susa ]["toggleDisplay"] = toggleDisplay;
/*
* insertAfter方法
*/
function insertAfter(node, referenceNode){
if (node != $(node) || node == null)
return false;
if (referenceNode != $(referenceNode) || referenceNode == null)
return false;
return referenceNode.parentNode.insertBefore(node, referenceNode.nextSibling); //注意使用insertBefore方法，如果第二个参数
} //为null，则插入到parentNode的最末尾
window[ Susa ][ insertAfter ] = insertAfter;
/*
* removeChildren方法,删除当前节点下的所有的子元素
*/
function removeChildren(parent){
if (parent != $(node) || parent == null)
return false;
while (parent.firstChild) { //循环删除节点
parent.firstChild.parentNode.removeChild(node.firstChild);
}
return parent;
}
window[ Susa ][ removeChildren ] = removeChildren;
/*
* prependChild方法,把选择的节点插入到当前节点的最前面
*/
function prependChild(parent, newNode){
if (parent != $(parent) || parent == null)
return false;
if (newNode != $(newNode) || newNode == null)
return false;
if (parent.firstChild) { //判断时候有子函数
parent.insertBefore(newNode, parent.firstChild);
}
else {
parent.appendChild(newNode);
}
return parent;
}
window[ Susa ][ prependChild ] = prependChild;
/*
* bindFunction()方法，用于调整this的执行环境
*/
function adjustFunc(obj, func){ //把func的执行环境调整到obj上来
return function(){ //返回匿名函数的引用
func.apply(obj, arguments);
};
}
window[ Susa ][ adjustFunc ] = adjustFunc;
/*
* 获取显示窗口的width和height,返回一个包含width和height属性的的对象,不公开，只在本匿名函数内供其他方法调用
*/
function getBrowserWindowSize(){
var de = document.documentElement; //获取根节点
var obj = {
width : (window.innerWidth || (de.clientWidth) || document.body.clientWidth),
height : (window.innerHeight || (de.clientHeight) || document.body.clientHeight)
}
return obj;
}
/*
* 调试日志对象
*/
function log(id){
id = id || SusaLogWindow ;
var logWindow = null; //私有属性，用于在各个
var createWindow = function(){ //私有方法,用于动态生成一个列表节点
if (!document.body) {
alert( document.body hasn\ t finished loading. );
return;
}
var browerWindowSize = getBrowserWindowSize();
var top = ((browerWindowSize.height - 200) / 2) || 0; //取得新窗口在浏览器中局中放置是的左上角的位置
var left = ((browerWindowSize.width - 200) / 2) || 0;
logWindow = document.createElement( ul ); //动态生成一个UL元素
logWindow.setAttribute( id , id);
logWindow.style.position = absolute ; //修饰UL元素
logWindow.style.top = top + px ;
logWindow.style.left = left + px ;
logWindow.style.width = 250px ;
logWindow.style.height = 200px ;
logWindow.style.overflow = scroll ;
logWindow.style.padding = 0 ;
logWindow.style.margin = 0 ;
logWindow.style.border = 1px solid black ;
logWindow.style.backgroundColor = white ;
logWindow.style.listStyle = none ;
logWindow.style.font = 10px/10px Verdana,Tahoma,Sans ;
document.body.appendChild(logWindow); //将动态生成的节点添加到body中
}
this.writeRaw = function(message){ //特权方法,用于向createWindow方法生成的UL节点中添加LI内容,需要声明实例才能调用
if (!logWindow)
createWindow(); //如果初始的窗口不存在，则创建它
var li = document.createElement("li"); //动态生成一个LI元素
li.style.padding = 2px ;
li.style.border = 0 ;
li.style.borderBottom = 1px dotted black ;
li.style.margin = 0 2px ;
li.style.color = #000 ;
li.style.font = 9px/9px Verdana,Tahoma,Sans ;
if (typeof message == undefined ) {
li.appendChild(document.createTextNode( Message was undefined! ));
}
else
if (typeof li.innerHTML != undefined ) {
li.innerHTML = message;
}
else {
li.appendChild(document.createTextNode(message));
}
logWindow.appendChild(li); //将生成的LI节点添加到logWindow中
return true;
}
}
log.prototype = {
write: function(message){
if (arguments.length == 0) { //警告message参数为空
return this.writeRaw("Lack of params!");
}
if (typeof message != "string") { //如果传入的参数不是字符串，则尝试调用toString方法，如果不存在该访问则记录对象类型
if (message.toString)
return this.writeRaw(message.toString()); //注意这种判断方法：message.toString.判断某个对象是否包含某个属性
else
return this.writeRaw(typeof message);
}
message = message.replace(/</g, "<").replace(/>/g, ">"); //过滤<>左右尖括号
return this.writeRaw(message);
},
header: function(message){ //向日志窗口中写入一个标题
message = --> <span style="color:red; background:#eee; font-weight:bold;"> + message + </span> <-- ;
return this.writeRaw(message);
}
}
window[ Susa ][ log ] = new log(); //注意要显示声明对象，因为构造函数中使用了特权方法this的引用
/*
* 自创的调试函数（原创）,把要测试的函数名作为debug的参数即可，支持多个参数 //(原创)
*/
function debug(){
for (var i = 0; i < arguments.length; i++) {
if (typeof arguments[i] != function ) {
alert("Params sould be Function type!");
return;
}
}
var args = arguments;
(function(){ //封装执行函数过程
try {
for (var i = 0; i < args.length; i++) {
args[i](); //执行函数
}
}
catch (ex) {
Susa.log.writeRaw( Error: + ex.message + " Line:" + ex.lineNumber);
}
})();
}
window[ Susa ][ debug ] = debug;
/*
* 声明与判断节点类型的常量 //原创
*/
window[ Susa ][ node ] = {
ELEMENT_NODE: 1,
ATTRIBUTE_NODE: 2,
TEXT_NODE: 3,
CDATA_SECTION_NODE: 4,
ENTITY_REFERENCE_NODE: 5,
ENTITY_NODE: 6,
PROCESSION_INSTRUCTION_NODE: 7,
COMMENT_NODE: 8,
DOCUMENT_NODE: 9,
DOCUMENT_TYPE_NODE: 10,
DOCUMENT_FRAGMENT_NODE: 11,
NOTATION_NODE: 12
};
/*
* 检测浏览器支持DOM Level的程度的函数（原创）
*/
function CheckDOMLevel(){
if (document.implementation) { //判断是否支持document.implementation属性
var DOM = ["Core", "XML", "HTML", "Views", "SytleSheets", "CSS", "CSS2", "Events", "UIEvents", "MouseEvents", "MutationEvent", "HTMLEvents", "Range", "Traversal", "LS", "LS-Async", "Validation"];
var Level = ["1.0", "2.0", "3.0"];
for (var i = 0; i < DOM.length; i++) {
for (var j = 0; j < Level.length; j++) {
if (document.implementation.hasFeature(DOM[i], Level[j])) { //document.implementation.hasFeature接受两个参数
Susa.log.writeRaw("<span style= color:#0c0; >DOM" + Level[j] + " " + DOM[i] + " Supported.</span>");
}
else {
Susa.log.writeRaw("<span style= color:#c00; >DOM" + Level[j] + " " + DOM[i] + " Not Supported!</span>")
}
}
}
}
else {
Susa.log.write("<span style= color:#c00; ><b>No DOMImplementation Supported!</b></span>");
}
}
window[ Susa ][ CheckDOMLevel ] = CheckDOMLevel;
/*
* 获取和设置元素特性的值，可以获取getter和设置setter的方式调用
*/
function attr(elem, name, value){
if (!name || name.constructor != String)
return ;
//检查name是否出于怪异命名的情形中
name = {
for : htmlFor ,
class : className
}[name] ||
name;
if (typeof value != undefined ) {
elem[name] = value; //首先使用快捷方式
if (elem.setAttribute) { //可以的话，使用setAttribute
elem.setAttribute(name, value);
}
}
return elem[name] || elem.getAttribute(name) || ; //返回特性的值
}
window[ Susa ][ attr ] = attr;
/*
* 创建新DOM元素的通用函数
*/
function create(label){
return document.createAttributeNS ? document.createElementNS( http://www.w3.org/1999/xhtml , label) : document.createElement(label); //返回新建元素的引用
}
window[ Susa ][ create ] = create;
/*
* 创建TextNode节点函数
*/
//function createText(elem){ //直接供DOM元素调用
// $(elem)==elem ? this.appendChild(elem):this.appendChild(document.createTextNode(elem));
// return this;
//}
function createText(parent, elem){ //(参考+原创)
return $(elem) == elem ? parent.appendChild(elem) : parent.appendChild(document.createTextNode(elem));
}
window["Susa"][ createText ] = createText;
/*
* 在另一个DOM元素之前插入元素 //(参考+原创)
*/
function before(newNode, referenceNode){
if (!newNode && $(referenceNode) != referenceNode)
return false;
var elems = checkElem(newNode); //得到想要添加节点引用的数组
for (var i = elems.length - 1; i >= 0; i--) {
referenceNode.parentNode.insertBefore(elems[i], referenceNode);
}
}
window[ Susa ][ before ] = before;
/*
* 在另一个元素追加一个子元素,elem可以是一个带HTML标签的字符串，也可以使DOM元素节点引用 //(参考+原创)
*/
function append(parent, elem){
if (!elem && $(parent) != parent)
return false;
var elems = checkElem(elem); //得到想要添加节点引用的数组
for (var i = elems.length - 1; i >= 0; i--) {
parent.appendChild(elems[i]);
}
}
window[ Susa ][ append ] = append;
function checkElem(elem){ //before和append函数的辅助函数 //(参考+原创)
var r = [];
if (elem && elem.constructor == String) { //如果参数是字符串
var div = create("div");
div.innerHTML = elem;
for (var i = div.childNodes.length - 1; i >= 0; i--) {
r[r.length] = div.childNodes[i]; //动态生成数组的方法
}
}
else
if (elem && elem.constructor == Array) { //如果参数是数组
var div = create("div");
div.innerHTML = elem.join( );
for (var i = div.childNodes.length - 1; i >= 0; i--) {
r[r.length] = div.childNodes[i]; //动态生成数组的方法
}
}
else
if (elem && $(elem) == elem) { //如果是DOM节点
r[r.length] = elem;
}
return r;
}
/*
* 删除DOM元素内的全部内容,参数可以使DOM节点引用，也可以是HTML ID标签
*/
function empty(elem){
elem = transformLabelID(elem);
while (elem.firstChild) {
elem.removeChild(elem.firstChild);
}
}
window["Susa"][ empty ] = empty;
/*
* html函数，可以对DOM元素进行getting和setting,elem可以是字符串也可以是DOM元素的引用 //(原创)
*/
function html(parent, elem){
parent = transformLabelID(parent);
if (elem && $(elem) == elem) {
parent.innerHTML = elem.innerHTML;
return parent;
}
else {
return elem && elem.constructor == String ? parent.innerHTML = elem : parent.innerHTML;
}
}
window["Susa"]["html"] = html;
/*
* 获取元素文本内容的通用函数,getting和setting都可以
*/
function text(e){
e = transformLabelID(e);
if (arguments[1]) {
e.innerHTML = arguments[1];
}
else {
var t = "";
e = e.childNodes || e; //如果传入的是元素，则继续遍历其子元素，否则假定它是一个数组
for (var j = 0; j < e.length; j++) {
t += e[j].nodeType != 1 ? e[j].nodeValue : text(e[j]); //递归调用text函数
}
return t;
}
}
window[ Susa ][ text ] = text;
/*
* 与innerHTML和innerText类似的outerHTML和outerText方法 //原创
*/
function outerText(elem, t){
elem = transformLabelID(elem);
//查看是否是DOM节点还是文本字符串
if (t) {
var el = t.constructor == String ? document.createTextNode(t) : t;
elem.parentNode.insertBefore(el, elem); //在当前元素前插入节点
elem.parentNode.removeChild(elem); //之后再删除当前节点
}
else {
return text(elem); //如果第二个参数为空，则返回当前于是的Text
}
}
function outerHTML(elem, h){
elem = transformLabelID(elem);
if (h) {
var elems = checkElem(h); //返回h字符串或则节点的数组
for (var i = elems.length - 1; i >= 0; i--) {
elem.parentNode.insertBefore(elems[i], elem);
}
elem.parentNode.removeChild(elem);
}
else {
var div = create("div");
div.appendChild(elem);
return div.innerHTML;
}
}
window["Susa"]["outerText"] = outerText;
window[ Susa ]["outerHTML"] = outerHTML;
/*
* wrag以另外一个元素外包当前元素 //原创
*/
function wrag(elem, wragLabel, attrProp){
elem = transformLabelID(elem);
var next = elem.nextSibling || document.body; //获取elem元素的下一个相邻的的元素，如果不存在的话就设置为body
var w = create(wragLabel); // 生成一个新元素，用来包含当前元素
for (var o in attrProp) { //设置新建元素的属性
w.setAttribute(o, attrProp[o]);
}
w.appendChild(elem);
next == document.body ? document.body.appendChild(w) : next.parentNode.insertBefore(w, next); //插入包含元素到文档中
}
window["Susa"]["wrag"] = wrag;
/*
* 转化参数为HTML ID标签为DOM节点引用 //原创
*/
function transformLabelID(str){
return !str ? false : $(str);
}
/*
* 删除单一的DOM节点，参数可以是节点引用，也可以是HTML ID标签值 //(原创)
*/
function remove(elem){
transformLabelID(elem).parentNode.removeChild(transformLabelID(elem));
}
window[ Susa ][ remove ] = remove;
/*
* clone函数，返回DOM元素的副本,参数可以是节点引用，也可以是HTML ID标签值 //(原创)
*/
function clone(elem){
return transformLabelID(elem).cloneNode(true);
}
window[ Susa ][ clone ] = clone;
/*
* 阻止时间冒泡的通用函数
*/
function stopBubble(e){
if (e && e.stopPropagation) { //如果传入了参数，那么就是w3c的方法
e.stopPropagation();
}
else {
window.event.cancelBubble = true; //IE的方法
}
}
window[ Susa ][ stopBubble ] = stopBubble;
/*
* 防止发生默认浏览器行为的通用函数
*/
function stopDefault(e){
if (e && e.preventDefault) { //W3C方法
e.preventDefault();
}
else {
window.event.returnValue = false; //IE方法
}
return false;
}
window["Susa"]["stopDefault"] = stopDefault;
/*
* 获取元素真实、最终的css样式属性值的函数
*/
function getStyle(elem, name){
elem = transformLabelID(elem); //参数elem可以是DOM引用，也可以是
if (elem.style[name]) { //如果属性存在与style[]中，那么它已被设置了（并且是当前的）
return elem.style[name];
}
else
if (elem.currentStyle) { //否则，尝试使用IE的方法
return elem.currentStyle[name];
}
else
if (document.defaultView && document.defaultView.getComputedStyle) { //或者W3C的方法，如果存在的话
//它使用的是通用的‘text-align'样式规则而不是textAlign
name = name.replace(/([A-Z])/g, "-$1");
name = name.toLowerCase();
return document.defaultView.getComputedStyle(elem, null).getPropertyValue(name);
}
else {
return null;
}
}
window["Susa"][ getStyle ] = getStyle;
/*
*把word-word转换成wordWord格式的函数
*/
function camelize(s){
return s.replace(/-(\w)/g, function(strMatch, p){
return p.toUpperCase();
});
}
/*
* 设置元素的css样式，参数为一个对象 （原创)
*/
function setStyle(elem, obj){
elem = transformLabelID(elem);
for (var o in obj) { //遍历obj参数的属性
elem.style[o] = obj[o]; //设置css的style样式
}
}
window[ Susa ][ setStyle ] = setStyle;
/*
* css函数，可是getter和setter，返回特定元素的css样式 //(原创)
*/
function css(elem, obj){
elem = transformLabelID(elem);
if (elem && (typeof obj == "string")) {
return getStyle(elem, obj); //调用了getStyle函数,得到特定的css样式的值
}
else
if (typeof obj == "object") {
for (var o in obj) {
elem.style[o] = obj[o];
}
}
}
window[ Susa ][ css ] = css;
/*
* 合并两个对象，并把合并结果整合到第一个对象 //原创
*/
function mergeObj(obj1, obj2){
if ((typeof obj1 == "Object") && (typeof obj2 == "Object"))
return false;
for (var o in obj2) {
obj1[o] = obj2[o];
}
return obj1;
}
window["Susa"]["mergeObj"] = mergeObj;
/*
* 传入几个函数引用，取最近的那个没有错误的函数并执行 （原创）
*/
function $try(){
for (var i = 0; i < arguments.length; i++) {
try {
return arguments[i](); //执行参数函数
}
catch (ex) {
continue;
}
}
}
window["Susa"]["$try"] = $try;
从基础开始建立一个JS代码库，更新中 有心人会领技术走的更远
/*
* 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;
}
}
}
};

评论 (0) All

登陆 还没注册？