jQuery中显示与隐藏

news/2024/7/10 23:08:03 标签: jquery, 前端, javascript

在我们jQuery当中,有多个显示隐藏的方法,本篇介绍一下hide()、show()、toggle()
在我们JS当中,或是CSS当中,我们常用到display:none或block;
在我们jQuery当中,我们该如何实现显示隐藏
在我们jQuery当中,我们也可以跟JS一样,用操作样式的方法添加显示隐藏,不过在我们jQuery当中,为我们封装了这一类方法,让我为大家介绍一下吧!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button>点击隐藏</button>
    <button>点击显示</button></button>
    <button>点击切换显示隐藏</button>
    <div></div>
</body>
<script src="../js/jquery-1.8.3.min.js"></script>
<script>javascript">
    $(function(){
        $("button").eq(0).click(function(){
        	//点击之后元素添加上了display:none;
            $("div").hide()
        })
    })
    $(function(){
        $("button").eq(1).click(function(){
        	//点击之后元素添加上了display:none;
            $("div").show()
        })
    })
    $(function(){
        $("button").eq(2).click(function(){
        	//当我们元素的样式是display:block时
        	//点击后元素样式变成了display:none;
        	//当我们元素的样式是display:none时
        	//点击后元素样式变成了display:block;
            $("div").toggle()
        })
    })
</script>
</html>

看下面的GIF图,注意看元素的样式变化:
请添加图片描述

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!


http://www.niftyadmin.cn/n/5167519.html

相关文章

AcWing99. 激光炸弹

题目 地图上有 N N N 个目标&#xff0c;用整数 X i , Y i X_i,Y_i Xi​,Yi​ 表示目标在地图上的位置&#xff0c;每个目标都有一个价值 W i W_i Wi​。 注意&#xff1a;不同目标可能在同一位置。 现在有一种新型的激光炸弹&#xff0c;可以摧毁一个包含 R R RR RR 个…

如何用Java高效地存入一万条数据?这可能是你面试成功的关键!

大家好&#xff0c;我是你们的小米&#xff0c;一个热爱技术、喜欢分享的29岁程序猿。今天我要和大家聊一聊一个常见的面试题&#xff1a;在Java中&#xff0c;当我们需要将一万条数据存储到数据库时&#xff0c;如何能够提高存储效率呢&#xff1f; 在面试过程中&#xff0c;…

Yolov8模型训练报错:torch.cuda.OutOfMemoryError

最近在使用自己的数据训练Yolov8模型的时候遇到了很多错误&#xff0c;下面将逐一解答。 问题报错 在训练过程中红字报错&#xff1a;torch.cuda.OutOfMemoryError: CUDA out of memory. 后面还会跟着一大段报错&#xff1a; Tried to allocate XXX MiB (GPU 0; XXX GiB to…

以技术创新引领行业发展,飞凌嵌入式获双项省级荣誉

近日&#xff0c;飞凌嵌入式荣获「2023年河北省专精特新示范企业」以及「第五批省级制造业单项冠军企业」两项殊荣。这两项荣誉的获得&#xff0c;是对飞凌嵌入式在专业技术领域与创新能力的高度认可&#xff0c;荣誉的背后&#xff0c;凝聚着飞凌嵌入式无数次的研发探索与对创…

Python练手算法

Python练手算法 实例02实例03实例04实例05实例06实例07实例08实例09实例10实例11实例12实例13实例14实例15实例16实例17实例18实例19实例20实例21实例22实例23实例24实例25实例26实例27实例28实例29实例30实例31实例32实例33实例34实例35实例36实例37实例38实例39实例40实例41…

you-get - 使用代码下载视频

文章目录 关于 you-get代码调用报错处理 源码简单分析 关于 you-get github : https://github.com/soimort/you-get you-get 是一个有名的开源视频下载工具包&#xff0c;这里不赘述。 代码调用 you-get 提供了命令行的方式下载视频&#xff0c;这里介绍使用 Python 调用源代…

电脑恢复出厂设置在哪里?我来告诉你

在电脑使用中&#xff0c;有时候出现了一些问题&#xff0c;比如系统崩溃、性能下降、病毒感染或者想要将电脑彻底清空以出售或赠予他人。这时&#xff0c;恢复出厂设置成为一个有效的解决方案。可是恢复出厂设置在哪里呢&#xff1f;本文将介绍三种不同的方法来恢复电脑出厂设…

【Python爬虫】网页抓取实例之淘宝商品信息抓取

之前我们已经说过网页抓取的相关内容 上次我们是以亚马逊某网页的产品为例 抓取价格、品牌、型号、样式等 该网页上价格、品牌、型号、样式等 都只有一个 如果网页上的目标内容 根据不同规格有多个 又该怎么提取呢&#xff1f; ▼如下图所示 当机身颜色、套餐、存储容量…