js学习 —— 封装的函数

封装的函数

/* 
获取单个dom元素
    obtain(selectStr)
        selectStr:选择器的字符串
*/
function obtain(selectStr) {
    return document.querySelector(selectStr);
}

/* 
    获取多个dom元素
    selectStr：选择器的名字
*/
function obtainAll(selectStr) {
    return document.querySelectorAll(selectStr);
}

/* 
  绑定单击事件
    bindClick(selectStr,callback)
      selectStr:选择器的字符串
      callback：回调函数
*/
function click(selectStr, callback) {
    document.querySelector(selectStr).onclick = callback;
}

/* 
    绑定鼠标移出事件
    selectStr:选择器的字符串
      callback：回调函数
*/
function out(selectStr, callback) {
    document.querySelector(selectStr).onmouseleave = callback;
}

/* 
    绑定鼠标移入
    selectStr:选择器的字符串
      callback：回调函数
*/
function shiftIn(selectStr, callback) {
    document.querySelector(selectStr).onmouseenter = callback;
}


/* 
    节点创建函数
        参数可以传 1.标签字符串  2.文本节点【可选】   3.属性(对象) 【可选】
*/
function add() {
    // arguments[0] 标签
    // arguments[1]文本/属性对象 [可选]
    // arguments[2]属性对象 [可选]
    let dom = document.createElement(arguments[0]);
    if (arguments.length === 1) {
        return dom;
    }
    if (arguments.length === 2) {
        if (typeof arguments[1] === "object") {
            for (let key in arguments[1]) {
                dom[key] = arguments[1][key];
            }
        } else {
            dom.appendChild(document.createTextNode(arguments[1]));
        }
    } else if (arguments.length === 3) {
        dom.appendChild(document.createTextNode(arguments[1]));
        for (let key in arguments[2]) {
            dom[key] = arguments[2][key];
        }
    }
    return dom;
}


//删除事件执行函数
function del() {
    let tParent = this.parentNode,
        verify = confirm("您确定要删除" + tParent.firstElementChild.innerHTML + "吗?");
    if (verify) {
        //删除
        tParent.parentNode.removeChild(tParent);
    }
    return false;
}



/* 
  可以获取css样式也可以设置css样式
    dom:需要操作样式的dom对象
    style：[string,object]  string :读取样式   object：设置样式
*/
function css(dom, style) {
    if (typeof style === "string") {
        //获取css样式
        return window.getComputedStyle(dom)[style]
    }
    //设置样式
    for (var key in style) {
        var value = !isNaN(parseInt(style[key])) ? parseInt(style[key]) + "px" : style[key]
        if (key.indexOf("-") === -1) {
            dom.style[key] = value
        } else {
            var keyArr = key.split("-");
            var newKey = keyArr[0]
            for (var i = 0; i < keyArr.length; i++) {
                if (i > 0) {
                    var changeKey = keyArr[i][0].toUpperCase() + keyArr[i].slice(1)
                    newKey += changeKey;
                }
            }
            dom.style[newKey] = value
        }
    }
}

/* 
addClass(el,clsName)
添加class名字
    1.el 需要设置的dom元素
    2.clsName 设置的名字
*/
function addClass(el, clsName) {
    var className = el.className
    if (className.split(" ").indexOf(clsName) != -1) return
    //没有该类名  添加
    if (el.className) {
        //有
        el.className += " " + clsName
    } else {
        //没有类名
        el.className = clsName
    }

}


/* 
removeClass(el,clsName)
删除类名
    1.el:需要操作的dom对象
    2.删除的类名 string
*/
function removeClass(el, clsName) {
    var className = el.className;
    classArr = className.split(" ")
    var index = classArr.indexOf(clsName)
    if (index != -1) {
        classArr.splice(index, 1)
    }
    var newClassName = classArr.join(" ")
    el.className = newClassName
}


/* 
hasClass(el,clsName)  
判断类名
    1.el:操作的dom对象
    2.clsName：要判断的类名
    
*/
function hasClass(el, clsName) {
    var clsArr = el.className.split(" ")
    // if(clsArr.indexOf(clsName) != -1){
    //   return true
    // }else{
    //   return false
    // }
    return clsArr.indexOf(clsName) != -1
}

/* 
    event()
    el:绑定的元素对象
    eventStr:事件名 不带on
*/
function event(el, eventStr, callback) {
    if (el.addEventListener) {
        //其它浏览器
        el.addEventListener(eventStr, callback, false)
    } else {
        //ie8及以下
        // bind 不支持ie8以下
        el.attachEvent("on" + eventStr, function () {
            callback.call(el)
        })
    }
}

/* 
toggleClass:
    切换类名
    1.el：需要操作的dom元素
    2.clsName：需要操作的类名
*/
function toggleClass(el, clsName) {
    hasClass(el, clsName) ? removeClass(el, clsName) : addClass(el, clsName)
}

/* 
    el:dom对象
    styleStr：样式的名字
*/
function getStyle(el, styleStr) {
    if (window.getComputedStyle) {
        //其它浏览器
        return window.getComputedStyle(el)[styleStr]
    } else {
        //ie8及以下的
        return el.currentStyle[styleStr]
    }
}

/* 
  设置cookie
    参数:
      [2,3]
      2: 1.) 对象  2).有效期
      3: 1 ) key   2) value  3) 有效期
*/
function setCookie() {
    var date = new Date();
    var time = date.getTime() + (arguments[arguments.length - 1] * 24 * 60 * 60 * 1000)
    date.setTime(time)
    if (arguments[2]) return document.cookie = arguments[0] + "=" + arguments[1] + ";expires=" + date.toUTCString();
    //setCookie({ name: 13, age: 13 }, 7)
    for (var key in arguments[0]) {
        // key:   obj[key]
        document.cookie = key + "=" + arguments[0][key] + ";expires=" + date.toUTCString();
    }
}

/* 读cookie 
      getCookie(key)
        key:需要读取的cookie属性
*/
function getCookie(key) {
    var cookies = document.cookie
    var cookieObj = {}
    var cookieArr = cookies.split(";")
    for (var i = 0; i < cookieArr.length; i++) {
        var cookieItem = cookieArr[i].trim()
        var cookieItemArr = cookieItem.split("=")
        cookieObj[cookieItemArr[0]] = cookieItemArr[1]
    }
    return cookieObj[key]
}

/* 
    封装一个渐渐隐藏的函数
    参数：
        el 需要隐藏的dom对象
        time:时间
*/

function fadeOut(el, time) {
    if (!+window.getComputedStyle(el).opacity) return
    var o = 1;
    var i = setInterval(function () {
        o -= 0.1
        if (o <= 0) {
            clearInterval(i)
            el.style.display = "none";
        }
        el.style.opacity = o
    }, time / 10)
}


/* 
  封装一个函数切换渐渐显示隐藏
*/
function fadeToggle(el, time) {
    if (+window.getComputedStyle(el).opacity) {
        //显示的时候 隐藏
        fadeOut(el, time)
    } else {
        fadeIn(el, time)
    }
}

/* 封装一个函数 让元素渐渐的显示出来 */
function fadeIn(el, time) {
    if (+window.getComputedStyle(el).opacity) return
    var o = 0;
    var i = setInterval(function () {
        o += 0.1
        if (o >= 1) {
            clearInterval(i)
        }
        el.style.opacity = o
    }, time / 10)
}

/* 
    封装一个隐藏的函数(卷帘门)
*/
function slideUp(el, time) {
    var h = el.offsetHeight;
    var height = h;
    var interId = setInterval(function () {
        height -= h / (time / 20)
        if (height <= 0) {
            clearInterval(interId)
            el.style.display = "none";
        }
        el.style.height = height + "px"

    }, 20)
}

/* 封装一个显示的函数(卷帘门) */
function slideDown(el, time) {
    if (!window.h) {
        window.h = parseInt(getStyle(el, "height")) + parseInt(getStyle(el, "borderWidth")) * 2 + parseInt(getStyle(el, "padding")) * 2
    }
    el.style.height = 0
    el.style.display = "block";
    var height = 0;
    var interId = setInterval(function () {
        height += window.h / (time / 20)
        if (height >= window.h) {
            clearInterval(interId)
        }
        el.style.height = height + "px"
    }, 20)
}

/* 
    move:动画函数
    el：需要执行动画dom对象,
    attr:属性
    target:目标位置
    speed:速度
    callback：回调函数
*/
function move(el, attr, target, speed, callback) {
    clearInterval(el.interId)
    var currentVlaue = parseInt(getStyle(el, attr))
    if (currentVlaue > target) {
        speed = -speed
    }
    el.interId = setInterval(function () {
        var oldValue = parseInt(getStyle(el, attr))
        var newValue = oldValue + speed;
        if (speed > 0 && newValue >= target || speed < 0 && newValue <= target) {
            newValue = target
        }
        el.style[attr] = newValue + "px"
        if (newValue === target) {
            clearInterval(el.interId)
            callback && callback()
            // 上一行代码等同于此代码if(callback){
            //   callback()
            // }

        }
    }, 30);
}

点击下载