Question

我有以下jquery选择器，我正在尝试将其转换为常规javascript。

$("#lelement>*").on("dblclick", function(){
});

常规javascript相当于什么？我可以这样做吗？

document.getElementById('element').childNodes.addEventListener("dblclick", function(e){
});

Answer 1

您必须显式遍历与#lelement>*选择器匹配的所有元素（可以使用querySelectorAll获得集合），然后将处理程序附加到每个元素上：

document.querySelectorAll('#lelement > *').forEach((child) => {
  child.addEventListener('dblclick', () => console.log('double clicked!'));
});

<div id="lelement">
  <div>content 1</div>
  <div>content 2</div>
</div>

请注意，NodeList.forEach并不是一种古老的方法。并非所有浏览器都支持它。因此，对于古老的浏览器，请改用polyfill或Array.prototype.forEach：

Array.prototype.forEach.call(
  document.querySelectorAll('#lelement > *'),
  (child) => {
    child.addEventListener('dblclick', () => console.log('double clicked!'));
  }
);

<div id="lelement">
  <div>content 1</div>
  <div>content 2</div>
</div>

Answer 2

与选择器完全相同，只是传递给document.querySelectorAll()。

document.querySelectorAll("#element > *");

然后，您将枚举找到的节点并使用事件处理程序手动设置每个节点。由于.querySelectorAll()返回一个节点列表，因此最好将其转换为Array，以便可以在所有浏览器中可靠地调用Array.forEach()方法。

let elems = Array.prototype.slice.call(document.querySelectorAll("#element > *"));

elems.forEach((el) => { el.addEventListener("dblclick", function(){
  console.log("You clicked me!");
}); });

<div id="element">
  <h1>Some Heading</h1>
  <p>Some Paragraph</p>
  <div>Some Div</div>
</div>

Answer 3

一种优雅的，非jQuery的方法是通过querySelectorAll()：

    document.querySelectorAll('#lelement > *').forEach(function(node) {
        node.addEventListener("dblclick", function(e){
           console.log('double clicked on child of #element');
        });
    })

p {
margin:1rem;
background:red;
color:white;
}

<div id="lelement">
<p>Double click me - Child 1</p>
<p>Double click me - Child 2</p>
</div>

相当于jquery所有子选择器的javascript

3 个答案: