js中的封装

js封装函数

// 获取Id
function getId(e) {
return document.getElementById(e);
}

// 获取类名的集合
function getClassName(e) {
return document.getElementsByClassName(e);
}

// 获取标签名的集合
function getTagName(e) {
return document.getElementsByTagName(e);
}

// 获取名称的集合
function getName(e) {
return document.getElementsByName(e);
}

function query(e) {
return document.querySelector(e);
}

function queryAll(e) {
return document.querySelectorAll(e);
}

function setTxt(e, text) { //解决textContent不兼容为题

if (e.textContent == undefined) {            //实行兼容性策略
    e.innerText = text;
} else {                                      //若e.textContent为false，则textContent方法可行
    e.textContent = text;
}

}

function element(e) {
e = e || window.event; //获取事件对象的兼容
}
//封装匀速动画函数
function animate(element, target) {
//先清除定时器, 再开启定时器, 防止多次绑定
clearInterval(element.timeId);

element.timeId = setInterval(function () {
    //1. 获取元素的位置
    var current = element.offsetLeft;
    //2.div每一次移到多少距离
    var step = 9;
    //优化 :
    step = current < target ? step : -step;
    //3.每一次移动后的距离
    current += step;
    //4.判断条件?
    // 思路 : 根据你的每次还需要移动的距离判断 > step , 设置left值
    //  current === 396 走的是else
    if(Math.abs(target - current) > Math.abs(step) ){
        element.style.left = current + "px";
    }else {
        //清理定时器
        clearInterval(element.timeId);
        element.style.left = target + "px";
    }
}, 5)

}

/* 变速动画封装 */
function variableAnimation(el, target) {
//清除定时器
clearInterval(el.timer);
//设置定时器
el.timer = setInterval(function () {
//1、获取当前对象相对于父级的位置
var current = el.offsetLeft;
//2、设置变速
var step = (target - current) / 11;
//3、解决step为0时，位置不变的问题
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//4、更新对象当前位置
current += step;
el.style.left = current + “px”;
//5、到达指定位置，清除定时器
if (current == target) {
clearInterval(el.timer);
}
}, 20);
}

// 需求 : 设置多个任意的属性
/* 封装样式属性

@params : element 元素

      attrObj 属性对象

      fn 回调函数

*/
function speedAnimate(element,attrObj,fn) {
//先清除定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//优化 : 通过开关操作定时器
var flag = true;
//改 : 遍历的设置指定目标位置
for(var attr in attrObj){

      //优化 : 当前遍历的属性有没有opacity   当前透明值 : 0.2  过渡区间: 0.2-0.8 目标 : 0.8
      if(attr ==="opacity"){
          //1. 获取当前的元素属性值
          var current = getStyle(element,attr)*100; // 0.2 *100 = 20 让当前的透明度放大100倍
          //2.移动的步数 = 指定目标位置 - 当前位置 / 10
          //2.1 获取指定目标位置
          var target = attrObj[attr] * 100; //0.8 * 100 = 80
          var step = (target - current) / 10; // 6
          //3.判断步数的正负
          step = step > 0 ? Math.ceil(step) : Math.floor(step); //向上取整
          //4.移动后的元素位置
          current += step; // 20 + 6 = 26
          //5.赋值属性
          element.style[attr] = current / 100; //缩小100倍

      }else if(attr == "zIndex"){
          //说明设置的是层级, 直接赋值即可
          element.style[attr] = attrObj[attr];


      }else{
          //1. 获取当前的元素属性值  注意: 转化number类型   改!!!!!!!!!!!!!!!!!!!!!!!!!!
          var current = parseInt(getStyle(element,attr));
          //2.移动的步数 = 指定目标位置 - 当前位置 / 10
          //2.1 获取指定目标位置
          var target = attrObj[attr];
          var step = (target - current) / 10;
          //3.判断步数的正负
          step = step > 0 ? Math.ceil(step) : Math.floor(step); //向上取整
          //4.移动后的元素位置
          current += step;
          //5.赋值属性   改!!!!!!!!!!!!!!!!!!!!!!!!
          element.style[attr] = current + "px";
      }

/*

封装 : 获取任意一个元素中任意一个样式属性

@params : element dom元素

      attr  样式属性名

@return : 样式属性值

*/
function getStyle(element, attr) {
//判断是否支持该方法
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
}

   //6. 只要有一个属性没有到达当前目标, 就让flag = false
   if(current != target){
       flag = false;
   }

}

if(flag){
clearInterval(element.timeId);
//调用用户传进来的函数 , 如果没传参, 需要先判断是否有这个fn函数, 以保证不会出错
// if(fn){
// fn();
// }
// 等价于以下写法
fn && fn();

}
// console.log(“目标位置是:” + target + ", 当前位置 : " + current + “, 每次移动的步数:” + step);
},20)
}

function getStyle(element,attr) {
//判断是否支持该方法
if (window.getComputedStyle) {
return window.getComputedStyle(element,null)[attr];
}else{
return element.currentStyle[attr];
}

}
/*
对于元素间的空格，IE9及以前版本不会返回文本节点，
而其他所有浏览器都会返回文本节点。这样导致了在使用childNodes和firstChild等属性时的行为不一致。

兼容ie8获取父元素的第一个子元素
非ie8使用firstElementChild[获得父元素下第一个子元素]
ie8时，使用firstChild[获得父节点中第一个节点,在ie8中，是获得父元素下第一个子元素]
*/
function getElementFirstChild(e) {
if (e.firstElementChild) {
return e.firstElementChild;
} else {
return e.firstChild;
}
}

function getElementLastChild(e) {
if (e.lastElementChild) {
return e.lastElementChild;
} else {
return e.lastChild;
}
}

function getElementBortherPrev(e) {
if (e.previousElementSibling) {
return e.previousElementSibling;
} else {
return e.previousSibling;
}
}

function getElementBortherNext(e) {
if (e.nextElementSibling) {
return e.nextElementSibling;
} else {
return e.nextSibling;
}
}

//封装:为任意元素, 绑定任意事件, 执行任意的处理函数
/*

@params : element, type, fn
@return :
*/
function addEvent(element, type, fn) {
//判断当前元素是否支持哪个方法
if(element.addEventListener){
element.addEventListener(type, fn, false);
}else if(element.attachEvent){
element.attachEvent(“on”+type, fn);
}else {
element[“on” + type] = fn;
}
}
//封装阻止冒泡
function stopBubble(event){

event = event || window.event;

if(event.stopPropagation){
    event.stopPropagation();
}else {
    event.cancelBubble = true;
}

}

/* 封装 : 获取浏览器向上或者向左卷曲出去的距离
*
* @params :null
* @return : object
* */

function getScroll() {
var obj = {};
obj.top = window.pageYOffset || document.documentElement.scrollTop;
obj.left = window.pageXOffset || document.documentElement.scrollLeft;
return obj;
}