JQuery过滤选择器和相对选择器

一、Jquery常用的过滤选择器如下所示：

1、:first，选取第一个元素，比如$("div:first")选取第一个div元素

2、:last，选取最后一个元素，比如$("div:last")选取最后一个div元素

3、:not(选择器)，选取不满足“选择器”条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素

4、：even/：odd，选取索引为偶数/奇数的元素，比如$("div:even"),选取索引号为偶数的所有div元素

5、:eq(索引序号)/:gt(索引序号)/:lt(索引序号)，选取等于索引号/大于索引号/小于索引号的元素，比如$("div:lt(3)"),选取索引号小于3的所有div元素

注意：

过滤选择器的混合使用时要记住后面的过滤条件是以前面的过滤选择器过滤后的重新序号为基础，即过滤的逐级性，比如

 $("#t1 tr:gt(0):lt(3)").css("fontSize", "28");  //lt(3)是从gt(0)出的新序列中的序号，不要写成lt(4)

二、相对选择器

只要在$()指定第二个参数，第二个参数为相对的元素。比如html代码如下

 <table id="table1">
        <tr><td>dsds</td><td>dsfdef</td></tr>
        <tr><td>dsds</td><td>dsfdef</td></tr>
        <tr><td>dsds</td><td>dsfdef</td></tr>
        <tr><td>dsds</td><td>dsfdef</td></tr>
        <tr><td>dsds</td><td>dsfdef</td></tr>
    </table>

　　那么可以用如下的js代码操作td的背景色

" $("td", $(this)).css("background", "red")",这句代码用的就是相对选择器，选择出的td是以当前的tr为相对的元素。选择的td元素是当前的tr元素下的所有td元素，没有涉及到其他行的td元素

  <script type="text/javascript">
        $(function () {
            $("#table1 tr").click(function () {
                $("td", $(this)).css("background", "red");
            });
        });
    </script>