我們的目標赏半，能夠?qū)崿F(xiàn)以下功能
????window.jQuery = ???
????window.$ = jQuery
????var $div = $('div')
????$div.addClass('red') // 可將所有 div 的 class 添加一個 red
????$div.setText('hi') // 可將所有 div 的 textContent 變?yōu)?hi
首先蚂且，想用$和jQuery赏参，直接聲明成全局變量即可。
window.jQuery = function() {}? ??
window.$ = jQuery
我們要把jQuery和$封裝成一個方法再芋，可以選中dom元素。
在調(diào)用這個方法時，這里我們可以給它傳一個dom元素轧飞，也可以傳一個選擇器（字符串）撒踪。
我們默認傳遞的是一個dom元素制妄，即 let nodes = { 0: nodeOrSelector, length: 1 }；
然后再對傳遞的參數(shù)類型用typeof進行判斷集漾，如果是'string'類型具篇，那么我們把它作為一個選擇器凌埂，用querySelectorAll來選中dom元素瞳抓。
然后孩哑，將nodes返回。這就實現(xiàn)了用$和jQuery來作為選擇器選中dom元素横蜒。而且我們返回的是一個純凈的偽數(shù)組销凑，沒有原生dom的方法和屬性斗幼。
window.jQuery = function(nodeOrSelector) {
? ? ? let nodes = {
? ? ? ? 0: nodeOrSelector,
? ? ? ? length: 1
? ? ? }
? ? ? if(typeof nodeOrSelector === 'string'){
? ? ? ? let temp = document.querySelectorAll(nodeOrSelector);
? ? ? ? for(let i=0; i<temp.length; i++){
? ? ? ? ? nodes[i] = temp[i];
? ? ? ? }
? ? ? ? nodes.length = temp.lenght;
? ? ? }
? ? ? return nodes
? ? }
然后抚垄，我們來對這個函數(shù)添加兩個方法。
$div.addClass('red') // 可將所有 div 的 class 添加一個 red：
nodes.addClass = function(classes) {
? ? ? ? if(typeof classes === 'string'){
? ? ? ? ? for (let i = 0; i < nodes.length; i++) {
? ? ? ? ? ? nodes[i].classList.add(classes)
? ? ? ? ? }
? ? ? ? }else{
? ? ? ? ? for (let i = 0; i < nodes.length; i++) {
? ? ? ? ? ? classes.forEach( (value) => nodes[i].classList.add(value) )
? ? ? ? ? }
? ? ? ? }
? ? ? }
$div.setText('hi') // 可將所有 div 的 textContent 變?yōu)?hi：
nodes.setText = function(text) {
? ? ? ? for (let i = 0; i < nodes.length; i++) {
? ? ? ? ? nodes[i].textContent = text;
? ? ? ? }
? ? ? }
以上就是簡單的模仿了3個jquery的api渠羞。選擇器智哀，addClass, setText瓷叫。
最終的代碼如下：
