javascript之三：工具函数

日常开始中常用到的一些原生JavaScript函数,比较实用, 今天特地整理一下,分享给大家,希望对大家有用,会常更新,同时也欢迎大家补充.
css及html方面的技巧总结,点此前往: 前端开发中一些常用技巧总结, 你还可以前往兰芝博客, 查看由淘宝UED整理的前端tips: http://www.12sui.cn/category/css/.
1. document.getElementById的简写: http://mrthink.net/javascript-getbyid-simplewrite/;
2. getElementsByTagName的简写方式: http://mrthink.net/javascrip-simple-getelementsbytagname/;
3. 原生JavaScript中获取元素索引的函数: http://mrthink.net/javascript-index-functio/;
4. 替代window.onload,可多次调用的加载函数:

function iLoad(func) {
    var oLoad=window.onload;
    if(typeof window.onload!='function'){
        window.onload=func;
    }else{
        window.onload=function(){
            oLoad();
            func();
        }
    }
}

5. 获取下一个元素节点:

function nextElem(node){
    if(node.nodeType==1) return node;
    if(node.nextSibling) return nextElem(node.nextSibling);
    return null;
}

6. 获取上一个元素节点(此函数须调用第五条中的函数):

function prevElem(node){
    if(node.nodeType==1){
        return node;
    }else if(node.previousSibling){
        return nextElem(node.previousSibling);
    }else{
    return null;
    }
}

7. 原生JavaScript中有insertBefore方法,可惜却没有insertAfter方法,怎么办?用如下函数实现:

function insertAfter(newChild,refChild){
    var parElem=refChild.parentNode;
    if(parElem.lastChild==refChild){
        refChild.appendChild(newChild);
    }else{
        parElem.insertBefore(newChild,refChild.nextSibling);
    }
}

8. 为元素添加样式[记住是添加不是替换,相当于jQuery中的addClass(value)]:

function addClass(elem,value){
    if(!elem.className){
        elem.className=value;
    }else{
        var oValue=elem.className;
        oValue+=" ";
        oValue+=value;
        elem.className=oValue;
    }
}

9. 获取元素的样式:

function getStyle(id,stylename){
    var elem=$(id);
    var realStyle=null;
    if(elem.currentStyle){
        realStyle=elem.currentStyle[stylename];
    }else if(window.getComputedStyle){
        realStyle=window.getComputedStyle(elem,null)[stylename];
    }
    return realStyle;
}

10. 兼容事件绑定:

function addEventSamp(obj,evt,fn){
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }else if(obj.attachEvent){
        obj.attachEvent('on'+evt,fn);
    }
}

11. 移除事件

function removeEventSamp(obj,evt,fn){
    if(obj.removeEventListener){
        obj.removeEventListener(evt,fn,false);
    }else if(obj.detachEvent){
        obj.detachEvent('on'+evt,fn);
    }
}

12. 检测样式

function hasClass(element, className){
    var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
    return element.className.match(reg);
}

13. 删除样式

function removeClass(element, className){
    if (hasClass(element, className)) {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        element.className = element.className.replace(reg, ' ');
    }
}

原文发布于Mr.Think的博客： http://mrthink.net/javascript-common-function-tip/ 转载请注明

1 表单控件转换成json数据提交

function formURIEncode(form, custom) {
    var elems = form.elements;
    custom = "," + (custom || "") + ",";
    var ret = [];
    for (var i = 0; i < elems.length; i++) {
        var elem = elems[i];
        var name = elem.name;
        if (elem.disabled || !name || custom.indexOf("," + name + ",") > -1) {
            continue;
        }
        switch (elem.type) {
        case "text":
        case "hidden":
        case "password":
        case "textarea":
            ret.push(name + "=" + encodeURIComponent(elem.value));
            break;
        case "radio":
        case "checkbox":
            if (elem.checked) {
                ret.push(name + "=" + encodeURIComponent(elem.value));
            }
            break;
        case "select-one":
            if (elem.selectedIndex > -1) {
                ret.push(name + "=" + encodeURIComponent(elem.value));
            }
            break;
        case "select-multiple":
            var opt = elem.options;
            for (var n = 0; n < opt.length; E++) {
                if (opt[n].selected) {
                    ret.push(name + "=" + encodeURIComponent(opt[n].value));
                }
            }
            break;
        }
    }
    return ret.join("&");
}