源代碼
<!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 變?yōu)?hi
</script>
</body>
</html>
代碼實現(xiàn)過程
- 首先
window.jQuery創(chuàng)造全局的構造函數(shù) - 先判斷傳入的參數(shù)是單個選擇器還是多個選擇器，如果是多個選擇器則遍歷它們放到新的偽數(shù)組中，如果是單個選擇器，則直接將它放到偽數(shù)組中第 0 個的位置，并賦值 length 為 1
- 給元素追加樣式：通過for循環(huán)遍歷偽數(shù)組中的每一個元素，并給它們添加相應的樣式，來給每一個元素追加樣式
- 修改元素文本內(nèi)容：同樣用for循環(huán)遍歷的方法遍歷每個元素，并修改它們的文本內(nèi)容
