实现一个 jQuery 的 API

获取目标节点的兄弟节点

image.png

function getsiblings(node){
  var allchildren = node.parentNode.children
  var array ={length:0}
  for(let i=0;i

1.先获取该节点父节点的所有子标签，装入allchildren对象
2创建arrary对象
3.遍历所有父节点的子标签，把不是目标节点的标签放入arrary对象
4返回伪数组array
把执行一个功能的代码，装在一个函数对象中
getSibling中arry[arry.length]=allchildren[i]
因为返回的是array对象是伪数组，array中的key是array.length确定，一开始array.length=0，遍历一次后伪数组的length应该增加1，所以每一次遍历结束前array.length +=1。

addclass，添加classname

一个节点添加一个class

node.classList.add('string')

一个节点添加多个class

var classes=['a','b','c']
classes.forEach((value)=>x.classList.add(value))

一个节点的多个class即能添加又能删除

function addclass(classes){
  if(let key in classes){
    var value=classes[key]
    var methodName =value?add:remove
       node.classList[methodName](key)
      }
}

命名空间

image.png

addclass对一个元素添加或删除多个classname，classes中的名为true时添加入node的classname中，value为flase时从node的classname中移除对应的key。

image.png

image.png

获取多个元素

image.png

返回值需要相同类型，当传入的参数（nodeOrSelector）是一个节点，也要构造一个伪数组

image.png

通过临时伪数组temp存放querySelectorAll返回的Nodelist（原型指向Node），再遍历temp把数据一个个放到nodes（对象，原型指向object.prototype）中

image.png

image.png

注意函数结尾不写return nodes ，$div将为undefined

#window.$= jQuery
#var $div=$ ('div') 
#$div.addClass('red') 
#$div.setText('hi')

代码思路jquery是一个函数，函数返回一个对象，这个对象有addclass和setText两种方法。

window.jQuery =function(nodeOrSelector){
var nodes={}
    if(typeof nodeOrSelector==='string'){
          let temp=document.querySelectorAll(nodeOrSelector)
          for(let i=0;i

nodes.addclass=function(classes){
    if(let key in classes){
    var value=classes[key]
    var methodName =value?'add':'remove'
    for(let i = 0;i

声明变量key在classes对象中通过三元运算符判断key的boolean，当布尔值是true时，变量methodName的值为字符串add，遍历
全部的节点，添加或移除classes的key