实现一个 jQuery 的 API

自己练习写一个类似jQuery的API，可以实现的功能为

$div.addClass('red') // 可将所有 div 的 class 添加一个 red

$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

一、先获取所有div,放在一个对象中

let nodes = {}
div=document.querySelectorAll('div')
for(let i = 0; i < div.length; i++){
  nodes[i]=div[i]
}
nodes.length=div.length

二、实现给每一个div添加class

for(let i=0;i

然后把这个函数封装起来

nodes.addClass = function(classes) {
  for (let i = 0; i < nodes.length; i++) {
    nodes[i].classList.add(classes)
  }
}

三、实现把所有div的内容改成hi

for (let i = 0; i < nodes.length; i++) {
  nodes[i].textContent = "hi"
}

封装成函数

nodes.setText = function(text) {
  for (let i = 0; i < nodes.length; i++) {
    nodes[i].textContent = text
  }
}

四、全部写入一个对象，实现完整代码

window.jQuery = function(node) {
  let nodes = {}
  div = document.querySelectorAll(node)
  for (let i = 0; i < div.length; i++) {
    nodes[i] = div[i]
  }
  nodes.length = div.length
  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
}
window.$ = jQuery
var $div = $('div')

这样就可是实现
$div.addClass('red') // 可将所有 div 的 class 添加一个 red

$div.setText('hi') // 可将所有 div 的 textContent 变为 hi