addClass() y removeClass() en jQuery

Con jQuery addClass() y removeClass() podemos añadir o eliminar clases a los elementos del DOM de una página web.

Sintaxis de addClass()

El método addClass () agrega uno o más nombres de clase a los elementos seleccionados.
Este método no elimina los atributos de clase existentes, solo agrega uno o más nombres de clase al atributo de clase.
Consejo: para agregar más de una clase, separe los nombres de las clases con espacios.

El siguiente ejemplo muestra cómo agregar atributos de clase a diferentes elementos. Por supuesto, puede seleccionar varios elementos al agregar clases:

La sintaxis de esta función de jQuery para añadir clases.

$(elemento).addClass(nombreClase,funcion(index,oldclass))

Parámetros disponibles:

elemento (obligatorio): Objeto al cual queremos añadir una o varias clases.
nombreClase (obligatorio): Nombre de la clase existente que queremos asignar.
funcion (opcional): Al usar la Función callback por defecto nos devuelve estos valores: index con el número de posición del elemento en el DOM, y oldclass con la clase actual del elemento.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1, h2, p").addClass("blue");
	 $("p").addClass("red");
    $("div").addClass("important");
  });
});
</script>
<style>
.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}
.red {
  font-family:arial;
  color: red;
}
</style>
</head>
<body>

<h1>Titulo 1</h1>
<h2>Titulo 2</h2>

<p>Este es un parrafo.</p>
<p>Este es otro parrafo.</p>

<div>Este es un texto importante</div><br>
<button>Agregar clases a elementos</button>

</body>
</html>

Ver ejemplo anterior

Sintaxis de removeClass()

La sintaxis para eliminar clases de los elementos es la siguiente:

$(elemento).removeClass(nombreClase,funcion(index,claseactual))

$(elemento).removeClass(nombreClase,funcion(index,claseactual))

El método removeClass() elimina uno o más nombres de clase de los elementos seleccionados.
Nota: Si no se especifica ningún parámetro, este método eliminará TODOS los nombres de clase de los elementos seleccionados.

El siguiente ejemplo elimina el nombre de la clase "intro" de todos los <p> elementos:

Parámetros disponibles::

elemento (obligatorio):: Objeto del cual queremos eliminar una o varias clases.
nombreClase (obligatorio): Nombre de la clase existente que queremos asignar.
funcion (opcional): Al usar la función por defecto nos devuelve estos valores de las clases a eliminar: index con el número de posición del elemento en el DOM, y claseactual con la clase actual del elemeto.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").removeClass("intro");
  });
});
</script>
<style>
.intro {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>
<h1>Titulo 1</h1>
<p class="intro">Este es un parrafo.</p>
<p class="intro">Este es otro parrafo.</p>

<button>Borra con la clase "intro" para todos los elementos p </button>
</body>
</html>

Ver ejemplo anterior

Los métodos addClass y removeClass nos permiten asociar y desasociar una clase a un elemento o conjunto de elementos HTML.

Problema: Disponer un div con un conjunto de párrafos. Cuando se presione un botón asociarle una clase y cuando se presione otro desasociarlo de dicha clase.

pagina1.html

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>

<body>
  <input type="button" id="boton1" value="Asociar clase">
  <input type="button" id="boton2" value="Desasociar clase">
  <div id="descripcion">
    <p>HTML es el lenguaje que se emplea para el
 desarrollo de páginas de internet.</p>
    <p>Este lenguaje está constituido de
 elementos que el navegador interpreta y las 
 despliega en la pantalla de acuerdo
      a su objetivo. Veremos que hay elementos 
 para disponer imágenes sobre una página, hipervínculos 
que nos permiten
      dirigirnos a otra página, listas, tablas para
 tabular datos, etc.</p>
    <p>Para poder crear una página HTML se requiere
 un simple editor de texto (en nuestro caso emplearemos este sitio)
      y un navegador de internet (IExplorer, FireFox etc.),
 emplearemos el navegador que en este preciso momento está
      utilizando (recuerde que usted está viendo en este
 preciso momento una página HTML con su navegador).</p>
    <p>Lo más importante es que en cada concepto 
desarrolle los ejercicios propuestos y modifique los que se presentan
      ya resueltos.</p>
    <p>Este curso lo que busca es acercar el lenguaje
 HTML a una persona que nunca antes trabajó con el mismo. No
      pretende mostrar todas los elementos HTML en forma alfabética.</p>
    <p>Como veremos, de cada concepto se presenta una 
parte teórica, en la que se da una explicación completa,
      luego se pasa a la sección del ejercicio resuelto donde 
podemos ver el contenido de la página HTML y cómo la
      visualiza el navegador. Por último y tal vez la sección
 más importante de este tutorial es donde se propone
      que usted haga páginas en forma autónoma (donde realmente 
podrá darse cuenta si el concepto quedó firme).
    </p>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

Ver ejemplo anterior

func9.js

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#boton1");
  x.click(asociarClase);
  x = $("#boton2");
  x.click(desasociarClase);
}

function asociarClase() {
  let x = $("#descripcion");
  x.addClass("recuadro");
}

function desasociarClase() {
  let x = $("#descripcion");
  x.removeClass("recuadro");
}

estilos9.css

.recuadro {
  background-color:#ffffcc;
  font-family:verdana;
  font-size:14px;

  border-top-width:1px;
  border-right-width:3px;
  border-bottom-width:3px;
  border-left-width:1px;

  border-top-style:dotted;
  border-right-style:solid;
  border-bottom-style:solid;
  border-left-style:dotted;

  border-top-color:#ffaa00;
  border-right-color:#ff0000;
  border-bottom-color:#ff0000;
  border-left-color:#ffaa00;
}

Tengamos bien en cuenta que en el archivo HTML debemos indicar donde se encuentran los archivos js:

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>

Y también el archivo css:

  <link rel="StyleSheet" href="estilos.css" type="text/css">

Cuando se presiona el botón asociar hoja de estilo se ejecuta la función:

function asociarClase() {
  let x = $("#descripcion");
  x.addClass("recuadro");
}

Donde llamamos al método addClass con el nombre de la clase (dicha clase debe estar definida en la hoja de estilo (css)).

De forma similar para desasociar una clase se ejecuta la función:

function desasociarClase() {
  let x = $("#descripcion");
  x.removeClass("recuadro");
}

donde llamamos al método removeClass a partir de un objeto jQuery.

(adsbygoogle = window.adsbygoogle || []).push({});

addClass() y removeClass() en jQuery

Sintaxis de addClass()

Sintaxis de removeClass()