实现一个jQuery的API

某统计网站的数据统计 ，使用jQuery的比例占70%左右。我们来看看jQuery 到底做了哪些事情，给开发者带来多么大的方便，能得到这么多的喜爱呢？

探索一下jQuery内部到底做了什么？

 <div class="" id="sss">选项1</div>
 <div class="" id="sss">选项2</div>
 <div class="" id="sss">选项3</div>
 <div class="" id="sss">选项4</div>
 <div class="" id="sss">选项5</div>

.red{
  color: red;
}

window.jQuery = function (nodeOrSelector) {
    var 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 (value) {
        for (let i = 0; i < nodes.length; i++) {
            nodes[i].classList.add(value)
        }
    }
   

    nodes.setText = function (text) {
        var texts = []
        if (text === undefined) {
            console.log(nodes)
            for (let i = 0; i < nodes.length; i++) {

                texts.push(nodes[i].textContent)
            }
            console.log(texts)
            return texts
        } else {
            for (let i = 0; i < nodes.length; i++) {
                console.log(nodes[i])
                nodes[i].textContent = text
            }
        }
    }
    return nodes
}

window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText() // 可将所有 div 的 textContent 变为hi hi

首先我们知道 window.$= jQuery，这表明 $就是jQuery
一般来说，怎么使用jQuery获取元素 ，回想一下有哪些常用的方式呢？

1. 获取ul 的子级li元素

$('ul>li')   

2. 获取所有的<div>元素

$('div')

3.获取id为item3的元素

 $(item3)

4. 获取class为xx的元素

$('.xx')

首先写获取的元素，一定要搞清楚 获取的元素的性质和各自的特点。
$(item2) ，传入的参数 item2 是一个元素的id，就代表一个node 节点
其中id选择器获取的元素只有一个， 因为 id 是唯一的。
除此之外，像class，html中可以有相同的class名，和标签，不唯一。

上述代码中，html 代码中多个<div>
获取div , 获取的是多个元素， 所以用document.querySelectorAll()

nodeOrSelector instanceof Node
$(item2), item2 代表的元素是Node 构造函数构造的，也说明只传入了一个节点。

nodes是伪数组时，最好后面返回的数据也是伪数组（对象）的形式。

对比jQuery 获取文本时， 当text() 传入参数， 则是设置元素的文本
不传参，就是获取元素的文本内容
对于两种形式， 都存在，才能保证与jQuery本身的方法一致。
所以需要判断 传入的参数是否 为undefined
undefined 就是指传入的参数名已存在， 但是没赋值的一种判断。

如果 $div.addClass('red')传入的参数是 字符串， 就直接传入。
当 $div.addClass(['red','yellow']) ，参数是一个数组，就必须遍历数组，array.forEach(function(){})将每一个class样式传给每一个元素。

确定一下主题， 我们平常用到的jQuery ，相比js而言， 不用写一长串的API获取元素， 使用更加简洁。但是了解内部以后， 会知道原来jQuery在我们执行获取时， 其实内部调用了很多方法， 获取到元素

那么 经过事先一个jQuery部分功能的API , 我们知道jQuery在自己要获取一个或多个元素时， 内部就会自动去查找符合条件的元素返回。当使用jQuery方法时， jQuery会找到jQuery对象的方法， 执行相关操作。

jQuery 本质就是一个构造函数， 接收一个参数， 参数可能是节点或者是选择器， 返回一个方法对象去操作节点。

在轻松简单表象的背后，jQuery得到的青睐也是付出了努力的不是吗？哈哈end