常用函数封装

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;
    }

 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;
}