jQuery 1.4中添加了.first()
方法。
:first
选择器从1.0开始就存在了。
从文档中:
:first
伪类等同于:eq(0)
。它也可以写成:lt(1)
。虽然这只匹配一个元素,但:first-child
可以匹配多个元素:每个父元素一个。
给定一个表示一组DOM元素的jQuery对象,.first()
方法从第一个匹配的元素构造一个新的jQuery对象。
看起来.first()
是一个返回另一个jQuery对象的过滤器,而:first
只是一个选择器。
但是,它们都可以用来完成相同的事情。
那么,什么时候应该使用一个而不是另一个呢?性能?请提供示例。
发布于 2010-02-23 01:38:11
.first()
可用于选择jQuery集合中的第一个元素。
基本上,当您需要处理一个集合,然后专门处理第一个元素时,它可以避免进行新的查询或中断链。
实际上,在jQuery中可以执行的代价最高的操作之一是查询。你做得越少,就越好。
我现在能想到的一个例子是图片库脚本,其中您的第一个图像始终是默认的活动图像,但您需要在每个图像上附加一个事件处理程序……
$('#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 );
}
发布于 2013-02-08 01:19:22
如果在相同的上下文中使用.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所提到的,.first()
等同于.eq(0)
。
根据jsperf.com的说法,.eq(0)
将是最好的,但与.first()
没有太大区别。
你可以在这里看到我的源码:http://jsperf.com/first-vs-first-vs-eq-0
发布于 2010-02-23 01:36:45
$('li').css('color', 'red').first().css('color', 'green');
将在集合已经被使用之后应用过滤器。
在大多数情况下,我会使用选择器:first
,因为它可以与so many other nice selectors结合使用,所有这些都可以在一次扫描中完成。
https://stackoverflow.com/questions/2312761
复制相似问题