什么是jQuery

實(shí)現(xiàn)jQuery的api

實(shí)現(xiàn)jQuery的api說起來也很簡單，就是對DOM進(jìn)行封裝。話不多說，直接看代碼：

window.jQuery = function(nodeOrSelector){
  let nodes = {}                                              //聲明一個(gè)偽數(shù)組
  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){             //判斷是否為節(jié)點(diǎn)
    nodes = {                                                    
      0: nodeOrSelector,
      length: 1
    }
  }

  nodes.addClass = function(classes){              //給節(jié)點(diǎn)添加一個(gè)class
    classes.forEach((value) => {
      for(let i = 0;i < nodes.length; i++){
        node[i].classList.add(value)
      }
    })
  }

  nodes.text = function(text){                              //獲取、修改文本內(nèi)容
    if(text === undefined){                                //判斷傳入?yún)?shù)是否為空，如果為空則表明要獲取文本
      var texts = []
      for(let i = 0; i < nodes.length; i++){
        texts.push(nodes[i].textContent)  
      }
      return texts
    }else{                                                 //傳入?yún)?shù)不為空表明要修改文本
      for(let i = 0; i < nodes.length; i++){
        nodes[i].textContent = text 
      }
    }
  }

  return nodes
}

接下來大概講解一下過程：

首先我們聲明一個(gè)空對象，這個(gè)空對象呢用來存放最終返回的內(nèi)容。jQuery一開始接受一個(gè)節(jié)點(diǎn)或者一個(gè)選擇器，接收到以后的第一步需要去判斷一下這個(gè)參數(shù)，如果接受到的是一個(gè)選擇器，就把所以符合選擇器的結(jié)果放到nodes空對象中，為了得到一個(gè)純凈的偽數(shù)組，我們將結(jié)果遍歷再放到nodes對象中，這樣nodes對象的原型鏈中只有Object的屬性。如果接受的是一個(gè)節(jié)點(diǎn)，那我們直接把節(jié)點(diǎn)存放到nodes對象中，統(tǒng)一為偽數(shù)組的形勢。

第二步就可以設(shè)置api了。這里我們寫了兩個(gè)常見的api，一個(gè)是給節(jié)點(diǎn)添加一個(gè)class，另一個(gè)是修改文本內(nèi)容。在text這個(gè)api這里我們合成了兩個(gè)功能，當(dāng)你在調(diào)用text的時(shí)候，如果沒有帶參數(shù)，就默認(rèn)為是想獲取文本內(nèi)容，如果帶了參數(shù)，那就是想修改文本內(nèi)容。

關(guān)于如何實(shí)現(xiàn)一個(gè)jQuery的api今天就講到這里，原理還算簡單，認(rèn)真閱讀就能掌握，希望本文能對你有所幫助，謝謝！