实现以下要求:
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
代码如下:
<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) {
if (typeof classes === 'string') {
let temp = classes
classes = Array(temp)
}
classes.forEach((value) => {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(value)
}
})
}
nodes.setText = function (text) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].textContent = text
}
}
return nodes
}
window.$ = jQuery
let $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
</script>
jQuery可以理解为一个函数,通过传入一个节点或者选择器,返回一个新的对象,这个对象有构造好的API,通过调用这个API就可以得到想要的操作DOM的结果。