JQuery选择器

• 基本选择器

    //改变id为one的背景色
    $("#one").css('background', '#bbffaa');
    //改变class为mini的背景色
        $(".mini").css('background', '#bbffaa');
        //改变所有元素的背景色
        $("*").css('background', '#bbffaa');

• 层次选择器

    //改变后代所有div的背景色
        //$("body  div").css('background', '#fff');
        //改变子div的背景色
        //$("body > div").css('background', '#fff');

        //获取下一个同辈的div元素并设置背景色
        //$("#one").next('div').css('background', '#fff');
        //获取后面所有的同辈div元素并设置背景色
        //$("#one").nextAll('div').css('background','#fff');

• 过滤选择器
  
  • 基本过滤选择器

//---------------基本过滤选择器
        $("div:even").css('background','#fff')
        //改变第一个div元素的背景色
        $("div:first").css('background', '#fff');
        //改变最后一个div元素的背景色
        $("div:last").css('background', '#fff');
        //改变索引为奇数的div背景色
        $("div:odd").css('background', '#fff');
        //改变索引为偶数的class为mini的背景色
        $(".mini:even").css('background', '#fff');
        //改变索引小于3的class为mini的背景色，索引从0开始
        $(".mini:lt(3)").css('background', '#fff');
        //改变class不为one的div的背景色
        $("div:not(.one)").css('background', '#fff');

 - 内容过滤选择器

//--------------内容过滤选择器
        //更改包含type文本的背景色
        $("div:contains(type)").css('background', '#fff');
        //更改不包含子元素的div的背景色
        $("div:empty").css('background', '#fff');
        //选取含有选择器匹配元素的元素
        $("div:has(.mini)").css('background', '#fff');
        //选取含有子元素或文本的元素
        $("div:parent").css('background', '#fff');

 - 属性过滤选择器

 //-----属性过滤选择器
        //更改含有title的div的背景色
        $("div[title]").css('background', '#fff');
        //更改title为test的div的背景色
        $("div[title=test]").css('background', '#fff');
        //更改title不等于test的div的背景色
        $("div[title!=test]").css('background', '#fff');
        //更改title以an结束的div的背景色
        $("div[title$=an]").css('background', '#fff');
        //更改title以zh开始的div的背景色
        $("div[title^=zh]").css('background', '#fff');
        //更改title中含有a 的div的背景色
        $("div[title*=a]").css('background', '#fff');

 - 可见性过滤选择器

//-------可见性过滤选择器
        //更改所有可以div的背景色
        $("div:visible").css('background', '#fff');
        //显示隐藏的div
        $("div:hidden").show(2000);