实现一个简单的jQuery

jQuery说到底是一个函数对象，一个通过原生js实现了某些功能的函数，被封装成了一个js对象。jQuery对象是类似{0:xx,1:xx,length:2,····}的伪数组，知道原理后，我们自己也可以实现一个简单的jQuery。
需求：实现简单的获取元素，增加class类，以及修改元素文本的功能。

  
  



  

    
第1项
    
第2项
    
第3项
    
第4项
  

首先，通过原生JS实现上述功能

//获取所有的li元素
var items = document.querySelectorAll('li');
//为所有的li增加red类
for (let i = 0; i < items.length; i++) {
  items[i].classList.add('red');
}
//修改所有的li文本
for (let i = 0; i < items.length; i++) {
  items[i].textContent = 'hi';
}

封装这两个函数

var items = document.querySelectorAll('li');

function addClass(e){
  for (let i = 0; i < items.length; i++) {
    items[i].classList.add(e);
  }
}
addClass('red');

function setText(e){
  for (let i = 0; i < items.length; i++) {
    items[i].textContent = e;
  }
}
setText('hi');

将上面的对象及方法封装成一个对象，并对空间命名

var node = {};
var items = document.querySelectorAll('li');
node.length = items.length;
for (let i = 0; i < items.length; i++) {
  node[i] = items[i];
}

node.addClass = function (e){
  for (let i = 0; i < node.length; i++) {
    node[i].classList.add(e);
  }
}

node.setText = function (e){
  for (let i = 0; i < node.length; i++) {
    node[i].textContent = e;
  }
}

node.addClass('red')
node.setText('hi')

把node对象也封装进去，使它变成一个函数对象，更像jQuery

window.jQuery = function (nodeorselector){
  var node = {};

  var items = document.querySelectorAll(nodeorselector);

  node.length = items.length;

  for (let i = 0; i < items.length; i++) {
    node[i] = items[i];
  }

  node.addClass = function (e){
    for (let i = 0; i < this.length; i++) {
      this[i].classList.add(e);
    }
  }

  node.setText = function (e){
    for (let i = 0; i < this.length; i++) {
      this[i].textContent = e;
    }
  }

  return ndoe;
}

var $li = jQuery('li');
$li.addClass('red');
$li.setText('hi');

最后，console.log($li)可以看到一个如图所示的伪数组，有addClass方法与setText方法，jQuery本质也是如此，便可以对jQuery有更深的认识。

$li实际上是一个对象