Saltar la navegación

Ejemplo jQuery

Vamos a hacer una "traducción" del ejemplo anterior: de JavaScript a jQuery.

Asignación de eventos

Usaremos:

$(function(){
    ....
});

En lugar de:

window.onload = function(){
    ....
}

El código de jQuery se ejecuta cuando el DOM ha cargado, mientras que el otro se ejecuta cuando la página (incluidos todos sus elementos: imágenes, etc.) termina de cargar. Más información en https://api.jquery.com/ready/

Haremos uso de la sintaxis de jQuery:

$("#contactForm").submit(function(){
    ...
});

En lugar de:

document.getElementById("contactForm").onsubmit = function(){
	...
}

DOM (nuevos elementos)

jQuery nos facilita enormemente la manipulación del DOM. Ejemplo:

$("#enviar").after('<span id="errores">Por favor, rellena todos los campos</span>');

Descarga el ejemplo completo (HTML + jQuery)

Recuerda que...

  • Todo lo que hacemos con jQuery podemos hacerlo usando únicamente JavaScript, aunque a veces con mucho más código.
  • jQuery, como otras librerías, nos facilita la tarea. Nos permite hacer más escribiendo menos.
  • No hemos hecho más que ejemplos sencillos. JavaScript nos permite hacer mucho más.