定制化jq

jQuery源码第一行到最后一行是一个匿名函数

(function(){
    ...
})()

()括起来的目的 是把()内部的代码解释成一个表达式

思路：$('.div1')返回一个元素对象

元素对象里面有一个css方法 可以通过传参 改变$('.div1')的样式

元素也是一个对象 也可以添加属性和值

(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.$ = $;
})

原生转成jq对象

let h1 = document.querySelector('h1')

console.log( $(h1).get(0) )

/* jq对象转原生的方法 */

    /* 第一种 $('h1')[0] */

第二种

使用$('h1').get(0)方法 可以把单个的jq元素转成原生dom对象