jQuery 入门教程(5): 显示/隐藏内容

最新推荐文章于 2021-09-12 22:16:14 发布

引路蜂

最新推荐文章于 2021-09-12 22:16:14 发布

阅读量4k

点赞数 6

分类专栏： jQuery JavaScript 教程 jQuery教程文章标签： jQuery JavaScript

教程同时被 3 个专栏收录

666 篇文章 1 订阅

订阅专栏

JavaScript

49 篇文章 0 订阅

订阅专栏

jQuery

48 篇文章 0 订阅

订阅专栏

jQuery的hide()和show()可以用来显示和隐藏内容。比如下面的例子：jQuery的hide()和show() 可以用来显示和隐藏内容。比如下面的例子：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery Demo</title>
    <script src="scripts/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#hide").click(function () {
                $("p").hide();
            });
            $("#show").click(function () {
                $("p").show();
            });
        });
    </script>
</head>
<body>
    <p>If you click on the "Hide" button, I will disappear.</p>
    <button id="hide">Hide</button>
    <button id="show">Show</button>
</body>
</html>

基本语法
$(selector).hide(speed,callback);

$(selector).show(speed,callback);
可选的参数speed 给出显示或隐藏内容的速度，可以使用“slow”,”fast”或者数字代表微秒。
第二个可选参数为回调函数，在显示或隐藏结束时调用。下面代码在1秒钟内隐藏内容：

$("button").click(function(){
  $("p").hide(1000);
});

jQuery toggle()方法

使用toggle()方法，可以实现交替显示和隐藏内容，如：

$("button").click(function(){
  $("p").toggle();
});

其基本语法如下：

$(selector).toggle(speed,callback);

可选的参数speed 给出显示或隐藏内容的速度，可以使用“slow”,”fast”或者数字代表微秒。
第二个可选参数为回调函数，在显示或隐藏结束时调用

引路蜂

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录