Conceptos de JQuery

jQuery facilita la administración de eventos de JavaScript y lo más importante nos hace transparente la diferencia en la registración de eventos entre distintos navegadores (IExplorer, FireFox, Chrome, Safari, Opera)

En este tutorial ya hemos utilizado el manejador de eventos:

$(documento).ready(nombre de función)

Dijimos que este función que registramos mediante el método ready se ejecuta cuando el DOM del documento está en memoria. Si no utilizamos la librería jQuery hacemos esto a través del evento addEventListener.

Otro evento que vimos en conceptos anteriores es el click de un elemento, la sintaxis utilizada:

  var x;
  x=$("button");
  x.click(presionBoton)

Con este pequeño código registramos la función presionBoton para todos los elementos de tipo button del documento.

Con este otro código:

  var x;
  x=$("#boton1");
  x.click(presionBoton)

solo se registra para el elemento con id con valor "boton1".

Por último con este código se registra para todos los elementos "button" que dependen del div con valor de id igual a "formulario1":

  var x;
  x=$("#formulario1 button");
  x.click(presionBoton)

Para reafirmar estos conceptos confeccionaremos una página que muestre un párrafo, luego una tabla que contenga dos párrafos y por último otra tabla que contenga dos párrafos. Capturaremos el evento click de todos los párrafos del documento y mostraremos un mensaje indicando:'se presionó un párrafo del documento', también capturaremos el evento click de los dos párrafos de la segunda tabla y mostraremos: 'se presionó un párrafo contenido en la segunda tabla.'.

pagina1.html

<!DOCTYPE html>
<html>

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

<body>
  <p>Párrafo fuera de la tabla</p>
  <table border="1">
    <tr>
      <td>
        <p>Párrafo dentro de la primer tabla.</p>
      </td>
      <td>
        <p>Párrafo dentro de la primer tabla.</p>
      </td>
    </tr>
  </table>
  <br>
  <table border="1" id="tabla2">
    <tr>
      <td>
        <p>Párrafo dentro de la segunda tabla.</p>
      </td>
      <td>
        <p>Párrafo dentro de la segunda tabla.</p>
      </td>
    </tr>
  </table>

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

</html>

funciones.js

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

function inicializarEventos() {
  let x = $("p");
  x.click(presionParrafoDocumento);
  x = $("#tabla2 p");
  x.click(presionpresionParrafoSegundaTabla);
}

function presionParrafoDocumento() {
  alert('se presionó un párrafo del documento');
}

function presionpresionParrafoSegundaTabla() {
  alert('se presionó un párrafo contenido en la segunda tabla.');
}

El siguiente código asocia a cada elemento de tipo "p" (párrafo del documento) la función 'presionParrafoDocumento':

  let x = $("p");
  x.click(presionParrafoDocumento);

Luego cuando ejecutemos este documento cada vez que presionemos un párrafo de la página mostrará el mensaje 'se presionó un párrafo del documento'.

También asociamos otra función para el evento click de los párrafos contenidos dentro de la segunda tabla:

  x = $("#tabla2 p");
  x.click(presionpresionParrafoSegundaTabla);

Esto significa que los párrafos contenidos en la segunda tabla tienen asociados dos funciones para el evento click, luego cuando presionemos alguno de los párrafos de la segunda tabla aparecerán los dos mensajes: 'se presionó un párrafo del documento' y 'se presionó un párrafo contenido en la segunda tabla.'

11 - Administración de eventos con jQuery.

Retornar