【jQuery】jQuery 选择器 ④ ( jQuery 筛选方法 | 方法分类场景 - 向下找后代、向上找祖先、同级找兄弟、范围限定查找 )

文章目录

[一、jQuery 筛选方法](#一、jQuery 筛选方法)
- 1、核心概念
- 2、核心特点
- [3、分类场景 - 向下找后代、向上找祖先、同级找兄弟、范围限定查找](#3、分类场景 - 向下找后代、向上找祖先、同级找兄弟、范围限定查找)
- [4、jQuery 筛选方法列举](#4、jQuery 筛选方法列举)
二、代码示例
- [1、代码示例 - 向下找后代](#1、代码示例 - 向下找后代)
- [2、代码示例 - 向上找祖先](#2、代码示例 - 向上找祖先)
- [3、代码示例 - 同级找兄弟](#3、代码示例 - 同级找兄弟)

一、jQuery 筛选方法

1、核心概念

jQuery 筛选方法 是是对基础 " 父 / 子 / 兄 " 节点查找的功能的增强和场景拓展 , 核心围绕 " 精准定位 DOM 节点 " 展开 , 从已知节点精准找关联节点 , 比基础选择器更灵活、场景覆盖更广 ;

jQuery 筛选方法相比基础选择器 , 筛选方法具备动态筛选、范围可控、查找方向灵活三大核心优势 , 全部基于已选取的 jQuery 对象进行链式调用 , 无需重新编写复杂选择器语法 , 能高效解决 " 从已知节点找关联节点 " 的复杂场景 , 如 : 找指定范围的兄弟、逐级向上找最近祖先、限定层级的后代等 ;

2、核心特点

jQuery 筛选方法核心特点 :

动态筛选 : 所有方法均可传入 selector 作为筛选条件 , 只返回符合条件的节点 , 而非全部关联节点 ;
范围可控 : 提供 until 系列方法 , 可精准限定查找的 " 终止边界 " , 避免获取无关节点 ;
方向灵活 : 覆盖 " 向下找后代 ( find / children ) " 、 " 向上找祖先 ( closest / parents ) " 、 " 同级找兄弟 ( siblings / nextAll / prevAll ) " 全方向查找 ;
链式调用 : 方法返回 jQuery 对象 , 可直接继续链式调用其他 jQuery 方法 , 如 : $(".item").closest("ul").find("li") ;

3、分类场景 - 向下找后代、向上找祖先、同级找兄弟、范围限定查找

jQuery 筛选方法分类使用场景 :

查找方向	代表方法	核心适用场景
向下找后代	find() / children()	从当前节点找所有后代 ( find ) 或仅直接子元素 ( children )
向上找祖先	closest() / parents()	找最近的祖先 ( closest , 含自身 ) 或所有祖先 ( parents )
同级找兄弟	siblings() / nextAll() / prevAll()	找所有兄弟 ( siblings ) 、后续所有兄弟 ( nextAll ) 、前面所有兄弟 ( prevAll )
范围限定查找	nextUntil() / prevUntil() / parentsUntil()	查找直到指定节点为止的关联节点 ( 不含终止节点 )

4、jQuery 筛选方法列举

方法名	功能说明	示例代码	示例说明
`find(selector)`	在当前元素的所有后代元素中查找匹配 selector 的元素 ( 比后代选择器更灵活 , 支持动态筛选 )	`$(".box").find("p.active")`	在类为 box 的元素下 , 查找所有包含 active 类的 p 后代元素
`closest(selector)`	从当前元素向上逐级查找最近的匹配 selector 的祖先元素 ( 包括自身 )	`$("li").closest("ul")`	从 li 元素向上找最近的 ul 祖先元素 ( 若 li 本身是 ul 则返回自身 )
`siblings(selector)`	查找当前元素所有同级兄弟元素 ( 可传 selector 过滤 ) , 替代基础的兄弟选择器	`$(".active").siblings("li")`	找到类为 active 的元素的所有 li 同级兄弟元素
`nextAll(selector)`	查找当前元素之后所有的同级兄弟元素 ( 可传 selector 过滤 )	`$("h2").nextAll("p")`	找到 h2 元素之后所有的 p 同级兄弟元素
`prevAll(selector)`	查找当前元素之前所有的同级兄弟元素 ( 可传 selector 过滤 )	`$("li:eq(3)").prevAll("li")`	找到索引为 3 的 li 之前所有的 li 元素
`nextUntil(selector)`	查找当前元素之后、直到匹配 selector 元素为止的所有同级兄弟元素 ( 不包含终点 )	`$("h3").nextUntil("h4")`	找到 h3 之后到 h4 之前的所有同级元素
`prevUntil(selector)`	查找当前元素之前、直到匹配 selector 元素为止的所有同级兄弟元素 ( 不包含终点 )	`$("li:last").prevUntil("li:eq(1)")`	找到最后一个 li 之前到索引为 1 的 li 之前的所有 li 元素
`parents(selector)`	查找当前元素所有祖先元素 ( 可传 selector 过滤 , 不包含根元素 )	`$(".item").parents(".container")`	找到类为 item 的元素所有类为 container 的祖先元素
`parentsUntil(selector)`	查找当前元素到匹配 selector 祖先元素为止的所有祖先元素 ( 不包含终点 )	`$("span").parentsUntil("div")`	找到 span 元素到 div 祖先元素为止的所有中间祖先元素
`children(selector)`	查找当前元素所有直接子元素 ( 可传 selector 过滤 , 比子选择器更灵活 )	`$("ul").children("li.active")`	找到 ul 下所有类为 active 的直接子级 li 元素

二、代码示例

1、代码示例 - 向下找后代

代码示例 :

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery 筛选方法</title>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div id="box">div 标签 #box</div>
    <div class="nav">div 标签 .nav</div>
    <ol>
        <li class="ol_one">ol 下的 li 标签 1 .ol_one</li>
        <li class="ol_two">ol 下的 li 标签 2 .ol_two</li>
        <li class="ol_thr">ol 下的 li 标签 3 .ol_thr
            <p>ol li 下的 p 标签</p>
        </li>
    </ol>
    <ul>
        <li class="ul_one">ul 下的 li 标签 1 .ul_one</li>
        <li class="ul_two">ul 下的 li 标签 2 .ul_two</li>
        <li class="ul_thr">ul 下的 li 标签 3 .ul_thr
            <p>ul li 下的 p 标签</p>
        </li>
    </ul>

    <script>
        // 向下找后代 (find / children)
        console.log("===== 只找 直接子元素 =====");

        // 1. children() : 只找 直接子元素  ( 一级子元素 ) 
        var ol_children = $("ol").children();
        ol_children.css("color", "blue");
        console.log('$("ol").children() :');
        console.log(ol_children);

        console.log("===== 找 所有后代元素 =====");

        // 2. find() : 找 所有后代元素  ( 任意层级 ) 
        // 如果 li 下还有子元素，find能找到，children找不到
        var ul_find_p = $("ul").find("p");
        ul_find_p.css("color", "red");
        console.log('$("ul").find("p") :');
        console.log(ul_find_p);
    </script>
</body>

</html>

执行结果 :

var ol_children = $("ol").children() 代码查找出了 ol 标签下的直接子元素 , 3 个 li 元素 , 在控制台中打印出了这三个元素 ;

为其设置蓝色字体 , 调用 .css("color", "blue") 代码 , 会将子元素也设置为蓝色字体 ;

var ul_find_p = $("ul").find("p") 代码查找 ul 标签下的 p 标签 , find 方法可以查找多层的所有后代 ;

ul_find_p.css("color", "red") 将其设置成了红色字体 ;

2、代码示例 - 向上找祖先

代码示例 :

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery 筛选方法</title>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div id="box">div 标签 #box</div>
    <div class="nav">div 标签 .nav</div>
    <ol>
        <li class="ol_one">ol 下的 li 标签 1 .ol_one</li>
        <li class="ol_two">ol 下的 li 标签 2 .ol_two</li>
        <li class="ol_thr">ol 下的 li 标签 3 .ol_thr
            <p class="ol_thr_p">ol li 下的 p 标签</p>
        </li>
    </ol>
    <ul>
        <li class="ul_one">ul 下的 li 标签 1 .ul_one</li>
        <li class="ul_two">ul 下的 li 标签 2 .ul_two</li>
        <li class="ul_thr">ul 下的 li 标签 3 .ul_thr
            <p class="ul_thr_p">ul li 下的 p 标签</p>
        </li>
    </ul>

    <script>
        // 向上找祖先 (closest / parents)
        console.log("===== 向上找祖先 =====");

        // 1. parents() : 找 所有祖先元素  ( 直到 html 根元素 ) 
        const olOneParents = $(".ol_one").parents();
        console.log(".ol_one 的所有祖先 ( parents )  : ", olOneParents); // 输出ol、body、html

        // 2. closest() : 找 最近的匹配祖先元素  ( 只找第一个符合条件的 ) 
        const olOneClosestOl = $(".ol_one").closest("ol");
        console.log(".ol_one 最近的 ol 祖先 ( closest )  : ", olOneClosestOl); // 只输出ol元素

        const olOneClosestBody = $(".ol_one").closest("body");
        console.log(".ol_one 最近的body祖先 ( closest )  : ", olOneClosestBody); // 只输出body元素
    </script>
</body>

</html>

执行结果 :

$(".ol_one").parents() 查找 ol_one 类元素的所有祖先 , 其上面有 3 层 , ol_one 上层父元素是 ol 元素 , ol 的父元素是 body 元素 , body 的父元素是 html 元素 ;

$(".ol_one").closest("ol") 是查找 ol_one 类元素的第一个 ol 元素 ;

$(".ol_one").closest("body") 是查找 ol_one 类元素的第一个 body 元素 ;

3、代码示例 - 同级找兄弟

代码示例 :

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery 筛选方法</title>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div id="box">div 标签 #box</div>
    <div class="nav">div 标签 .nav</div>
    <ol>
        <li class="ol_one">ol 下的 li 标签 1 .ol_one</li>
        <li class="ol_two">ol 下的 li 标签 2 .ol_two</li>
        <li class="ol_thr">ol 下的 li 标签 3 .ol_thr
            <p class="ol_thr_p">ol li 下的 p 标签</p>
        </li>
    </ol>
    <ul>
        <li class="ul_one">ul 下的 li 标签 1 .ul_one</li>
        <li class="ul_two">ul 下的 li 标签 2 .ul_two</li>
        <li class="ul_thr">ul 下的 li 标签 3 .ul_thr
            <p class="ul_thr_p">ul li 下的 p 标签</p>
        </li>
    </ul>

    <script>
        // 同级找兄弟 (siblings / nextAll / prevAll)
        console.log("===== 同级找兄弟 =====");

        // 1. siblings() : 找 所有同级兄弟元素  ( 前后都包含 ) 
        const olTwoSiblings = $(".ol_two").siblings();
        console.log(".ol_two 的所有兄弟 ( siblings ) : ", olTwoSiblings); // 输出.ol_one和.ol_thr

        // 2. nextAll() : 找 当前元素之后的所有同级兄弟 
        const olOneNextAll = $(".ol_one").nextAll();
        console.log(".ol_one 之后的所有兄弟 ( nextAll ) : ", olOneNextAll); // 输出.ol_two和.ol_thr

        // 3. prevAll() : 找 当前元素之前的所有同级兄弟 
        const ol_thrPrevAll = $(".ol_thr").prevAll();
        console.log(".ol_thr 之前的所有兄弟 ( prevAll ) : ", ol_thrPrevAll); // 输出.ol_one和.ol_two

        // 扩展 : 单独找下一个/上一个兄弟 ( next() / prev() ) 
        const olOneNext = $(".ol_one").next();
        console.log(".ol_one 下一个兄弟 ( next ) : ", olOneNext); // 只输出.ol_two
        const olTwoPrev = $(".ol_two").prev();
        console.log(".ol_two 上一个兄弟 ( prev ) : ", olTwoPrev); // 只输出.ol_one
    </script>
</body>

</html>

执行结果 :

$(".ol_two").siblings() 查找同级兄弟节点 , 前后的兄弟节点元素都包括 ;

$(".ol_one").nextAll() 是查找当前节点的后面的所有同级元素 ;

$(".ol_thr").prevAll() 是查找当前节点的前面的所有同级元素 ;

$(".ol_one").next() 是查找当前节点元素的下一个兄弟元素 ;

$(".ol_two").prev() 是查找当前节点元素的上一个兄弟元素 ;