Jquery agregar y quitar clases.

Este tutorial voy a mostrar como se agrega y se quita una clase usando jquery. En javascript se usa el evento onclick y con este podemos llamar a una función que nos agregue la clase a un elemento. Un ejemplo son los eventos onmouseover(agrega) y onmouseout(quita). Estos eventos se activan cuando pasa el puntero por algún elemento que nosotros le emos agregado dicha propiedad.

Para este ejemplo voy a crear un div y cuando pase el puntero por ensima de el se le agregue la clase (miclase).

.miclase{ 
background-color: #ccc; 
width: 400px; 
height: 200px; 
font-family: Tahoma;
}

El div

<div id="caja"> 
<p>Hola Soy un Div</p> 

</div>

Ahora al div vamos a agregarle la clase miclase con jquery:

$(document).ready(function (){ 
//El evento mouseover se activa cuando pase el puntero. 
//addClass se encarga de agregar la clase 
  $("#caja").mouseover(function(){ 
  $("#caja").addClass("miclase"); 
 }); 

});

Ahora vamos a hacer que cuando quite el punte del div se le quite la clase.

//Quitar la clase con removeClass y lógicamente el 

//evento mouseout se quita cuando se quite el puntero. 

$("#caja").mouseout(function(){ 
 $("#caja").removeClass("miclase"); 

});

todo:

$(document).ready(function (){ 
 $("#caja").mouseover(function(){ 
 $("#caja").addClass("miclase"); 
 }); 
  $("#caja").mouseout(function(){ 
 $("#caja").removeClass("miclase"); 
 }); 
});