Selección de un elemento mediante el id

Con jQuery selecciona (consulta) elementos HTML y realiza "acciones" en ellos, jQuery usa la sintaxis CSS para seleccionar elementos. La sintaxis para seleccionar un elemento particular de la página mediante la propiedad id

Sintaxis de jQuery

La sintaxis de jQuery está hecha a medida para seleccionar elementos HTML y realizar alguna acción en los elementos.

La sintaxis básica es: $ ( selector ). acción ()

Un signo $ para definir / acceder a jQuery
Un ( selector ) para "consultar (o buscar)" elementos HTML
Una acción jQuery () que se realizará en los elementos

Ejemplos:

$(this).hide() - oculta el elemento actual.
$("p").hide() - oculta todos los elementos <p>.
$(".test").hide() - oculta todos los elementos con class = "test".
$("#test").hide() - oculta el elemento con id = "test".

El selector #id

La sintaxis para seleccionar un elemento particular de la página mediante la propiedad id es:

$("#nombre del id")

El selector de jQuery usa el atributo id de una etiqueta HTML para encontrar el elemento específico.#id
Una identificación debe ser única dentro de una página, por lo que debe usar el selector #id cuando desee encontrar un elemento único y único.
Para encontrar un elemento con una identificación específica, escriba un carácter hash, seguido por la identificación del elemento HTML:

$("#test")

Ejemplo

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>
<body>
<h2>Este es un encabezado</h2>
<p>Este es un párrafo..</p>
<p id="test">Se oculta al hacer click.</p>
<button>Click aquí</button>
</body>
</html>

Ver ejemplo anterior

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.

eje3.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="func3_1.js"></script>
</body>

</html>

Ver ejemplo anterior

func3_1.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.

(adsbygoogle = window.adsbygoogle || []).push({});

Selección de un elemento mediante el id

Sintaxis de jQuery

El selector #id