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

Question

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

$("div#intro .head")

和

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

谢谢！

Answer 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>