【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个选择器的印证结果发上