为了便于学习与理解jQuery，自己尝试去写一个只有两个API的简版jQuery。

什么是JQuery

jQuery是js的一个工具库，由John Resig在2006年发布。

j代表JavaScript，query是“查询”的意思。也就是说，这个库的意图是基于JavaScript的查询。

查询的目标是什么？

答案是DOM（文档对象模型）结构中的Node（节点）。一个网页就是一个html文档，而网页上的所有内容都是节点，包括文档节点、元素节点、文本节点、注释节点、属性节点等等。而jQuery的查询最主要针对的是元素节点，如段落（p）、锚点（a）、表格（table）等，只有少数方法可以处理文本节点与注释节点。同时jQuery还可以用attr方法方便地对元素节点的属性进行读取/设置。

jQuery的核心是通过各种选择器，选中DOM元素

节点或者选择器判断

由于jQuery支持传参字符串，所以先判断参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.jQuery = function(nodeOrSelector) {
  let nodes = {}
  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) {
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }
    return nodes
}

addClass方法

jQuery的addClass方法，用于为DOM元素添加一个class。

1
　　$('body').addClass('hasJS');

DOM元素本身有一个可读写的className属性，可以用来操作class。

1
2
3
4
5
　　document.body.className = 'hasJS';

　　// or

　　document.body.className += ' hasJS';

HTML 5还提供一个classList对象，功能更强大（IE 9不支持）。

1
2
3
4
5
6
7
　　document.body.classList.add('hasJS');

　　document.body.classList.remove('hasJS');

　　document.body.classList.toggle('hasJS');

　　document.body.classList.contains('hasJS');

自己动手实现addClass方法

1
2
3
4
5
nodes.addClass = function(classes) {
  for (let i = 0; i < nodes.length;i++) {
    nodes[i].classList.add(classes)
  }
}

setText方法

改变textContent的值

1
2
3
4
5
nodes.setText = function(text) {
  for (let i = 0; i < nodes.length; i++) {
    nodes[i].textContent = text
  }
}

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
window.jQuery = function(nodeOrSelector) {
  let nodes = {}
  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) {
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }
  nodes.addClass = function(classes) {
    for (let i = 0; i < nodes.length;i++) {
      nodes[i].classList.add(classes)
    }
  }
  nodes.setText = function(text) {
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].textContent = text
    }
  }
  return nodes
}
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

参考资料：阮一峰-如何做到jQuery