模拟jQuery实现

目的：实现两个函数：addClass和setText.

我们首先把自己模拟jQuery的库封装好。

window.jQuery = function(nodeOrSelector) {
  let nodes = {};
  //  参数nodeOrSelector可能是节点也可能是选择器,所以我们加以判断过滤.
  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(typeof nodeOrSelector === Node) {
    //  如果为节点
    nodes = {
      0: nodeOrSelector,
      length: 1,
    };
  }
  
  //  我们处理好了目标节点，然后封装好那两个方法
  nodes.addClass = function(className) {
    for(let i = 0; i < nodes.length; i++) {
      nodes[i].classList.add(className);
    }
  }

  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