尝试创建一个简单的选择器函数

Question

我想创建一个函数，通过使用querySelectorAll方法，它将接受任何有效的CSS选择器。

函数应该返回两个方法来模拟jq中的.css和.html。

我要把头发拔出来了。有人能帮忙吗?到目前为止，我想到的就是这些，还没想明白:

const $ = (selector) => {
let element = document.querySelectorAll(selector);
return {
html: function(content) {
element.innerHTML = content;
}
}
};

Answer 1

既然您正在挑选一个节点列表，那么您需要找到某种方法来遍历它们。将查询保存到返回的对象中，添加一个名为loop的新方法，该方法可以接受回调，然后使用html和css提供的回调迭代查询检索到的元素。注意:return this意味着您可以像jQuery一样将方法链接在一起。它只是再次返回对象。

function $(selector) {
return {
// Cache the query
query: document.querySelectorAll(selector),
// `loop` accepts a function (callback)
// and calls it on each element in the query
loop: function (cb) {
this.query.forEach(el => cb(el));
},
// Call `loop` and for each element change the content
html: function(content) {
this.loop(el => el.innerHTML = content);
return this;
},
// Call `loop` and for each element change the style
css: function(prop, value) {
this.loop(el => el.style[prop] = value);
return this;
}
}
};
// Get all the divs with red class properies
$('div.red')
.html('Updated')
.css('background-color', 'red')
.css('color', 'white');

<div>1</div>
<div class="red">2</div>
<div>3</div>
<div class="red">4</div>