Question

假设我想获得“.answer”

类的所有元素中的第一个元素

$($(".answer")[0])

我可以做到，但优雅和速度之间的最佳平衡是什么？

*更改了问题以反映当前的讨论

Answer 1

我无法谈论优雅方面，但这里的表现方面实际上可以产生巨大的差异。

看起来，from a set of JavaScript testing，您的原始方法实际上是最高效的方法，并且与假设接受的答案相关联，非CSS Sizzle选择器倾向于效率低于方法选择器。这是有原因的。 $('.answer')可以使用浏览器本机getElementsByClass()，而无需手动遍历结果。 :first选择器使其复杂化。在这种情况下，使用嘶嘶声选择器似乎会使选择速度减慢4-5倍。

我认为，使用jQuery，性能应该胜过优雅，所有证据（到目前为止我测试过的每一个浏览器！）似乎都表明OP的优雅解决方案是最快的。

以下是测试运行次数最多的浏览器的结果：

enter image description here

（数字是'每秒操作数'，因此数字越高越快，数字越慢越慢。）

Answer 2

以下功能相同（虽然不是速度）：

var a0 = $($('.answer')[0]);
var a0 = $('.answer').first(); - 请参阅http://api.jquery.com/first/
var a0 = $('.answer:first'); - 请参阅http://api.jquery.com/first-selector/
var a0 = $('.answer').eq(0); - 请参阅http://api.jquery.com/eq/
var a0 = $('.answer:eq(0)'); - 请参阅http://api.jquery.com/eq-selector/

哪个最好？
has been hypothesized选择器版本应该比方法版本更快（并且逻辑有一定意义）但我还没有找到可靠的跨浏览器，多文档基准测试证明这是真的。

在某些情况下，你不能使用选择器，因为你有一个由链式结果产生的jQuery对象，后来必须将其削减。

编辑：根据以下@ yc测试的优秀信息，以下是当前（2011年2月4日）的测试结果，总结并与基准.answer:first进行比较：< / p>

          :first  :eq(0)  .first()  .eq(0)  $($('...')[0])
Chrome 8+   100%     92%      224%    266%       367%
   FF 3.6   100%    100%      277%    270%       309%
  FF 4.0b   100%    103%      537%    521%       643%
 Safari 5   100%     93%      349%    352%       467%
 Opera 11   100%    103%      373%    374%       465%
     IE 8   100%    101%     1130%   1246%      1767%
 iPhone 4   100%     95%      269%    316%       403%
=====================================================
 Weighted   100%     92%      286%    295%       405%
    Major   100%     95%      258%    280%       366%

加权行显示按每个浏览器的测试次数加权的效果;流行的浏览器（在那些测试中）被更强烈地计算。
主要行显示相同内容，仅包括主要桌面浏览器的非beta版本。

总结：这个假设（目前）是错误的。这些方法明显快于Sizzle选择器，并且几乎没有例外，OP的代码$($('.answer')[0])是最快的！

Answer 3

使用:first选择器或.first过滤器方法：

$(".answer:first");

或：

$(".answer").first();

最合适的方法：$（$（“。answer”）[0]）

3 个答案: