实现一个jquery api

一、完整的代码

window.jQuery = function(nodeOrSelector) {
  let nodes = {}
  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 (nodeOrSelector instanceof Node) {
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }
  nodes.addClass = function(classes) {
    classes.forEach((value) => {
        for (let i = 0; i < nodes.length; i++) {
          nodes[i].classList.add(value)
        }
        })
    }
  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.setText('hi') 

二、分步骤

1.实现一个函数,判断传进的参数是节点还是选择器,返回一个nodes(数组的形式)
如果typeof nodeOrSelector是string’,那么 他就是一个选择器,我们就用document.querySelectorAll来获取所有的元素,返回一个伪数组,然后遍历这个数组把每个value放到nodes里.
如果nodeOrSelector instanceof 是node 那么直接把nodeOrSelector放到nodes里作为nodes[0]

window.jQuery = function (nodeOrSelector) {
    let nodes = {}
    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 (nodeOrSelector instanceof Node) {
        nodes = {
            0: nodeOrSelector,
            length: 1
        }
    }

2.实现两个函数addClass()和 setText()

nodes.addClass = function (classes) {
        classes.forEach((value) => {
            for (let i = 0; i < nodes.length; i++) {
                nodes[i].classList.add(value)
            }
        })
    }
 nodes.setText = function (text) {
        for (let i = 0; i < nodes.length; i++) {
            nodes[i].textContent = text
        }
    }

3.把几个函数封装一下
4.然后给函数改个名字

window.$ = jQuery

这样都完成了~