Conceptos de JQuery

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

<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<h1 id="titulo1">Primer título</h1>
<h1 id="titulo2">Segundo título</h1>
</body>
</html>

funciones.js

var x;
x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
  var x;
  x=$("#titulo1");
  x.click(presionTitulo1)
  x=$("#titulo2");
  x.click(presionTitulo2)
}

function presionTitulo1()
{
  var x;
  x=$("#titulo1");
  x.css("color","#ff0000");
  x.css("background-color","#ffff00");
  x.css("font-family","Courier");
}

function presionTitulo2()
{
  var x;
  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:

var x;
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()
{
  var x;
  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()
{
  var x;
  x=$("#titulo1");
  x.css("color","#ff0000");
  x.css("background-color","#ffff00");
  x.css("font-family","Courier");
}

function presionTitulo2()
{
  var x;
  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:

  var x;
  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.

3 - Selección de un elemento del documento mediante el id.