博主原生JavaScript知识仿写一遍jQuery源码

前言

该文章使用原生js，写出与jQuery相同效果的封装函数，在这里声明一下，代码是本人的理解构思，并没有对照jQuery库，
如果有问题欢迎指出，或者给与更好的意见留言。

阅读顺序

ID选择器、类选择器是阅读的入门基础原理讲解，不是jq封装，如果明白这两个基础，可直接跳方法章节

第一章:一个ID选择器简写

id选择器，是jq入门最快的原理理解开始，这里我只写出选择器部分，不包括方法调用，返回值是dom节点

//首先声明大家熟悉的$函数
function $(e){
//用substr()函数截取e参数字符串位置，0,1值是前缀名，1是元素名称
        if(e.substr(0,1) === '#'){
            return document.getElementById(e.substr(1));
        }else{
            return document.getElementsByTagName(e)
        }
}

<div id="p"></div>
console.log($('#p'),$('div'))

结果如下图，这是个简单的id选择器封装，但是实现jq能力远不止于此。

应用场景: 省略document.getElementById写法

第二章:简写类选择器，并且迭代元素

在原上一节的ID选择器做修改,丢弃上一节的注释

function $(e){
        if(e.substr(0,1) === '#'){
            return document.getElementById(e.substr(1));
        }else if(e.substr(0,1) == '.'){
        	return document.getElementsByClassName(a);		//这里是新增加的代码
        }else{
            return document.getElementsByTagName(e)
        }
}

由于返回值是一个数组，想要一次性修改，将它用es6语法of迭代完成。

假设三个u类的图片标签
for(let i of $('.im')){
     i.src = 'u=2840949118,1204783826&fm=26&gp=0.jpg'
}

第三章:jQuer函数思想 , 仿attr()属性添加方法

拷贝上一章节代码下来快速写例子

    function $(e){
        if(e.substr(0,1) === '#'){
            return document.getElementById(e.substr(1));
        }else if(e.substr(0,1) == '.'){
            let css = document.getElementsByClassName(e.substr(1))
            return css
        }else{
            return document.getElementsByTagName(e)
        }
    }

下面开始写jQuery链式调用方法之attr();

    function $(e){
        let R;	//声明R变量用来传递给链式方法的变量
        function Person () {};	//声明一个函数用来写链式函数，放其内部方便值的获取
        Person.prototype = {	//原型方法添加属性，属性为函数，.调用的功能方法
            attr:function(item,value){	//arr属性设置
                if(typeof R == "object"){	//判断类型，来使用那种方式设置
                    for(let i of R){
                        i.setAttribute(item,value)		//迭代节点，setAttribute()是设置标签属性名、属性值，item是属性名，value是值
                    }
                }else{
                    R.setAttribute(item,value)  //不是类数组型，直接设置
                }
                return this;	//设置this，可以链接下个属性方法一起调用	//比如arr().css()
            },
        }
        if(e.substr(0,1) === '#'){
            return document.getElementById(e.substr(1));
        }else if(e.substr(0,1) == '.'){
            R = document.getElementsByClassName(e.substr(1))
            return new Person()	//返回实例化对象。
        }else{
            return document.getElementsByTagName(e)
        }
    }

以上就是与jQuery效果相同的attr()链式调用，我就不绕圈子直接上了代码，附带注释理解不难，如果没见过原型prototype，可以关注我的博客以后会讲解。

第四章:jQuery函数思想 , 仿css()方法新增class

拷贝上一节代码，我们还是在原来地方做修改，节省大家的时间

    function $(e){
        let R;
        function Person () {};
        Person.prototype = {
            attr:function(item,value){
                if(typeof R == "object"){
                    for(let i of R){
                        i.setAttribute(item,value)
                    }
                }else{
                    R.setAttribute(item,value)  
                }
                return this;
            },
            //这里开始是新增代码css()方法
            css:function(...value){	//设置无限参数，会把多余参数以数组形式保存到一起，value是一个数组
                if(typeof R == "object"){
                //这里需要两次循环，第一次循环是循环节点，第二次是循环参数，因为无限参数是以数组形式保存的
                    for(let i of R){	
                        for(let a of value) {
                            i.className += ' '+a;
                        }
                    }
                }else{
                    for(let a of value){
                    	R.className += ' ' + a
                    }
                }
                return this;
            }
        }
        if(e.substr(0,1) === '#'){
            return document.getElementById(e.substr(1));
        }else if(e.substr(0,1) == '.'){
            R = document.getElementsByClassName(e.substr(1))
            return new Person()
        }else{
            return document.getElementsByTagName(e)
        }
    }
    
    $('.hf').attr('href','https://blog.csdn.net/qq_42622737').css('add','arr')	//jquery的css()是以数据结构方式传递新添类，而我用无限参数直接添加
    无限参数参数真身是es6语法中rest参数

博主原生编写jQuery函数就到此为止了，按照上面逻辑，读者就可以重复添加其他功能方法进去调用，本章节目前不涉及全部
jQuery部分，后续可能会更新，上面代码也需要优化一下，因为jQuery $()函数不是把代码都写在里面的。

结尾

本文提到了无限参数思想，具体应用会再开一篇文章为此讲解，如果有人看不懂或者有问题欢迎留言，或者加博主qq975345162一起学习交流。