jquery 改变标签可见状态的几种方式
第一种:
$(selector).show(); //立即显示指定标签
$(selector).hide();//立即隐藏指定标签
第二种:
$(selector).fadeIn(ms);//在指定毫秒内渐现
$(selector).fadeOut(ms);//在指定毫秒内渐隐
第三种:
$(selector).toggle();//改变标签的可见状态,如果隐藏则显示,反之则隐藏
另外:
$(selector).is(":hidden");//可以判断指定元素是否隐藏 返回值为布尔值
例子:
一个完整的demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>demo-show/hide</title>
</head>
<style>
#out-part{
margin: 0 auto;
width: 400px;
background-color: bisque;
overflow: hidden;
}
#in-part{
margin: 100px auto;
width:200px;
height: 200px;
background-color: purple;
}
button{
display: block;
width: 100px;
float: left;
margin-left: 10px;
}
</style>
<body>
<!-- 测试部分 -->
<div id="out-part">
<div id="in-part"></div>
</div>
<br>
<!-- 按钮部分 -->
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="fadeIn">渐现</button>
<button id="fadeOut">渐隐</button>
<button id="show-hide">显示/隐藏</button>
</body>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script>
$('#show').on('click',function () {//显示
$('#out-part').show();
})
$('#hide').on('click',function () {//隐藏
$('#out-part').hide();
})
$('#fadeIn').on('click',function () {//渐现
$('#out-part').fadeIn(1000);
})
$('#fadeOut').on('click',function () {//渐隐
$('#out-part').fadeOut(500);
})
$('#show-hide').on('click',function () {//显示/隐藏
//第一种
// $('#out-part').toggle();
//第二种
if($('#out-part').is(":hidden")){//判断是否隐藏
$('#out-part').fadeIn(1000);//渐现
}else{
$('#out-part').hide();
}
})
</script>
</html>
"你的指尖,拥有改变世界的力量! "
欢迎关注我的个人博客:https://sugarat.top
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧