使用jQuery实现classList以及setText

首先在head或者body中添加script标签，src指向jquery.js或jquery.min.js文件的地址。

在js里写如下代码

window.jQuery = function(nodeOrSelector){
  let nodes = {} //申明一个nodes，这里就是所有获取到的node。
  //因为jquery不仅仅支持node，也支持选择器，所以参数给一个nodeOrSelector，然后做一下类型检测
  if (typeof nodeOrSelector === 'string'){
    let temp = document.querySelectorAll(nodeOrSelector) //返回与选择器匹配的文档中的元素列表，返回的对象是NodeList，它是一个伪数组
    for(let i = 0; i < temp.length; i++){
      nodes[i] = temp[i]
    } 
    nodes.length = temp.length //不需要NodeList，做一个临时变量以得到一个纯净的原型链
  } else if (nodeOrSelector instanceof Node){
    nodes = {     //伪数组，返回的东西要保持一致性，上面是伪数组，那么下面也得是伪数组。
    0 : nodeOrSelector,   
    length: 1
  }
}

//在这个hash里添加方法对象去操作节点
  nodes.addClass = function(node,classes){
    for(let key in classes){
      var value = classes[key]
      var methodName = value ? 'add':'remove'
      node.classList[methodName](key)
    }
    //classes.forEach((value) => {for(let i = 0; i < nodes.length; i++){nodes[i].classList.add(value)}})
  }
 
  nodes.text = function(text){
    if(text === undefined){
      var texts = []
    for(let i = 0; i < nodes.length; i ++){
      texts.push(nodes[i].textContent)//没有输入，意味着获取文本元素
    }
    return texts
    }else{
      for(let i = 0; i < nodes.length; i++){
      nodes[i].textContent = text//存在输入值，则意味着设置文本
    }
   }
  }
  return nodes
}

var $div = $('div')
$div.addClass('red')
$div.text('hi')

jQuery实质上是一个构造函数，它接受一个参数，这个参数可能是一个节点，它返回一个新的对象，这个新的对象里有新的API，用来去操作这个参数。