美文网首页
实现一个 jQuery 的 API

实现一个 jQuery 的 API

作者: 实肆 | 来源:发表于2019-04-02 10:29 被阅读0次

    获取目标节点的兄弟节点

    image.png
    function getsiblings(node){
      var allchildren = node.parentNode.children
      var array ={length:0}
      for(let i=0;i<allchildren.length;i++){
        if(allchildren[i]!==node){
          arrary[array.length]=allchildren[i]
          arrary.length += 1
        }
      }
      return array
    }
    

    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<temp.length;i++){
              nodes[i]=temp[i]
              }
              node[length]=temp[length]
        }else if(nodeOrSelector instanceof node){
            nodes={0:nodeOrSelector,length:1}
          }
    }
    
    nodes.addclass=function(classes){
        if(let key in classes){
        var value=classes[key]
        var methodName =value?'add':'remove'
        for(let i = 0;i<nodes.length;i++){
           node[i].classList[methodName](key)
          }
    }
    

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

    相关文章

      网友评论

          本文标题:实现一个 jQuery 的 API

          本文链接:https://www.haomeiwen.com/subject/fqebbqtx.html