Tutorial JQuery - Evento CLICK

Uno de los eventos que más utilizaremos  es el evento click, ya que se aplica tanto a los enlaces, como a los botones principalmente, o bien, a cualquier elemento que queramos, y bueno pues es el evento mas común con el ratón.Para mostrar su uso supongamos que tenemos en nuestra página web un botón con el siguiente código HTML:

<input type=”button” value=”Da click aquí” id=”botonPrueba”/>

Ahora supongamos que deseamos mostrar una ventana emergente con un mensaje al momento de dar click sobre este botón, para esto el código Jquery necesario sería el siguiente:

$(document).ready(function(){

      $(“#botonPrueba”).click(function(){
            alert(“Acabas de presionar un botón!!!!”);
        });
});

La primera parte $(document).ready(function(){}); , sirve para que el código javascript se ejecute después de que se haya cargado completamente el código HTML. La segunda parte   

    $(“#botonPrueba”).click(function(){
            alert(“Acabas de presionar un botón!!!!”);
        });

sirve para indicar el evento click y esta conformado de los siguientes elementos:

• El selector $(“#botonPrueba”) que sirve para indicar a que elemento se le aplicará el efecto, en este caso el elemento con un id=”botonPrueba”.
• El evento .click(function…) , que sirve para indicar que acción debe realizar el usuario para que se ejecute un determinado programa.
• La función (function(){…}) que es el código ha ejecutarse cuando el usuario de click.