实现getSiblings和addClass的功能

网页HTML部分：

<body>
  <ul>
    <li id="item1">选项1</li>
    <li id="item2">选项2</li>
    <li id="item3">选项3</li>
    <li id="item4">选项4</li>
    <li id="item5">选项5</li>
    <li id="item6">选项6</li>
  </ul>
</body>

getSiblings

let allChildren = item3.parentNode.children 
let array = {length: 0}
for(let i = 0; i < allChildren.length; i++){
  if(allChildren[i] !== item3){
	array[array.length] = allChildren[i]
	array.length += 1
  }
}

addClass

let classes = {'a': true, 'b': false, 'c': true}
for(let key in classes){
  let value = classes[key]
  if(value){
	item3.classList.add(key)
  }else{
	item3.classList.remove(key)
  }
}

封装原生函数

function getSiblings(node){
  let allChildren = node.parentNode.children 
  let array = {length: 0}
  for(let i = 0; i < allChildren.length; i++){
    if(allChildren[i] !== node){
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
  return array
}
getSiblings(item3)

function addClass(node, classes){
  for(let key in classes){
    let value = classes[key]
    let methodName = value ? 'add' : 'remove'
      node.classList[methodName](key)
  }
}
addClass(item3, {'a': true, 'b': false, 'c': true})

命名空间

function getSiblings(node){
  let allChildren = node.parentNode.children 
  let array = {length: 0}
  for(let i = 0; i < allChildren.length; i++){
    if(allChildren[i] !== node){
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
  return array
}

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

window.ffDOM = {}
ffDOM.getSiblings = getSiblings
ffDOM.addClass = addClass

ffDOM.getSiblings(item3)
ffDOM.addClass(item3, {'a': true, 'b': false, 'c': true})

扩展 Node 接口

直接在 Node.prototype 上加函数

Node.prototype.getSiblings = function(){
  let allChildren = this.parentNode.children
  let array = {length: 0}
  for(let i = 0; i < allChildren.length; i++){
    if(allChildren[i] !== this){
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
  return array
}

item3.getSiblings()

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

无侵入添加 Node 接口

window.Node2 = function(node){
  return {
    getSiblings: function(){
      let allChildren = node.parentNode.children 
      let array = {length: 0}
      for(let i = 0; i < allChildren.length; i++){
        if(allChildren[i] !== node){
          array[array.length] = allChildren[i]
          array.length += 1
        }
      }
      return array
    },
    addClass: function(classes){
      for(let key in classes){
        let value = classes[key]
        let methodName = value ? 'add' : 'remove'
        node.classList[methodName](key)
      }
    }
  }
}

var node2 = Node2(item3)
node2.getSiblings()
node2.addClass({'a': true, 'b': false, 'c': true})

添加接受选择器功能

window.jQuery = function(nodeOrSelector){
  let node
  if(typeof nodeOrSelector === 'string'){
    node = document.querySelector(nodeOrSelector)
  }else{
    node = nodeOrSelector
  }
  return {
    getSiblings: function(){
      let allChildren = node.parentNode.children 
      let array = {length: 0}
      for(let i = 0; i < allChildren.length; i++){
        if(allChildren[i] !== node){
          array[array.length] = allChildren[i]
          array.length += 1
        }
      }
      return array
    },
    addClass: function(classes){
      for(let key in classes){
        let value = classes[key]
        let methodName = value ? 'add' : 'remove'
        node.classList[methodName](key)
      }
    }
  }
}

var node2 = jQuery('#item3')
node2.getSiblings()
node2.addClass({'a': true, 'b': false, 'c': true})

添加接受多个选择器功能

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 key in classes){
      let value = classes[key]
      let methodName = value ? 'add' : 'remove'
      for(let i = 0; i < nodes.length; i++){
        nodes[i].classList[methodName](key)
      }
    }
  }
  nodes.text = function(text){
    if(text === undefined){
      let 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
}

var node2 = jQuery('ul > li')
node2.addClass({'a': true, 'b': false, 'c': true})
node2.text('hi')

div 和 $div 的联系和区别

1.区别：
$div 是一个 jQuery 对象，可以使用 jQuery 的的属性方法，比如addClass removeClass toggleClass 等
（一般情况下使用 jQuery 获取到的元素应该在变量命名时在前边加上 $ 符号以便区分。）
div 是一个 DOM 对象，可以使用 DOM API 的属性和方法，比如firstChid、parentNode、appendChild等。
2.联系：
使用$(div) 可以将 div 封装成一个 jQuery 对象。
使用$(div)[0]获取到的第一项就是 div，所以可以使用这种方法将 $div 变成 div。