这篇文章将用原生JS实现jQuery的元素选择、添加类、获取/设置文字这几个方法，当然jQuery的实际实现比这个要复杂的多，本文不做深究。
1、实现元素选择
- 首先我们需要认识到的是，jQuery实际上就是一个函数，所以最基本的结构应该是这样的：
1 | windos.jQuery = function(){ |
window.$ = window.jQuery // 实现类jQuery写法 $()
- 其次我们需要判断通过该函数传进来的参数是选择器还是DOM节点：是选择器的话，需要使用
document.querySelectorAll()来获取元素，然后返回一个对象用来后续的操作；如果是DOM节点，为了保持操作的一致，也需要将其变为一个对象；如果先用一个变量获取DOM的集合，再将其以参数传入，也会返回一个对象（var boxes = document.getElementsByTagName(‘div’)，再将boxes传入，进入最后一个分支）。具体代码如下：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
28window.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
}
}
// 传入参数为DOM节点集合
else{
for(let i = 0;i<nodeOrSelector.length;i++){
nodes[i] = nodeOrSelector[i]
}
nodes['length'] = nodeOrSelector.length
}
return nodes
}
2、实现获取/设置元素的文本
封装一个Text()函数，操作的是转化过的nodes对象，如果不传参，则获取元素的文本，如果传参（参数需要是字符串），设置元素的文本为所传的参数（其中，如果元素是多个节点的集合，那么会为所有的元素都设置文本）。1
2
3
4
5
6
7
8
9
10
11
12
13nodes.Text = function(text){
if(text === undefined){
let texts = []
for(let i = 0;i<nodes.length;i++){
texts[i] = nodes[i].textContent
}
return texts
}else{
for(let i = 0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
}
3、实现为元素添加/删除类
封装一个addClass()函数，操作的转化过的nodes对象，传入的参数需要是一个对象，对象的键名是需要操作的类，对象的键值是操作类型（如{‘red’:true,’green’:false} 表示添加类名为red的类，同时删除类名为green的类）
- 首先使用
for in循环遍历传入的参数，然后使用for循环遍历nodes节点，对每一个元素都要进行操作，判断键值是true还是false，前者则添加类，后者则删除类：1
2
3
4
5
6
7
8
9
10
11nodes.addClass = function(classes){
for(let key in classes){
for(let i = 0;i<nodes.length;i++){
if(classes[key]){
nodes[i].classList.add(key)
}else{
nodes[i].classList.remove(key)
}
}
}
}
观察上面的代码，发现关于if判断语句中的两个分支有相似的地方，而只要有相似的代码，就有优化的空间，所以进行下面的优化：1
2
3
4
5
6
7
8nodes.addClass = function(classes){
for(let key in classes){
for(let i = 0;i<nodes.length;i++){
let methodName = classes[key] ? 'add' : 'remove'
nodes[i].classList[methodName](key)
}
}
}
4、完整代码
1 | window.jQuery = function(nodeOrSelector) { |
请求的内容为
用 Chrome 查看响应
