Categoria: Programacion Tema: Java script - Java Titulo: Seleccionar un elemento html mediante su id
Fecha del Tema: 2012-04-18 19:31:20 Selección de un elemento del documento mediante el id. La sintaxis para seleccionar un elemento particular de la página mediantela propiedad id es: <? //esto no va $("#nombre del id") ?> //esto no va Confeccionaremos un problema para ver como obtenemos la referencia aelementos 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 deltexto. <? //esto no va 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"); } ?> //esto no va Como va ser costumbre siempre que trabajemos con esta librería primerocreamos un objeto jquery a partir de la referencia a `document` y luegollamamos al método ready indicándole el nombre de la función que debeejecutarse luego de generarse el árbol de elementos HTML para la página: <? //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áginay 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 leasignamos al evento click una función distinta que se disparará cuandopresionemos con el mouse: <? //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 pormedio del id se le antecede el caracter # al nombre del id: <? //esto no va x=$("#titulo1"); ... x=$("#titulo2"); ?>//esto no va Luego las dos funciones que se ejecutan al presionar los títulos: <? //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: <? //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 almétodo css que tiene dos parámetros: el primero indica el nombre de lapropiedad y el segundo el valor a asignarle. Podemos ver las otras dosasignaciones: <? //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 mediantela propiedad id es: <? //esto no va $("#nombre del id") ?> //esto no va Confeccionaremos un problema para ver como obtenemos la referencia aelementos 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 deltexto. <? //esto no va 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"); } ?> //esto no va Como va ser costumbre siempre que trabajemos con esta librería primerocreamos un objeto jquery a partir de la referencia a `document` y luegollamamos al método ready indicándole el nombre de la función que debeejecutarse luego de generarse el árbol de elementos HTML para la página: <? //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áginay 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 leasignamos al evento click una función distinta que se disparará cuandopresionemos con el mouse: <? //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 pormedio del id se le antecede el caracter # al nombre del id: <? //esto no va x=$("#titulo1"); ... x=$("#titulo2"); ?>//esto no va Luego las dos funciones que se ejecutan al presionar los títulos: <? //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: <? //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 almétodo css que tiene dos parámetros: el primero indica el nombre de lapropiedad y el segundo el valor a asignarle. Podemos ver las otras dosasignaciones: <? //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.
Fecha del mensaje: 2012-05-07 09:25:49 Ambos posts son de Javascript. Java tenia más cosa que esto :P
Ambos posts son de Javascript. Java tenia más cosa que esto :P
Fecha del mensaje: 2012-05-07 18:39:10 Claro que si raul, esto solo explica la parte de eventos mediante su id dehtml en java script, y modificar sus propiedades css. Si te animas a seguircon este hilo lo dejo a tu cargo quizás en un futuro a la gente le agradey realicen consultas. Gracias por el comentario, un saludo grande.
Claro que si raul, esto solo explica la parte de eventos mediante su id dehtml en java script, y modificar sus propiedades css. Si te animas a seguircon este hilo lo dejo a tu cargo quizás en un futuro a la gente le agradey realicen consultas. Gracias por el comentario, un saludo grande.
Fecha del mensaje: 2012-05-08 21:31:30 Ya, por eso digo como el Tema esta con el nombre de Java, te decía que noes lo mismo javascript de Java. Cambiando de tema yo ahora estoy haciendo un pequeño proyecto enJavascript combinando una cosa de la uni. Es un tipo de encryptación en lacual mediante 2 llaves y un texto llegas a encryptar un mensaje. ConJavascript hago toda la fase de validación y tal, ya os diré algo cuandolo termine
Ya, por eso digo como el Tema esta con el nombre de Java, te decía que noes lo mismo javascript de Java. Cambiando de tema yo ahora estoy haciendo un pequeño proyecto enJavascript combinando una cosa de la uni. Es un tipo de encryptación en lacual mediante 2 llaves y un texto llegas a encryptar un mensaje. ConJavascript hago toda la fase de validación y tal, ya os diré algo cuandolo termine
Fecha del mensaje: 2012-05-08 22:57:31 Perfecto, tienes razón tendría que separar java de java script, y conrespecto a lo que estas haciendo en la uni me parece muy bien cuandoquieras te abres un tema le pones un titulo y te expresas como tu sabesjejej!! Saludos cordiales.
Perfecto, tienes razón tendría que separar java de java script, y conrespecto a lo que estas haciendo en la uni me parece muy bien cuandoquieras te abres un tema le pones un titulo y te expresas como tu sabesjejej!! Saludos cordiales.
Java script - Java