一些常用的原生js方法（函數）

1. addLoadEvent解決window.onload=fn在頁面加載執行一次，addLoadEvent(fn)可以直接綁定多個函數在加載后執行

function addLoadEvent(fn) {
        var oldLoad = window.onload; //把之前window.onload調用的函數保存起來
        if( typeof window.onload != "function") { //如果window.onload還未指向function
            window.onload = fn ;
        } else {
            window.onload = function() { //
                oldLoad();
                fn();
            }
        }
    }

 

 

2.getElementsByClassName ,HTML5新增了此方法，使用這個方法可以帶多個類名，如getElementsByClassName(" sale active ") 順序不重要，為了使用老瀏覽器

function getElementsByClassName(node,className) {
    if(node.getElementsByClassName) {
        //使用h5現有方法
        return node.getElementsByClassName(className);
    } else {
        var result = new Array();
        var elems = node.getElementsByTagName("*");
        for( var i=0; i<elems.length; i++) {
            if(elems[i].className.indexOf(className) != -1) {
                result[result.length] = elems[i]; // 或result.push(elems[i]);
            }
        }
        return result;
    }
}

 

 

3.getStyle(obj,attr)獲取對象屬性

function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }
        else{
            return getComputedStyle(obj,false)[attr];
        }
    }

 

4.css(obj,attr,valve)，上面的增強版，獲取和設置一個對象的CSS屬性 

function css(obj, attr, value)
{
    switch (arguments.length)
    {
        case 2:     
            if(typeof arguments[1] == "object") //2個參數，第一個參數為obj，第二個參數為json(對象)格式{attr:value,attr2:value}
            {    
                for (var i in attr) i == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + attr[i] + ")", obj.style[i] = attr[i] / 100) : obj.style[i] = attr[i];
            }
            else     //否則，2個參數一般為獲取obj.attr值
            {    
                return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
            }
            break;
        case 3:     //3個參數為直接設置屬性 obj.style[attr] = value
            attr == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + value + ")", obj.style[attr] = value / 100) : obj.style[attr] = value;
            break;
    }
};

 

5. insertAfter，DOM有insertBefore方法，沒有 insertAfter方法。我們完全可以利用已有DOM方法和屬性編寫一個insertAfter()函數

function insertAfter(newElement, targetElement) {
        var parent = targetElement.parentNode ;
        // 如果父元素最后的子節點就是 目標節點 , 則直接追加到父元素后面
        if( parent.lastChild == targetElement ) {
            parent.appendChild(newElement);
        } else {
            //否則將新元素插入到目標元素的下一個元素之前
            parent.insertBefore(newElement,targetElement.nextSibling);
        }
    }

 

6.借助call或apply用其它對象的方法來操作某個函數，

function bind(obj,fn) {
    return function(){
        fn.apply(obj,arguments); //相當於obj.fn 
    }
}

 

7.事件對象綁定與解除

/*-------------------------- +
  事件綁定, 刪除
 +-------------------------- */
var EventUtil = {
    addHandler: function (oElement, sEvent, fnHandler) {
        oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : (oElement["_" + sEvent + fnHandler] = fnHandler, oElement[sEvent + fnHandler] = function () {oElement["_" + sEvent + fnHandler]()}, oElement.attachEvent("on" + sEvent, oElement[sEvent + fnHandler]))
    },
    removeHandler: function (oElement, sEvent, fnHandler) {
        oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, oElement[sEvent + fnHandler])
    },
    addLoadHandler: function (fnHandler) {
        this.addHandler(window, "load", fnHandler)
    }
};

 

8.萬能運動方法

function startMove(obj,json,endFn){
    
        clearInterval(obj.timer);
        
        obj.timer = setInterval(function(){
            
            var bBtn = true;
            
            for(var attr in json){
                
                var iCur = 0;
            
                if(attr == 'opacity'){
                    if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
                    iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
                    
                    }
                    else{
                        iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
                    }    
                }
                else{
                    iCur = parseInt(getStyle(obj,attr)) || 0;
                }
                
                var iSpeed = (json[attr] - iCur)/8;
            iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(iCur!=json[attr]){
                    bBtn = false;
                }
                
                if(attr == 'opacity'){
                    obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
                    obj.style.opacity = (iCur + iSpeed)/100;
                    
                }
                else{
                    obj.style[attr] = iCur + iSpeed + 'px';
                }
                
                
            }
            
            if(bBtn){
                clearInterval(obj.timer);
                
                if(endFn){
                    endFn.call(obj);
                }
            }
            
        },30);
    
    }