实现一个 jQuery 的 API

想要实现一个以下功能
用原生js的DOM API来实现一个类jQuery API的功能

window.jQuery = ???
window.$ = jQuery

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

1、首先获取DOM元素

• 判断传入的参数是元素id还是选择器

如果传入参数是个选择器，我们通过DOM API里面的querySelectorAll()方法得到这个选择器所代表的节点，并把节点存入一个我们预先定义好的对象nodes中；
如果传入参数是个元素的id，直接在nodes中将其存入并设置好length的值即可。

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
// 参数是元素节点
  } else if(nodeOrSelector instanceof Node) {
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }

2、 封装一个addClass()方法
遍历nodes，利用DOM API的classList和add()添加class，封装成一个addClass函数

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

然后使用命名空间的用法改写成这样

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

3、封装一个setText()方法
同理，封装遍历nodes，利用DOM API的textContent修改文本内容，封装成一个setText函数

nodes.setText = function(text) {
    for (let i =0; i < nodes.length; i++) {
      nodes[i].textContent = text
    }
}

4、最终结果

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
  } else if(nodeOrSelector instanceof Node) {
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }
  
  nodes.addClass = function(classes) {
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].classList.add(classes)
    }
  }
  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') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi