题目为
window.jQuery = ???
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
思路为
- 寻找判断传入的类型
//判断传入是一个节点还是字符串
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
}
}
- 查找结点添加样式 : addClass
nodes.addClass = function(classes){
for(let i = 0;i < nodes.length; i++){
nodes[i].classList.add(classes)
}
}
- 查找结点替换文本:setText
nodes.setText = function(text){
for(let i=0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
- 封装
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){
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
}
加油!!!!