实现一个简单的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.=jQuery var node2=('div')
node2.addClass('red')

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。