jQuery选择器（基本，层次，基本过滤，内容过滤，属性，子元素过滤）

01基本选择器

$(document).ready(function () {
            //选择 id为 one 的元素
            $("#btn1").click(function () {
                $("#one").css("background-color","red");
            });
            //选择 class 为 mini 的所有元素
            $("#btn2").click(function () {
                $(".mini").css("background-color", "red");
            });
            //选择 元素名是 div 的所有元素
            $("#btn3").click(function () {
                $("div").css("background-color", "red");
            });
            //选择 所有的元素
            $("#btn4").click(function () {
                $("*").css("background-color", "red");
            });
            //选择 所有的span元素和id为two的div元素
            $("#btn5").click(function () {
                $("span,#two").css("background-color", "red");
            });
        });

02层次选择器

 $(document).ready(function () {
            //选择 body内的所有div元素.
            $("#btn1").click(function () {
                $("body div").css("background-color", "red");
            });
            //在body内,选择子元素是div的。
            $("#btn2").click(function () {
                $("body>div").css("background-color", "red");
            });
            //选择 所有class为one 的下一个div元素.
            $("#btn3").click(function () {
                $(".one+div").css("background-color", "red");
            });
            //选择 id为two的元素后面的所有div兄弟元素.
            $("#btn4").click(function () {
                $("#two~div").css("background-color", "red");
            });
        });

03基本过滤选择器

$(document).ready(function () {
            //选择第一个div元素.
            $("#btn1").click(function () {
                $("div:eq(0)").css("background-color", "red");
            });
            //选择最后一个div元素.
            $("#btn2").click(function () {
                $("div:last").css("background-color", "red");
            });
            //选择class不为one的 所有div元素.
            $("#btn3").click(function () {
                $("div:not(.one)").css("background-color", "red");
            });
            //选择 索引值为偶数 的div元素。
            $("#btn4").click(function () {
                $("div:even").css("background-color", "red");
            });
            //选择 索引值为奇数 的div元素。
            $("#btn5").click(function () {
                $("div:odd").css("background-color", "red");
            });
            //选择 索引等于 3 的元素
            $("#btn6").click(function () {
                $("div:eq(2)").css("background-color", "red");
            });
            //选择 索引大于 3 的元素
            $("#btn7").click(function () {
                $("div:gt(2)").css("background-color", "red");
            });
            //选择 索引小于 3 的元素
            $("#btn8").click(function () {
                $("div:lt(2)").css("background-color", "red");
            });
            //选择 所有的标题元素.比如h1, h2, h3等等...
            $("#btn9").click(function () {
                $("*:header").css("background-color", "red");
            });
            //选择 当前正在执行动画的所有元素.
            $("#btn10").click(function () {
                $("*:animated").css("background-color", "red");
            });
        });

04内容过滤选择器

$(document).ready(function () {
            //选取含有文本"di"的div元素.
            $("#btn1").click(function () {
                $("div:contains('di')").css("background-color", "red");
            });
            //选取不包含子元素(或者文本元素)的div空元素.
            $("#btn2").click(function () {
                $("div:empty").css("background-color", "red");
            });
            //选取含有class为mini元素 的div元素.
            $("#btn3").click(function () {
                $("div[class='mini']").css("background-color", "red");
            });
            //选取含有子元素(或者文本元素)的div元素.
            $("#btn4").click(function () {
                $("div:parent").css("background-color", "red");
            });
        });

05属性选择器

 $(document).ready(function () {
            //选取含有 属性title 的div元素.
            $("#btn1").click(function () {
                $("div[title]").css("background-color", "red");
            });
            //选取 属性title值等于 test 的div元素.
            $("#btn2").click(function () {
                $("div[title=test]").css("background-color", "red");
            });
            //选取 属性title值不等于 test 的div元素.
            $("#btn3").click(function () {
                $("div[title!=test]").css("background-color", "red");
            });
            //选取 属性title值 以 te 开始 的div元素.
            $("#btn4").click(function () {
                $("div[title^=te]").css("background-color", "red");
            });
            //选取 属性title值 以 est 结束 的div元素.
            $("#btn5").click(function () {
                $("div[title$=est]").css("background-color", "red");
            });
            //选取 属性title值 含有 es  的div元素.
            $("#btn6").click(function () {
                $("div[title*=es]").css("background-color", "red");
            });
            //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
            $("#btn7").click(function () {
                $("div[id][title*=te]").css("background-color", "red");
            });
        });

06子元素过滤选择器

 $(document).ready(function () {
            //选取每个class为one的div父元素下的第2个子元素
            $("#btn1").click(function () {
                $("div.one :nth-child(2)").css("background-color", "red");
            });
            //选取每个class为one的div父元素下的第一个子元素
            $("#btn2").click(function () {
                $("div.one :first-child").css("background-color", "red");
            });
            //选取每个class为one的div父元素下的最后一个子元素
            $("#btn3").click(function () {
                $("div.one :last-child").css("background-color", "red");
            });
            //如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
            $("#btn4").click(function () {
                $("div.one :only-child").css("background-color", "red");
            });
        });