:first-of-type | jQuery API 3.2 中文文档 | jQuery API 在线手册

jQuery API 3.2.1

推荐办理招商信用卡,新户首刷礼,五折享美食,需要的速度围观~click here
首页  >  选择器  > :first-of-type 源码下载

返回值:jQuery:first-of-type

V1.9概述

结构化伪类,匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器。

解释的很模糊,网上搜了很多都是扯淡的解释,作者也只能自己一个个试,试了几十次才弄的稍微有点清楚,如果错了,慢点拍砖,怕怕。直接看示例。

描述:

查找作为父元素的span类型子元素中的"长子"的span标签

HTML 代码:
            <div id="n1">
    <div id="n2" class="abc">
        <label id="n3">label1</label>
        <span id="n4">span1</span>
        <span id="n5" class="abc">span2</span>
        <span id="n6">span3</span>
    </div>
    <div id="n7">
        <span id="n8" class="abc">span1</span>
        <span id="n9">span2</span>
    </div>
</div>
          
jQuery 代码:
            $("span:first-of-type");
          
结果:
            //n4虽然不是n2的第一个子元素,但它是n2所有span类型子元素中的第一个,因此可以匹配
[<span id="n4">span1</span>,<span id="n8" class="abc">span1</span>]
          
HTML 代码:
            <div id="n1">
    <div id="n2" class="abc">
        <label id="n3">label1</label>
        <span id="n4">span1</span>
        <span id="n5" class="abc">span2</span>
        <span id="n6">span3</span>
    </div>
    <div id="n7">
        <span id="n8" class="abc">span1</span>
        <span id="n9">span2</span>
    </div>
</div>
          
jQuery 代码:
            $(".abc:first-of-type");
          
结果:
            //.abc可以匹配id分别为n2、n5、n8的3个元素,n2是n1所有div类型子元素中的第一个,n8是n7所有span类型子元素中的第一个,但n5不是n2所有span类型子元素中的第一个,因此不能匹配n5。
[<div id="n2" class="abc">,<span id="n8" class="abc">span1</span>]