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>

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

Difference between the descendant selector and the .find() method in jquery selectors

jquery

jquery-selectors