jQuery-过滤选择器一-优快云博客

本文详细介绍了jQuery中的基本过滤选择器、内容过滤选择器和可见性过滤选择器的应用方法，包括:first、:last、:not、:even等选择器的具体用法。

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

1、基本过滤选择器

<script type="text/javascript">
    $(function(){
        $('div:first').css('background','red');  //所有div元素中的第一个div元素
        $('div:last').css('background','blue');     //所有div元素中的最后一个div元素
        $('div:not(.one)').css('background','green');  //所有class不为one的div元素
        $('div:even').css('background','yellow');  //所有索引为偶数的div元素
        $('div:odd').css('background','pink');  //所有索引为奇数的div元素
        $('div:eq(3)').css('background','black');  //索引值为3的div元素
        $('div:gt(3)').css('background','grey');  //索引值大于3的所有div元素（不等于3）
        $('div:lt(3)').css('background','red');  //索引值小于3的所有div元素（不等于3）
        $(':header').css('background','pink');  //所有标题元素h1、h2、h3......
        $(':animated').css('background','yellow');  //当前正在执行动画的元素
    });
</script>

2、内容过滤选择器

<script type="text/javascript">
    $(function(){
        $('div:contains(di)').css('background','red');  //含有文本di的所有div元素
        $('div:empty').css('background','blue');  //不包含子元素（包括文本元素）的div空元素
        $('div:has(.mini)').css('background','pink');  //所有包含class为mini的子元素的div
        $('div:parent').css('background','yellow');  //所有包含有子元素（包括文本素）的div
    });
</script>

3、可见性过滤选择器

$(function(){
        $('div:visible').css('background','red');  //所有可见的div元素
        $('div:hidden').show(3000);  //所有不可见的div元素
});

：hidden选择器，包括display：none、<input type='hidden' />、visibility：hidden三种

转载于:https://www.cnblogs.com/halai/p/6861012.html