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 š
