Método addClass() de jQuery

Este método permite agregar una clase CSS a un elemento o conjunto de elementos del DOM. Agregar una clase significa asignar atributos CSS previamente definidos en la sección <STYLE></STYLE> o en una hoja de estilos CSS incluida en nuestro documento HTML.

Supongamos la siguiente línea de código HTML:

<p>Este texto no contiene estilos CSS</p>

Supongamos la siguiente definición de estilos CSS:

<style>
.miparrafo{ color:blue; font-size:16px; }
</style>

En un determinado momento de ejecución o evento podríamos cambiar los estilos de este párrafo agregándole la clase miparrafo:

<script>
$("p").addClass("miparrafo");
</script>

De este modo nuestro código HTML cambiará a:

<p class="miparrafo">Este texto no contiene estilos CSS</p>

---

¿Qué ocurre si nuestro párrafo ya tiene asignada una clase CSS?

Supongamos ahora la siguiente línea de código HTML:

<p class="parrafo">Este texto contiene estilos CSS</p>

Supongamos la siguiente definición de estilos CSS:

<style>
.parrafo{ font-family:verdana; }
.miparrafo{ color:blue; font-size:16px; }
</style>

En un determinado momento de ejecución o evento podríamos cambiar los estilos de este párrafo agregándole la clase miparrafo:

<script>
$(".parrafo").addClass("miparrafo");
</script>

De este modo nuestro código HTML cambiará a:

<p class="parrafo miparrafo">Este texto no contiene estilos CSS</p>

---

Cabe aclarar que addClass() me permite agregar más de una clase a la vez, haciendo la llamada de la siguiente manera:

<script>
$("p").addClass("parrafo miparrafo ");
</script>

donde parrafo y miparrafo son dos clases CSS previemente definidas

---

Para utilizar addClass al momento de efectuarse un evento, por ejemplo "click", podría utilizar una función como la que sigue:

<script> 
$("p").click(function () {
   $("p").addClass("miclase");    
});  
</script>

De esta manera, al hacer click sobre el párrafo este recibirá los atributos CSS de la clase "mi clase"

Class Attribute

Estos métodos de jQuery permiten inspeccionar y manipular las clases CSS asignadas a los distintos elementos del DOM.

.addClass()

Permite agregarle una clase o varias clases CSS definidas a un elemento o conjunto de elementos coincidentes. Ejemplos

.hasClass()

Determina si un elemento encontrado o conjunto de elementos ya tienen asignada una determinada clase CSS.

.removeClass()

Permite quitar una clase o varias clases CSS definidas a un elemento o conjunto de elementos coincidentes.

.toggleClass()

Permite Agregar o eliminar una o más clases de cada elemento en el conjunto de los elementos coincidentes, ya sea en función de la presencia de la clase o del valor del argumento epecificado.