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.


Retornar