jQuery中:first和:first-child的区别

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

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

:first选择器与:first-child选择器的不同之处在于：
:first选择器只匹配一个元素，并且是匹配到的第一个元素；
:first-child选择器则需要判断匹配到的元素是否是其父元素的第一个子元素，如果是就保留，否则将被舍弃。

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

总结：first只匹配一个，而：frist-child为每一个父元素匹配第一个孩子元素。

                <ul>
			<div></div>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<ul>
			<li>11</li>
			<div></div>
			<li>12</li>
			<li>13</li>
		</ul>
		<script>
			debugger
			var f = $("ul li:first");//匹配的结果是<li>1<li>
			var fc = $("ul li:first-child");//匹配的结果是<li>11</li>
		</script>

$("ul li:first")仍然只匹配第一个ul中的子元素中的第一个li，而$("ul li:first-child")表示的意思是，ul的第一个孩子元素是li的，由于第一个ul的第一个子元素是div，所以并没有匹配