jQuery 显示与隐藏元素
程序员文章站
2022-07-13 12:58:09
...
使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
语法格式：
$(selector).hide(speed,easing,callback); //隐藏元素
$(selector).show(speed,easing,callback); //显示元素
speed 参数：规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或动画完成所需的毫秒数。
easing参数： 用来指定切换效果，默认时'swing'，可用参数'linear'。
callback 参数：隐藏或显示完成后所执行的回调函数。
此外，可以使用toggle( )方法来切换元素的显示状态
语法格式：
$(selector).toggle(speed,easing,callback);
示例：
<style>
div {
width: 100px;
height: 100px;
background-color: rgba(22, 201, 16, 0.863);
}
</style>
<script src="jQuery.js"></script>
<script>
jQuery(document).ready(function () {
$("button").eq(0).click(function () {
$("div").hide();
})
$("button").eq(1).click(function () {
$("div").show();
})
$("button").eq(2).click(function () {
$("div").toggle();
})
})
</script>
</head>
<body>
<button>隐藏</button>
<button>显示</button>
<button>切换</button>
<div></div>
</body>
分别点击三个按钮，可以实现隐藏，显示，切换功能。