Temas > Programacion > Java script - Java > Seleccionar un elemento html mediante su id
Julio

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:
<? //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.

<? //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 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:
<? //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:
<? //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:
<? //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 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:
<? //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.







Raul86

Ambos posts son de Javascript. Java tenia más cosa que esto :P



Julio

Claro que si raul, esto solo explica la parte de eventos mediante su id de
html en java script, y modificar sus propiedades css. Si te animas a seguir
con este hilo lo dejo a tu cargo quizás en un futuro a la gente le agrade
y realicen consultas.
Gracias por el comentario, un saludo grande.



Raul86

Ya, por eso digo como el Tema esta con el nombre de Java, te decía que no
es lo mismo javascript de Java.

Cambiando de tema yo ahora estoy haciendo un pequeño proyecto en
Javascript combinando una cosa de la uni. Es un tipo de encryptación en la
cual mediante 2 llaves y un texto llegas a encryptar un mensaje. Con
Javascript hago toda la fase de validación y tal, ya os diré algo cuando
lo termine



Julio

Perfecto, tienes razón tendría que separar java de java script, y con
respecto a lo que estas haciendo en la uni me parece muy bien cuando
quieras te abres un tema le pones un titulo y te expresas como tu sabes
jejej!!
Saludos cordiales.









¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
 123456
78910111213
14151617 181920
21222324252627
282930    

Viernes 18 de Abril 2025
Semana 16



Java script - Java


-Input type submit con evento onclick
-Maneras de salir de un iframe con java script
-Sintaxis de un list array en java
-Consumir un JSON desde PHP
-Producir JSON desde PHP
-Mostrar un tooltip con datos recuperados en jQuery
-Menu desplegable en jQuery
-Llamadas encadenadas de metodos del objeto jQuery
-Funcion ajax en jQuery
-JSON en jQuery
-Pasando datos por los metodos GET y POST en jQuery
-Ajax metodos ajaxStart y ajaxStop en jQuery
-Ajax metodo load en jQuery
-Iteracion por los elementos each en jQuery
-Efecto con el metodo toggle en jQuery
-Efecto con el metodo fadeTo en jQuery
-Efectos con los metodos fadeIn y fadeOut en jQuery
-Efectos con los metodos show y hide en jQuery
-Manipulacion de los elementos del DOM en jQuery
-Evento blur en jQuery
-Evento focus en jQuery
-Evento dblclick en jQuery
-Eventos mousedown y mouseup en jQuery
-Evento mousemove en jQuery
-Evento hover en jQuery
-Eventos mouseover y mouseout en jQuery
-Administracion de eventos con jQuery
-Metodos html y html valor en jQuery
-Metodos addClass y removeClass en jQuery
-Metodos attr y removeAttr en jQuery
-Metodos text, text valor en jQuery
-Seleccion de elementos con la clase CSS definida
-Seleccion de elementos utilizando el selector CSS
-Seleccion de elementos por el tipo de elementos jQ
-Seleccion de un elemento mediante el id jQuery
-Nueva manera de programar JavaScript con jQuery
-Que es el jQuery
-Archivo JavaScript externo
-Propiedad screen del objeto window en java script
-Propiedad location de objeto window en java script
-El objeto window en java script
-Eventos onMouseOver y onMouseOut en java script
-Eventos onFocus y onBlur en java script
-Control TEXTAREA en java script
-Control RADIO en java script
-Control CHECKBOX en java script
-Control SELECT en java script
-Control PASSWORD en java script
-Controles FORM, BUTTON y TEXT en java script
-Formularios y Eventos en java script
-Clase Math en java script
-Clase String en java script
-Clase Array en java script
-Clase Date en java script
-Programacion orientada a objetos en java script
-Funciones que retornan un valor en java script
-Funciones con parametros en java script
-Funciones en java script
-Estructura repetitiva for en java script
-Estructura repetitiva do while en java script
-Concepto de acumulador en java script
-Estructura repetitiva (while) en java script
-Operadores logicos or en las estructuras java s
-Operadores logicos (and) en las estructuras java s
-Estructuras condicionales anidadas en java script
-Estructuras condicionales compuesta en jaca script
-Estructuras condicionales simples en java script
-Estructuras secuenciales en java script
-Entrada de datos por teclado en java script
-Variables en java script
-Que es JavaScript
-Lectura y escritura de archivos en java
-Entrada y salida estandar en Java
-Programa para contar vocales de un fichero en java
-Convertidor de divisas en java
-Form con una ventana nueva
..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar