📌  相关文章
📜  哪种 jQuery 方法用于从选定元素添加/删除一个或多个类?

📅  最后修改于: 2021-11-25 03:57:58             🧑  作者: Mango

用于向元素添加或删除类的方法是 toggleClass()方法。它切换addClass()方法,并且当该事件由事件处理程序触发的removeClass()方法之间。在本文中,我们将看到toggleClass()方法是如何工作的,以及当有多个类使用 jQuery 时我们如何切换。

addClass()方法向选择器添加一个类, removeClass()删除选择器的 CSS 类。每次在事件触发时添加和删除类时, toggleClass()方法都会在事件触发时在这两者之间切换。我们将逐步讨论所有这些类并通过示例了解它们的实现。

1. addClass() 方法:该方法为jQuery 中的选择器元素添加一个类。

句法:

$('selector').addClass('class_name');

示例:在这一步中,我们将为addClass()方法添加代码,并为名为n_class的类添加 CSS 代码。

HTML


  
    
    
    
    Geeks for Geeks
      
    
    
      
    
  
  
  
    
    
      

Geeks For Geeks

    
          


HTML


  
    
    
    
    Geeks for Geeks
      
    
    
      
    
  
  
  
    
  
    
      

Geeks For Geeks

    
          


HTML


  
    
    
    
    Geeks for Geeks
      
    
    
      
    
  
  
  
    
  
    
      

Geeks For Geeks

    
          


HTML


  
    
    
    
    Geeks for Geeks
      
    
    
      
    
  
  
  
    
  
    
      

Geeks For Geeks

    
          


输出:

2. removeClass() 方法:该方法删除jQuery 中选择器元素中的一个类。

句法:

$('selector').removeClass('class_name');

示例:在这一步中,我们将添加removeClass()方法的代码,该方法将帮助删除我们在 example1 中应用的名为 n_class的类的 CSS 属性。

HTML



  
    
    
    
    Geeks for Geeks
      
    
    
      
    
  
  
  
    
  
    
      

Geeks For Geeks

    
          

输出:

3. toggleClass() 方法:在 addClass() 和 removeClass() 方法之间切换。

句法:

  1. 对于单个类。
$('selector').toggleClass('class_name');

2. 多班。

$('selector').toggleClass('class_name1 class_name2');

对于单个类:例如,通过单击按钮在添加或删除单个类n_class 之间进行切换,并触发单击事件。

.n_class {
  color: black;
  background-color: #006600;
  font-weight: bold;
}

示例 3:

HTML



  
    
    
    
    Geeks for Geeks
      
    
    
      
    
  
  
  
    
  
    
      

Geeks For Geeks

    
          

输出:

对于多个类:例如,我们在多个类之间切换,在这里,类n_classp_class在单击按钮和触发 click 事件时被添加或删除。

第一类:

.n_class {
  color: black;
  background-color: #006600;
  font-weight: bold;
}

第二类:

.p_class {
  font-family: "Courier New", Courier, monospace;
  border: 5px solid black;
}

示例 4:

HTML



  
    
    
    
    Geeks for Geeks
      
    
    
      
    
  
  
  
    
  
    
      

Geeks For Geeks

    
          

输出: