JQ

Jq的简单使用的

{
    // 原生
    document.querySelector(".btn").onclick = function(){
        console.log(1);
    }
    // Jq
    $(".btn").click(function(){
        console.log(1);
    });
    // 两个都是一样效果!
}
{
    // $(".btn");//JQ的选择器;
    /* 
        JQ的选择器有三种方式:
    */
    $(".btn");//字符串 -> 类,class,标签选择器;
    $(function(){});//回调函数 -> 直接执行里面逻辑
    $(document.querySelector(".btn"));//dom节点 -> 一个对象
    $(document.querySelectorAll(".btn"));//dom节点 -> 多个对象
}
{
    // jq的基本分析
    // $(".btn") -> 就是一个$()函数执行,里面带有参数
    // $(".btn").click() -> .click() 就像对象里面的方法
        /* let obj = {
            click(){
                console.log(1);
            }
        }
        obj.click(); */
        // 所以,$(".btn").click() 这步可以返还一个对象,对象里面就可以 执行这个click函数
        // $(".btn").click(function(){}); click(参数) , 参数也就可以放到:
            /* let obj = {
                click(fn){
                    fn();
                }
            }
            obj.click(function(){
                console.log("执行")
            }) */
    // 小总结: 1.有一个$()函数,返还对象 2.对象里面的方法执行;
}

模拟jq的$()选择器

{
    /* 
        $()选择器
        一、字符串找到节点 -> string
            1.传参
            2.通过对应字符串得到对应节点;
                document.querySelectorAll(arg);
            3.伪数组的处理:
            因为他们都是在对象里面,this就是实例化对象 -> 外部使用$()的对象; -> 是对象也就可以添加下标 = 对应节点;
                for(let i = 0;i<els.length;i++){
                    this[i] = els[i];
                }
                this.length = els.length;
        二、传入方法 -> function
            首先观看他们的区别:传进来的数据是有 类型区别的(字符串,方法,对象);
            页面加载完毕执行:
                window.addEventListener("DOMContentLoaded",arg,false);
        三、传入对象 -> object
            1.判断对象个数:
                if(typeof arg.length === "undefined"){
                    // 单对象
                    this[0] = arg;
                    this.length = 1;
                }else{
                    // 多对象
                    this.addEle(arg);
                }
    */

   class Jq{
        constructor(arg){
            if(typeof arg === "string"){
                // console.log(arg);//.btn
                let els = document.querySelectorAll(arg);
                // console.log(els);//->NodeList 伪数组;

                this.addEle(els)
            }else if(typeof arg === "function"){//传入方法 -> 页面加载完成就执行;
                window.addEventListener("DOMContentLoaded",arg,false);
            }else{
                // 有两种情况:1.一个对象 2.对象类数组(有length);
                    // 注:一个对象并没有length; -> undefined
                // 判断是单对象还是多对象
                if(typeof arg.length === "undefined"){
                    // 单对象
                    this[0] = arg;
                    this.length = 1;
                }else{
                    this.addEle(arg);
                }
            }
            
        }
        addEle(els){
            // 因为他们都是在对象里面,this就是实例化对象 -> 外部使用$()的对象; -> 是对象也就可以添加下标 = 对应节点;
            for(let i = 0;i<els.length;i++){
                this[i] = els[i];
            }
            this.length = els.length;//为这群节点来一个统计,好进行调用;
            // console.log(this);//一群元素
        }
        click(fn){//click方法回调:
            // addEventListener : 当用户"点击"，在元素上执行函数
            for(let i = 0;i<this.length;i++){
                this[i].addEventListener("click",fn,false);//绑冒泡定事件,事件,阻止
            }
        }
    }
    function $(arg){
        return new Jq(arg);
    }
}

 

来源：https://www.cnblogs.com/Afanadmin/p/12388350.html