5 - 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:

x=$("li");

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

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</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="lista2">
    <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>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

Cada lista tiene definido su atributo id.

funciones.js

let x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
  let x=$("#boton1");
  x.click(ocultarItem);
}

function ocultarItem()
{
  let x=$("#lista1 li");
  x.hide();
}

En la función inicializarEventos obtenemos la referencia del botón mediante su id y llamamos al método click:

function inicializarEventos()
{
  let x=$("#boton1");
  x.click(ocultarItem);
}

Ahora lo nuevo es obtener la referencia de todos los elementos li que pertenecen a la primer lista:

  let x=$("#lista1 li");
  x.hide();

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.


Retornar