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器。

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

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

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 ,请检查出来!

希望这会有所帮助。

  • jQuery只序列化div内的元素
  • 如何得到hex颜色值而不是RGB值?
  • 如何调整jqgrid的列宽在数据加载后?
  • jQuery的iframefile upload
  • 用jQuery设置隐藏input的值
  • 我怎样才能禁用从一个函数jQuery对话框中的button?
  • 注意DOM的变化,优雅的方式
  • 将图像url转换为Base64
  • 用jQuery添加css文件
  • 为什么这个jQuery点击function不起作用?
  • 如何使用jquery将html加载到variables中