jQuery中选择器:first和:first-child的区别

jQuery中选择器:first和:first-child的区别

:first选择器

• :first选择器用于选择匹配到的第一个元素，将其封装为jQuery对象后返回。其效果等价于:eq(0)选择器

:first-child选择器

• :first-child选择器用于选择作为父元素的第一个子元素的元素，将其封装为jQuery对象后返回。其效果等价于:nth-child(1)选择器

选择器:first和:first-child的区别

• :first选择器只匹配一个元素，并且是匹配到的第一个元素

• :first-child选择器需要判断匹配到的元素是否是其父元素的第一个子元素，如果是就保留

示例

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<ul>
	<li>A</li>
	<li>B</li>
	<li>C</li>
</ul>

<script>
	var f = $("ul li:first"); //匹配的结果是<li>1<li>
	var fc = $("ul li:first-child"); //匹配的结果是<li>1</li>,<li>A</li>
</script>