jQuery：第一次與.first（）

Question

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

:first選擇器自1.0以來一直存在。

來自文檔：

:first

:first偽類相當於:eq(0) 。 它也可以寫成:lt(1) 。 雖然這只匹配一個元素，但是:first-child可以匹配多個：每個父元素一個。

.first()

給定一個表示一組DOM元素的jQuery對象， .first()方法從第一個匹配元素構造一個新的jQuery對象。

---

似乎.first()是一個返回另一個jQuery對象的過濾器，而:first只是一個選擇器。

但是，它們都可以用來完成同樣的事情。

那么，何時應該使用一個而不是另一個？ 性能？ 請提供示例。

Answer 1

如果.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()更.first()

**

如mentionned由Andrew摩爾， .first()是相當於.eq(0)
據jsperf.com ， .eq(0)將是最好的，但沒有大的區別.first()

您可以在此處查看我的來源： http ： //jsperf.com/first-vs-first-vs-eq-0

Answer 2

.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 );
}

Answer 3

$('li').css('color', 'red').first().css('color', 'green'); 在已經使用了收集之后將應用過濾器。

在大多數情況下，我會使用選擇器:first因為它可以與許多其他不錯的選擇器組合 ，所有這些都在一次掃描中。

Answer 4

：first偽選擇器和first（）可以做同樣的事情。

至於性能，這里是jQuery first（），first，eq（0）和：nth（0）之間性能差異的實例 。

http://jsperf.com/jquery-first-vs-first-selector ，請看看！

希望這會有所幫助。