如何使用 jQuery 显示/隐藏元素？

在本文中，我们将学习如何使用 jQuery 显示/隐藏元素。我们可以使用诸如 css()、show()、hide() 和 toggle() 方法之类的 jQuery 方法来完成这些工作。

方法：

1. 在本地系统中创建一个 HTML 文件“ index.html ”
2. 在 标记内创建一个 HTML 元素，例如段落

   、图像 等。

3. 使用 标记创建一个按钮并为其附加一个事件侦听器。
4. 我们使用这个按钮来切换显示和隐藏动画。这意味着当显示所选元素并单击隐藏按钮时，事件侦听器中的代码应隐藏您选择的元素并更改该元素的文本，反之亦然。

方法一：使用 css() 方法——它有两个参数，第一个参数是属性名，第二个参数是属性值。

$(selector).css(property, value);

它采用一种参数类型的 JSON字符串对象，该对象包含属性及其值。

$(selector).css(property);

HTML

  

    
    
      
    
        body {
            border: 2px solid green;
            min-height: 240px;
            text-align: center;
        }
  
        h1 {
            color: green;
        }
  
        div {
            display: flex;
            justify-content: center;
        }
  
        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
    

  

    GeeksforGeeks
  
    
        Hello Geeks Welcome to GeeksforGeeks
    
  
    
        
            hide
        
    
  
    
        $('#click').on('click', function () {
            if ($('#click').text() === 'show') {
  
                // This block is executed when
                // you click the show button
                $('#click').text('hide');
                $('#element').css('display', 'flex');
            }
            else {
  
                // This block is executed when
                // you click the hide button
                $('#click').text('show');
                $('#element').css('display', 'none');
            }
        });
    

  

输出：

输出

方法二：该方法用于显示隐藏元素，它所带的参数是可选的。

$(selector).show(optional);

此方法用于隐藏可见元素，它采用的参数是可选的。

$(selector).hide(optional);

HTML

  

    
    
  
    
        body {
            border: 2px solid green;
            min-height: 240px;
              text-align: center;
        }
  
        h1 {
            color: green;
        }
  
        div {
            display: flex;
            justify-content: center;
        }
  
        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
    

  

    GeeksforGeeks
  
    
        Hello Geeks Welcome to GeeksforGeeks
    
      
    
        
            hide
        
    
  
    
        $('#click').on('click', function () {
            if ($('#click').text() === 'show') {
  
                // This block is executed when
                // you click the show button
                $('#click').text('hide');
                $('#element').show();
            }
            else {
  
                // This block is executed when
                // you click the hide button
                $('#click').text('show');
                $('#element').hide();
            }
        });
    

  

输出：

显示/隐藏方法的输出

方法3：此方法如果元素可见则隐藏元素，如果元素隐藏则显示元素。此方法可以同时执行 show 和 hide 方法的功能，并且参数是可选的。

$(selector).toggle(optional)

HTML

  

    
    
      
    
        body {
            border: 2px solid green;
            min-height: 240px;
            text-align: center;
        }
  
        h1 {
            color: green;
        }
  
        div {
            display: flex;
            justify-content: center;
        }
  
        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
    

  

    GeeksforGeeks
  
    
        Hello Geeks Welcome to GeeksforGeeks
    
  
    
        
            hide
        
    
  
    
        $('#click').on('click', function () {
            if ($('#click').text() === 'show') {
  
                // This block is executed when
                // you click the show button
                $('#click').text('hide');
            }
            else {
  
                // This block is executed when
                // you click the hide button
                $('#click').text('show');
            }
            $('#element').toggle();
        });
    

  

输出：

切换方法的输出