实现一个简单的jQuery

首先

image.png

要实现的两个功能addClass和setText

image.png

首先，我们要对jQuery进行封装，首先选中一个dom元素（或是一个选择器），我们假设这个只传入一个dom元素，那么

let nodes={0:nodeOrSelector,length:1}

然后判断传入的nodeOrSelector的类型是否为字符串，如果是字符串，就表示传入了一个选择器，那么我们先用一个temp接受这个选择器能找到的全部元素，并将temp中的每一个元素都覆盖到nodes上，包括length。

window.jQuery=function(nodeOrSelector){
let nodes={0:nodeOrSelector,length:1}
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
}

然后开始写两个功能

addClass:addClass的功能是给选中的元素加上我们输入的效果
nodes.addClass=function(classes){}
先判断classed是不是字符串，如果是字符串，先遍历一边nodes里的元素，然后给每个元素添加效果，如果不是字符串，则用forEach(value)将每个效果添加到对应的元素上
nodes.addClass=function(classes){
if(typeof classes==='string'){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(classes)}
}else{
for(let i=0;i<nodes.length;i++){
classes.forEach( (value)=>nodes[i].classList.add(value) )
}
}
}
setText：setText功能是给选中的元素加上文本内容，首先遍历一边选中的元素，然后用textContext方法将我们输入的文本添加至选中的元素中
nodes.setText=function(text){
for(let i=0;i<nodes.length;i++){
nodes[i].textContent=text
}
}

完整代码：
window.jQuery=function(nodeOrSelector){
let nodes={0:nodeOrSelector,length:1}
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
}

nodes.addClass=function(classes){
if(typeof classes==='string'){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(classes)}
}else{
for(let i=0;i<nodes.length;i++){
classes.forEach( (value)=>nodes[i].classList.add(value) )

  }
}

}

nodes.setText=function(text){
for(let i=0;i<nodes.length;i++){
nodes[i].textContent=text
}
}
return nodes
}

window.('div')
node2.addClass('red')