JQuery中有关first的选择器

JQuery中有关first的选择器分别有以下几类：
-1. $(“p:child”) 表示某个元素的子元素中的第一个p元素被选取

$("p:child")<h1>第一行</h1><p>第二行</p><a>第三行</a><div style="border:1px solid;">    <span>第四行</span>    <p>第五行</p>    <p>第六行</p>    <p>第七行</p></div>

被选取的是第二行；
若将选择器改成 $("div p:child")，则选择的是第五行。总的来说就是在父元素下，第一个出现的p元素
-2. $(“p:first-child”) 表示选择的是，当p作为第一个子元素时，被选取。

$("p:first-child")<div style="border:1px solid">    <a>第一行</a>    <p>第二行</p></div><br><div style="border:1px solid">    <p>第三行</p>    <p>第四行</p></div>

只会选取第三行。因为第一个div中第一个元素是a元素而不是p，其他的p元素因为不是第一个子元素而不被选取。
-3. $(“p:first-of-type”) 表示选取的是子元素中第一个类型为p的元素，和第一种不同在于第一种只会选取某个元素下的第一个p元素，而现在的情况下选取的是多个元素下的第一个类型为p的元素：

$("p:first-of-type")<p>第一行</p><div style="border:1px solid;">    <p>第二行</p>    <p>第三行</p></div><br><div style="border:1px solid;">    <span>第四行</span>    <p>第五行</p>    <p>第六行</p>    <span>第七行</span></div><div style="border:1px solid">    <p>第八行</p>    <p>第九行</p></div>

选取的是第一行、第二行、第五行、第八行。即所有元素下的第一个p元素。而如果是$("p:first") 选择器就只会选取第一行。当第一行不存在时，只会选择第二行。
-4.$(“p:nth-child(3)”) 被选取的是子元素的第三个元素是p元素

$("p:nth-child(3)")<h1>第一行</h1><p>第二行</p><a>第三行</a><div class="div1">    <span>第四行</span>    <p>第五行</p>    <p>第六行</p>    <p>第七行</p></div><br><div class="div2">    <p>第八行</p>    <p>第九行</p>    <p>第十行</p></div><p>十一行</p>

被选取的是第六行和第十行。为什么不选第三行？因为第三行是a元素不是p元素。为什么不选第十一行，他也是body下的p元素啊？那是因为第十一行不是第三个子元素。所以要同时满足两个条件1.是第三个元素；2.元素必须是p元素。
第六行是因为刚好是div1的第三个元素且是p元素。
-5. $(“p:nth-type-child(3)”) 被选取的是子元素中第三个类型为p的元素。

$("p:nth-type-child(3)")<h1>第一行</h1><p>第二行</p><p>第三行</p><div style="border:1px solid;">    <span>第四行</span>    <p>第五行</p>    <p>第六行</p>    <p>第七行</p></div><br><div style="border:1px solid;">    <p>第八行</p>    <p>第九行</p>    <p>第十行</p></div><p>十一行</p>

被选取的分别是第七行、第十行、第十一行。首先第十一行作为body的第n个子元素，但是是第三个p元素，满足了两点：1.是个p元素；2.是第三个p元素。和上面$("p:nth-child(3)")不同的地方在于：本选择器在选择的时候是先找到符合元素类型的各个元素，然后按照顺序排成一列（或数组），当要求是第三个的时候，就选第三个。$("p:nth-child(3)")选择器是把所有的子元素先排成一排，然后数到第三个元素，看他是不是p元素，是的话就true，不是的话false。
以上就是本次对JQuery的有关第几个选择器所做的分析。