Búsqueda personalizada
 
 
 
 
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

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

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

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion