3 - Selección de un elemento del documento mediante el id. |
La sintaxis para seleccionar un elemento particular de la página mediante la propiedad id es:
$("#nombre del id")
Confeccionaremos un problema para ver como obtenemos la referencia a elementos HTML particulares mediante el id.
Problema:Confeccionar una página que muestre dos títulos de primer nivel, al ser presionados cambiar el color de la fuente, fondo y la fuente del texto.
pagina1.html
<!DOCTYPE html> <html> <head> <title>Ejemplo de jQuery</title> <meta charset="UTF-8"> </head> <body> <h1 id="titulo1">Primer título</h1> <h1 id="titulo2">Segundo título</h1> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="funciones.js"></script> </body> </html>
funciones.js
let x = $(document); x.ready(inicializarEventos); function inicializarEventos() { let x = $("#titulo1"); x.click(presionTitulo1) x = $("#titulo2"); x.click(presionTitulo2) } function presionTitulo1() { let x = $("#titulo1"); x.css("color", "#ff0000"); x.css("background-color", "#ffff00"); x.css("font-family", "Courier"); } function presionTitulo2() { let x = $("#titulo2"); x.css("color", "#ffff00"); x.css("background-color", "#ff0000"); x.css("font-family", "Arial"); }
Como va ser costumbre siempre que trabajemos con esta librería primero creamos un objeto jquery a partir de la referencia a 'document' y luego llamamos al método ready indicándole el nombre de la función que debe ejecutarse luego de generarse el árbol de elementos HTML para la página:
let x = $(document); x.ready(inicializarEventos);
La función inicializarEventos se ejecuta una vez que se cargó la página y están creados todos los elementos HTML, en esta función mediante $ accedemos a través del id a los elementos h1 respectivos, a casa uno le asignamos al evento click una función distinta que se disparará cuando presionemos con el mouse:
function inicializarEventos() { let x = $("#titulo1"); x.click(presionTitulo1) x = $("#titulo2"); x.click(presionTitulo2) }
Es importante notar que cuando obtenemos la referencia de un elemento por medio del id se le antecede el caracter # al nombre del id:
x=$("#titulo1"); ... x=$("#titulo2");
Luego las dos funciones que se ejecutan al presionar los títulos:
function presionTitulo1() { let x = $("#titulo1"); x.css("color", "#ff0000"); x.css("background-color", "#ffff00"); x.css("font-family", "Courier"); } function presionTitulo2() { let x = $("#titulo2"); x.css("color", "#ffff00"); x.css("background-color", "#ff0000"); x.css("font-family", "Arial"); }
Hasta ahora hemos presentado los siguientes métodos que tiene jquery:
ready click
El tercer método nos permite modificar una propiedad de la hoja de estilo de un elemento HTML:
let x = $("#titulo1"); x.css("color", "#ff0000");
Una vez que hemos obtenido la referencia a un elemento HTML llamamos al método css que tiene dos parámetros: el primero indica el nombre de la propiedad y el segundo el valor a asignarle. Podemos ver las otras dos asignaciones:
x.css("background-color", "#ffff00"); x.css("font-family", "Courier");
Como podemos ver es muy fácil acceder al estilo de un elemento HTML para actualizarlo en forma dinámica luego que la página fue cargada.