jQuery中显示与隐藏

在我们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>
    $(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>
1
2
3
4
5
6
7
8
9
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
42
43
44

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

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

相关阅读:
教程七在Go中使用Energy创建跨平台GUI - Cookies
车辆网络安全开发
神仙级价格：腾讯云双十一服务器优惠价格表来了
将vscode打造无敌的IDE(14) tasks.json和launch.json配置详解，随心所欲添加自动化任务
ubuntu中使用 vscode 连接docker开发环境
【CIO人物展】黄淮学院副CIO周鹏：构建数智化平台赋能学校高质量发展
【色彩管理】色彩管理之截墨
《逆向工程核心原理》学习笔记（五）：64位 & Windows 内核6
基于JAVA信用卡逾期数据处理分析系统计算机毕业设计源码+系统+mysql数据库+lw文档+部署
Python优化算法01——差分进化算法

原文地址：https://blog.csdn.net/m0_74577714/article/details/134310685