一个简单jquery api的实现

如下的代码结构：

      
div1
      
div2
      
div3
      
div4
      
div5

需求如下：

window.jQuery = ???
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 给所有 div 的 class 添加一个 red
$div.setText('hi') // 将所有 div 的 textContent 变为 hi

思路分析

写一个方法 ，找到这个节点
写一个 addClass方法，给节点添加样式
写一个 setText 方法，给节点设置内容
对以上方法进行封装

具体方法

先找到这个节点
然后传入的参数可能是个节点，也可能是个字符串，所以要分情况

function(nodeOrSelector){
  let nodes ={}
  //判断传进来的参数是节点还是字符串
  if(typeof nodeOrSelector ==='string' ){  //当参数为字符串时
  let temp = document.querySelectorAll(nodeOrSelector)  //伪数组
        for(let i=0;i

addClass 方法，给节点添加样式

给找到的节点添加样式，所以要传入一个参数
节点可能不止一个，所以要依次对节点进行遍历，对每个节点添加样式

  nodes.addClass = function(classes){
      for(let i=0;i

setText 方法，给节点设置内容

和上面的方法一样，先找到需要改变的节点，对它依次遍历后再设置其内容
同时，传入一个参数

  nodes.setText = function(text){
    for(let i=0;i

最后一步，封装

代码链接

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){
   for(let i=0;i