自己练习写一个类似jQuery的API，可以实现的功能为
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
一、先获取所有div,放在一个对象中
let nodes = {}
div=document.querySelectorAll('div')
for(let i = 0; i < div.length; i++){
nodes[i]=div[i]
}
nodes.length=div.length
二、实现给每一个div添加class
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add("red")
}
然后把这个函数封装起来
nodes.addClass = function(classes) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(classes)
}
}
三、实现把所有div的内容改成hi
for (let i = 0; i < nodes.length; i++) {
nodes[i].textContent = "hi"
}
封装成函数
nodes.setText = function(text) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].textContent = text
}
}
四、全部写入一个对象，实现完整代码
window.jQuery = function(node) {
let nodes = {}
div = document.querySelectorAll(node)
for (let i = 0; i < div.length; i++) {
nodes[i] = div[i]
}
nodes.length = div.length
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
