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:
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 🙂
