实现一个jQuery的API

发表于

可以把它看做是一个对象，然后用里面的方法

接受一个旧的 节点（字符串或节点/选择器），返回一个新的 拥有很多方法的对象

所以jQuery`实质上是一个构造函数，接受一个参数，这个参数可能是节点，然后返回一个方法对象去操作这个节点。

HTML内容

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
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
.red{
  color: red;
}
.blue{
  color: blue;
}
</style>

<body>
<ul>
	<li id="item1">1</li>
	<li id="item2">2</li>
	<li id="item3">3</li>
	<li id="item4">4</li>
	<li id="item5">5</li>
</ul>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

JS内容

实现添加 class，还有 设置 或者 获取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
32
33
34
35
36
37
38
39
window.jQuery = function(nodeOrSelector){ //先用一个函数将以下内容包裹，防止污染
	let nodes = {} //声明一个数组
	if(typeof nodeOrSelector === 'string'){ //如果 nodeOrSelector 是一个 `string`
		let temp = document.querySelectorAll(nodeOrSelector) //伪数组
		for(var i=0;i<temp.length;i++){ //遍历这个伪数组
			nodes[i] = temp[i]
		}
		nodes.length = temp.length //使得该伪数组按顺序排序
	}else if(nodeOrSelector instanceof Node){ //如果 nodeOrSelector 是一个 `Node`
		nodes = {0:nodeOrSelector,length:1} //我们要让该 Node 和上面的格式保持一致
	}
//实现添加 class
	nodes.addClass = function(classes){
		classes.forEach((value) => {
			for(var i=0;i<nodes.length;i++){
				nodes[i].classList.add(value)
			}
		})
	}
//设置 或者 获取text 内容
	nodes.text = function(text){
		if(text === undefined){ //如果 text 没有给参数，那就直接输出 text 原有的值
			var texts = []
			for(var i=0;i<nodes.length;i++){
				texts.push(nodes[i].textContent)
			}
			return texts
		}else{
			for(var i=0;i<nodes.length;i++){
				nodes[i].textContent = text //否则就输出给的值
			}
		}
	}
	return nodes
}

var node3 = jQuery('ul > li') //获取li
node3.addClass(['blue']) //给 li 添加 class->blue
node3.text() //输出li的text
  • .addClass(className)
  • removeClass(className)
  • toggleClass(className) 开关