实现多节点操作的 jQuery API

下面为一个操作多节点的 jQuery API实现过程

window.jQuery = function(nodeOrSelector){
  let node
  if(typeof nodeOrSelector === 'string'){
    node =document.querySelector(nodeOrSelector)
  }else{
    node = nodeOrSelector
  }
  
  return{
    getSiblings:function(){
  var allChildren = node.parentNode.children
 
  var array = {length:0}
  for(let i = 0;i < allChildren.length; i++){
    if(allChildren[i] !== node){
     array[array.length] = allChildren[i] /*给没有push方法的数组传入数据*/
     array.length += 1
    }
  }
  return array
    },
    addClass:function(classes){
      classes.forEach( (value) => node.classList.add(value) )
    }
  }
}

当我拿到这段代码时，它只能实现单个节点的操作，并不能用来操作多个节点，下面我将把它修改下

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}
  }
    return nodes
}

var node2 = jQuery('ul >li')
console.log(node2)

上面的这段代码实现了判断一个传入的参数是字符串还是节点，我们还给它一个临时变量temp，且为了保持一致性所返回的结果都是纯净（没有nodeList）的伪数组。这样我们就实现了对多个节点的操作。

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

再插入一段 为每个匹配的元素添加指定的样式类名 的addClass代码

nodes.getText = function(){
   var texts = []
   for(let i=0;i<nodes.length;i++){
     texts.push(nodes[i].textContent)
   }
   return texts
 }

再加入一段获取文本的功能，现在它能轻松获取到元素的文本。

但是我们只能获取文本，并不能设置文本，所以我们再添加一段设置文本的功能。

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

现在我们能设置文本了

先前的文本：

设置之后的文本：

完整的代码如下：

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.getText = function(){
   var texts = []
   for(let i=0;i<nodes.length;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 node2 = jQuery('ul>li')
node2.setText('hi')