当前位置:Gxlcms > JavaScript > jQuery选择器中的:first-child和:first以及:first-of-type的区别详解

jQuery选择器中的:first-child和:first以及:first-of-type的区别详解

时间:2021-07-01 10:21:17 帮助过:17人阅读

开头先说点题外话。因为刚开始毕业的第一份工作不是前端,是在国企的,快干到3个月的时候,实在是受不了那种安逸的生活节奏,果断辞职了(其实就是因为钱少),然后选定自己喜欢的方向,开始从页面仔做起。所以现在是做页面仔的快第三个月了,因为找了个小的创业公司实习,所以实际能全面从头到尾了解前端的知识比较少,一般是用到什么就去查什么,学什么,所以最近只能找个jQuery的API看看了。

好了,接下去是正题。

我在API里看到对:first-child这个选择器,里面这么描述的(我用的是别人翻译整理的,内心虽然感觉还是读官方的英文原版比较好,但是还是因为懒,用这个版本了)

对于这个,我一开始非常蛋疼,因为返回的是一个对象的数组(我个人这个理解的,不知道对不对),但是这个选择器名字却叫:first-child(真心好像吐槽,为毛不叫children),后来我自己试了一下,发现如果不用each()进行遍历的话,默认返回的是该数组的第一个元素,也就是截图中的<li>John</li>。(其实要讲的不是这个,这个是做一下铺垫)

在这个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的区别详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行