好了，接下去是正题。
我在API里看到对:first-child这个选择器，里面这么描述的（我用的是别人翻译整理的，内心虽然感觉还是读官方的英文原版比较好，但是还是因为懒，用这个版本了）
对于这个，我一开始非常蛋疼，因为返回的是一个对象的数组（我个人这个理解的，不知道对不对），但是这个选择器名字却叫:first-child（真心好像吐槽，为毛不叫children），后来我自己试了一下，发现如果不用each()进行遍历的话，默认返回的是该数组的第一个元素，也就是截图中的<li>John</li>。（其实要讲的不是这个，这个是做一下铺垫）
在这个API，之后再往后看一点，就看到选择器:first-of-type，以下是他对这个选择器的描述
后来，因为他在这部分开头说的那段话，我去百度了一下网上对:first-of-type的说明，然后顺便还查了下:first-child的。发现好像有一些说明不太准确。
好吧，文字太多，还是直接上代码和效果吧。（代码部分，对jQuery的引入，不想麻烦去找网上的那个了，直接用本地路径了）
【:first】
<!DOCTYPE html><html lang="zh-CN"><head>
<title>test</title>
<meta charset="utf-8">
<script src="./js/jquery-1.11/jquery.min.js"></script></head><body>
<p>
<ul>
<li><p>测试li-11</p></li>
<li><p>测试li-12</p></li>
<li><p>测试li-13</p></li>
</ul>
<hr>
<ul>
<li><p>测试li-21</p></li>
<li><p>测试li-22</p></li>
<li><p>测试li-23</p></li>
</ul>
<hr>
</p>
<hr>
<ul>
<li><p>测试li-31</p></li>
<li><p>测试li-32</p></li>
<li><p>测试li-33</p></li>
</ul>
<script>
$(document).ready(function(){
$("ul li:first").each(function(){
alert($(this).html());
})
}) </script></body></html>【:first选择器在几个浏览器下的显示】
【:first-child】
<!DOCTYPE html><html lang="zh-CN"><head>
<title>test</title>
<meta charset="utf-8">
<script src="./js/jquery-1.11/jquery.min.js"></script></head><body>
<p>
<ul>
<li><p>测试li-11</p></li>
<li><p>测试li-12</p></li>
<li><p>测试li-13</p></li>
</ul>
<hr>
<ul>
<li><p>测试li-21</p></li>
<li><p>测试li-22</p></li>
<li><p>测试li-23</p></li>
</ul>
<hr>
</p>
<hr>
<ul>
<li><p>测试li-31</p></li>
<li><p>测试li-32</p></li>
<li><p>测试li-33</p></li>
</ul>
<script>
$(document).ready(function(){
$("ul li:firstchild").each(function(){
alert($(this).html());
})
}) </script></body></html>【:first-child选择器在各个浏览器下的效果】（因为进行了遍历，所以被选中的元素有3个，即会弹窗弹出3个；几个浏览器分别是：waterfox、chrome、IE 11、Edge）
【waterfox】
【chrome】PS：chrome下好像存在弹窗，我就没法切到另一个窗口，所以只能3个画面截图后拼接了
【IE 11】
【Edge】
【:first-of-type】
<!DOCTYPE html><html lang="zh-CN"><head>
<title>test</title>
<meta charset="utf-8">
<script src="./bootstrap/js/jquery-1.11/jquery.min.js"></script></head><body>
<p>
<ul>
<li><p>测试li-11</p></li>
<li><p>测试li-12</p></li>
<li><p>测试li-13</p></li>
</ul>
<hr>
<ul>
<li><p>测试li-21</p></li>
<li><p>测试li-22</p></li>
<li><p>测试li-23</p></li>
</ul>
<hr>
</p>
<hr>
<ul>
<li><p>测试li-31</p></li>
<li><p>测试li-32</p></li>
<li><p>测试li-33</p></li>
</ul>
<script>
$(document).ready(function(){
$("ul li:first-of-type").each(function(){
alert($(this).html());
})
}) </script></body></html>【:first-of-type选择器在各浏览器下显示效果】
这部分的显示和在【:first-child】选择器下效果一样，减少篇幅，还是不上截图了。
【总结】
从上面的截图，看出 :first 、 :first-child 、 :first-of-type，这三个选择器，浏览器内核不同，并不会影响jQuery以及显示效果。
另一方面，
【:first】选择器，返回的是单一的node，即节点，是唯一、确定的
【:first-child】选择器，返回的实际是一个node的数组，若是不用each进行遍历，默认返回的是该数组的第一个节点（后来我查看了一下size()的返回值，确实是3，印证了我的想法）
【:first-of-type】选择器，和【:first-child】类似（之所以不用一样，因为只是在这个示例中结果一样，而且两个选择器的作用也不一样），返回的也是一个node的数组，若是不用each进行遍历，默认返回的是该数组的第一个节点（后来我查看了一下size()的返回值，确实是3，印证了我的想法）。
PS：好像和first对应的有个last，暂时还没看到那里，不过我个人感觉两者一样是一样的，只不过一个是第一个，一个是最后一个，若是有空，到时候再把last的3个选择器的印证结果发上
下载本文