Introducción

¿Para qué sirve?

Implementa funciones complejas: "drag and drop", "auto completar", "animaciones", "máscaras"...

La librería se asegura de mantener la compatibilidad entre navegadores.

chistea de lo que ha pasado en la historia con los diferentes frameworks de Javascript

Instalación

http://jquery.com/: sitio oficial de la librería.

Ahí puedes descargar el archivo para tus proyectos.

En cada página que lo requiera, habrá que agregar:

<script type="text/javascript" src="jquery.js"></script>

Para cargar la librería a partir de los repositorios de google:
https://developers.google.com/speed/libraries/

Ejemplo básico

Llamada a función I

Llamada a función 1
<script type="text/javascript" src="jquery.js"></script>
<script>
	$(document).ready(inicializar);

	function inicializar(){
		alert("hola");
	}
</script>
	

$(document) espera a que el código de la página esté cargado, si quiero esperar a que además las imágenes de la página estén cargadas usaré $(window) en su lugar.

Llamada a función II

Llamada a una función
<script type="text/javascript" src="jquery.js"></script>
<script>
	$(document).ready(inicializar);

	function inicializar(){
		$("#boton").on('click', botonPulsado);
	}

	function botonPulsado(){
		alert("Boton pulsado");
	}
</script>

<input type="button" id="boton"/>

Llamada a función III

Llamada a función 3
<script>
	$(document).ready(inicializar);

	function inicializar(){
		$("#boton").on('click', function(){
			alert("Boton pulsado");
		});
	}
</script>

<input type="button" id="boton"/>

Llamada a función IV

Llamada a función 4
<script>
	$(inicializar);

	function inicializar(){
		$("#boton").on('click', function(){
			alert("Boton pulsado");
		});
	}
</script>

<input type="button" id="boton"/>

Acerca de la función click

A veces esta función se llama dos veces en lugar de una. Esto suele ocurrir cuando genero la página dinámicamente y el evento click se añade varias veces. Para prevenirlo:

$(".button").off('click').on('click', function(){
	alert('has hecho click');
});

Es como si una persona tuviese muchas orejas y cada vez que alguien le da los buenos días, saludase una vez por cada oreja que tiene. Si sólo queremos que salude una vez, deberíamos dejarla con sólo una oreja.

icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.