jQuery-等价于原型 Down()-function答案

【问题标题】：JQuery-equivalent to prototypes Down()-functionjQuery-等价于原型 Down()-function
【发布时间】：2011-04-28 17:15:19
【问题描述】：

我正在将一个 webapp 从原型移植到 jquery，其中我经常使用原型 Down() 函数。（选择给定元素的第一个子元素）

浏览 JQuery-api 的方法之一是：

原型：$('abc').down(); jquery: $('abc').children().first();

但是，由于这首先获取所有孩子并应用过滤器，我怀疑它对于这个用例是否有效。

有什么更好的方法？

【问题讨论】：

标签： jquery jquery-traversing

【解决方案1】：

尝试：

$('abc').children(":eq(0)")

【讨论】：

所以看起来 $('abc').children(":eq(0)") 与我最初使用的没有什么不同 ($('form').children().first( );) 。我希望有某种选择器，在返回第一个之前不需要知道所有孩子..

【解决方案2】：

有几种方法可以做到这一点。

首先，这会返回一个包含单个元素的数组。

$('form').children().first();

另请注意，这是一个更易读的版本 $('form').children(":eq(0)");

其次，这仅返回从数组中提取的元素

$('form').children()[0];

或者，如果您知道要使用哪种类型的元素（而不仅仅是第一个子元素，而不管元素类型如何）：

$('form').find("input:first");

最后，如果您并不严格需要相对于其父元素的元素，您可以直接使用 CSS3 选择器访问它：

$("input:first");

如果您能侥幸成功，我怀疑最后一个选项是最有效的。但是，如果有人对效率有更多的看法，我想听听。

【讨论】：

关于性能，您可以查看我刚刚创建的这个 jsPerf 测试：jsperf.com/jquery-get-first-child

【解决方案3】：

你可以扩展 jQuery，并像这样添加一个down() 函数：

(function($) {
  $.fn.down = function() {
    return $(this[0] && this[0].children && this[0].children[0]);
  };
})(jQuery);

这样您就不必更改代码中的任何内容。

你可以看到这个直播jsFiddle example。
您还可以在jsPerf 中查看性能比较。
它表明 这比其他答案中提供的方法更快（慢 40% 到 70%）。

编辑：
改编自实际原型实现的替代版本。 这甚至更快（25%）

(function($) {
  $.fn.down = function() {
    var el = this[0] && this[0].firstChild;
    while (el && el.nodeType != 1)
      el = el.nextSibling;
    return $(el);
  };
})(jQuery);

【讨论】：