自己写个API搞懂jQuery

首先让我们来封装两个函数

1. function getSibiling(node){} 同时获取一个节点的哥哥和弟弟
2. function addClass(node,classes){} 为一个节点同时添加多个class

第一个函数

function getSibiling(node){
  var number =node.parentNode.children
  console.log(number)
  var arrey ={length:0}
  for(let i=0;i<number.length;i++){
    if(number[i]!==node){
      arrey[arrey.length]=number[i]
      arrey.length +=1
    }
  }return arrey
}

第二个函数

function addClass(node,classes){
    for(let key in classes){
      var value = classes[key]
      console.log(value)
      var method =value?'add':'remove'
      node.classList[method](key)
    }  
}

命名空间（让别人知道这是我写的库）

window.yydom={}

yydom.getSibiling =function getSibiling(node){
  var number =node.parentNode.children
  var arrey ={length:0}
  for(let i=0;i<number.length;i++){
    if(number[i]!==node){
      arrey[arrey.length]=number[i]
      arrey.length +=1
    }
  }return arrey
}

yydom.addClass =function addClass(node,classes){
    for(let key in classes){
      var value = classes[key]
      var method =value?'add':'remove'
      node.classList[method](key)
    }  
}
console.log(yydom.getSibiling(item4))

yydom.addClass(item1,{a:true,b:false,c:true})

但是这样感觉还是有些麻烦，怎么才能item3.getSibiling() item3.addClass()这样直接调用呢？
方法一：改原型

Node.prototype.addClass = function addclass(classes){
  for(let key in classes){
      var value = classes[key]
      var method =value?'add':'remove'
      this.classList[method](key)
    }  
}
item1.addClass({a:true,b:false,c:true})



Node.prototype.getSibiling = function(){
  var number =this.parentNode.children
  
  var arrey ={length:0}
  for(let i=0;i<number.length;i++){
    if(number[i]!==this){
      arrey[arrey.length]=number[i]
      arrey.length +=1
    }
  }return arrey
}
console.log(item3.getSibiling())
console.log(Node.prototype)

k5tD9s.png
方法二：重新写一个node2(无侵入)

window.Node2 = function(node){
  return{
    //getSibling:function(){}
    addClass:function(classes){
      for(let key in classes){
        var value = classes[key]
        console.log(value)
        var method =value?'add':'remove'
        node.classList[method](key)
      }  
    }
  }
}
var node2 = Node2(item2)
node2.addClass({a:true,b:false,c:true})

Node2就相当于是jQuery,只不过jQuery要更复杂一些，它还可以通过选择器来操作节点

window.Node2 = function(nodeOrSelector){
  let node
  if(typeof nodeOrSelector === 'string'){
    node = document.querySelector(nodeOrSelector)
  }else{
    node = nodeOrSelecter
  }
  return{                                   // 返回一个方法对象，里面有两个方法一个getSibling一个addClass
    getSibling:function(){
      var number =node.parentNode.children

      var arrey ={length:0}
      for(let i=0;i<number.length;i++){
        if(number[i]!==node){
          arrey[arrey.length]=number[i]
          arrey.length +=1
        }
      }return arrey
  },
    addClass:function(classes){
      for(let key in classes){
        var value = classes[key]
        console.log(value)
        var method =value?'add':'remove'
        node.classList[method](key)         //node是外面的，形成闭包
      }  
    }
  }
}
var node2 = Node2("ul>li:nth-child(3)")
node2.addClass({red:true,b:false,c:true})
console.log(node2.getSibling())

首先先判断nodeOrSelector是选择器还是节点，然后操作dom找到这些节点，node保存这些节点，return返回一个对象
所以JQuery的实质是一个构造函数，接受一个可能是节点的参数，然后返回一个方法对象去操作这个节点
那么如果我想同时操作6个li呢？并且在这6个li上同时添加一个blue类

window.Node2 = 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)  
       }
     }) 
  }
  return nodes   //nodes是一个伪数组
 
}
  
var node2=Node2('ul>li')
node2.addClass(['blue'])

添加一个jQuery的api，获取文本.text()，当有参数时，就用这个text覆盖原先个text,当不给参数时认为获取元素的text文本

  nodes.text=function(text){
    if(text === undefined){
      var texts = []
      for(let i=0;i<nodes.length;i++){
        texts.push(nodes[i].textContent)     //nodes是在外面声明的，构成闭包
      }return texts
    }else{
      for(let i=0;i<nodes.length;i++){
        nodes[i].textContent = text
      }
    }
  }
console.log(node2.text())
node2.text('Hello')

jQuery就是把node2换成jQuery，然后window.$=jQuery

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.text=function(text){
    if(text === undefined){
      var texts = []
      for(let i=0;i<nodes.length;i++){
        texts.push(nodes[i].textContent)
      }return texts
    }else{
      for(let i=0;i<nodes.length;i++){
        nodes[i].textContent = text
      }
    }
  }
  return nodes
 }
window.$=jQuery
  
var $div=$('div')
$div.addClass(['red'])
$div.text('hi')