jQuery|容易混淆的first、first-child、first-of-type

first与first-child 在使用过程中容易混淆。这次我们就把他理清楚。其实这是两个概念。
first：指集合中的第一个。举例：7层楼住户的第一户。
first-child：选择器选取属于其父元素的第一个子元素。2单元下每一层的第一户。
first-of-type 选择器选取属于其父元素的特定类型的第一个子元素的所有元素。

选取第一个

元素：

$("p:first")

定义和用法

:first 选择器选取第一个元素。

注意：这个选择器只用于选取单个元素。使用

选择器选取多个元素（每个父元素一个）。

最常见的用法：与其他选择器一起使用，选取指定组合中的第一个元素（就像上面的实例）。

语法

$(":first")

样例

这是第一个段落。
这是第二个段落。
这是最后一个段落。

image.png

first-child 选择器

选取属于

的父元素中第一个为

的元素：

$("p:first-child")

定义和用法

:first-child 选择器选取属于其父元素的第一个子元素。
注意：返回的是一个集合元素

语法

$(":first-child")

The first paragraph in body.


The first paragraph in div.
The last paragraph in div.




This is a span element.
The first paragraph in another div.
The last paragraph in another div.


The last paragraph in body.

image.png

说明：
第一个黄底色是指 父body 标签下的第一个是p元素的元素。
第二个黄底色是指 父div 标签下的第一个是p元素。

first-of-type选择器（强调位置是第一个）

选取属于其父元素的第一个

元素的每个

元素：

$("p:first-of-type")

定义和用法

:first-of-type 选择器选取属于其父元素的特定类型的第一个子元素的所有元素。

语法

$(":first-of-type")

body 中第一个段落。


    
div 中第一个段落。
    
div 中的最后一个段落。




    这是一个 span 元素。
    
另一个 div 中第一个段落。
    
另一个 div 中的最后一个段落。


body 中最后一个段落。

image.png

注意最后一个黄色p元素，它是div中的第一个p元素，但是它的位置不是第一个。