jQuery 查找与上下文选择答案

【问题标题】：jquery find versus context selectionjQuery 查找与上下文选择
【发布时间】：2011-01-21 11:40:46
【问题描述】：

有如下html sn-p

<div class="something">
    <p>Some text</p>
</div>
<div class="somethingElse">
    <p>some other text</p>
</div>

我认为下面的 jquery sn-ps 是相同的（会有相同的结果）：

$(".something").find("p").css("border", "1px solid red");

$("p", ".something").css("border", "1px solid red");

我的问题是，一个 sn-p 是否比另一个更好，应该使用

【问题讨论】：

为什么不使用 $(".something > p")？那是纯 CSS。
@Xr：应该是$(".something p")。
$(".something p") 实际上是最慢的可用方法，因为显然 jQuery 将从右到左搜索，首先找到文档中的所有 p 元素，然后过滤它们以找到 .something祖先。 $(".something").find("p") 是最快的，根据我下面的回答。
@Xr。 jQuery 仍然是一个 javascript，仅此而已。这个 sintaxis 看起来就像 css，据我了解，它背后没有使用 JavaScript 中的原生 css 机制的魔法。
@MaxYari 确实如此。但我认为保留一种语法而不是增加选择是有用的。供您参考，JQuery 基于名为 Sizzle 的选择器库：sizzlejs.com

标签： jquery jquery-selectors

【解决方案1】：

调用不相同。

根据显然从事 jQuery 工作的 Brandon Aaron 以及现场测试here 的说法，find 方法总是更快。在下面的屏幕截图中查看结果。如果我遗漏了什么，请发表评论。

速度有 10% 或更大的差异，具体取决于浏览器，使用 find 绝对值得。

布兰登网站上的进一步解释是here。

【讨论】：

根据上述文章，我添加了一个测试以“正确方式”使用上下文 - 通过为第二个参数提供一个 DOM 节点。具有讽刺意味的是，它甚至更慢：jsperf.com/jquery-find-vs-context-2/3
您的图表显示与您所说的相反。红线是上下文，它似乎比蓝线更快（find（）方法）我错过了什么吗？
对不起，我的困惑......乍一看似乎相反，但 x 轴是：每秒操作数 - 所以在理解它是有道理的之后
这正是我一直在寻找的。谢谢！

【解决方案2】：

两个调用是相同的。后一个调用被翻译成前一个。如果您想省略翻译步骤，请使用前一个。

【讨论】：

可能很明显，但我不确定：当外部选择器已经是 jQuery 对象时，这是否相同？像 $sth.find('p') 比 $('p', $sth.) 稍微快一点？
我的答案中发布的实时测试似乎表明 find 方法总是更快。我错过了什么吗？
@BrianFinkel $(selector, context) 在内部被“翻译”成$(context).find(selector)。该翻译需要额外的时间。
这里是 jQuery (1.10.2) 源码的相关部分，好奇的：github.com/jquery/jquery/blob/1.10.2/src/core.js#L175-L183
这些调用不一样...请看下面的测试

【解决方案3】：

我可以想到一个用例，其中使用 context 表单可能更可取 - 在上下文包含在可能为 null 的变量中的情况下。

例如：

// Only affect matching items that are descendants of '#parent'
do_something( $( '#parent' ) );
// Affect all matching items
do_something();

function do_something( $parent_element ){
  $( '.child', $parent_element ).each( function(){ } );
}

第二次调用do_something()，如果我们使用了$parent_element.find()，它将失败，而在本例中，如果$parent_element 未定义或为空，则上下文为空，因此：整个文档。

诚然，这是一个边缘案例，但它只是在我正在研究的东西中出现，所以我想我会把它放在这里以供后代使用。

【讨论】：

【解决方案4】：

发现更好，提高 40%：

http://jsperf.com/jquery-find-vs-context-2/13

注意区别：

$myDiv = $("myDiv")
myDiv = "#myDiv"

当传递$myDiv，jQuery 元素作为上下文时，它比 $.find 慢大约 10%。当传入#myDiv，jQuery 选择器作为上下文时，它比 $.find 慢 40%。

$.find > 上下文。

【讨论】：