《精通javascript》里的一些函数(一)

原文地址：点击打开链接

书没有好坏之分，正如人没有绝对的好坏之分一样。书只看对自己这个水平层次的人来说该吸收的东西多少了。当然，尽信书不如不读书。人，在特定的历史条件下做出的某些选择是有助于推动历史前进的步伐的，所以要用多变的眼光来看待回忆中的人与事将会使你的人生多彩而斑斓。

《精通js》这本书，承载了众多jqer期待的梦，结果可想而知。不多说了，列举几个简单的函数，供参考。不为过去，只为将来那些未曾实现的梦...

 

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<num; i++){
        if(elem != null) elem = elem.parentNode; //原书中这块有错
    }
    return elem;
}

/**
 * 得到相关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<e.length; i++){
        if(re.test(e[i].className)){
            r.push(e[i]);
        }
    }
    return r;
    //http://www.cnblogs.com/rubylouvre/archive/2009/09/01/1557765.html //司徒兄有不同的看法
}

/**
 * 获取元素文本
 * @param {Object} e
 */
function text(e){
    var t = '';
    e = e.childNodes || e;
    for(var i=0; i<e.length; i++){
        //如果不是元素，则追加其文本值
        t += e[i].nodeType != 1 ? e[i].nodeValue : text(e[i].childNodes);
    }
    return t;
}

/**
 * 
 * @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<a.length; i++){
        //如果是字符串
        if(a[i].constructor == String){
            //用一个临时元素来存放HTML
            var div = document.createElement('div');
            div.innerHTML = a[i];
            //提取DOM结构到临时的div中
            for(var j=0; j<div.childNodes.length; j++){
                r[r.length] = div.childNodes[j];
            }
        } else if(a[i].length){ //如果它是数组
            //假定DOM节点数组
            for(var j=0; j<a[i].length; j++){
                r[r.length] = a[i][j];
            }
        } else { //否则假定是DOM节点
            r[r.length] = a[i];
        }
    }
    
    return r;
}

//此方法我已修改与原文中有异
/**
 * 添加元素 (如果只有一个参数(无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];
    }
}