lunes, 28 de julio de 2014

Demo 1 de jQuery

Para empezar vamos a ver este ejemplo, donde tenemos dos botones y un texto. Al pulsar un botón, cambiaremos el texto y al pulsar el otro pondremos otro texto distinto. 
Podemos ver el ejemplo en marcha en una página aparte. En este ejemplo tenemos una capa que tiene este código

<div id="capa" style="padding: 10px; background-color: #ff8800">Haz clic en un botón</div>

Luego tenemos dos botones con estos códigos:

<input type="button" value="Botón A" onclick="$('#capa').html('Has hecho clic en el botón <b>A</b>')">
<input type="button" value="Botón B" onclick="$('#capa').html('Recibido un clic en el botón <b>B</b>')">


Como se puede ver, en los botones hay definidos un par de eventos onclick (uno en cada uno) que ejecutan una instrucción Javascript cuando se hace clic sobre ellos. La instrucción está en Javascript, pero hace uso de algunas herramientas disponibles en jQuery para trabajo con los elementos de la página. En este caso, por explicarlo rápidamente, se hace una selección del elemento DIV de la capa y luego se ejecuta un método sobre él para cambiar el contenido HTML del elemento.

No hay comentarios:

Publicar un comentario