jquery选择器中后代选择器和.find()方法的区别

Posted 2023-05-09

【中文标题】jquery选择器中后代选择器和.find()方法的区别

【英文标题】：Difference between the descendant selector and the .find() method in jquery selectors

【发布时间】：2019-12-10 15:45:41

【问题描述】：

我想知道这两个jquery代码之间是否存在任何差异：

$("div#intro .head")

和

$("div#intro").find(".head")

谢谢！

【参考方案1】：

正如所写，它们都产生相同的输出，但是带有.find 的第二个需要首先为所有匹配div#intro 的元素构造一个jQuery 对象，所以第一个可能更可取（更不用说更简洁了） .

也就是说，.find 可以做许多后代选择器不能做的事情：

使用 jQuery 对象作为参数

const $greenSpans = $('span.green');

// ...
// later:

const found = $('div').find($greenSpans);
console.log(found.length, found[0]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="green">1</span>
<div>
  <span class="green">2</span>
</div>

使用 htmlElement 作为参数

// not so useful, because you already have a reference to the element to change

const greenSpan = document.querySelectorAll('span.green')[1];

// ...
// later

const found = $('div').find(greenSpan);
console.log(found.length, found[0]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="green">1</span>
<div>
  <span class="green">2</span>
</div>

对已创建的 jQuery 对象进行操作

const $div = $('div');

// ...
// later

const found = $div.find('span');;
console.log(found.length, found[0]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="green">1</span>
<div>
  <span class="green">2</span>
</div>

【讨论】：

嗯，你认为第一个比第二个更省时吗？

是的 - 就像我在答案中所说，第二个带有.find 需要首先为所有匹配div#intro 的元素构造一个jQuery对象，所以它的效率较低.