El método jQuery.addClass() es una he­rra­mie­n­ta precisa y sencilla para añadir clases a elementos, lo que te permite controlar la apa­rie­n­cia y el co­m­po­r­ta­mie­n­to de tu página web. Te vamos a mostrar la es­tru­c­tu­ra y fu­n­cio­na­li­dad de .addClass() en detalle.

¿Qué es el método jQuery.addClass()?

Puedes utilizar .addClass() de jQuery para modificar di­ná­mi­ca­me­n­te el aspecto de tu página web. Por ejemplo, puedes ajustar estilos, crear ani­ma­cio­nes o in­ter­ac­tuar con los usuarios añadiendo las clases que necesites a los elementos HTML co­rre­s­po­n­die­n­tes. Sin embargo, ten en cuenta que este método no puede eliminar clases exi­s­te­n­tes (para hacerlo, puedes utilizar jQuery.re­mo­ve­Cla­ss(). Una vez que hayas añadido clases, las reglas de estilo CSS asociadas a ellas se aplicarán a los elementos se­le­c­cio­na­dos para lograr el co­m­po­r­ta­mie­n­to visual deseado. Esto es es­pe­cia­l­me­n­te útil cuando trabajas con jQuery en WordPress, pues podrás pe­r­so­na­li­zar los diseños y efectos en tu sistema de gestión de contenido (CMS).

Consejo

Alquila tu propio hosting con espacio ilimitado personal en IONOS y disfruta de al menos 50 GB para tu proyecto web. Además, recibirás gratis un ce­r­ti­fi­ca­do SSL Wildcard y un dominio. Se­le­c­cio­na la tarifa que mejor se adapte a tus ne­ce­si­da­des con opciones pe­r­so­na­li­za­das.

Sintaxis y pa­rá­me­tros de jQuery.addClass()?

La función jQuery.addClass() admite dos pa­rá­me­tros, su sintaxis es la siguiente:

$(selector).addClass(classname,function(index,currentclass))
jQuery
  • classname: nombre de la clase o clases que añadir, separadas por una coma
  • function(index,cu­rre­n­t­cla­ss): una función de callback opcional que se ejecutará para cada elemento se­le­c­cio­na­do
  • index: el índice del elemento actual en la lista de elementos se­le­c­cio­na­dos
  • cu­rre­n­t­cla­ss: la clase actual del elemento

La función de callback te pro­po­r­cio­na la capacidad de realizar ajustes adi­cio­na­les o lógica es­pe­cí­fi­ca para cada elemento a medida mientras añades clases. Por ejemplo, puedes comprobar el valor de la clase actual y añadir más clases basándote en esa in­fo­r­ma­ción.

Si estás empezando a utilizar jQuery, te re­co­me­n­da­mos consultar el tutorial de jQuery de nuestra guía, donde podrás aprender todos los aspectos básicos de la bi­blio­te­ca jQuery.

Consejo

La API de IONOS si­m­pli­fi­ca la co­n­fi­gu­ra­ción de tus productos de hosting de IONOS de manera eficiente. Con una clave de acceso a las API de IONOS, puedes gestionar tus dominios, ajustar co­n­fi­gu­ra­cio­nes de DNS y ce­r­ti­fi­ca­dos SSL. Para más in­fo­r­ma­ción, consulta la do­cu­me­n­ta­ción en la página de in­fo­r­ma­ción sobre la API de IONOS para de­sa­rro­lla­do­res.

Ejemplo de uso del método jQuery.addClass()

Para demostrar el uso de la función .addClass(), en el siguiente ejemplo añadimos la clase “.green” al elemento p. Esto cambia tanto el color como el tamaño de fuente del párrafo cuando se produce un evento de click en el botón. También puedes combinar fá­ci­l­me­n­te .addClass() con otros métodos, como jQuery.find() o jQuery.ajax().

<!DOCTYPE html>
<html>
    
<head>
        <style>
                .blue {
                        color: blue;
                        font-weight: bold;
                }
    
                .green {
                        font-size: 24px;
                        color: green;
                }
        </style>
    
        <!-- Import jQuery CDN library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
                $(document).ready(function () {
                        $("button").click(function () {
                                $("p").addClass("green");
                        });
                });
        </script>
</head>
    
<body style="text-align: center;">
        <h1>
                This is a jQuery.addClass() exmple.
        </h1>
    
        <p class="blue">
                jQuery add class to element demo
        </p>
    
        <button>Click!</button>
</body>
    
</html>
html

En la ventana del navegador, verás que el color y el tamaño del elemento p cambian al hacer clic en el botón.

Aspecto antes de ejecutar .addClass():

Imagen: Aspecto antes de ejecutar .addClass()
Estado antes de añadir la clase

Aspecto después de ejecutar .addClass():

Imagen: Aspecto después de ejecutar .addClass():
Efecto de .addclass en el navegador
Consejo

Publica tu proyecto en Internet con Deploy Now de IONOS. Con co­n­fi­gu­ra­ción rápida y detección au­to­má­ti­ca de fra­me­wo­r­ks, puedes llevar tu presencia web al siguiente nivel en solo unos pocos pasos. Además, con Deploy Now Me­m­be­r­ship, tienes la fle­xi­bi­li­dad de reservar recursos adi­cio­na­les que puedes cancelar me­n­sua­l­me­n­te, re­s­pa­l­da­dos por un servicio de atención al cliente al 100 %.

Ir al menú principal