jQuery API的实现

自己模拟jQuery的一个API
预览：http://js.jirengu.com/paluxujewu/1/edit?html,js,output

window.jQuery = function(nodeOrSelector) {
  var nodes = {}  //给nodes声明一个空的对象
  if (typeof nodeOrSelector === 'string') {//判断传入的nodeOrSelector是节点还是选择器
    let temp = document.querySelectorAll(nodeOrSelector)//声明如果是选择器就把这个选择器赋值给temp
    for (let i = 0; i < temp.length; i++) {
      nodes[i] = temp[i]//遍历这个选择器返回的伪数组，并且把这个伪数组里的东西赋值给nodes
    }
    nodes.length = temp.length
  } else if (nodeOrSelector instanceof Node) {//如果传入的参数的原型中有Node.prototype
    nodes = {
      0: nodeOrSelector,
      length: 1//将参数传入nodes
    }
  }

nodes.addClass = function(classes) {//整个伪造的jQuery的API都是用DOM API实现的
    classes.forEach((value) => {
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].classList.add(value)
      }
    })
  }
nodes.getText = function() {
    var texts = []
    for (let i = 0; i < nodes.lenght; i++) {
      texts.push(nodes[i].textContent)
    }
    return texts
  }
nodes.setText = function(text) {
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].textContent = text
    }
  }
  return nodes
}

var a = jQuery("li")
a.addClass(['blue'])
a.setText('hi')

简单来说jQuery就是一个构造函数，给他传入一个参数，这个参数可能是节点，jQuery给你返回一个方法对象，去操作节点。

• 引用jQuery，就设置一个<script>就好了
• jQuery的API也是通过原生DOM来实现的。