經常使用函數封裝

1. 獲取元素ID

var getDom = function(id){
  return document.getElementById(id);
}

2. 增長事件監聽事件

var addEvent = function(id, event, fn){
  var el = getDom(id) || document;
  if(el.addEventListener){
    el.addEventListener(event, fn, false);
  }else if(el.attachEvent){
    el.attachEvent('on'+event, fn);
  }
}

3. 獲取元素到body邊緣的offsetLeft / offsetTop值

var getElementLeft = function(element){
  var actualLeft = element.offsetLeft;
  var current = element.offsetParent;

  while(current !== null){
     actualLeft += current.offsetLeft;
     current = current.offsetParent;
  }
  return actualLeft;
}
//獲取的值是沒有'px'單位的
var getElementTop = function(element){
  var actualTop = element.offsetTop;
  var current = element.offsetParent;

  while(current !== null){
     actualTop += current.offsetTop;
     current = current.offsetParent;
  }
  return actualTop ;
}

 

4. ajax請求

var ajaxGet = function(url, callback){
    var _xhr = null;
    if(window.XMLHttpRequest){
        _xhr = new XMLHttpRequest();
    }else if(window.ActiveXObject){
         _xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    _xhr.onreadystatechange = function(){
        if( _xhr.readyState == 4 && _xhr.status == 200){
             callback(JSON.parse(_xhr.responseText)) 
             // responseText 是後臺返回的值
             //JSON.parse()能夠把字符串解析成JS能夠識別的對象;
        }
    }
    //向服務端發送請求
    _xhr.open('get', url, false);  //false 使用異步請求
    //向服務端發送數據
    _xhr.send(null);
}

 

5.  事件代理

var delegateEvent = function(target, event, fn){   // target 能夠是元素標籤/class
    addEvent(document, event, function(e){
        if(e.target.nodeName == target.toUpperCase()){
            fn.call(e.target);
        }
    })
}

6. 滾輪事件

//非FF
  //event.wheelDelta
  // 正數:向上滾動，負數：向下滾動
  // 滾動一次值120
  document.body.onmousewheel = function (event) {
    event = event || window.event;
    console.log('onmousewheel');
    console.log(event);
    console.log('event.detail=' + event.detail);//0
    console.log('event.wheelDelta=' + event.wheelDelta);
  };
 //FF
  //  event.detail
  //  正數：向下滾動，負數：向上滾動
  //  向上滾動一頁值爲-32768，向下滾動一頁值爲+32768，其餘值表明滾動的行數, 方向表明了數值的正負號
  //  受信任的事件是不會給detail賦值0
  document.body.addEventListener("DOMMouseScroll", function (event) {
    console.log('DOMMouseScroll');
    console.log(event);
    console.log(event.detail);
  });
  function log(arg) {
    window.console && window.console.log(arg);
  }

    $(document).on("mousewheel DOMMouseScroll", MouseWheelHandler);
    function MouseWheelHandler(e) {
        e.preventDefault();
        var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
        var delta = Math.max(-1, Math.min(1, value));
        if(canScroll){  //delta=1 時，向上滑動
            if (delta < 0) {
                SP.moveSectionDown();
            }else {
                SP.moveSectionUp();
            }
        }
        return false;
    }

View Code

 7.判斷是否支持CSS屬性

function(property){
  var body = $("body")[0];
  for(var i=0;i<property.length;i++){
    if(property[i] in body.style){
        return true;
    }
  }
  return false;
}

 8. 獲取className的元素

var getCls = function(cls){
    var clsObj = [];
    var tags = document.getElementsByTagName('*');
    // for(var i=0;i<tags.length;i++){
    //     if(tags[i].getAttribute("class") == cls){
    //         clsObj.push(tags[i]);
    //     }
    // }
    for(var i = tags.length - 1; i>= 0; i--){
        var clsName = tags[i].getAttribute("class");
                // 判斷class屬性是否存在,而且經過字符串查找className裏面是否包含cls
        if(clsName !== null && clsName.indexOf(cls) !== -1){
            clsObj.push(tags[i]);
        }
    }
    return clsObj;
}