jQuery的隐藏和显示

最新推荐文章于 2023-09-14 18:51:30 发布

GuanJINP

最新推荐文章于 2023-09-14 18:51:30 发布

阅读量511

点赞数

分类专栏： jquery 文章标签： html jqurery jquery隐藏和显示的实例

本文链接：https://blog.csdn.net/weixin_42617075/article/details/81948412

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jquery- 隐藏式hide 显示show ，如果放在一个按钮中进行实现的话，通过 toggle() 方法来切换元素的可见状态，如果该元素可见，则隐藏这些文件，反之，则显示隐藏文件

//html
<head>
    <meta charset="UTF-8">
    <title>效果隐藏与显示</title>
    <script src="jquery.min.js"></script>
    <script src="xg.js"></script>
    <!--href 引用css 文件 ；type=text/css指定是 css文件； rel : 引用外部样式-->
    <link href="xg.css" type="text/css" rel="stylesheet">

</head>
//body
<body>

<!--隐藏 与显示-->
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<!-- 隐藏和显示并一起 -->
<button id="toggle">隐藏/显示</button>

<!--如果页面时-->
<script>
    for (var i = 0; i <= 5; i++) {
        //appendTo (xxx)  就是在 xxx 里头添加东西
        $("<div>").appendTo(document.body);
    }
    $("div").click(function () {
        // 如果想实现触发隐藏的话，
        //  指代的当前的对象时用 this
        $(this).hide(1000, function () {
            $(this).remove();
        });
    })
</script>
</body>

//js
$(document).ready(function () {
    $("#hide").click(function () {
        //对 p 标签进行隐藏
        // hide （时间限制）是以毫秒进行工作的
        $("p").hide(10);
    });
    $("#show").click(function () {
        //对 p 标签显示出来 时间按毫秒计算
        $("p").show();

    });
    // 通过 toggle() 方法来切换元素的可见状态，如果该元素可见，则隐藏这些文件，反之，则显示隐藏文件
    $("#toggle").click(function () {
        $("p").toggle(1000);
    })
})

//css ,针对div,进行操作
div{
    width: 50px;
    height: 50px;
    /*
    background  背景色
    */
    background: #ece023;
    /*
    margin  外边距
    */
    margin: 2px;
    /*
    浮动
    */
    float: left;
}

这里写图片描述

当你点击黄色方块时自动隐藏并且移除了，
隐藏，显示，隐藏/显示三种触发事件

如有雷同不剩荣幸，要是有问题还向大家多多指教。

GuanJINP

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery的隐藏和显示

jquery- 隐藏式hide 显示show ，如果放在一个按钮中进行实现的话，通过 toggle() 方法来切换元素的可见状态，如果该元素可见，则隐藏这些文件，反之，则显示隐藏文件//html&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;效果隐藏与显示&lt;/title&gt; &lt;scr...
复制链接

扫一扫