代码如下:
<div id=x>aaa</div>
<div id=x>bbb</div>
<div id=x>ccc</div>
<div id=x>ddd</div>
<style>
.red {color: red;}
</style>
<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>
做一个简单的jQuery(做的时候一点都不简单o(╥﹏╥)o)。
当jQuery拿到一个字符串时,会先分析这个是字符串,或是节点。
如果这是一个字符串的话,新建一个temp来获取这个字符串对应的选择器。
然后遍历这些得到的选择器。
如果拿到的不是字符串而是节点,那么就把这个节点放入伪数组里。
给节点添加class,每当addClass()时,就会遍历这些节点,逐个将class放入这些nodes伪数组的每个元素里。
更改设置元素内的文字,先遍历对应的所有元素,修改元素内文本。