function $(){ return document.getElementById(arguments[0])}; /** * 得到上一个元素 * @param {Object} elem */function prev(elem){ do{ elem = elem.previousSibling; } while(elem && elem.nodeType != 1); return elem;} /** * 得到下一个元素 * @param {Object} elem */function next(elem){ do{ elem = elem.nextSibling; } while(elem && elem.nodeType != 1); return elem;} /** * 得到第一个元素 * @param {Object} elem */function first(elem){ elem = elem.firstChild; return elem && elem.nodeType != 1 ? next(elem) : elem;} /** * 得到最后一个元素 * @param {Object} elem */function last(elem){ elem = elem.lastChild; return elem && elem.nodeType != 1 ? prev(elem) : elem;} /** * 得到父元素 * @param {Object} elem * @param {Number} num 需要寻找的父级级别 */function parent(elem, num){ num = num || 1; for(var i=0; i /** * 得到相关name元素 * @param {String} name * @param {Object} elem */function tag(name, elem){ return (elem || document).getElementsByTagName(name)} /** * 根据tag寻找 * @param {String} name * @param {String} type */function hasClass(name, type){ var r = []; var re = new RegExp('(^|\\s)'+name+'(\\s|$)'); var e = document.getElementsByTagName(type || '*'); for(var i=0; i /** * 获取元素文本 * @param {Object} e */function text(e){ var t = ''; e = e.childNodes || e; for(var i=0; i /** * * @param {String} elem * @param {String} name * @param {String} value */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){ elem.setAttribute(name, value); } } return elem[name] || elem.getAttribute(name) || '';} /** * 在另一个元素之前插件元素 * @param {Object} parent * @param {Object} before * @param {String} elem */function before(parent, before, elem){ if(elem == null){ elem = before; before = parent; parent = before.parentNode; } //获取元素的新数组 var elems = checkElem(elem); //向后遍历 for(var i=elems.length; i>=0; i--){ parent.insertBefore(elems[i], before); }} /** * 创建元素 * @param {Object} elem */function create(elem){ //测试是否用命名空间来创建新的元素 return document.createElementNS ? document.createElementNS('http://www.w3.org/1999/xhtml', elem) : document.createElement(elem);} /** * before 辅助函数 * @param {Object} elem */function checkElem(a){ var r = []; if(a.constructor != Array){ a = [a]}; for(var i=0; i /** * 添加元素 (如果只有一个参数(无elem)，则直接添加到document.body上) * @param {Object} elem * @param {Object} parent */function append(parent, elem){ if(elem == null){ elem = parent; parent = null; } //获取元素数组 var elems = checkElem(elem); for(var i=0; i< elems.length; i++){ (parent || document.body).appendChild(elems[i]); }} /** * 删除独立的DOM * @param {Object} elem */function remove(elem){ if(elem){ elem.parentNode.removeChild(elem) };} /** * 删除一个节点的所有子节点 * @param {Object} elem */function empty(elem){ while(elem.firstChild){ remove(elem.firstChild); }} /** * 阻止事件冒泡 * @param {Object} e */function stopBubble(e){ if(e && e.stopPropagation){ e.stopPropagation(); } else { window.event.cancelBubble = true; }}function stopDefault(e){ if(e && e.preventDefault){ e.preventDefault(); } else { window.event.returnValue = false; } return false;} /** * 得到外链样式 * @param {Object} elem * @param {String} name */function getStyle(elem, name){ if(elem.style[name]){ return elem.style[name]; } else if(elem.currentStyle){ //如果ie return elem.currentStyle[name]; } else if(document.defaultView && document.defaultView.getComputedStyle){ //如果是不是w3c方法 name = name.replace(/([A-Z])/g, '-$1'); name = name.toLowerCase(); //获取样式 var s = document.defaultView.getComputedStyle(elem, ''); return s && s.getPropertyValue(name); } else { return null; }} /** * 获取元素的x位置 * @param {String} elem */function pageX(elem){ return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;} /** * 获取元素的Y位置 * @param {String} elem */function pageY(elem){ return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;} /** * 获取元素相对于父级的x位置 * @param {String} elem */function parentX(elem){ return elem.parentNode == elem.offsetParent ? elem.offsetLeft : pageX(elem) - pageX(elem.parentNode);} /** * 获取元素相对于父级的Y位置 * @param {String} elem */function parentY(elem){ return elem.parentNode == elem.offsetParent ? elem.offsetTop : pageY(elem) - pageY(elem.parentNode);} /** * 查找元素的左端位置 * @param {Object} elem */function posX(elem){ return parseInt(getStyle(elem, 'left'));} /** * 查找元素的顶端位置 * @param {Object} elem */function posY(elem){ return parseInt(getStyle(elem, 'top'));} /** * 设置元素水平位置 * @param {Object} elem * @param {Object} pos */function setX(elem, pos){ elem.style.left = pos + 'px';} /** * 设置垂直水平位置 * @param {Object} elem * @param {Object} pos */function setY(elem, pos){ elem.style.top = pos + 'px';} /** * 获取高度 * @param {Object} elem */function getHeight(elem){ return parseInt(getStyle(elem, 'height'));} /** * 获取宽度 * @param {Object} elem */function getWidth(elem){ return parseInt(getStyle(elem, 'width'));} /** * 得到完整的高度，就算对象已隐藏 * @param {Object} elem */function fullHeight(elem){ //如果元素显示 if(getStyle(elem, 'display') != 'none'){ return elem.offsetHeight || getHeight(elem); } //如果不显示，则复原css var old = resetCss(ele, { display: '', visibility: 'hidden', position: 'absolute' }); var h = elem.clientHeight || getHeight(elem); restoreCss(elem, old); return h;} /** * 恢复原有设置 * @param {String} elem * @param {Object} prop */function resetCss(elem, prop){ var old = {}; for(var i in prop){ old[i] = prop[i]; elem.style[i] = prop[i]; } return old;} /** * * @param {String} elem * @param {Object} old */function restoreCss(elem, old){ for(var i in old){ elem.style[i] = old[i]; }} /** * 隐藏元素 * @param {String} elem */function hide(elem){ var curDisplay = getStyle(elem, 'display'); if(curDisplay != 'none'){ elem.oldDisplay = curDisplay; } elem.style.display = 'none';} /** * 显示元素 * @param {String} elem */function show(elem){ elem.style.display = elem.oldDisply || 'block';} /** * 设置透明度 * @param {Object} elem * @param {Object} level (0-100) */function setOpacity(elem, level){ if(elem.filters){ //如果是IE elem.style.filter = 'alpha(opacity=' + level + ')'; //必须设置zoom,要不然透明度在IE下不生效 From:http://blog.csdn.net/dxx1988/article/details/6581430 elem.style.zoom = 1; } else { //否则是W3C elem.style.opacity = level / 100; }} /** * 滑动 * @param {Object} elem */function slideDown(elem){ //elem.style.height = '0px'; show(elem); var h = fullHeight(elem); for(var i=0; i<=100; i+=5){ (function(){ var pos = i; setTimeout(function(){ elem.style.height = (pos/100) * h + 'px'; }, (pos + 1) * 5); })(); }}//slideDown($('pText'));//alert(fullHeight($('pText'))); /** * 透明度渐显 From: http://mrthink.net/js-fadein-fadeout-fadeto/ * @param {Object} elem * @param {Number} speed 淡入速度,正整数(可选) * @param {Number} opacity 淡入到指定的透明度,0~100(可选) */function fadeInThink(elem, speed, opacity){ speed = speed || 20; opacity = opacity || 100; show(elem); setOpacity(elem, 0); //初始化透明度变化值为0 var val = 0; //循环将透明值以5递增,即淡入效果 (function(){ setOpacity(elem, val); val += 5; if (val <= opacity) { setTimeout(arguments.callee, speed) } })();} /** * 透明度渐显 * @param {Object} elem */function fadeIn(elem){ //setOpacity(emel, 0); show(elem); for(var i=0; i<=100; i+=10){ (function(){ var pos = i; setTimeout(function(){ setOpacity(elem, pos); }, (pos + 1) * 10); })(); }} /** * 透明度渐隐 From: http://mrthink.net/js-fadein-fadeout-fadeto/ * @param {Object} elem */function fadeOut(elem){ var val = 100; (function(){ setOpacity(elem, val); val -= 5; if(val >= 0){ setTimeout(arguments.callee, 50); } else if(val < 0){ hide(elem); } })();}//fadeInThink($('pText')); /*** 光标的水平位置* @param {Object} e*/function getX(e){ e = e || window.event; return e.pageX || e.clientX + document.body.scrollLeft;} /*** 光标的垂直位置* @param {Object} e*/function getY(e){ e = e || window.event; return e.pageY || e.clientY + document.body.scrollTop;} /** * 获得鼠标相对于当前元素的X位置 * @param {Object} e */function getElementX(e){ return (e && e.layerX) || window.event.offsetX;} /** * 获得鼠标相对于当前元素的Y位置 * @param {Object} e */function getElementY(e){ return (e && e.layerY) || window.event.offsetY;} /** * 当前页面的高度 */function pageHeight(){ return document.body.scrollHeight;} /** * 当前页面的宽度 */function pageWidth(){ return document.body.scrollWidth;}//alert(pageHeight()); /** * 视口的高度 */function windowHeight(){ var de = document.documentElement; return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;} /** * 视口的高度 */function windowWidth(){ var de = document.documentElement; return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;} /** * 浏览器水平滚动位置 */function scrollX(){ var de = document.documentElement; return self.pageOffsetset || (de && de.scrollLeft) || document.body.scrollLeft;} /*** 浏览器垂直滚动位置 */function scrollY(){ var de = document.documentElement; return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;} 将HTML DOM中几个容易常用的属性做下记录：
nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。nodeName 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称属性节点的 nodeName 是属性名称文本节点的 nodeName 永远是 #text文档节点的 nodeName 永远是 #document注释：nodeName 所包含的 XML 元素的标签名称永远是大写的
nodeValue对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeTypenodeType 属性可返回节点的类型。
最重要的节点类型是：
元素类型 ==》节点类型元素element ==》1属性attr ==》2文本text ==》3注释comments ==》8文档document ==》 9
在IE中会自动过滤掉空白文本节点 elem.previousSibling
在FireFox，Chrome等浏览器中可能会包含空白文本节点 elem.previousSibling --- [object text]