通过封装一个自己的API来理解和学习jQuery

效果图.png

对jQuery调用获取方法的声明，然后对传参数的数据进行判断，如果是字符串，说明就是要获取节点的所有的伪数组，然后进行操作。如果是Dom对象，就把Dom对象转换成Jquery对象。

    window.jQuery = function(node_selector){
    let nodes = {}
   
    if(typeof node_selector === 'string'){
        let temp = document.querySelectorAll(node_selector)
        for(let i =0;i<temp.length;i++){
            nodes[i] = temp[i]
        }
        nodes.length = temp.length
    }else if(node_selector instanceof Node){
        nodes = {
            0:node_selector,

            length:1
        }
    }

对传入进来的被转换成jQuery对象进行方法的操作，先声明addClass函数，为节点对象添加新的class属性，遍历每个节点添加class

   
    nodes.addClass = function(classes){
        classes.forEach((value) => {
            for(let i = 0;i<nodes.length;i++){
                nodes[i].classList.add(value)
            }
            
        })
    }
    

获取和赋值节点对象的文本内容，但由于同时都是对同一个对象的同一个属性进行操作，所以可以把二者合二为一，写在一个方法函数内

    nodes.getText = function(){
        var texts = []
        for(let i = 0;i<nodes.length;i++){
            texts.push(node[i].textContent)
        }
        return texts
    }
    nodes.setText = function(text){
        for(let i =0;i<nodes.length;i++){
            nodes[i].textContent = text
        }
    }
    

这就是合并上两者的函数，达到的效果是一模一样的，

    nodes.text = function(text){
        if(text === undefined){
            var texts = []
        for(let i = 0;i<nodes.length;i++){
            texts.push(node[i].textContent)
        }
        return texts
        }else{
            for(let i =0;i<nodes.length;i++){
            nodes[i].textContent = text
        }
        }
    }
    return nodes
}

最后调用声明好jQuery函数，并改变节点的样式和内容
其中在调用这个方法的过程中，我们的传参进去并没有访问函数内部的变量nodes，一切声明和赋值，
都是在函数内部执行，这是一种现象，，理解为闭包。结论：所以当我们可以操作一个函数改变它的内部变量的数据但是我们又访问不到这个变量时，
就把这种现象称作闭包

window.$ = jQuery

var $div = $('div')
$div.addClass(['red'])
$div.text('hi')