对jQuery的初步认知2018-11-01

jQuery可以看作为多个函数的集合，是一个构造函数，它接受一个参数，这个参数可能是node，然后返回一个方法对象去操作这个node。
下面用addClass来举例说吧。

<div>dota21</div>
<div>dota22</div>
<div>dota23</div>

我需要为每个div增加一个名称为red的class，使之文字颜色变为红色

 let div=document.querySelectorAll('div')
        for(let i=0;i<div.length;i++){
            div[i].classList.add('red')}

这是我一般的写法
把函数封装下

 function addClass(node,classes){
            let div=document.querySelectorAll(node)
            for(let i=0;i<div.length;i++){
                div[i].classList.add(classes)
            }
        }
  addClass('div','red')

这一个函数就好比一个罐子，为了方便搬运，需要放到一个箱子里面去，我们给箱子命名为box，并作为全局变量

window.box=function(node){
            return{
                addClass: function(classes){
                let div=document.querySelectorAll(node)
                for(let i=0;i<div.length;i++){
                    div[i].classList.add(classes)
                }
            }
            }
            
        }
box('div').addClass('red')

jQuery是可以同时传入node和选择器的

window.box=function(nodeOrSelector){
        let nodes={}
        if(typeof nodeOrSelector ==='string'){
            let temp=document.querySelectorAll(nodeOrSelector)
            for(let i=0;i<temp.length;i++){
                nodes[i]=temp[i];
                nodes.length=temp.length;
            }
       //如果是选择器，那么取到的对象是大于1的，是个伪数组
        }else if(nodeOrSelector instanceof Node){
            nodes={
                0:nodeOrSelector,
                length:1
            }//为和上面一致，也用数组表示
        }
       //上面代码就是对传参进行处理
        nodes.addClass=function(classes){
            classes.forEach(function(value){
                for(let i=0;i<nodes.length;i++){
                    nodes[i].classList.add(value)
                }//闭包：当一个函数使用了函数外面声明的变量时，我们把这个函数和变量称为闭包。
            })
        }
     
        return nodes;
    }
      box('div').addClass('red')

这个box其实就可以命名为jQuery，下面为完整代码

window.jQuery=function(nodeOrSelector){
        let nodes={}
        if(typeof nodeOrSelector ==='string'){
            let temp=document.querySelectorAll(nodeOrSelector)
            for(let i=0;i<temp.length;i++){
                nodes[i]=temp[i];
                nodes.length=temp.length;
            }
            console.log(nodes)
        }else if(nodeOrSelector instanceof Node){
            nodes={
                0:nodeOrSelector,
                length:1
            }
        }
       
        nodes.addClass=function(classes){
            classes.forEach(function(value){
                for(let i=0;i<nodes.length;i++){
                    nodes[i].classList.add(value)
                }
            })
        }
        nodes.setText=function(text){
            for(let i=0;i<nodes.length;i++){
                nodes[i].textContent=text;
            }
        }
        return nodes;
    }
    window.$=jQuery
    var $div=$('div')
    $div.addClass(['red'])