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

本文转载自 http://blog.csdn.net/kusedexingfu/article/details/51945284

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

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

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

[html]   view plain  copy  print ?

1.               <ul>  
2.     <li>1</li>  
3.     <li>2</li>  
4.     <li>3</li>  
5. </ul>  
6. <ul>  
7.     <li>11</li>  
8.     <li>12</li>  
9.     <li>13</li>  
10. </ul>  
11. <script>  
12.     var f = $("ul li:first");//匹配的结果是<li>1<li>  
13.     var fc = $("ul li:first-child");//匹配的结果是<li>1</li>,<li>11</li>  
14. </script>  

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

[html]   view plain  copy  print ?

1.               <ul>  
2.     <div></div>  
3.     <li>1</li>  
4.     <li>2</li>  
5.     <li>3</li>  
6. </ul>  
7. <ul>  
8.     <li>11</li>  
9.     <div></div>  
10.     <li>12</li>  
11.     <li>13</li>  
12. </ul>  
13. <script>  
14.     debugger  
15.     var f = $("ul li:first");//匹配的结果是<li>1<li>  
16.     var fc = $("ul li:first-child");//匹配的结果是<li>11</li>  
17. </script>  

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