4 - Selección de elementos por el tipo de elementos.

La sintaxis para tener la referencia de todos los elementos de cierto tipo (a, p, h1, etc.):

$("nombre del elemento")

Es decir es casi igual que obtener la referencia de un elemento particular mediante el id, solo difiere en que no le antecedemos el caracter #.

Podemos con esto definir funciones comunes a un conjunto de elementos.

ProblemaConfeccionar una tabla con 5 filas. Hacer que cambie de color la fila que se presiona con el mouse. Obtener la referencia a todos los elementos 'tr'.

pagina1.html

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</head>

<body>
  <table border="1">
    <tr>
      <td>1111111111</td>
      <td>1111111111</td>
      <td>1111111111</td>
      <td>1111111111</td>
    </tr>
    <tr>
      <td>2222222222</td>
      <td>2222222222</td>
      <td>2222222222</td>
      <td>2222222222</td>
    </tr>
    <tr>
      <td>3333333333</td>
      <td>3333333333</td>
      <td>3333333333</td>
      <td>3333333333</td>
    </tr>
    <tr>
      <td>4444444444</td>
      <td>4444444444</td>
      <td>4444444444</td>
      <td>4444444444</td>
    </tr>
    <tr>
      <td>5555555555</td>
      <td>5555555555</td>
      <td>5555555555</td>
      <td>5555555555</td>
    </tr>
  </table>

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

funciones.js

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

function inicializarEventos() {
  let x = $("tr");
  x.click(presionFila);
}

function presionFila() {
  let x = $(this);
  x.css("background-color", "#eeeeee");
}

Con la siguiente sintaxis obtenemos la referencia a todos los elementos HTML de tipo 'tr':

  let x = $("tr");
  x.click(presionFila);

y a todos ellos los enlazamos con la función presionFila

Cuando se presiona cualquiera de las filas de la tabla se ejecuta la siguiente función:

function presionFila() {
  let x = $(this);
  x.css("background-color", "#eeeeee");
}

Para obtener la referencia de que elemento en particular disparó el evento podemos hacerlo de la siguiente manera: 

  let x = $(this);

this una función de JavaScript que se usa en conjunto con jQuery mediante el selector $(this) y nos permite obtener la referencia del elemento que emitió el evento.

y a partir de esta referencia llamar al método css.


Retornar