目的:实现两个函数:addClass和setText.
我们首先把自己模拟jQuery的库封装好。
window.jQuery = function(nodeOrSelector) {
let nodes = {};
// 参数nodeOrSelector可能是节点也可能是选择器,所以我们加以判断过滤.
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(typeof nodeOrSelector === Node) {
// 如果为节点
nodes = {
0: nodeOrSelector,
length: 1,
};
}
// 我们处理好了目标节点,然后封装好那两个方法
nodes.addClass = function(className) {
for(let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(className);
}
}
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 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi