Demos sencillos de jQuery para desempeñar unos primeros ejemplos de scripts que podemos usar con esta librería Javascript para el desarrollo en la web.
Con objetivo de que los lectores puedan hacerse una rápida idea de las posibilidades de jQuery, escribiendo unas brevísimas líneas de código Javascript, vamos a publicar un par de ejemplos bien simples que nos ilustren, pero sin complicarnos demasiado. Nos servirán para la introducción a jQuery que estamos publicando en el Manual de jQuery.
La idea de este artículo no es explicar las funcionalidades que vamos a demostrar, sino ver el poco código que hemos tenido que escribir para realizar unos scripts con dinamismos sencillos. Quizás los scripts en si no digan mucho a un lector poco experimentado, pero los que ya han tenido contacto con los pormenores que hay que seguir para hacer estos efectos, de manera que sean compatibles con todos los navegadores, sabrán que jQuery nos ha simplificado mucho nuestra tarea.
Así pues, no te preocupes demasiado con los detalles de estos códigos, que los explicaremos en DesarrolloWeb.com más adelante con detalle.
Demo 1 de jQuery
Para empezar vamos a ver este ejemplo, donde tenemos dos botones y un texto. Al pulsar un botón, cambiaremos el texto y al pulsar el otro pondremos otro texto distinto.En este ejemplo tenemos un elemento de la página que tiene este código HTML:
<div id="capa" style="padding: 10px; background-color: #ff8800">Haz clic en un botón</div>
Luego tenemos dos botones con estos códigos:
<input type="button" value="Botón A" onclick="$('#capa').html('Has hecho clic en el botón <b>A</b>')">
<input type="button" value="Botón B" onclick="$('#capa').html('Recibido un clic en el botón <b>B</b>')">
Como se puede ver, en los botones hay definidos un par de eventos onclick (uno en cada uno) que ejecutan una instrucción Javascript cuando se hace clic sobre ellos. La instrucción está en Javascript, pero hace uso de algunas herramientas disponibles en jQuery para trabajo con los elementos de la página. En este caso, por explicarlo rápidamente, se hace una selección del elemento DIV de la capa y luego se ejecuta un método sobre él para cambiar el contenido HTML del elemento.
No te preocupes si no lo entiendes todo, o si hay cosas que no te gustan, como definir el código de los eventos dentro de atributos HTML. En los próximos artículos del Manual de jQuery vamos a explicarte todos los detalles para que puedas entenderlo y, por supuesto, aprenderemos a declarar eventos sin manchar el HTML.
Te dejamos aquí el código de una página HTML completa por si quieres copiar y pegar el ejemplo para verlo en funcionamiento en tu ordenador.
<!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>Demo cambiar color jQuery</title>
</head>
<body>
<div id="capa" style="padding: 10px; background-color: #ff8800">Haz clic en un botón</div>
<p>
<input type="button" value="Botón A" onclick="$('#capa').html('Has hecho clic en el botón <b>A</b>')">
<input type="button" value="Botón B" onclick="$('#capa').html('Recibido un clic en el botón <b>B</b>')">
</p>
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous"></script>
</body>
</html>
Demo 2 de jQuery
En este otro ejemplo vamos a ver algo un poquito más complejo. Bueno, realmente no tiene mucha mayor complejidad, pero estamos utilizando jQuery de una manera un poco distinta, que requiere algo más de código por nuestra parte. Ahora vamos a tener dos capas en nuestra página. Una capa estará siempre visible y otra capa aparecerá inicialmente oculta y la vamos a mostrar u ocultar dependiendo de si el usuario coloca el ratón encima de la capa que está siempre visible.
Con la denominación "capa" me referiero a un elemento de la página, una etiqueta HTML con su contenido. Actualmente no me gusta usar este término, porque los elementos de la página no siempre se comportan específicamente como capas, pero a lo largo del manual he usado bastante esta manera de hablar.
En este segundo ejemplo tenemos este código HTML, con las dos capas.
<div id="capa" style="padding: 10px; background-color: #ff8800;">Pon el ratón encima de esta capa</div>
<br>
<div id="mensaje" style="display: none;">Has puesto el ratón encima!! <br>(Ahora quítalo de la capa)</div>
Ahora vamos a tener un código Javascript con jQuery que defina los eventos del usuario, para cuando sitúa el ratón dentro o fuera de la primera capa.
$("#capa").mouseenter(function (evento) {
$("#mensaje").css("display", "block");
});
$("#capa").mouseleave(function (evento) {
$("#mensaje").css("display", "none");
}
De esta sencilla manera, hemos creado dos eventos en el DIV con id="capa". Además, hemos definido el código de los eventos por medio de funciones, que se encargarán de mostrar o ocultar la segunda capa con id="mensaje".
$("#mensaje").css("display", "block");
Esto nos selecciona la capa con id "mensaje" y con el método css() indicamos que queremos cambiar el atributo "display" al valor "block" de ese elemento.
$("#mensaje").css("display", "none");
Esta otra línea muy similar, simplemente cambia el "display" a "none" para ocultar el elemento.
Esperamos que estos dos ejemplos te hayan servido para ver rápidamente algunas cosas que se pueden hacer con jQuery con muy poco esfuerzo y que funcionan en todos los navegadores.
En futuros artículos aportaremos más detalles sobre estos códigos que hemos mostrado a modo de demo. Te dejamos el HTML completo por si quieres copiar y pegar el ejemplo en un archivo en tu ordenador y probar el funcionamiento.
<!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>Demo ocultar y mostrar un elemento con jQuery</title>
</head>
<body>
<div id="capa" style="padding: 10px; background-color: #ff8800;">Pon el ratón encima de esta capa</div>
<br>
<div id="mensaje" style="display: none;">Has puesto el ratón encima!! <br>(Ahora quítalo de la capa)</div>
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous"></script>
<script>
$("#capa").mouseenter(function (evento) {
$("#mensaje").css("display", "block");
});
$("#capa").mouseleave(function (evento) {
$("#mensaje").css("display", "none");
});
</script>
</body>
</html>
Hemos visto dos ejemplos muy sencillos con jQuery. No sé qué te habrá parecido esta práctica, pero si tuvieras idea de cómo se desarrollaba en la época de la guerra de los navegadores, antes de que apareciera jQuery, por culpa de las diferencias de aplicación de los estándares en los distintos clientes web, apreciarías la ventaja de usar esta librería.
En el siguiente artículo vamos a abandonar el "modo demo" y comenzaremos a explicar cómo puedes usar jQuery en una página web.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...