Curso de jQuery | Ejemplo básico 1

Curso de jQuery
Ejemplo básico

Curso de jQuery | Ejemplo básico 2

Llamada a función I

<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

<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

<script>
 $(document).ready(inicializar);

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

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

Llamada a función IV

<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.