Básicos jQuery: añadir y quitar clases CSS sobre elementos

Otro ejemplo básico con jQuery, para mostrar cómo se pueden añadir y quitar clases CSS a elementos de la página, bajo respuesta de eventos de usuario. 

Para ir acostumbrándonos al trabajo con el framework Javascript jQuery vamos a seguir haciendo ejemplos simples de funcionamiento, que vamos a explicar en la medida de las posibilidades con lo que hemos conocido hasta ahora en el Manual de jQuery. Claro que estos ejercicios son un poco especiales, dado que sirven para ilustrar el modo de trabajo con jQuery, pero sin explicar todos los detalles relacionados con el uso del framework. Por que de momento lo que queremos es mostrar una introducción al sistema y mostrar por encima algunas de sus posibilidades. En el futuro publicaremos artículos que irán poco a poco explicando todos los detalles de trabajo con jQuery. 

En el caso que nos ocupa, queremos demostrar el uso de jQuery para alterar elementos de una página web, añadiendo y quitando clases CSS. Esto es bien simple, porque en jQuery los elementos tienen dos clases llamadas addClass() y removeClass(), que sirven justamente para que el elemento que recibe el método se le aplique una clase CSS o se le elimine. Así que lo que vamos a aprender, con respecto al artículo anterior -Pasos para utilizar jQuery-, es utilizar esos nuevos métodos de los elementos. Para complicarlo sólo un poco más, vamos a añadir y quitar clases del elemento con respuesta a acciones del usuario, para aprender también nuevos eventos de usuario. En nuestro ejemplo vamos a tener dos elementos. Primero una capa DIV con un texto. Después tendremos un enlace que estará fuera de la capa DIV. Al situar el usuario el ratón sobre un enlace añadiremos una clase CSS a la capa DIV y al retirar el ratón del enlace eliminaremos la class CSS que habíamos añadido antes. Si se desea, para aclarar el caso de nuestro ejemplo, podemos ver el ejercicio en marcha en una página aparte. 

Nota: Se supone que ya hemos leído el artículo anterior, en el que explicamos paso por paso hacer tu primera página con jQuery, pues necesitaremos conocer algunas cosas que ya se han comentado allí. Manual