搜尋
首頁web前端js教程jQuery選擇器中的 :first-child和:first以及:first-of-type的差異詳解

    開頭先說點題外話。因為剛開始畢業的第一份工作不是前端,是在國企的,快乾到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
    jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

    实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

    jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

    修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

    axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

    区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

    jquery怎么在body中增加元素jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

    增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

    jquery中apply()方法怎么用jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

    在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

    jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

    删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

    jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

    去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

    jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am 11:29 AM

    on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

    See all articles

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序,用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    AI Hentai Generator

    AI Hentai Generator

    免費產生 AI 無盡。

    熱門文章

    R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
    2 週前By尊渡假赌尊渡假赌尊渡假赌
    倉庫:如何復興隊友
    4 週前By尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒險:如何獲得巨型種子
    4 週前By尊渡假赌尊渡假赌尊渡假赌

    熱工具

    mPDF

    mPDF

    mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

    SublimeText3 Linux新版

    SublimeText3 Linux新版

    SublimeText3 Linux最新版

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

    PhpStorm Mac 版本

    PhpStorm Mac 版本

    最新(2018.2.1 )專業的PHP整合開發工具