源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
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
</script>
</body>
</html>
代码实现过程
- 首先
window.jQuery创造全局的构造函数 - 先判断传入的参数是单个选择器还是多个选择器，如果是多个选择器则遍历它们放到新的伪数组中，如果是单个选择器，则直接将它放到伪数组中第 0 个的位置，并赋值 length 为 1
- 给元素追加样式：通过for循环遍历伪数组中的每一个元素，并给它们添加相应的样式，来给每一个元素追加样式
- 修改元素文本内容：同样用for循环遍历的方法遍历每个元素，并修改它们的文本内容
