JQuery选择器

最新推荐文章于 2024-11-12 06:39:32 发布

转身未来

最新推荐文章于 2024-11-12 06:39:32 发布

阅读量345

点赞数

分类专栏： jquery 文章标签： jquery 选择器

本文链接：https://blog.youkuaiyun.com/qasrc6/article/details/78022344

版权

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了jQuery中的各类选择器，包括基本选择器、层次选择器、过滤选择器等，并通过实例展示了如何使用这些选择器来操作DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本选择器

    //改变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);