Búsqueda personalizada
 
 
 
 
Selección de elementos por el tipo de elementos.
 

La sintaxis para tener la referencia de todos los elementos de cierto tipo (a, p, h1, etc.):

$("nombre del elemento")  

Es decir es casi igual que obtener la referencia de un elemento particular mediante el id, solo difiere en que no le antecedemos el caracter $.

Podemos con esto definir funciones comunes a un conjunto de elementos.

ProblemaConfeccionar una tabla con 5 filas. Hacer que cambie de color la fila que se presiona con el mouse. Obtener la referencia a todos los elementos 'tr'.

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>
<table border="1">
<tr>
<td>1111111111</td>
<td>1111111111</td>
<td>1111111111</td>
<td>1111111111</td>  
</tr><tr>
<td>2222222222</td>
<td>2222222222</td>
<td>2222222222</td>
<td>2222222222</td>
</tr><tr>
<td>3333333333</td>
<td>3333333333</td>
<td>3333333333</td>
<td>3333333333</td>
</tr><tr>
<td>4444444444</td>
<td>4444444444</td>
<td>4444444444</td>
<td>4444444444</td>
</tr><tr>
<td>5555555555</td>
<td>5555555555</td>
<td>5555555555</td>
<td>5555555555</td>
</tr>
</table>
</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