Temas > Programacion > Java script - Java > Seleccion de elementos utilizando el selector CSS
Julio

Selección de elementos utilizando los selectores CSS
Una de las características más interesantes de jQuery
es poder obtener la referencia de elementos del DOM
utilizando para ello selectores de CSS (Significa que el 
manejo de Hojas de estilo nos facilita las cosas).
El primer problema que dispondremos será ocultar todos
los list item de una lista desordenada, dispondremos dos
listas en la página por lo que conocemos hasta ahora no
nos sirve indicar:
<?php //esto no va
x=$("li");
?>//esto no va
ya que esto nos selecciona todos los elementos de tipo li 
de la página y nosotros queremos solo los de una de las listas.
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>
 <input type="button" value="ocultar item primer lista"
 id="boton1">
 <h2>Lista 1</h2>
 <ul id="lista1">
 <li>Opción número 1</li>
 <li>Opción número 2</li>
 <li>Opción número 3</li>
 <li>Opción número 4</li>
 </ul>
 <h2>Lista 2</h2>
 <ul #id="lista3">
 <li>Opción número 1</li>
 <li>Opción número 2</li>
 <li>Opción número 3</li>
 <li>Opción número 4</li>
 </ul>
 </body>
 </html>
?>//esto no va
Cada lista tiene definido su atributo id.
funciones.js
<?php //esto no va
 var x;
 x=$(document);
 x.ready(inicializarEventos);
 function inicializarEventos()
 {
    var x;
    x=$("#boton1");
    x.click(ocultarItem);
 }
 function ocultarItem()
 {
    var x;
    x=$("#lista1 li");
    x.hide();
 }
?>//esto no va
En la función inicializarEventos obtenemos la referencia del
botón mediante su id y llamamos al método click:
<?php //esto no va
function inicializarEventos()
{
   var x;
   x=$("#boton1");
   x.click(ocultarItem);
}
?>//esto no va
Ahora lo nuevo es obtener la referencia de todos los elementos li
que pertenecen a la primer lista:
<?php //esto no va
   var x;
   x=$("#lista1 li");
   x.hide();
?>//esto no va
Pasamos a la función $ el selector CSS que accede a todos los 
elementos de tipo li contenidos en #lista1.
Todas las reglas de CSS están disponibles para seleccionar los 
elementos del DOM.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

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