定制JQ

83 阅读1分钟

(function(){ function (element){ let ele = document.querySelector(element) /* 思路:('.div1')返回一个元素对象 元素对象里面有一个css方法 可以通过传参 改变$('.div1')的样式 / / 元素也是一个对象 也可以添加属性和值 */ ele.css = function(key,value){ this.style[key] = value; }

    ele.show = function(){
        this.style.display = 'block';
    }

    ele.hide = function(){
        this.style.display = 'none';
    }
    ele.addClass = function(className){
        /* 原生的className会覆盖之前的类名 */
        this.className = this.className + ' ' +className;
    }
    ele.removeClass = function(className){
        this.className = this.className.replace(className,'')
    }

    ele.click = function(callback){
        this.onclick = callback;
    }

    /* 实现jq的 addClass removeClass 方法 */
    return ele;
}
/* 把局部的方法$ 挂载到window上变成全局的 
就可以使用了 */
window.$ = $;

})()