jQuery實(shí)質(zhì)上就是一個構(gòu)造函數(shù)，接受一個參數(shù)，這個參數(shù)可能是節(jié)點(diǎn)，然后返回一個方法對象是操作節(jié)點(diǎn)。

大概模擬下jQuery實(shí)現(xiàn)原理。

細(xì)節(jié)注釋如下：

window.jQuery = function (nodeOrSelector) {  // 參數(shù)可能是node，也可能是選擇器
  let nodes = {}  // 先聲明一個空對象，偽數(shù)組
  if (typeof nodeOrSelector === 'string') {  // 字符串檢測，如果是個字符串或多個字符串
    let temp = document.querySelectorAll(nodeOrSelector)  // 找一個節(jié)點(diǎn)或多個節(jié)點(diǎn),temp是偽數(shù)組，不想要nodelist的原型
    for (let i = 0; i < temp.length; i++) {  // 遍歷這個temp
      nodes[i] = temp[i]
    }
    nodes.length = temp.length  // 生成新的純凈的偽數(shù)組,有純凈的原型鏈
  } else if (nodeOrSelector instanceof Node) {  // 如果傳的是一個節(jié)點(diǎn)
    nodes = {   // 前一種情況返回偽數(shù)組，另外一種情況也應(yīng)該返回偽數(shù)組，不會被弄暈
      0: nodeOrSelector,
      length: 1
    }
  }

  nodes.addClass = function (classes) {
    [classes].forEach((value) => {  // 有可能每個節(jié)點(diǎn)上要加不止一個class（classes可能是個偽數(shù)組），所以需要foreach()方法,對classes里每個值執(zhí)行函數(shù)
      for (let i = 0; i < nodes.length; i++) {  // 要加多個元素節(jié)點(diǎn)的class，所以需要遍歷，根據(jù)nodes的個數(shù)
        nodes[i].classList.add(value)   // 對每個遍歷到的nodes的值addclass（根據(jù)classes里value個數(shù)，因?yàn)閒oreach方法，這個for循環(huán)要輪幾大輪）
      }
    })
  }

  nodes.setText = function (text) {
    for (let i = 0; i < nodes.length; i++) {  // 利用for循環(huán)遍歷nodes
      nodes[i].textContent = text   // nodes里每個value的textcontent都等于text
    }
  }
  return nodes  // 返回nodes
}
window.$ = jQuery

var $div = $('div')
$div.addClass('blue') // 可將所有 div 的 class 添加一個 blue
$div.setText('hi') // 可將所有 div 的 textContent 變?yōu)?hi