jQuery permite dar dinamismo a las páginas web. En esta ocasión podrás ver como trabaja jQuery con las clases css (jQuery class). Paso a paso vas a ver ejemplos reales de como añadir y quitar clases css, pero además como añadir estilos a un elemento.

jQuery class

El selector clase se añade en jQuery de la siguiente forma:

jQuery( ".class" )

Lo que hace es seleccionar todos los elementos que tengan esa clase definida en el código. Esa es la versión teórica pero siempre es mejor ver un ejemplo de todo esto para que se vea como funciona. Primero vas a poder ver el código html y a continuación una demo de funcionamiento.

Código HTML

<html lang="es">
<head>
<meta charset="utf-8">
<title>demo con jquery class</title>
<style> div, span { width: 120px; height: 40px; float: left; padding: 10px; margin: 10px; background-color: #EEEEEE; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="sinClase">div class="sinClase"</div>
<div class="miClase">div class="miClase"</div>
<span class="miClase">span class="miClase"</span>
<script>$( ".miClase" ).css( "border", "3px solid red" );</script>
</body>
</html>

Demo

Verás la parte visual, si se ejecuta el código anterior en cualquier navegador vas a ver:

div class=»sinClase»
div class=»miClase»
span class=»miClase»

Añadir clase css con jQuery

Añadir una clase css con jQuery es sencillo. Lo interesante de añadir una clase css es que indicas exactamente en que elemento la quieres insertar.  Igual que en el caso anterior puedes ver el código html y un ejemplo.

Código HTML

En este ejemplo puedes ver como insertar en el último párrafo el texto de color rojo y el fondo de color amarillo.

<html lang="es">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: red;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>Hola</p>
<p>y</p>
<p>Adiós</p>

<script>
$( "p:last" ).addClass( "selected highlight" );
</script>

</body>
</html>

Ver Ejemplo addClass

Hola

y

Adiós

Eliminar clase css con jQuery

Con jQuery también puedes eliminar clases css, conocido también por su nombre en inglés remove class jquery.  Se hace indicando el término removeClass aplicado en el elemento a eliminar.


$( "p" ).removeClass( "miclase" )

Código HTML

Con este código podrás eliminar estilos css, escogiendo exactamente sobre que elementos lo quieres aplicar. En este ejemplo eliminamos el color azul de los párrafos even.

<html lang="es">
<head>
<meta charset="utf-8">
<title>removeClass demo</title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
}
.azul{
color: blue;
}
.under {
text-decoration: underline;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p class="azul under">Hola</p>
<p class="azul under highlight">y</p>
<p class="azul under">después</p>
<p class="azul under">Adiós</p>

<script>
$( "p:even" ).removeClass( "azul" );
</script>

</body>
</html>

Ejemplo para eliminar css jQuery

Hola

y

después

Adiós

Toggle class

Es de lo más interesante que se puede hacer con clases. Funciona de la siguiente manera, en una primera versión si el elemento no tiene clase la añade, si la tiene la elimina. Y en la segunda versión, hace el efecto contrario del que exista en ese momento, es decir, si no tiene clase la añade y si la tiene, la elimina.

$( "#foo" ).toggleClass( className, addOrRemove );

Ejemplo html

En este ejemplo html se ilumina el párrafo cuando éste es clicado.


<html lang="es">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
}
.blue {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p class="blue">Click to toggle</p>

<script>
$( "p" ).click(function() {
$( this ).toggleClass( "highlight" );
});
</script>

</body>
</html>

Y aquí se acaban las distintas opciones que podrás aplicar con clases css con jQuery. Si tienes alguna duda, utiliza los comentarios 🙂