Explicaciones de uso básico de jQuery y cómo alterar el aspecto de los elementos de la página con la técnica de añadir y quitar clases CSS, bajo respuesta de eventos de usuario.
Para ir acostumbrándonos al trabajo con la librería 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.
1.- Crear la página con una capa, un enlace y la definición de una clase CSS
El primer paso sería construir una página con todos los elementos que queremos que formen parte de este primer ejemplo: la capa DIV, el enlace y la definición de la class CSS.Además, ahora también vamos a incluir el script de jQuery, que lo necesitaremos para acceder a las funciones del framework Javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Añadir y quitar clases cuando se producen eventos de usuario</title>
<style>
.clasecss {
background-color: #ff8800;
font-weight: bold;
}
</style>
</head>
<body>
<div id="capa">
Esta capa es independiente y voy a añadir y eliminar clases css sobre ella
</div>
<br>
<br>
<a href="https://desarrolloweb.com">Añadir y quitar clase en la capa de arriba</a>
</body>
</html>
Perfecto, ahora ya tenemos la infraestructura necesaria para nuestro ejemplo, con todos los integrantes del mismo. Sólo nos faltaría hacer el siguiente paso, que es añadir los comportamientos dinámicos con jQuery.
2.- Recordar: añadir siempre los scripts jQuery cuando el documento está "ready"
Ahora vamos a empezar a meter el código Javascript, pero quiero comenzar por recordar a los lectores que cualquier funcionalidad que queramos agregar a la página por medio de jQuery, debe ser incluida cuando el documento está listo para recibir acciones que modifiquen el DOM de la página.
Para esto tenemos que incluir siempre el código:
$(document).ready(function(){
//aquí meteremos las instrucciones que modifiquen el DOM
});
3.- Añadir los eventos mouseover y mouseout para añadir y quitar una clase CSS
En este paso vamos a crear un par de eventos que asociaremos a los enlaces. Este par de eventos serán lanzados cuando el usuario coloque el puntero del ratón sobre el enlace (mouseover) y cuando el usuario retire el ratón del enlace (mouseout).
Por ejemplo, para definir un evento mouseover se tiene que llamar al método mouseover() sobre el elemento que queremos asociar el evento. Además, al método mouseover() se le envía por parámetro una función con el código que se quiere ejecutar como respuesta a ese evento.
En el caso de añadir una clase tenemos que utilizar el método addClass(), que se tiene que invocar sobre el elemento al que queremos añadirle la clase. A addClass() tenemos que pasarle una cadena con el nombre de la clase CSS que queremos añadir.
Para seleccionar el elemento que queremos añadir la clase hacemos $("#idElemento"), es decir, utilizamos la función dólar pasándole el identificador del elemento que queremos seleccionar, precedida del carácter "#". Por ejemplo, con $("#capa") estamos seleccionando un elemento de la página cuyo id="capa".
$("a").mouseover(function(event){
$("#capa").addClass("clasecss");
});
De manera análoga, pero con el método mouseout(), definimos el evento para cuando el usuario saca el puntero del ratón del enlace.
$("a").mouseout(function(event){
$("#capa").removeClass("clasecss");
});
4.- Código completo del ejemplo jQuery
Ahora veamos el código completo de este ejercicio.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Añadir y quitar clases cuando se producen eventos de usuario</title>
<style>
.clasecss {
background-color: #ff8800;
font-weight: bold;
}
</style>
</head>
<body>
<div id="capa">
Esta capa es independiente y voy a añadir y eliminar clases css sobre ella
</div>
<br>
<br>
<a href="https://desarrolloweb.com">Añadir y quitar clase en la capa de arriba</a>
<script src="./jquery-3.6.3.js"></script>
<script>
$(document).ready(function () {
$("a").mouseover(function (event) {
$("#capa").addClass("clasecss");
});
$("a").mouseout(function (event) {
$("#capa").removeClass("clasecss");
});
});
</script>
</body>
</html>
Conclusión
Hemos podido aprender un nuevo truco habitual en el trabajo con jQuery, que es la manipulación de la página por medio de añadir o quitar clases CSS en los elementos. Además lo hemos realizado como respuesta a eventos de la página, lo que resulta bastante útil en miles de situaciones.
De todos modos, seguimos en "modo demo". Más adelante en el Manual de jQuery tendremos tiempo de ofrecer explicaciones más detalladas de todas estas técnicas básicas de desarrollo. En el siguiente artículo abordaremos otro ejemplo esencial para seguir aprendiendo que consiste en ocultar y mostrar elementos de la página con jQuery.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...