Jquery伪选择器学习笔记

浏览数：21 / 时间：2015年06月09日

对于我这个半路出家的前端，使用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: