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);
    }
}

模范JQ click,eq方法的基本讲解

{
    /* 
        $()选择器
        一、字符串找到节点 -> 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);
                }
        eq方法:
            为了可以实现链式操作,就需要返还:
            return 实例化对象
            若不是实例化对象,就是一个dom节点就不能使用实例化方法;
        click方法:
            若这个方法也要链式操作,就需要return this
    */

   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);//绑冒泡定事件,事件,阻止
            }
            return this;
        }
        eq(index){
            // return this[index];//这里是一个原生节点 -> 也就不能再进行使用其他方法;
            return new Jq(this[index]);//所以 实例化一下 原生节点;
        }
    }
    function $(arg){
        return new Jq(arg);
    }
}

模范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);
                }
        eq方法:
            为了可以实现链式操作,就需要返还:
            return 实例化对象
            若不是实例化对象,就是一个dom节点就不能使用实例化方法;
        click方法:
            若这个方法也要链式操作,就需要return this
        on方法:
            判断传进来的事件名称,加个循环;
        end方法;
            使用root记录上次操作节点;
                没有就document,有就和eq方法有关系;
            直接返还上次节点;
                return this.prevObject;
            继续调用;
        get方法;
            返回原生节点不能继续操作;
        css方法;
            1.判断参数
                1.参数长度
                2.参数类型
            2.getStyle();
            3.setStyle();
    */

   class Jq{
        constructor(arg,root){
            if(typeof root === "undefined"){
                this['prevObject'] = [document];
            }else{
                this['prevObject'] = root;
            }
            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);//绑冒泡定事件,事件,阻止
            }
            return this;
        }
        on(eventName,fn){
            let reg = /\s+/g;
            let eventArr = eventName.replace(reg," ").split(" ");
            // console.log(eventArr);//拿到多个空格之后 优化的事件名称;
            for(let i = 0;i<this.length;i++){
                for(let j = 0;j<eventArr.length;j++){
                    this[i].addEventListener(eventArr[j],fn,false);
                }
            }
        }
        eq(index){
            // 可以继续操作
            // return this[index];//这里是一个原生节点 -> 也就不能再进行使用其他方法;
            return new Jq(this[index],this);//所以 实例化一下 原生节点;
        }
        get(index){
            // 不能继续操作
            return this[index];
        }
        end(){
            // 直接返还上次节点
            return this.prevObject;
        }
        css(...arg){
            // 不定参
            if(arg.length === 1){
                // 一个参数
                if(typeof arg[0] === "object"){
                    // 对象 设置样式
                    for(let i = 0;i<this.length;i++){
                        for(let j in arg[0]){
                            this.setStyle(this[i],j,arg[0][j]);
                        }
                    }
                }else{
                    if(arg[0] in $.cssHooks){
                        $.cssHooks[arg[0]].get(this[0]);
                    }else{
                       // 字符串; 获取样式
                        return this.getStyle(this[0],arg[0]);
                    }
                }
            }else{
                // 两个参数 -> 设置样式:样式名称 样式值
                for(let i = 0;i<this.length;i++){
                    this.setStyle(this[i],arg[0],arg[1]);
                }
            }
        }
        getStyle(ele,styleName){
            // console.log(ele,ele.style,ele.style[styleName]);
            // return ele.style[styleName];

            return window.getComputedStyle(ele,null)[styleName]
        }
        setStyle(ele,styleName,styleValue){
            if(typeof styleValue === "number" && !(styleName in $.cssNumber)){
                styleValue = styleValue + "px";
            }
            
            if(styleName in $.cssHooks){
                $.cssHooks[styleName].set(ele,styleValue);
            }else{
                ele.style[styleName] = styleValue;
            }
        }
    }
    function $(arg){
        return new Jq(arg);
    }
    $.cssNumber = {//判断包含以下内容的 样式名,不添加 px单位;
        opacity:true
    }
    $.cssHooks = {

    }
}