Jquery伪选择器学习笔记

对于我这个半路出家的前端，使用jquery已经很长时间了，对于选择器，一直都局限在id，class，element选择器。每次写一个元素都得想一个id，一个页面写下来想id名都想的累的慌。最近手头项目比较多，头晕脑胀的，遂决定每天下班回去还是得学学jquery的其它强大选择器，边学边做点笔记吧。

一、伪选择器

:first / :last

匹配找到的第一个/最后一个子元素

:first-child / :last-child

匹配第一个/最后一个元素

笔记：这两组是最先让我分不清的。看着解释好像差别不是很大。但举个例子来看，就会发现大不同了。

<div id="div1">
        <p id="p1">p1</p>
    </div>
    <div id="div2">second</div>
    <div id="div3">
        <p id="p2">p2</p>
        <p id="p3">p3</p>
        <p id="p4">
            <span id="span1">span1</span>
            <span id="span2">span2</span>
        </p>
    </div>
    <div id="div4">
        <p id="p5">p5</p>
    </div>
    <table>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td>4</td></tr>
    </table>

 // A
 $("td:first").css('color','blue');
 $("p:first").css('color','red');

 // B
 $("td:first-child").css('color','blue');
 $("p:first-child").css('color','red');

结果：A:B:

为何一个一点的差别，结果确是如此大区别呢？

jquery手册上解释：

:first­child 能够匹配第一个子元素，并为每个父元素匹配一个子元素。

:first只匹配一个元素

这样的解释也许还不太明白，但是换一种说法就明白多了，:first­child在匹配的时候，先找到它的父元素，然后再把所有父元素的第一个子元素匹配出来，而:first只匹配第一个父元素的第一个子元素。

p的父元素div,:first­child能匹配上p1,p2,p5，而:first只能匹配上p1

td的父元素是tr，:first­child能匹配上1，2，3，4，而:first­只能匹配第一个1。