二十多行代码实现一个简易 jQuery

1. 先写一个叫 jQuery 的构造函数，并且将它作为全局变量，方便调用，并且这个函数可以接受一个选择器字符串用于选择符合条件的元素，或直接接受一个节点，最后返回一个伪数组的节点对象。

window.jQuery = function(nodeOrSelector) {
  let nodes = {};
  if (typeof nodeOrSelector === 'string') {
    nodes = document.querySelectorAll(nodeOrSelector);
  } else if (nodeOrSelector instanceof Node) {
    nodes = {
      0: nodeOrSelector,
      length: 1
    };
  }

  return nodes;
};

利用typeof操作符来判断参数是否是字符串，若为true，则利用DOM的querySelectorAll获取所有相关节点，否则再用instanceof判断参数是否为一个Node对象，若是则构造一个长度为1的伪数组。

2. 现在我们获得了一个可供操作的伪数组对象nodes了，但是还没有提供用于操作它的方法。我们为它编写两个方法addClass和setText，它们的逻辑都差不多，都是先接受一个参数，然后利用for循环遍历伪数组对象nodes，最后利用节点自带的方法对每个节点进行修改。

window.jQuery = function(nodeOrSelector) {
  let nodes = {};
  if (typeof nodeOrSelector === 'string') {
    nodes = document.querySelectorAll(nodeOrSelector);
  } else if (nodeOrSelector instanceof 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;
};

3. 给它一个缩写$，让它看起来更像jQuery

window.$ = jQuery;

4. 这样一个简易的jQuery就实现了，现在可以试着使用它了

$('li').addClass('red');  //为所有li标签添加一个叫red的class
$('li').setText('Hello');   //将所有li标签的文本内容改为Hello