【jQuery】jQuery 选择器 ⑤ ( jQuery 排他思想 | 核心概念

文章目录

[一、jQuery 排他思想](#一、jQuery 排他思想)
- 1、核心概念
- 2、核心逻辑拆解
二、代码示例
- [1、代码示例 - 排他思想案例](#1、代码示例 - 排他思想案例)
- - [① 代码示例](#① 代码示例)
  - [② 执行结果](#② 执行结果)
- [2、代码示例 - 排他思想综合案例](#2、代码示例 - 排他思想综合案例)
- - [① 代码示例](#① 代码示例)
  - [② 运行结果](#② 运行结果)
- [3、代码示例 - 下拉菜单 ( 筛选方法案例 )](#3、代码示例 - 下拉菜单 ( 筛选方法案例 ))
- - [① 代码示例](#① 代码示例)
  - [② 执行结果](#② 执行结果)

一、jQuery 排他思想

1、核心概念

jQuery 的 " 排他思想 " 是在对 " 目标元素 " 设置特殊状态 ( 样式 / 行为 ) 前 , 先将 " 同类别的所有其他元素 " 恢复为默认状态 , 最终确保同一时刻只有 " 目标元素 " 处于特殊状态 ;

可以通俗理解为 " 先干掉所有人 , 再突出我自己 " ;

排他思想是前端交互开发中最基础、最常用的逻辑思路之一 , 并非 jQuery 提供的某个具体方法 , 而是一种基于 jQuery 选择器和 DOM 操作实现 " 唯一激活 " 效果的编程思维 ;

通过 jQuery 排他思想 , 可以解决 " 多个同类元素同时处于激活状态 " 的问题 , 确保交互的唯一性和清晰性 , 是实现选项卡、导航高亮、按钮组选中、答题选项等交互的基础逻辑 ;

jQuery 排他思想适用场景 : 排他思想不只局限于样式设置 , 也可用于行为控制 , 如 : 显示 / 隐藏、添加 / 移除类名等 ;

2、核心逻辑拆解

jQuery 排他思想核心逻辑拆解 :

第一步排他 : 重置兄弟元素 , 找到当前元素的所有 " 同类兄弟元素 " , 将它们的样式 / 状态恢复为默认 ( 比如取消高亮、还原颜色、隐藏内容等 ) ;
第二步突出 : 设置本元素 , 单独给 " 当前操作的元素 " 设置特殊样式 / 状态 , 如 : 高亮、改颜色、显示内容等 ;

基于 jQuery 的 $(this) 定位当前操作元素 , 基于 .siblings() 获取兄弟元素 ;

执行顺序是固定的 , 先重置所有 -> 再设置当前 , 顺序不可颠倒 , 否则当前元素会被一起重置 ;

核心目的是确保同一类别元素中只有一个处于特殊状态 , 实现交互的唯一性 , 通过 $(this) 定位当前元素 + .siblings() 选中同类其他元素 , 是实现该思路的关键组合 ;

二、代码示例

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>排他思想案例</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button>前端</button>
    <button>Java</button>
    <button>LLM</button>
    <script>
        $(function() {
            // 1. 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function() {
                // 2. 被点击的 当前元素 设置粉色背景颜色
                $(this).css("background", "pink");
                // 3. 除当前选中的 当前元素 之外的 其余兄弟元素 去掉背景颜色 隐式迭代
                $(this).siblings("button").css("background", "");
            });
        })
    </script>
</body>

</html>

② 执行结果

2、代码示例 - 排他思想综合案例

① 代码示例

html 复制代码

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>排他思想-综合案例</title>
    <style type="text/css">
        * {
            /* 全局选择器：匹配页面所有元素 */
            /* 清除所有元素默认的外边距，消除浏览器默认样式差异 */
            margin: 0;
            /* 清除所有元素默认的内边距，统一布局基准 */
            padding: 0;
            /* 统一设置页面所有元素的默认字体大小为12像素 */
            font-size: 12px;
        }
        
        ul {
            /* 匹配所有ul标签 */
            /* 去除ul列表默认的项目符号（如圆点、数字） */
            list-style: none;
        }
        
        a {
            /* 匹配所有a标签 */
            /* 去除a标签默认的下划线，优化链接视觉效果 */
            text-decoration: none;
        }
        
        .wrapper {
            /* 匹配类名为wrapper的容器（整体外层盒子） */
            /* 设置外层容器宽度为250像素 */
            width: 250px;
            /* 设置外层容器高度为248像素 */
            height: 248px;
            /* 外层容器外边距：上下100像素，左右自动（水平居中），top为100px，bottom为0 */
            margin: 100px auto 0;
            /* 给容器添加1像素的粉色边框（左侧、顶部、底部） */
            border: 1px solid pink;
            /* 取消容器右侧的边框，避免与内部元素边框重叠 */
            border-right: 0;
            /* 隐藏容器内超出的内容，防止内容溢出破坏布局 */
            overflow: hidden;
        }
        
        #left,
        #content {
            /* 同时匹配id为left和content的元素 */
            /* 设置左浮动，让两个元素在同一行横向排列 */
            float: left;
        }
        
        #left li a {
            /* 匹配id为left的元素下li标签内的所有a标签（左侧导航链接） */
            /* 将a标签转为块级元素，使其可设置宽高并铺满父容器 */
            display: block;
            /* 设置导航链接宽度为48像素 */
            width: 48px;
            /* 设置导航链接高度为27像素 */
            height: 27px;
            /* 给链接添加1像素的粉色下边框，分隔导航项 */
            border-bottom: 1px solid pink;
            /* 设置行高与高度一致，让文字垂直居中 */
            line-height: 27px;
            /* 设置文字水平居中对齐 */
            text-align: center;
            /* 设置链接默认文字颜色为黑色 */
            color: black;
        }
        
        #left li a:hover {
            /* 鼠标经过时的样式 */
            /* 匹配id为left的元素下li标签内的所有a标签（左侧导航链接） */
            background-color: chartreuse;
        }
        
        #content {
            /* 匹配id为content的元素（右侧内容区域） */
            /* 给内容区域添加左侧1像素粉色边框，分隔导航与内容 */
            border-left: 1px solid pink;
            /* 给内容区域添加右侧1像素粉色边框，补全整体边框 */
            border-right: 1px solid pink;
        }
        
        #content div a {
            /* 匹配id为content的元素下所有div标签内的a标签（右侧内容链接） */
            /* 将a标签转为块级元素，使其可设置宽高并铺满父容器 */
            display: block;
            /* 设置内容链接宽度为200像素 */
            width: 200px;
            /* 设置内容链接高度为250像素 */
            height: 250px;
            /* 设置内容链接文字水平居中对齐 */
            text-align: center;
            /* 设置内容链接文字垂直居中对齐 */
            line-height: 250px;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            // 1. 鼠标经过 左侧 left 布局下 ul 下的 li 元素 
            $("#left li").mouseover(function() {
                // 2. 获取鼠标经过的当前 li 元素 在 ul 中的索引号
                var index = $(this).index();

                // 3. 使用 链式调用 : 右侧 div 布局下，索引号与左侧相同的 div 显示出来，其余的隐藏
                $("#content div").eq(index).show().siblings().hide();

            })
        })
    </script>
</head>

<body>
    <div class="wrapper">
        <ul id="left">
            <li><a href="#">Java</a></li>
            <li><a href="#">Android</a></li>
            <li><a href="#">LLM</a></li>
        </ul>
        <div id="content">
            <div>
                <a href="#" style="background-color: pink;">Java</a>
            </div>
            <div>
                <a href="#" style="background-color: orange;">Android</a>
            </div>
            <div>
                <a href="#" style="background-color: yellow;">LLM</a>
            </div>
        </div>
    </div>
</body>

</html>

② 运行结果

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>筛选方法-下拉菜单</title>
    <style>
        * {
            /* 全局选择器 : 匹配页面所有元素 */
            /* 清除所有元素 默认的外边距 */
            margin: 0;
            /* 清除所有元素 默认的内边距 */
            padding: 0;
        }
        
        li {
            /* 匹配所有 li 标签 */
            /* 去除 li 标签 默认的列表标记 ( 圆点/数字等 )  */
            list-style-type: none;
        }
        
        a {
            /* 匹配所有 a 标签 */
            /* 去除 a 标签 默认的下划线样式 , 鼠标移动到链接上后的 下划线样式 */
            text-decoration: none;
            /* 设置 a 标签 默认字体大小 为 14 像素 */
            font-size: 14px;
        }
        
        .nav {
            /* 匹配类名为 nav 的容器 */
            /* 设置导航栏容器的 外边距为 100 像素 , 使其与 页面边缘 拉开距离 */
            margin: 100px;
        }
        
        .nav>li {
            /* 匹配 nav 类下的 直接子级 li 标签 ( 一级菜单项 )  */
            /* 设置定位为 相对定位 , 作为 子菜单 绝对定位 的参考容器 */
            position: relative;
            /* 设置左浮动 , 让 一级菜单项 横向排列 */
            float: left;
            /* 设置一 级菜单项 的宽度为 80 像素 */
            width: 80px;
            /* 设置 一级菜单项 的高度为 41 像素 */
            height: 41px;
            /* 设置菜单项内的文字 水平居中对齐 */
            text-align: center;
        }
        
        .nav li a {
            /* 匹配 nav 类下 所有层级 li 标签 内的 a 标签 */
            /* 将 a 标签 转为 块级元素 , 使其可以铺满父容器 */
            display: block;
            /* 链接宽度 铺满父级 li 容器 */
            width: 100%;
            /* 链接高度 铺满父级 li 容器 */
            height: 100%;
            /* 设置行高与 li 高度一致 , 让文字垂直居中 */
            line-height: 41px;
            /* 设置链接 默认文字颜色 为深灰色 ( #333 )  */
            color: #333;
        }
        
        .nav>li>a:hover {
            /* 匹配 nav 类下 直接子级 li 标签 内的 a 标签 的鼠标悬停状态 ( 一级链接 hover )  */
            /* 鼠标悬停时 , 一级链接背景色设为浅灰色 */
            background-color: #eee;
        }
        
        .nav ul {
            /* 匹配 nav 类下的所有 ul 标签 ( 二级菜单容器 )  */
            /* 默认隐藏二级菜单 */
            display: none;
            /* 设置绝对定位 , 脱离文档流 , 不影响一级菜单布局 */
            position: absolute;
            /* 二级菜单 顶部与 一级 li 底部 对齐 ( top 值等于一级 li 的高度 )  */
            top: 41px;
            /* 二级菜单 左边缘与父级 li 左边缘对齐 */
            left: 0;
            /* 二级菜单宽度与父级 li 一致 */
            width: 100%;
            /* 给二级菜单添加左侧边框 , 颜色为浅橙黄色 */
            border-left: 1px solid #FECC5B;
            /* 给二级菜单添加右侧边框 , 颜色与左侧一致 */
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            /* 匹配 nav 类下 ul 标签内的所有 li 标签 ( 二级菜单项 )  */
            /* 给每个二级菜单项添加底部边框 , 形成完整的包裹效果 */
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            /* 匹配 nav 类下 ul 标签内 li 标签的 a 标签的 鼠标悬停状态 ( 二级链接 hover )  */
            /* 鼠标悬停时 , 二级链接背景色设为浅黄白色 */
            background-color: #FFF5DA;
        }
    </style>
    <!-- 引入 jQuery 库 -->
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">前端</a>
            <ul>
                <li>
                    <a href="">HTML</a>
                </li>
                <li>
                    <a href="">CSS</a>
                </li>
                <li>
                    <a href="">JS</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Android</a>
            <ul>
                <li>
                    <a href="">Jetpack</a>
                </li>
                <li>
                    <a href="">AndroidX</a>
                </li>
                <li>
                    <a href="">Retrofit</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">LLM</a>
            <ul>
                <li>
                    <a href="">Prompt</a>
                </li>
                <li>
                    <a href="">LlamaIndex</a>
                </li>
                <li>
                    <a href="">LangChain</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        // 文档就绪函数 : 当 HTML 文档加载完成后再执行内部代码 , 避免 DOM 未加载完成时操作元素
        $(function() {
            // 为 .nav 类下的直接子级 li 元素 ( 一级菜单项 ) 绑定鼠标经过事件 ( mouseover ) 
            $(".nav>li").mouseover(function() {
                // $(this) : 指代当前触发 mouseover 事件的 li 元素 ( jQuery 对象 ) 
                // .children("ul") : 获取当前 li 元素的直接子级 ul 元素 ( 二级菜单容器 ) 
                // .show() : 将选中的 ul 元素设置为显示状态 ( 对应 CSS 中的 display: block ) 
                $(this).children("ul").show();
            });
            // 为 .nav 类下的直接子级 li 元素 ( 一级菜单项 ) 绑定鼠标离开事件 ( mouseout ) 
            $(".nav>li").mouseout(function() {
                // $(this) : 指代当前触发 mouseout 事件的 li 元素 ( jQuery对象 ) 
                // .children("ul") : 获取当前 li 元素的直接子级 ul 元素 ( 二级菜单容器 ) 
                // .hide() : 将选中的 ul 元素设置为隐藏状态 ( 对应 CSS 中的 display: none ) 
                $(this).children("ul").hide();
            })
        })
    </script>
</body>

</html>

② 执行结果

执行结果 :

【jQuery】jQuery 选择器 ⑤ ( jQuery 排他思想 | 核心概念 | 核心逻辑拆解 )

文章目录

一、jQuery 排他思想

1、核心概念

2、核心逻辑拆解

二、代码示例

1、代码示例 - 排他思想案例

① 代码示例

② 执行结果

2、代码示例 - 排他思想综合案例

① 代码示例

② 运行结果

3、代码示例 - 下拉菜单 ( 筛选方法案例 )

① 代码示例

② 执行结果