Demo muy simple de uso de jQuery

  • Por
Vamos a hacer nuestro primer script en jQuery, con unas funcionalidades muy simples, para que sirva de demo de uso de este framework.
Con objetivo de que los lectores puedan hacerse una rápida idea de las posibilidades de jQuery, escribiendo unas brevísimas líneas de código Javascript, vamos a publicar un par de ejemplos bien simples que nos ilustren, pero sin complicarnos demasiado. Nos servirán para la introducción a jQuery que estamos publicando en el Manual de jQuery.

La idea de este artículo no es explicar las funcionalidades que vamos a demostrar, sino ver el poco código que hemos tenido que escribir para realizar unos scripts con dinamismos sencillos. Quizás los scripts en si no digan mucho a un lector poco experimentado, pero los que ya han tenido contacto con los pormenores que hay que seguir para hacer estos efectos, de manera que sean compatibles con todos los navegadores, sabrán que jQuery nos ha simplificado mucho nuestra tarea.

Así pues, no te preocupes demasiado con los detalles de estos códigos, que los explicaremos en DesarrolloWeb.com más adelante con detalle.

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.

Demo 2 de jQuery

En este otro ejemplo vamos a ver algo un poquito más complejo. Bueno, realmente no tiene mucha mayor complejidad, pero estamos utilizando jQuery de una manera un poco distinta, que requiere algo más de código por nuestra parte. Ahora vamos a tener dos capas en nuestra página. Una capa estará siempre visible y otra capa aparecerá inicialmente oculta y la vamos a mostrar u ocultar dependiendo de si el usuario coloca el ratón encima de la capa que está siempre visible.

Para hacerse una idea exacta de nuestro ejemplo puedes verlo en una ventana aparte.

En este segundo ejemplo tenemos este código HTML, con las dos capas.

<div id="capa" style="padding: 10px; background-color: #ff8800;">Pon el ratón encima de esta capa</div>
<br>
<div id="mensaje" style="display: none;">Has puesto el ratón encima!! <br>(Ahora quítalo de la capa)</div>


Ahora vamos a tener un código Javascript con jQuery que defina los eventos del usuario, para cuando sitúa el ratón dentro o fuera de la primera capa.

$("#capa").mouseenter(function(evento){
   $("#mensaje").css("display", "block");
});
$("#capa").mouseleave(function(evento){
   $("#mensaje").css("display", "none");
});

De esta sencilla manera, hemos creado dos eventos en el DIV con id="capa". Además, hemos definido el código de los eventos por medio de funciones, que se encargarán de mostrar o ocultar la segunda capa con id="mensaje".

$("#mensaje").css("display", "block");

Esto nos selecciona la capa con id "mensaje" y con el método css() indicamos que queremos cambiar el atributo "display" al valor "block" de ese elemento.

$("#mensaje").css("display", "none");

Esta otra línea muy similar, simplemente cambia el "display" a "none" para ocultar el elemento.

Esperamos que estos dos ejemplos te hayan servido para ver rápidamente algunas cosas que se pueden hacer con jQuery con muy poco esfuerzo y que funcionan en todos los navegadores.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Martin

15/2/2010
Ayuda
Ayudagente quiero hacer un include cuando le doy a un boton . Aqui les dejo mi código . No se inserta nad ):

<!--Abrimos la tabla donde insertamos la capa -->
<center><table width="50%" border="0">
<tr>
<td><center><input class="boton" type="button" value="Cortar" onclick="$('#emergent').html('<?php include('cortar.php'); ?>')"></center></td>
<td><center><input class="boton" type="button" value="Copiar" onclick="$('#emergent').html('<?php include('copiar.php'); ?>')"></center></td>
<td><center><input class="boton" type="button" value="Eliminar" onclick="$('#emergent').html('<?php include('delete.php'); ?>')" /></center></td>
<td><center><input class="boton" type="button" value="Eliminar Dir" onclick="$('#emergent').html('<?php include('del_dir.php'); ?>')" /></center></td>
<td><center><input class="boton" type="button" value="Renombrar" onclick="$('#emergent').html('En cambio esto si que lo teclea en la capa')" /></center></td>
</tr>
</table>
<table width="50%" border="0">
<tr>
<td><div id="emergent" classs="curved"></div></td>
</tr>
</table></center>
<!-- cerramos la tabla-->

David

20/2/2013
Está bien pero...
Creo que deberíais especificar la parte del código que falta:

$(document).ready(function(){
...
blablabla
)}

En el ejemplo de la capa que aparece con el método mouseenter, de lo contrario no se entiende como se carga "automaticamente"

Enrique

23/4/2018
Optimizar el codigo o
Con respecto al codigo anterior estoy viendo y cree este

$(document).ready(function () {
$("#blue").mousemove(function (evento) {
$("#resulta").css("background-color", "lightblue");
});
$("#blue").mouseleave(function (evento) {
$("#resulta").css("background-color", "black");
});
$("#rojo").mousemove(function (evento) {
$("#resulta").css("background-color", "lightcoral");
});
$("#rojo").mouseleave(function (evento) {
$("#resulta").css("background-color", "black");
});
$("#verde").mousemove(function (evento) {
$("#resulta").css("background-color", "lightgreen");
});
$("#verde").mouseleave(function (evento) {
$("#resulta").css("background-color", "black");
});
$("#amarillo").mousemove(function (evento) {
$("#resulta").css("background-color", "yellow");
});
$("#amarillo").mouseleave(function (evento) {
$("#resulta").css("background-color", "black");
});

});

pero como veran es muy largo y repetitivo, tengan paciencia , hoy es mi primer dia con este framework

sidarta_108

03/11/2018
Gracias.
$(document).ready(function(){
$("#capa").mouseenter(function(evento){
$("#mensaje").css("display", "block");
});
$("#capa").mouseleave(function(evento){
$("#mensaje").css("display", "none");
});
});