如何实现以下代码
window.jQuery = ???
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
1、此函数接受一个参数，这个参数可能是node节点或者是选择器
window.jQuery = function (nodeOrSelector){}
2、判断参数nodeOrSelector是字符串还是一个节点，如果是字符串，找到对应的所有元素，放到伪数组nodes里面；如果是节点，把节点放到伪数组nodes里面，return nodes，封装成一个伪数组nodes
window.jQuery = function (nodeOrSelector){
let nodes
if(typeof nodeOrSelector === 'string'){
nodes = document.querySelectorAll(nodeOrSelector)
}else if(nodeOrSelector instanceof Node){
nodes = {0: nodeOrSelector, length: 1}
}
return nodes
}
3、在nodes上加上API
nodes.addClass = function(){}
nodes.setText = function(){}
4、 因nodes不是一个元素，故需要遍历nodes
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
}
}
5、完整代码如下
window.jQuery = function (nodeOrSelector){
let nodes
if(typeof nodeOrSelector === 'string'){
nodes = document.querySelectorAll(nodeOrSelector)
}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
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red')
$div.setText('hi')
