[JQuery 学习笔记] 隐藏和显示 hide() 和 show()

尉迟海棠

于 2020-09-20 17:42:08 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.csdn.net/GYK0812/article/details/108695966

jQuery 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了JQuery中的hide()和show()两个方法，用于元素的隐藏和显示操作，是JQuery基本操作中重要的部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

hide() 和 show() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6-1 显示与隐藏 </title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        #img{float:left;}  /* 图片左浮动*/
        #content{display: none;} /*初始为不显示*/
    </style>
    <script>
        $(function(){
            $('button').click(function(event){
                if($(this).text() == '显示简介'){
                    // $('#content').show(1000);  // 显示速度，1000为一秒，可以用slow和fast
                    // $(this).text('隐藏简介');  //修改按钮上的文本内容
                    
                    // 上述两行代码也可以写成
                    $('#content').show(1000, function(){
                        $('#btn').text('隐藏简介');
                    })
                }
                else{
                    $('#content').hide();  // 隐藏简介内容
                    $(this).text('显示简介');  //修改按钮上的文本内容
                }
            })
        });

    </script>
</head>
<body>
    <!-- <img src="image/1.jpg" alt="小狗" width="100">
    <button type="button" name='button' id='btn'>显示简介</button> -->
    <div id="wrap">
        <img src="image/1.jpg" alt="小狗" width="200" id="img">
        <div id="content">
            <h3>小狗</h3>
            <p>金毛巡回猎犬（Golden Retriever），原产于苏格兰，祖先有雪达犬血统，因有较强的游泳能力，\
                并能把猎物从水中叼回给主人，故最初用作狩猎及巡回被枪猎射落的水鸟，AKC分类属于运动犬组。</p>
        </div>
    </div>

    <div style="clear:both">
        <button type="button" name="button" id="btn">显示简介</button>
    </div>
</body>
</html>