jQuery選擇器中的 :first-child和:first以及:first-of-type的差異詳解-js教程-PHP中文網

首頁

web前端

js教程

jQuery選擇器中的 :first-child和:first以及:first-of-type的差異詳解

黄舟

Jun 23, 2017 pm 02:39 PM

firstjquery選擇器

開頭先說點題外話。因為剛開始畢業的第一份工作不是前端，是在國企的，快乾到3個月的時候，實在是受不了那種安逸的生活節奏，果斷辭職了（其實就是因為錢少），然後選定自己喜歡的方向，開始從頁面仔做起。所以現在是做頁面仔的快第三個月了，因為找了個小的創業公司實習，所以實際上能全面從頭到尾了解前端的知識比較少，一般是用到什麼就去查什麼，學什麼，所以最近只能找個jQuery的API看看了。

好了，接著是正題。

我在API裡看到對:first-child這個選擇器，裡面這麼描述的（我用的是別人翻譯整理的，內心雖然感覺還是讀官方的英文原版比較好，但是還是因為懶，用這個版本了）

對於這個，我一開始非常蛋疼，因為返回的是一個對象的數組（我個人這個理解的，不知道對不對），但是這個選擇器名字卻叫:first-child（真心好像吐槽，為毛不叫children），後來我自己試了一下，發現如果不用each( )進行遍歷的話，預設回傳的是該陣列的第一個元素，也就是截圖中的

John

。（其實要講的不是這個，這個是做一下鋪墊）

在這個API，之後再往後看一點，就看到選擇器:first-of-type，以下是他對這個選擇器的描述

後來，因為他在這部分開頭說的那段話，我去百度了一下網上對:first-of-type的說明，然後順便也查了一下:first-child的。發現好像有些說明不太準確。

好吧，文字太多，還是直接上程式碼和效果。（程式碼部分，對jQuery的引入，不想麻煩去找網路上的那個了，直接用本機路徑了）

【:first】

<!DOCTYPE html><html lang="zh-CN"><head>
    <title>test</title>
    <meta charset="utf-8">
    <script src="./js/jquery-1.11/jquery.min.js"></script></head><body>
    <p>
        <ul>
            <li><p>测试li-11</p></li>
            <li><p>测试li-12</p></li>
            <li><p>测试li-13</p></li>
        </ul>
        <hr>
        <ul>
            <li><p>测试li-21</p></li>
            <li><p>测试li-22</p></li>
            <li><p>测试li-23</p></li>
        </ul>
        <hr>
    </p>
    <hr>
    <ul>
        <li><p>测试li-31</p></li>
        <li><p>测试li-32</p></li>
        <li><p>测试li-33</p></li>
    </ul>
    <script>
        $(document).ready(function(){
            $("ul li:first").each(function(){
                alert($(this).html());
            })
        })    </script></body></html>

【:first選擇器在幾個瀏覽器下的顯示】

【:first-child】

<!DOCTYPE html><html lang="zh-CN"><head>
    <title>test</title>
    <meta charset="utf-8">
    <script src="./js/jquery-1.11/jquery.min.js"></script></head><body>
    <p>
        <ul>
            <li><p>测试li-11</p></li>
            <li><p>测试li-12</p></li>
            <li><p>测试li-13</p></li>
        </ul>
        <hr>
        <ul>
            <li><p>测试li-21</p></li>
            <li><p>测试li-22</p></li>
            <li><p>测试li-23</p></li>
        </ul>
        <hr>
    </p>
    <hr>
    <ul>
        <li><p>测试li-31</p></li>
        <li><p>测试li-32</p></li>
        <li><p>测试li-33</p></li>
    </ul>
    <script>
        $(document).ready(function(){
            $("ul li:firstchild").each(function(){
                alert($(this).html());
            })
        })    </script></body></html>

【:first-child選擇器在各個瀏覽器下的效果】（因為進行了遍歷，所以被選中的元素有3個，即會彈窗彈出3個；幾個瀏覽器分別是：waterfox、chrome、IE 11、Edge）

【 waterfox】

【chrome】PS：chrome下好像存在彈窗，我就沒法切到另一個窗口，所以只能3個畫面截圖後拼接了

【IE 11】

【Edge】

# #【:first-of-type】

<!DOCTYPE html><html lang="zh-CN"><head>
    <title>test</title>
    <meta charset="utf-8">
    <script src="./bootstrap/js/jquery-1.11/jquery.min.js"></script></head><body>
    <p>
        <ul>
            <li><p>测试li-11</p></li>
            <li><p>测试li-12</p></li>
            <li><p>测试li-13</p></li>
        </ul>
        <hr>
        <ul>
            <li><p>测试li-21</p></li>
            <li><p>测试li-22</p></li>
            <li><p>测试li-23</p></li>
        </ul>
        <hr>
    </p>
    <hr>
    <ul>
        <li><p>测试li-31</p></li>
        <li><p>测试li-32</p></li>
        <li><p>测试li-33</p></li>
    </ul>
    <script>
        $(document).ready(function(){
            $("ul li:first-of-type").each(function(){
                alert($(this).html());
            })
        })    </script></body></html>

【:first-of-type選擇器在各瀏覽器下顯示效果】

這部分的顯示和在【:first-child 】選擇器下效果一樣，減少篇幅，還是不上截圖了。

【總結】

從上面的截圖，看出 :first 、 :first-child 、 :first-of-type，這三個選擇器，瀏覽器內核不同，不會影響jQuery以及顯示效果。

另一方面，

【:first】選擇器，回傳的是單一的node，即節點，是唯一、確定的

【:first-child】選擇器，回傳的實際上是一個node的數組，若是不用each進行遍歷，預設回傳的是該數組的第一個節點（後來我查看了一下size()的回傳值，確實是3，印證了我的想法）

【:first-of-type】選擇器，和【:first-child】類似（之所以不用一樣，因為只是在這個範例中結果一樣，而且兩個選擇器的作用也不一樣），返回的也是一個node的數組，若是不用each進行遍歷，默認返回的是該數組的第一個節點（後來我查看了一下size()的返回值，確實是3，印證了我的想法）。

PS：好像和first對應的有個last，暫時還沒看到那裡，不過我個人感覺兩者一樣是一樣的，只不過一個是第一個，一個是最後一個，若是有空，到時候再把last的3個選擇器的印證結果發上

以上是jQuery選擇器中的 :first-child和:first以及:first-of-type的差異詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

See all articles