03
2020
05

jQuery效果hide() 和 show() 隐藏和显示元素

1、hide() 方法隐藏被选元素。

提示:这与 CSS 属性 display:none 类似。

注释:隐藏的元素不会被完全显示(不再影响页面的布局)。

2、show() 方法显示隐藏的被选元素。

注意:show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
    <script type="text/javascript" src="../tu/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            $("#gggg").click(function(){
                $("#dddd").hide();
                //语法格式:$(selector).hide(speed,callback);
                //可选参数1:speed 参数规定隐藏/显示的速度,可以取值:"slow"、"fast" 或毫秒。
                //可选参数2:callback 参数是隐藏或显示完成后所执行的函数名称。

                // callback的使用如下,即第2个参数是一个函数,jQuery效果执行完会执行该函数。
                // $("#dddd").hide(3000,function(){
                //      alert("myDiv1隐藏了");
                // });
            });
            
            $("#kkkk").click(function(){
                $("#dddd").show();
                //语法格式:$(selector).show(speed,callback); 
                //可选参数1:speed 参数规定隐藏/显示的速度,可以取值:"slow"、"fast" 或毫秒。
                //可选参数2:callback 参数是隐藏或显示完成后所执行的函数名称。
            });
        });
    </script>
</head>
<body>
    <button type="button" id="gggg">隐藏</button>
    <button type="button" id="kkkk">显示</button>
    <div id="dddd" style="width:100px;height:50px;background-color:darkmagenta"></div>
</body>
</html>

原文链接:https://www.qiquanji.com/post/7071.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。