jQuery:首先与.first()

.first()方法是在jQuery 1.4中添加的。

:firstselect器从1.0开始就已经出现了。

从文档:

:first

:first伪类相当于:eq(0) 。 它也可以写成:lt(1) 。 虽然这只匹配一个元素,但是:first-child可以匹配多个:每个父母一个。

.first()

给定一个代表一组DOM元素的jQuery对象, .first()方法从第一个匹配元素构造一个新的jQuery对象。


看来, .first()是一个filter,返回另一个jQuery对象,而:first只是一个select器。

但是,他们都可以用来完成同样的事情。

那么,什么时候应该使用一个而不是另一个呢? 性能? 请举例说明。

  • 无法加载谷歌iframe在fancybox
  • 如何删除/取消设置一个javascript对象的属性?
  • Jqgrid - 分组行级别的数据
  • Ajax成功事件不起作用
  • 如何订购与jQuery绑定的事件
  • jquery - 为没有子文本的元素获取文本
  • 如何知道一个string开始/结束jQuery中的特定string?
  • pipe理webpack中的jQuery插件依赖
  • 4 Solutions collect form web for “jQuery:首先与.first()”

    .first()可以用来selectjQuery集合中的第一个元素。

    基本上,它避免了必须做一个新的查询,或在需要处理一个集合,然后专门处理第一个元素的情况下打破链条。

    实际上,在jQuery中最昂贵的操作之一就是查询。 你做的越less越好

    我现在可以想到的一个例子是图像库脚本,其中第一个图像始终是默认的活动图像,但是您需要在每个图像上附加一个事件处理程序。

     $('#gallery img').click(myFunc).first().addClass('active'); // Instead of $('#gallery img').click(myFunc); $('#gallery img:first').addClass('active'); 

    .first()也是自1.1.2 … .eq(0)以来存在的语法糖:

     $('#gallery img').click(myFunc).eq(0).addClass('active'); 

    实际上,这是如何在jQuery中实现的:

     first: function() { return this.eq( 0 ); } 

    如果.first():first相同的上下文中用于获取相同的信息 ,例如:

    HTML:

     <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> 

    脚本:

     console.log("1", $('ul li').first().text()); console.log("2", $('ul li:first').text()); 

    .first()更高性能

    ** 在这里输入图像描述

    正如Andrew Moore所提到的, .eq(0).eq(0)等价。
    根据jsperf.com , .eq(0)将是最好的,但与.eq(0)没有太大的区别。

    你可以在这里看到我的源代码: http : //jsperf.com/first-vs-first-vs-eq-0

    $('li').css('color', 'red').first().css('color', 'green'); 在收集已经被使用之后将应用filter。

    在大多数情况下,我会使用select器:first因为它可以与许多其他好的select器组合在一起。

    一个伪select器和第一个()可以做同样的事情。

    至于性能,下面是jQuery first(),首先,eq(0)和:n(0)之间性能差异的一个实例

    http://jsperf.com/jquery-first-vs-first-selector ,请检查出来!

    希望这会有所帮助。