这篇博客主要是使用DOM API进行封装模仿jQuery API的实现。在平常写代码时常常会发现DOM API在大多数情况下实现一个功能十分复杂，如果使用jQuery API就方便很多。现在我就来将DOM API进行简单封装，实现两个模仿jQuery的API，以下是全部代码：
window.jQuery = function(nodeOrSelector){
let nodes = {}
if(typeof nodeOrSelector === 'string'){
nodes = document.querySelectorAll(nodeOrSelector)
}else{
nodes[0] = nodeOrSelector
nodes.length = 1
}
nodes.addClass = function(classes){
for(let i=0; i<nodes.length; i++){
nodes[i].classList.add(classes)
}
}
nodes.setText = function(contents){
for(let i=0; i<nodes.length; i++){
nodes[i].textContent = contents
}
}
return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red')
$div.setText('hi')
首先我们先看代码的第一部分，jQuery是一个函数，这个函数接受一个参数（nodeOrSelector），这个参数可以是元素id也可以是选择器。在函数内部先声明一个nodes的内部变量，让其指向一个空对象。接下来将传入的参数进行判断，如果传入参数的类型是字符串（即传入参数为选择器），便可通过DOM API中的document.querySelectorAll()来获取选择器对应的全部节点所形成的伪数组，并将这个伪数组赋值给变量nodes；如果传入参数类型不是字符串（即传入参数为元素id），就直接将nodes第一项的值改为传入的参数（元素id），并设置好length的值为1。到此我们可获得nodes伪数组，方便我们接下来操作其中的节点元素。
window.jQuery = function(nodeOrSelector){
let nodes = {}
if(typeof nodeOrSelector === 'string'){
nodes = document.querySelectorAll(nodeOrSelector)
}else{
nodes[0] = nodeOrSelector
nodes.length = 1
}
接着我们来看一下代码的第二部分，先给nodes伪数组新增一个键值对，键名为addClass，值为一个匿名函数，匿名函数接受一个参数（classes）。此匿名函数主要作用是遍历nodes这个伪数组，给其中所储存的所有节点添加class属性（利用DOM API中的.classList.add()），属性值为参数classes。
nodes.addClass = function(classes){
for(let i=0; i<nodes.length; i++){
nodes[i].classList.add(classes)
}
}
代码的第三部分与第二部分类似，也是为nodes伪数组新增一个键值对，其中匿名函数的作用是遍历nodes这个伪数组，给其中所储存的所有节点添加文本内容（利用DOM API中的.textContent），文本内容为参数contents。
最后返回nodes这个伪数组。
nodes.setText = function(contents){
for(let i=0; i<nodes.length; i++){
nodes[i].textContent = contents
}
}
return nodes
}
在这里我使用到了闭包，以现在我的理解闭包是：函数内调用函数外所声明的变量，那这个函数与这个变量称作闭包。
最后一部分的代码便是调用这个模仿jQuery的API的方法。值得注意的是：大部分jQuery使用者习惯使用$来表示jQuery，调用jQuery函数会返回nodes对象（伪数组），将这个对象赋值给一个变量时，此变量名前通常也加上$符号进行区分。
window.$ = jQuery
var $div = $('div')
$div.addClass('red')
$div.setText('hi')
