需求分析

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

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

API需要的功能是增加对应标签的class类名，设置对应标签的文本内容。

判断传入的是字符串还是节点，封装成一个伪数组。

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
    }

编写addClass与setText方法。

  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
    }
  }

添加 class 用.classList.add()，改变 textContent 用 .textContent =，因为是对所有的 div 操作，所以我们要遍历伪数组 nodes 的 value。

最后，将代码封装入 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
  } 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
}