【JQ】Jquery_过滤器（基础-子元素-可见性-内容）

刺骨的言语ヽ痛彻心扉 2024-04-03 09:09 85阅读 0赞

[CSDN话题挑战赛第2期][CSDN_2]  
参赛话题：[前端技术分享][Link 1]

*分享的本意就是总结并传播知识。这里，大家可以将自己掌握的前端知识总结，分享给大家。内容不限于分享技术干货、实用方案、框架解读、工具资源、前沿资讯等等，只要和前端技术有关即可，期待大家的大作~~~：*

> 目录  
> **过滤器**

### JQ过滤器 ###

> 过滤器就是**过滤条件**，对已经定位到数组中的DOM对象进行过滤筛选，过滤条件不能独立出现在jQuery函数，如果使用只能出现在选择器后方。

#### 基本过滤器 ####

> `$("选择器:过滤器")`  
> 过滤器有：  
> :first - 保留数组中**第一个**DOM对象  
> :last - 保留数组中**最后一个**DOM对象  
> :even - 偶数  
> :odd - 奇数  
> :eq() - 等于 - 指定DOM对象  
> :gt() - 大于  
> :lt() - 小 于  
> :not() - 不符合的  
> :header - 标题

#### 子元素过滤器 ####

> 可筛选指定的元素的子元素

**「`:first-child`」**

> 当前选中元素的第一个子元素

**「`:last-child`」**

> 当前选中元素的最后一个子元素

**「`:nth-child`」**

> 指定当前选中元素的第n个子元素

**「`:nth-last-child`」**

> 指定当前选中元素的倒数第n个子元素

**「`:onlyt-child`」**

> 指定当前选中元素的唯一子元素

#### 内容过滤器 ####

**「`:contains`」**

> 选择所有处于隐藏状态的元素

### 案例 ###

#### 基础选择器 ####

##### `:first` #####

![:firsrt][firsrt]

##### `:last` #####

> ![:last][last]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JQ Filtre（过滤器）</title>
        <script src="js/jQuery.min.js">
            
        </script>
        <style>
            body{
         
          
                background-color:cadetblue;
            }
        </style>
    </head>
    <body>
        <h1>JQ Base Filter</h1>
    
        <div>
            <p>00-01</p>
            <p>01-02</p>
            <p>02-03</p>
        </div>
    
    
        <script>
            
            $(document).ready(
                function() {
         
          
    
                
    
                    // 2.:last
                    $("p:last").css("color","yellow");
    
                   
    
                }
            );
        </script>
    </body>
    </html>

##### **`:even`:选择偶数的元素** #####

**偶数指的是—索引的数值**  
![:even][even]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JQ Filtre（过滤器）</title>
        <script src="js/jQuery.min.js">
            
        </script>
        <style>
            body{
         
          
                background-color:cadetblue;
            }
        </style>
    </head>
    <body>
        <h1>JQ Base Filter</h1>
    
        <div>
            <p>00-01</p>
            <p>01-02</p>
            <p>02-03</p>
            <p>03-04</p>
            <p>04-05</p>
            <p>05-06</p>
        </div>
    
    
        <script>
            
            $(document).ready(
                function() {
         
          
    
                    // 1.base filter---:first
                    // $("p:first").css("color","red");
    
                    // 2.:last
                    // $("p:last").css("color","yellow");
    
                    // 3.:even
                    $("p:even").css("color","blue");
    
                }
            );
        </script>
    </body>
    </html>

##### `:odd` —**选择索引为奇数数值的元素** #####

> **even、odd、first、last 以上都是将符合`冒号:`前条件的元素，收集起来放入集合中，从0开始编号为索引~ 对应的选择符合`冒号：`后条件的元素~~~**

![:odd][odd]

[CSDN_2]: https://marketing.csdn.net/p/7b6697fd9dd3795a268d1a6f2fe75012
[Link 1]: https://activity.csdn.net/creatActivity?id=10228
[firsrt]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/b468ee3781324c6c93d6199673b35138.png
[last]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f9630880efb9440cb26a6fa3c2228add.png
[even]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/35e4d82ca9934ddfb189e8c90b21619b.png
[odd]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/86a36d58a5494204a4c8356774dc73bb.png