Con el objetivo de que podáis haceros una idea de las posibilidades que ofrece JQuery, crearemos dos ejemplos muy simples que nos acerquen a este poderoso framework. La idea de este capítulo no es explicar las funcionalidades que vamos a demostrar, sino ver el poco código necesario que hemos tenido que escribir para realizar scripts.

Ejemplo 1

Veamos este pequeño ejemplo, en el cual tenemos 2 botones y un texto. Al pulsar un botón, cambiaremos el texto, al pulsar el otro botón pondremos otro texto distinto. Comencemos a escribir su sintaxis, para ello creamos una capa la cual tiene el siguiente código.

<div id="capa" style="padding:10px; background-color:red;">Haz clic en uno de los botones</div>

Después creamos los dos botones mediante el código siguiente:

<input type="button" value="Botón 1" onClick="$('#capa').html('Hiciste clic en el botón 1')">
<input type="button" value="Botón 2" onClick="$('#capa').html('Hiciste clic en el botón 2')">

Como podemos ver, en los botones hay definidos un par de eventos onclick (uno en cada uno), los cuales ejecutan una instrucción Javascript, pero hacen uso de algunas herramientas disponibles en JQuery para trabajo con los elementos de la página. En este caso, se hace una selección del elemento <div> de la capa, y después se ejecuta un método sobre él para cambiar el contenido HTML del elemento.

La sintaxis completa de nuestro ejemplo es la siguiente:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo 1 de JQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
<div id="capa" style="paddin:10px; background-color: red;">Hac clic en uno de los botones</div>

<input type="button" value="Botón 1" onClick="$('#capa').html('Has hecho clic en el botón 1')">
<input type="button" value="Botón 2" onClick="$('#capa').html('Has hecho clic en el boton 2')">
</body>
</html>

Ejemplo 2 con JQuery

Este segundo ejemplo va a requerir algo más de código que nuestro primer ejemplo. Ahora tenemos 2 capas en nuestra página. Una capa siempre estará visible, y la otra aparecerá inicialmente oculta dependiendo de si el usuario coloca el ratón encima de la capa que se encuentra visible.

Veamos la sintaxis inicial

<div id="capa" style="padding: 10px; background-color: aqua;">Sitúa el ratón encima de esta capa</div>
<br />
<div id="mensaje" style="display: none">Pusiste el ratón encima, ahora quítalo de la capa</div>

Ahora incluiremos la sintaxis Javascript necesaria, la cual va a definir los eventos del usuario, para cuando sitúa el ratón dentro o fuera de la capa.

$("#capa").mouseenter(function(evento){
$("#mensaje").css("display","block")
})

$("#capa").mouseleave(function(evento){
$("#mensaje").css("display","block");
})

De esta manera hemos creado dos eventos en el <div> con id="capa", además de definir el código de los eventos por medio de funciones, que se encargarán de mostrar u ocultar la segunda capa con id="mensaje".

Con la sintaxis

$("#mensaje").css("display","block");

Lo que hace es seleccionar la capa con id="mensaje" y con el método css() indicamos que queremos cambiar el atributo display al valor block de ese elemento.

Con la sintaxis

$("#mensaje").css("display","none");

lo que hacemos es ocultar dicha capa.

Veamos la sintaxis completa.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo 2 de JQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

<div id="capa" style="padding: 10px; background-color: aqua;">Sitúa el ratón encima de esta capa</div>
<br />
<div id="mensaje" style="display: none">Pusiste el ratón encima, ahora quítalo de la capa</div>

<script>
$("#capa").mouseenter(function(evento){
$("#mensaje").css("display","block")
})
$("#capa").mouseleave(function(evento){
$("#mensaje").css("display","none");
})
</script>

</body>
</html>