当前位置： 首页 > news >正文

JavaScript学习教程，从入门到精通， jQuery 下拉菜单、显示隐藏元素及查找元素方法详解（32）

news 来源：原创 2025/5/2 8:12:05

jQuery 下拉菜单、显示隐藏元素及查找元素方法详解

一、显示和隐藏元素的方法

1. 基本显示/隐藏方法

1.1 show() 方法
$(selector).show(speed, easing, callback);
  • 显示匹配的元素
  • 参数：
    • speed (可选): 动画持续时间(“slow”, "fast"或毫秒数)
    • easing (可选): 动画的缓动函数(“swing"或"linear”)
    • callback (可选): 动画完成后执行的函数
1.2 hide() 方法
$(selector).hide(speed, easing, callback);
  • 隐藏匹配的元素
  • 参数同show()
1.3 toggle() 方法
$(selector).toggle(speed, easing, callback);
  • 切换元素的可见状态(如果显示则隐藏，如果隐藏则显示)
  • 参数同show()

2. 淡入淡出效果

2.1 fadeIn() 方法
$(selector).fadeIn(speed, easing, callback);
  • 通过淡入效果显示元素
  • 参数同show()
2.2 fadeOut() 方法
$(selector).fadeOut(speed, easing, callback);
  • 通过淡出效果隐藏元素
  • 参数同show()
2.3 fadeToggle() 方法
$(selector).fadeToggle(speed, easing, callback);
  • 在fadeIn()和fadeOut()之间切换
  • 参数同show()
2.4 fadeTo() 方法
$(selector).fadeTo(speed, opacity, easing, callback);
  • 渐变为指定的不透明度
  • 参数：
    • speed: 必需，动画持续时间
    • opacity: 必需，不透明度(0-1)
    • easing: 可选
    • callback: 可选

3. 滑动效果

3.1 slideDown() 方法
$(selector).slideDown(speed, easing, callback);
  • 通过向下滑动显示元素
  • 参数同show()
3.2 slideUp() 方法
$(selector).slideUp(speed, easing, callback);
  • 通过向上滑动隐藏元素
  • 参数同show()
3.3 slideToggle() 方法
$(selector).slideToggle(speed, easing, callback);
  • 在slideDown()和slideUp()之间切换
  • 参数同show()

二、查找元素的方法

1. 基本选择器

$("#id")            // ID选择器
$(".class")          // 类选择器
$("element")         // 元素选择器
$("*")               // 全选选择器
$("selector1, selector2, selectorN") // 多选择器

2. 层级选择器

$("parent > child")  // 子元素选择器
$("ancestor descendant") // 后代选择器
$("prev + next")     // 相邻兄弟选择器
$("prev ~ siblings") // 一般兄弟选择器

3. 过滤选择器

3.1 基本过滤
$(":first")          // 第一个元素
$(":last")           // 最后一个元素
$(":not(selector)")  // 不匹配选择器的元素
$(":even")           // 偶数索引元素(0-based)
$(":odd")            // 奇数索引元素
$(":eq(index)")      // 指定索引元素
$(":gt(index)")      // 大于指定索引的元素
$(":lt(index)")      // 小于指定索引的元素
$(":header")         // 所有标题元素(h1-h6)
3.2 内容过滤
$(":contains(text)") // 包含指定文本的元素
$(":empty")          // 无子元素的元素
$(":has(selector)")  // 包含特定选择器匹配元素的元素
$(":parent")         // 有子元素的元素
3.3 可见性过滤
$(":visible")        // 可见元素
$(":hidden")         // 隐藏元素

4. 查找方法

4.1 祖先查找
.parent()            // 直接父元素
.parents()           // 所有祖先元素
.parentsUntil()      // 直到指定选择器的祖先元素
.closest()           // 最近的匹配选择器的祖先元素
4.2 后代查找
.children()          // 直接子元素
.find()              // 所有后代元素
4.3 兄弟查找
.siblings()          // 所有兄弟元素
.next()              // 下一个兄弟元素
.nextAll()           // 之后所有兄弟元素
.nextUntil()         // 直到指定选择器的兄弟元素
.prev()              // 上一个兄弟元素
.prevAll()           // 之前所有兄弟元素
.prevUntil()         // 直到指定选择器的兄弟元素
4.4 过滤方法
.filter()            // 过滤匹配元素集合
.not()               // 排除匹配元素
.is()                // 检查是否有匹配元素
.has()               // 包含特定选择器匹配元素的元素
.eq()                // 指定索引的元素
.first()             // 第一个元素
.last()              // 最后一个元素
.slice()             // 子集元素

三、下拉菜单实现案例

1. 基本下拉菜单实现

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>.dropdown {position: relative;display: inline-block;}.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;}.dropdown-content a:hover {background-color: #f1f1f1;}.dropdown:hover .dropdown-content {display: block;}
</style>
</head>
<body><div class="dropdown"><button>下拉菜单</button><div class="dropdown-content"><a href="#">选项1</a><a href="#">选项2</a><a href="#">选项3</a></div>
</div><script>
$(document).ready(function(){// jQuery实现下拉菜单$(".dropdown").hover(function() {// 鼠标移入时显示下拉菜单$(this).find(".dropdown-content").stop().slideDown(200);}, function() {// 鼠标移出时隐藏下拉菜单$(this).find(".dropdown-content").stop().slideUp(200);});// 点击下拉菜单项时执行操作$(".dropdown-content a").click(function(){alert("你选择了: " + $(this).text());// 可以在这里添加其他操作，如导航到其他页面等});
});
</script></body>
</html>

2. 多级下拉菜单实现

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>* {margin: 0;padding: 0;list-style: none;}.menu {width: 200px;margin: 50px auto;}.menu > li {background: #3498db;position: relative;}.menu li a {color: white;text-decoration: none;display: block;padding: 10px;border-bottom: 1px solid #2980b9;}.menu li a:hover {background: #2980b9;}.submenu {position: absolute;left: 100%;top: 0;width: 200px;background: #2c3e50;display: none;}.menu > li > .submenu {left: 0;top: 100%;}
</style>
</head>
<body><ul class="menu"><li><a href="#">菜单1</a><ul class="submenu"><li><a href="#">子菜单1-1</a></li><li><a href="#">子菜单1-2</a></li><li><a href="#">子菜单1-3</a><ul class="submenu"><li><a href="#">子菜单1-3-1</a></li><li><a href="#">子菜单1-3-2</a></li></ul></li></ul></li><li><a href="#">菜单2</a><ul class="submenu"><li><a href="#">子菜单2-1</a></li><li><a href="#">子菜单2-2</a></li></ul></li>
</ul><script>
$(document).ready(function(){// 鼠标移入菜单项时显示子菜单$(".menu li").hover(function() {// 查找当前菜单项的子菜单并显示$(this).find("> .submenu").stop().slideDown(200);},function() {// 鼠标移出时隐藏子菜单$(this).find("> .submenu").stop().slideUp(200);});// 点击菜单项时执行操作$(".menu li > a").click(function(e) {// 阻止默认行为（如链接跳转）e.preventDefault();// 获取当前点击的菜单文本var menuText = $(this).text();// 如果点击的是有子菜单的项，不执行操作if ($(this).siblings(".submenu").length > 0) {return;}alert("你选择了: " + menuText);// 这里可以添加实际的导航逻辑});
});
</script></body>
</html>

3. 显示/隐藏元素的综合案例

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>.box {width: 200px;height: 200px;background: #e74c3c;margin: 20px;display: none;}.controls {margin: 20px;}button {padding: 10px 15px;margin: 0 5px;cursor: pointer;}
</style>
</head>
<body><div class="controls"><button id="showBtn">显示</button><button id="hideBtn">隐藏</button><button id="toggleBtn">切换</button><button id="fadeInBtn">淡入</button><button id="fadeOutBtn">淡出</button><button id="fadeToggleBtn">淡入淡出切换</button><button id="slideDownBtn">滑下</button><button id="slideUpBtn">滑上</button><button id="slideToggleBtn">滑动切换</button>
</div><div class="box"></div><script>
$(document).ready(function(){// 显示按钮$("#showBtn").click(function(){$(".box").show(500);});// 隐藏按钮$("#hideBtn").click(function(){$(".box").hide(500);});// 切换按钮$("#toggleBtn").click(function(){$(".box").toggle(500);});// 淡入按钮$("#fadeInBtn").click(function(){$(".box").fadeIn(500);});// 淡出按钮$("#fadeOutBtn").click(function(){$(".box").fadeOut(500);});// 淡入淡出切换按钮$("#fadeToggleBtn").click(function(){$(".box").fadeToggle(500);});// 滑下按钮$("#slideDownBtn").click(function(){$(".box").slideDown(500);});// 滑上按钮$("#slideUpBtn").click(function(){$(".box").slideUp(500);});// 滑动切换按钮$("#slideToggleBtn").click(function(){$(".box").slideToggle(500);});// 添加动画完成后的回调函数示例$(".box").on("show hide toggle fadeIn fadeOut fadeToggle slideDown slideUp slideToggle", function(){console.log("动画完成: " + new Date().toLocaleTimeString());});
});
</script></body>
</html>

4. 查找元素的综合案例

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>body {font-family: Arial, sans-serif;line-height: 1.6;margin: 20px;}.container {border: 1px solid #ddd;padding: 20px;margin-bottom: 20px;}.highlight {background-color: yellow;}ul {margin-left: 20px;}button {margin: 5px;padding: 5px 10px;}
</style>
</head>
<body><div class="container" id="main-container"><h1>jQuery查找元素演示</h1><p class="intro">这是一个演示jQuery查找元素方法的页面。</p><div class="content"><h2>第一部分</h2><ul id="list1"><li>项目1</li><li class="special">项目2 (特殊)</li><li>项目3</li><li class="special">项目4 (特殊)</li></ul><h2>第二部分</h2><ul id="list2"><li>项目A</li><li data-type="important">项目B (重要)</li><li>项目C</li></ul><div class="nested"><p>嵌套段落1</p><div><p>更深层的嵌套段落</p></div></div></div>
</div><div class="controls"><button id="btn1">ID选择器 (#list1)</button><button id="btn2">类选择器 (.special)</button><button id="btn3">元素选择器 (li)</button><button id="btn4">属性选择器 ([data-type])</button><button id="btn5">后代选择器 (.content li)</button><button id="btn6">子元素选择器 (ul > li)</button><button id="btn7">:first选择器 (li:first)</button><button id="btn8">:last选择器 (li:last)</button><button id="btn9">:even选择器 (li:even)</button><button id="btn10">:odd选择器 (li:odd)</button><button id="btn11">.find()方法 (.content查找li)</button><button id="btn12">.children()方法 (.content的子元素)</button><button id="btn13">.parent()方法 (li的父元素)</button><button id="btn14">.siblings()方法 (.special的兄弟)</button><button id="btn15">.filter()方法 (过滤.special)</button><button id="btn16">.not()方法 (非.special)</button><button id="btn17">.has()方法 (包含span的元素)</button><button id="btn18">.eq()方法 (第2个li)</button><button id="btn19">.first()方法 (第一个li)</button><button id="btn20">.last()方法 (最后一个li)</button>
</div><script>
$(document).ready(function(){// 重置高亮function resetHighlight() {$("*").removeClass("highlight");}// 为所有按钮添加点击事件$("button").click(function(){resetHighlight();var btnId = $(this).attr("id");switch(btnId) {case "btn1":// ID选择器$("#list1").addClass("highlight");break;case "btn2":// 类选择器$(".special").addClass("highlight");break;case "btn3":// 元素选择器$("li").addClass("highlight");break;case "btn4":// 属性选择器$("[data-type]").addClass("highlight");break;case "btn5":// 后代选择器$(".content li").addClass("highlight");break;case "btn6":// 子元素选择器$("ul > li").addClass("highlight");break;case "btn7":// :first选择器$("li:first").addClass("highlight");break;case "btn8":// :last选择器$("li:last").addClass("highlight");break;case "btn9":// :even选择器$("li:even").addClass("highlight");break;case "btn10":// :odd选择器$("li:odd").addClass("highlight");break;case "btn11":// .find()方法$(".content").find("li").addClass("highlight");break;case "btn12":// .children()方法$(".content").children().addClass("highlight");break;case "btn13":// .parent()方法$("li").parent().addClass("highlight");break;case "btn14":// .siblings()方法$(".special").siblings().addClass("highlight");break;case "btn15":// .filter()方法$("li").filter(".special").addClass("highlight");break;case "btn16":// .not()方法$("li").not(".special").addClass("highlight");break;case "btn17":// .has()方法$("li").has("[data-type]").addClass("highlight");break;case "btn18":// .eq()方法$("li").eq(1).addClass("highlight"); // 索引从0开始break;case "btn19":// .first()方法$("li").first().addClass("highlight");break;case "btn20":// .last()方法$("li").last().addClass("highlight");break;}});
});
</script></body>
</html>

四、总结

1. 显示/隐藏元素方法总结

  • 基本方法：show(), hide(), toggle()
  • 淡入淡出：fadeIn(), fadeOut(), fadeToggle(), fadeTo()
  • 滑动效果：slideDown(), slideUp(), slideToggle()
  • 参数：都可以接受speed(速度), easing(缓动函数), callback(回调函数)参数

2. 查找元素方法总结

  • 选择器：基本选择器、层级选择器、过滤选择器
  • 查找方法：
    • 祖先查找：parent(), parents(), parentsUntil(), closest()
    • 后代查找：children(), find()
    • 兄弟查找：siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil()
    • 过滤方法：filter(), not(), is(), has(), eq(), first(), last(), slice()

3. 实际应用建议

  1. 对于下拉菜单，推荐使用hover事件结合slideDown/slideUp或fadeIn/fadeOut
  2. 显示/隐藏元素时，考虑使用动画效果提升用户体验
  3. 查找元素时，尽量使用最具体的选择器以提高性能
  4. 链式调用可以简化代码，如：$(“ul”).find(“li”).first().addClass(“highlight”)

通过掌握这些jQuery方法，您可以轻松实现各种交互效果和DOM操作，为网页添加丰富的动态功能。

相关文章：

  • 如何将 VS Code 与 Linux 系统高效连接：从入门到进阶
  • 归因理论——AI与思维模型【87】
  • RAG技术完全指南（一）：检索增强生成原理与LLM对比分析
  • 第 2.3 节: 基于 Python 的关节空间与任务空间控制
  • MATLAB中removedelay函数用法
  • Android短信监控技术实现：合法合规的远程采集方案
  • 【AI论文】ReasonIR：为推理任务训练检索器
  • 【Unity】一个UI框架例子
  • 【C到Java的深度跃迁：从指针到对象，从过程到生态】第五模块·生态征服篇 —— 第十九章 Spring生态：从main函数到企业级开发
  • Spring IoC容器的设计与实现
  • 数字智慧方案6158丨智慧医疗解决方案精华版（58页PPT）（文末有下载方式）
  • 【音频】Qt6实现MP3播放器
  • Seata服务端同步提交事务核心源码解析
  • 【音频】基础知识
  • AI数字人系统开发：技术架构、应用场景与未来趋势
  • 西式烹饪实训室建设路径
  • 图论---有向图的强连通分量（Tarjan求SCC）
  • 内存安全的攻防战：工具链与语言特性的协同突围
  • 【docker学习笔记】如何删除镜像启动默认命令
  • Spring AI开发跃迁指南（第二章：急速上手3——Advisor核心原理、源码讲解及使用实例）
  • 党旗下的青春｜赵天益：少年确定志向，把最好的时光奉献给戏剧事业
  • “五一”假期首日迎出游高峰：火车站人流“堪比春运”，热门景区门票预订量同比增三成
  • 中国海油总裁：低油价短期影响利润，但也催生资产并购机会
  • 中国人保聘任田耕为副总裁，此前为工行浙江省分行行长
  • 马上评丨别让“免费领养”套路坑消费者又坑宠物
  • 一季度全国城镇新增就业308万人