【jQuery】關於選擇器中的 :first 、 :first-child 、 :first-of-type

時間 2019-12-04

標籤 jQuery 關於選擇器 child type 欄目 JQuery 简体版

原文原文鏈接

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

好了，接下去是正題。前端

我在API裏看到對:first-child這個選擇器，裏面這麼描述的（我用的是別人翻譯整理的，心裏雖然感受仍是讀官方的英文原版比較好，可是仍是由於懶，用這個版本了）node

對於這個，我一開始很是蛋疼，由於返回的是一個對象的數組（我我的這個理解的，不知道對不對），可是這個選擇器名字卻叫:first-child（真心好像吐槽，爲毛不叫children），後來我本身試了一下，發現若是不用each()進行遍歷的話，默認返回的是該數組的第一個元素，也就是截圖中的<li>John</li>。（其實要講的不是這個，這個是作一下鋪墊）jquery

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

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

好吧，文字太多，仍是直接上代碼和效果吧。（代碼部分，對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>
    <div>
        <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>
    </div>
    <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】this

<!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>
    <div>
        <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>
    </div>
    <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 十一、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>
    <div>
        <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>
    </div>
    <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，即節點，是惟1、肯定的

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

【:first-of-type】選擇器，和【:first-child】相似（之因此不用同樣，由於只是在這個示例中結果同樣，並且兩個選擇器的做用也不同），返回的也是一個node的數組，如果不用each進行遍歷，默認返回的是該數組的第一個節點（後來我查看了一下size()的返回值，確實是3，印證了個人想法）。

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。