jq原理——2-入口函数

原生jq入口函数总结

  /*
    原生$()中传入数据显示：
    1、原生jq传入 '' null undefined NaN 0 false 会返一个空的jQuery对象给我们

    2、原生jq传入 html片段'<p>1</P><p>2</P><p>3</P>' 会将创建好的dom对象储存在jq对象中并返回

    3、原生jq传入 选择器 会将找到的所有元素储存到jq对象中返回

    4、原生jq传入 数组（真数组：[1,2,3,4] 伪数组：{0:'lnj',1:'aa',2:'hh'},length:3） 会将数组中储存的元素依次储存到jq对象中并返回

    5、原生jq传入 对象function Person(){} 会将传入对象存储到jq对象并返回

    6、原生jq传入 DOM元素document.createElement('div') 会将传入的DOM元素储存到jq对象并返回

    7、原生jq传入 基本数据类型123 会将传入的基本数据类型储存到jq对象并返回

    总结：
    1、传入 '' null undefined NaN 0 false 会返一个空的jQuery对象
    2、字符串
    代码片段：会将创建好的dom对象储存在jq对象中并返回
    选择器：会将找到的所有元素储存到jq对象中返回
    3、数组
    真伪数组：会将数组中储存的元素依次储存到jq对象中并返回
    4、其他
    会将传入的数据储存到jq对象并返回
    */

    /*
    jq原型上的核心方法和属性：
    1、jquery 获取jq版本号
    2、selector 实例默认的选择器取值
    3、length 实例默认的长度

    4、push 给实例添加新元素
    5、sort 对实例中元素进行排序
    6、splice 按照指定下标指定数量删除元素，也可以替换删除的元素

    7、toArray 把实例转换为数组返回
    8、get 获取指定下标元素，获取的是元素dom

    9、eq 获取指定下标的元素，获取的是jQuery类型的实例对象
    10、first 获取实例中第一个元素 ，是jQuery类型的实例对象
    11、last 获取实例中最后一个元素，是jQuery类型的实例对象

    12、each 遍历实例，把遍历到的数据传给回调使用
    13、map 遍历实例，把遍历到的数据传给回调使用，然后把回调的返回值收集起来组成一个新的数组返回
     */

    /*
    dom操作方法
    1、empty 清空指定元素中所有内容
    2、remove 删除所有元素或指定元素

    3、html 设置所有元素的内容，获取第一个元素的内容
    4、text 设置所有元素的文本内容，获取所有元素的文本内容

    5、appendTo 将元素添加到指定元素内部的最后
    6、append 将元素添加到指定元素内部的最后

    7、prependTo 将元素添加到指定元素内部的最前面
    8、prepend 将元素添加到指定元素内部的最前面

    9、insertAfter 将元素添加到指定元素外部的后面
    10、after 将元素添加到指定元素外部的后面

    11、insertBefore 将元素添加到指定元素外部的前面
    12、before 将元素添加到指定元素外部的前面

    13、replaceAll 替换所有指定元素
    14、replaceWith 替换所有指定元素

    15、clone 复制节点（true深复制，false浅复制）
     */
    /*
    属性相关方法：
    1、attr():设置或者获取元素的属性节点值
    2、prop():设置或者获取元素的属性值
    3、css():设置获取样式
    4、val():获取设置value的值
    5、hasClass():判断有没有指定类
    6、addClass():给所有元素添加指定类或所有类
    7、removeClass:清空所有元素指定类或所有类
    8、toggleClass():有则删除 没有则添加
     */

       (function (window, undefined) {
        var hjQuery = function (selector) {
            return new hjQuery.prototype.init(selector);
        };
        hjQuery.prototype = {
            constructor: hjQuery,
            init: function (selector) {
                selector = hjQuery.trim(selector);//消除字符串前后空格
                //1、传入 '' null undefined NaN 0 false 会返一个空的jQuery对象
                if (!selector) {
                    // return this;
                }
                //2、函数方法处理
                else if (hjQuery.isFunction(selector)) {
                    hjQuery.ready(selector);
                }
                // 2、字符串
                else if (hjQuery.isString(selector)) {
                    // 代码片段：会将创建好的dom对象储存在jq对象中并返回
                    if (hjQuery.isHTML(selector)) {
                        //1、根据代码片段创建元素
                        var temp = document.createElement('div');
                        temp.innerHTML = selector;
                        /*
                        //2、将创建好的一级元素添加到jQuery当中
                        for (var i = 0; i < temp.children.length; i++) {
                            this[i] = temp.children[i];
                        }
                        //3、给jQuery对象添加length属性
                        this.length = temp.children.length;
                        */
                        [].push.apply(this, temp.children);//替换2、3步
                        //4、返回加工好的this（jQuery）
                        // return this;
                    }
                    // 选择器：会将找到的所有元素储存到jq对象中返回
                    else {
                        // 1、根据传入的选择器找到对应的元素
                        var res = document.querySelectorAll(selector);
                        // 2、将找到的元素添加到hjQuery上
                        [].push.apply(this, res);
                        // 3、返回加工上的this
                        // return this;
                    }
                }
                //3、数组

                else if (hjQuery.isArray(selector)) {
                    /*
                    //真数组
                    if (({}).toString.apply(selector) === '[object Array]') {
                        [].push.apply(this, selector);
                        return this;
                    }
                    //伪数组
                    else {
                        //将自定义伪数组转换为真数组
                        var arr=[].slice.call(selector);
                        //真数组转换为伪数组
                        [].push.apply(this, arr);
                        return this;
                    }
                */
                    //优化
                    //将自定义伪数组转换为真数组
                    var arr = [].slice.call(selector);
                    [].push.apply(this, arr);
                    // return this;
                }
                // 4、其他
                else {
                    this[0] = selector;
                    this.length = 1;
                    // return this;
                }
                return this;//都有 前面的可以不用了
            },
            //获取版本型号
            jquery: '1.1.0',
            //实例默认选择器取值
            selector: '',
            //实例默认的长度
            length: 0,
            //[].push找到数组的push方法
            //冒号前面push将来由hjQuery对象先用
            //相当于[].push.apply(this);//下两个相同
            push: [].push,//给实例添加新元素
            sort: [].sort,//对实例中的元素进行排序
            splice: [].splice,//按照指定下标指定数量删除元素，也可以替换元素
            //伪数组转换真数组
            toArray: function () {
                return [].slice.call(this);
            },
            //get方法如果不传递参数，相当于toArray
            //get传入参数获取伪数组中单个元素 传值负数，则用伪数组总长度加负值
            get: function (num) {
                //未传值
                if (arguments.length === 0) {
                    return this.toArray();
                }
                //传值不是负数
                else if (num >= 0) {
                    return this[num];
                }
                //传值负数
                else {
                    return this[num + this.length];
                }
            },
            //eq方法如果不传递参数，返包装函数
            //eq传入参数获取伪数组中单个元素并包装
            //eq与get区别：eq返包装后的对象，get返具体元素
            eq: function (num) {
                //未传值
                if (arguments.length === 0) {
                    return new hjQuery();
                }
                //传值
                else {
                    return hjQuery(this.get(num));
                }
            },
            //调用eq（0）
            first: function () {
                return this.eq(0);
            },
            //调用eq（-1）
            last: function () {
                return this.eq(-1);
            },
            //each
            each: function (fn) {
                return hjQuery.each(this, fn);
            }
        };
        hjQuery.prototype.init.prototype = hjQuery.prototype;
        window.hjQuery = window.$ = hjQuery;//为了外部可用符号调用
        hjQuery.extend = hjQuery.prototype.extend = function (obj) {
            //此时此刻的this就是hjQuery的这个类
            //console.log(this);
            for (var key in obj) {
                //相当于hjQuery["isTest"]=function(){console.log("test");}
                this[key] = obj[key];
            }
        };
        //方法
        hjQuery.extend({
            //封装判断是否字符串和HTML标签
            isString: function (str) {
                return typeof str === 'string';
            },
            isHTML: function (str) {
                return str.charAt(0) === "<" && str.charAt(str.length - 1) === ">"
            },
            //去除空字符串（兼容IE写法）
            trim: function (str) {
                if (!hjQuery.isString(str)) {
                    return str;
                }
                if (str.trim) {
                    return str.trim();
                } else {
                    return str.replace(/^\s+|\s+$/g, '')
                }
            },
            //封装判断是否数组
            isObject: function (set) {
                return typeof set === 'object';
            },
            isWindow: function (set) {
                return set === window;
            },
            isArray: function (set) {
                if (hjQuery.isObject(set) && !hjQuery.isWindow(set) && 'length' in set) {
                    return true;
                } else {
                    return false;
                }
            },
            //判断是否函数
            isFunction: function (set) {
                return typeof set === 'function';
            },
            //判断dom执行完毕
            ready: function (fn) {
                document.addEventListener('DOMContentLoaded', function () {
                    fn();
                })
            },
            //遍历
            each: function (obj, fn) {
                //1、判断是否是数组
                if (hjQuery.isArray(obj)) {
                    for (var i = 0; i < obj.length; i++) {
                        var res0 = fn.call(obj[i], i, obj[i]);//方便this直接调用value
                        if (res0 === true) {
                            continue;
                        } else if (res0 === false) {
                            break;
                        }
                    }
                }
                //2、判断是否是对象
                else if (hjQuery.isObject(obj)) {
                    for (var key in obj) {
                        var res1 = fn.call(obj[key], key, obj[key]);//方便this直接调用value
                        if (res1 === true) {
                            continue;
                        } else if (res1 === false) {
                            break;
                        }
                    }
                }
                return obj;
            },
            map: function (obj, fn) {
                var res = [];
                //1、判断是否是数组
                if (hjQuery.isArray(obj)) {
                    for (var i = 0; i < obj.length; i++) {
                        var temp0 = fn(obj[i], i);
                        if (temp0) {
                            res.push(temp0);
                        }
                    }
                }
                //2、判断是否是对象
                else if (hjQuery.isObject(obj)) {
                    for (var key in obj) {
                        var temp1 = fn(obj[key], key);
                        if (temp1) {
                            res.push(temp1);
                        }
                    }
                }
                return res;
            }
        });
        //dom
        hjQuery.prototype.extend({
            empty: function () {
                //1、遍历所有找到的元素
                this.each(function (key, value) {
                    value.innerHTML = '';
                });
                //2、方便链式编程
                return this;
            },
            remove: function (sele) {
                if (arguments.length === 0) {
                    //1、遍历所有找到的元素
                    this.each(function (key, value) {
                        //根据遍历到的元素找到对应的父元素
                        var parent = value.parentNode;
                        //通过父元素删除指定的元素
                        parent.removeChild(value);
                    });
                } else {
                    var $this = this;
                    //1、根据传入的选择器找到对应的元素
                    $(sele).each(function (key, value) {
                        //2、遍历找到的元素，获取对应的类型
                        var type = value.tagName;
                        console.log(type);
                        //3、遍历指定的元素
                        $this.each(function (k, v) {
                            //4、获取指定元素的类型
                            var t = v.tagName;
                            console.log(t);
                            //5、判断找到元素的类型和指定元素的类型
                            if (t === type) {
                                //根据遍历到的元素找到对应的父元素
                                var parent = value.parentNode;
                                //通过父元素删除指定的元素
                                parent.removeChild(value);
                            }
                        });
                    })
                }

                //2、方便链式编程
                return this;
            },
            html: function (content) {
                if (arguments.length === 0) {
                    return this[0].innerHTML;
                } else {
                    this.each(function (k, v) {
                        v.innerHTML = content;
                    })
                }
            },
            text: function (content) {
                var res = '';
                if (arguments.length === 0) {
                    this.each(function (k, v) {
                        res += v.innerText;
                    });
                    return res;
                } else {
                    this.each(function (k, v) {
                        v.innerText = content;
                    });
                }
            },
            appendTo: function (sele) {
                //统一把接受参数转换为jq对象
                var $target = $(sele);
                var $this = this;
                var res = [];
                /*
                //1、遍历取出所有指定的元素
                for (var i = 0; i < $target.length; i++) {
                    var targetEle = $target[i];
                    //2、遍历取出所有的元素
                    for (var j = 0; j < $this.length; j++) {
                        var sourceEle = $this[j];
                        //3、判断当前是否第0个指定元素
                        if (i === 0) {
                            //直接添加
                            targetEle.appendChild(sourceEle);
                        } else {
                            //先拷贝再添加
                            var temp = sourceEle.cloneNode(true);
                            targetEle.appendChild(temp);
                        }
                    }
                }
                */
                //简化
                $.each($target, function (k, v) {
                    $this.each(function (key, value) {
                        //3、判断当前是否第0个指定元素
                        if (k === 0) {
                            //直接添加
                            v.appendChild(value);
                            res.push(value);
                        } else {
                            //先拷贝再添加
                            var temp = value.cloneNode(true);
                            v.appendChild(temp);
                            res.push(temp);
                        }
                    })
                });

                //2、返回值
                return $(res);
            },
            prependTo: function (sele) {
                //统一把接受参数转换为jq对象
                var $target = $(sele);
                var $this = this;
                var res = [];
                //简化
                $.each($target, function (k, v) {
                    $this.each(function (key, value) {
                        //3、判断当前是否第0个指定元素
                        if (k === 0) {
                            //直接添加
                            v.insertBefore(value, v.firstChild);
                            res.push(value);
                        } else {
                            //先拷贝再添加
                            var temp = value.cloneNode(true);
                            v.insertBefore(temp, v.firstChild);
                            res.push(temp);
                        }
                    })
                });

                //2、返回值
                return $(res);
            },
            append: function (sele) {
                //判断传入参数是否是字符串
                if (hjQuery.isString(sele)) {
                    this[0].innerHTML += sele;
                } else {
                    $(sele).appendTo(this);
                }
                return this;
            },
            prepend: function (sele) {
                //判断传入参数是否是字符串
                if (hjQuery.isString(sele)) {
                    this[0].innerHTML = sele +this[0].innerHTML;
                } else {
                    $(sele).prependTo(this);
                }
                return this;
            },
            insertBefore:function(sele) {
                //统一把接受参数转换为jq对象
                var $target = $(sele);
                var $this = this;
                var res = [];
                //简化
                $.each($target, function (k, v) {
                    $this.each(function (key, value) {
                        //3、判断当前是否第0个指定元素
                        if (k === 0) {
                            //直接添加
                            v.parentNode.insertBefore(value, v);
                            res.push(value);
                        } else {
                            //先拷贝再添加
                            var temp = value.cloneNode(true);
                            v.parentNode.insertBefore(temp, v);
                            res.push(temp);
                        }
                    })
                });

                //2、返回值
                return $(res);
            },
            insertAfter:function(sele){
                //统一把接受参数转换为jq对象
                var $target = $(sele);
                var $this = this;
                var res = [];
                /*
                //1、遍历取出所有指定的元素
                for (var i = 0; i < $target.length; i++) {
                    var targetEle = $target[i];
                    //2、遍历取出所有的元素
                    for (var j = 0; j < $this.length; j++) {
                        var sourceEle = $this[j];
                        //3、判断当前是否第0个指定元素
                        if (i === 0) {
                            //直接添加
                            targetEle.appendChild(sourceEle);
                        } else {
                            //先拷贝再添加
                            var temp = sourceEle.cloneNode(true);
                            targetEle.appendChild(temp);
                        }
                    }
                }
                */
                //简化
                $.each($target, function (k, v) {
                    $this.each(function (key, value) {
                        //3、判断当前是否第0个指定元素
                        if (k === 0) {
                            //直接添加
                            console.log(v.nextSibling);
                            console.log(v);
                            v.parentNode.insertBefore(value, v.nextSibling);
                            res.push(value);
                        } else {
                            //先拷贝再添加
                            var temp = value.cloneNode(true);
                            v.parentNode.insertBefore(temp,v.nextSibling);
                            res.push(temp);
                        }
                    })
                });

                //2、返回值
                return $(res);
            }
        });
        //属性
        hjQuery.prototype.extend({
           attr:function(attr,value){
               //1、判断是否是字符串
               if(hjQuery.isString(attr)){
                   //判断几个字符串
                   if(arguments.length===1){
                       return this[0].getAttribute(attr);
                   }else{
                       this.each(function(key,ele){
                           ele.setAttribute(attr,value);
                       })
                   }
               }
               //2、判断是否对象
               else if(hjQuery.isObject(attr)){
                   var $this=this;
                   //遍历取出所有属性节点的名称和对应值
                   $.each(attr,function(key,value){
                       //遍历取出所有的元素
                       $this.each(function(k,v){
                           v.setAttribute(key,value);
                       })
                   })
               }
               return this;
        }
        })
    })(window);


         /*测试*/
    $(function () {
        /*
        //字符串
        console.log($('  <div><p></p></div><div><p></p></div>   '));//init {0: div, 1: div, length: 2}
        console.log($('li'));//init {0: li, 1: li, 2: li, length: 3}
        //数组
        var arr = [10, 2, 3, 4];
        var obj2 = {0: 'lng', 1: 'ff', length: 2};
        console.log($(arr));//init {0: 10, 1: 2, 2: 3, 3: 4, length: 4}
        console.log($(obj2));//init {0: "lng", 1: "ff", length: 2}
        //其他
        console.log($(123141212));//init {0: 123141212, length: 1}
        console.log($(true));//init {0: true, length: 1}

        //jq原型上的核心方法和属性：
        console.log($().jquery);//1.1.0
        var re = $('div');
        console.log(re);//init(3) [div#1, div#2, div#3]
        console.log(re.toArray());//(3) [div#1, div#2, div#3]
        console.log(re.get());//(3) [div#1, div#2, div#3]
        console.log(re.get(0));//<div id="1"></div>
        console.log(re.get(1));//<div id="2"></div>
        console.log(re.get(-1));//<div id="3"></div>
        console.log(re.eq());//init {}
        console.log(re.eq(0));//init [div#1]
        console.log(re.eq(1));//init [div#2]
        console.log(re.eq(-1));//init [div#3]
        console.log(re.first());//init [div#1]
        console.log(re.last());//init [div#3]

        var arr1 = [1, 2, 4, 6, 4];//数组
        var obj1 = {0: 'lng', 1: '234', 2: 'fa', length: 3};//伪数组
        var obj3 = {0: 'lng', 1: '234', 2: 'fa'};//对象
        hjQuery.each(arr1, function (key, value) {
            console.log(key, value);//0 1; 1 2; 2 4; 3 6; 4 4
        });
        hjQuery.each(obj1, function (key, value) {
            console.log(key, value);//0 "lng"; 1 "234"; 2 "fa"
        });
        hjQuery.each(obj3, function (key, value) {
            console.log(key, value);//0 lng; 1 234; 2 fa
        });

        hjQuery.each(arr1, function (key, value) {
            if (key === 2) {
                return true;
            }
            console.log(key, value);//0 1; 1 2; 3 6; 4 4
        });
        hjQuery.each(arr1, function (key, value) {
            if (key === 2) {
                return false;
            }
            console.log(key, value);//0 1; 1 2;
        });
        hjQuery.each(arr1, function (key, value) {
            console.log(this);//Number {1}; Number {2}; Number {4}; Number {6}; Number {4}
        });
        $(arr1).each(function (key, value) {
            //console.log(key, value);//0 1; 1 2; 3 6; 4 4
            console.log(this);//Number {1}; Number {2}; Number {4}; Number {6}; Number {4}
        });

        hjQuery.map(arr1, function (value, key) {
            console.log(value, key);//1 0; 2 1; 4 2; 6 3; 4 4
        });

        var cc = hjQuery.map(arr1, function (value, key) {
            if (key <= 2) {
                return arr1[key];
            }
        });
        console.log(cc);//[4]
        */
        //dom方法
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            var $div = $('div');
            // console.log($div.empty());
            // console.log($div.remove());
            // console.log($div.remove('.box'));
            // console.log($div.html());
            // console.log($div.text());
            // console.log($('span').appendTo($div));
            // console.log($('span').prependTo($div));
            // console.log($('.fun').append($('.func')));
            // console.log($('.fun').prepend($('.func')));
            // console.log($('span').insertBefore($div));
            // console.log($('span').insertAfter($div));
            //属性方法
            console.log($('img').attr({'class':'ni'}));
        }

    })

body部分：

<ul>
    <li>hh</li>
    <li>hh</li>
    <li>hh</li>
</ul>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<img src="" alt="" class="cc">
<!--dom块-->
<button id="btn">调用empty</button>
<div>
    我是div
    <p>我是段落</p>
</div>
<div class="box">
    我是div
    <p>我是段落</p>
</div>
<p class="box">dddddd</p>
<span>hee asdfasdfasdf</span>
<span class="func">adsfasdf22</span>

<div class="fun">asdfasdf11</div>

extend定义方法有不明白查看：https://blog.csdn.net/lucky541788/article/details/81948000