将 $(element) 转换为 vanilla JS

Question

每当有人将商品添加到他们的购物车时，我基本上都会尝试刷新该元素。

下面是函数的一个片段

 const elements = document.getElementsByClassName('foo-bar')

    for (const element of elements) {
      flashBackground($(element), '#bbbbbb');
    }

所以我获取 dom 元素，然后我循环遍历它们并闪烁它们的背景，这可行，但我试图将所有旧的 JQuery 代码重构为 ES6

所以当我控制台记录$(element)我得到下面的对象

init [a.foo-bar, context: a.foo-bar]

我如何在 vanilla JS 中获得相当于 $(element) 的值？

Answer 1

只需像这样删除$() ：

const elements = document.getElementsByClassName('foo-bar');

for (const element of elements) {
  flashBackground(element, '#bbbbbb');
}

检查并运行以下代码片段以获得上述方法的实际示例：

 const elements = document.getElementsByClassName('foo-bar'); for (const element of elements) { alert(element.innerHTML); }

 <div class="foo-bar">A</div> <div class="foo-bar">B</div> <div class="foo-bar">C</div> <div class="foo-bar">D</div>

---

或者你也可以像这样使用querySelectorAll()方法和forEach()方法：

const elements = document.querySelectorAll('.foo-bar');

elements.forEach(element => flashBackground(element, '#bbbbbb');)

检查并运行以下代码片段以获得上述方法的实际示例：

 const elements = document.querySelectorAll('.foo-bar'); elements.forEach(element => alert(element.innerHTML));

 <div class="foo-bar">A</div> <div class="foo-bar">B</div> <div class="foo-bar">C</div> <div class="foo-bar">D</div>

Answer 2

谜团已揭开。

我在一个非 jquery 对象上引用了 .css，它破坏了函数element.css("background");

function flashBackground(element, color) {
...SOME CODE HERE

//needed to be
getComputedStyle(element)["background"]

Answer 3

jQuery 的$(query)选择器实际上是Document.querySelector()的抽象。 与 jQuery 实现一样，querySelector() 可用于通过任何标准 CSS 选择器定位节点。