jQuery 实质上是一个构造函数,接受一个参数(这个参数可能是节点)并返回一个方法去操作这个节点。
window.jQuery = function(nodeOrSelector){ //获取节点或者字符串
let node = { }//将字符串或者节点放入数组中
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){//获取参数后,通过遍历操作相关节点
classes.forEach((value) =>{
for(let i = 0; i< nodes.length;i++){
node[i].classList.add(value)
}
} )
}
nodes.text = function(text){
if(text ===undefined){ //如果文本为空,则添加文本
var texts = []
for(let i = 0;i<nodes.length;i++){
texts.push(nodes[i].textContent)
}
return texts
} else { //如果文本不为空,则输出文本内容
for(let i = 0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi