Categoria: Programacion Tema: Java script - Java Titulo: Seleccion de un elemento mediante el id jQuery
Fecha del Tema: 2013-04-15 19:01:25Selecció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: <?php //esto no va $("#nombre del id") ?>//esto no va 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 <?php //esto no va <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> ?>//esto no va funciones.js <?php //esto no va 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"); } ?>//esto no va 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: <?php //esto no va var x; x=$(document); x.ready(inicializarEventos); ?>//esto no va 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: <?php //esto no va function inicializarEventos() { var x; x=$("#titulo1"); x.click(presionTitulo1) x=$("#titulo2"); x.click(presionTitulo2) } ?>//esto no va Es importante notar que cuando obtenemos la referencia de un elemento por medio del id se le antecede el caracter # al nombre del id: <?php //esto no va x=$("#titulo1"); ... x=$("#titulo2"); ?>//esto no va Luego las dos funciones que se ejecutan al presionar los títulos: <?php //esto no va 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"); } ?>//esto no va 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: <?php //esto no va var x; x=$("#titulo1"); x.css("color","#ff0000"); ?>//esto no va 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: <?php //esto no va x.css("background-color","#ffff00"); x.css("font-family","Courier"); ?>//esto no va 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.
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: <?php //esto no va $("#nombre del id") ?>//esto no va 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 <?php //esto no va <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> ?>//esto no va funciones.js <?php //esto no va 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"); } ?>//esto no va 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: <?php //esto no va var x; x=$(document); x.ready(inicializarEventos); ?>//esto no va 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: <?php //esto no va function inicializarEventos() { var x; x=$("#titulo1"); x.click(presionTitulo1) x=$("#titulo2"); x.click(presionTitulo2) } ?>//esto no va Es importante notar que cuando obtenemos la referencia de un elemento por medio del id se le antecede el caracter # al nombre del id: <?php //esto no va x=$("#titulo1"); ... x=$("#titulo2"); ?>//esto no va Luego las dos funciones que se ejecutan al presionar los títulos: <?php //esto no va 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"); } ?>//esto no va 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: <?php //esto no va var x; x=$("#titulo1"); x.css("color","#ff0000"); ?>//esto no va 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: <?php //esto no va x.css("background-color","#ffff00"); x.css("font-family","Courier"); ?>//esto no va 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.
