Paco Arce

viernes, 15 de febrero de 2013

Los eventos del ratón en jQuery

click y dbclick

Una de las enormes ventajas que tenemos con jQuery son los eventos. Dos de ellos, que funcionan a la perfección, son el click y el doble click, que lo podemos aplicar a cualquier elemento del documento, como puede ser una imagen, un párrafo o una tabla.

mouseenter y mouseleave

Otros eventos que son muy utilizados en las animaciones y efectos que podemos realizar con jQuery son mouseenter y mouseleave, que nos permiten realizar efectos "rollover" y "rollout". Estos efectos los podemos aplicar tanto en imágenes, textos y otros elementos del documento.

mousedown y mouseover

Los eventos mousedown y mouseover nos permitirán detectar cuando el apuntador del ratón izquierdo está abajo o cuando arriba. Con ellos podremos hacer muchos efectos interesantes, ya que los podemos aplicar a cualquier elemento de la página.

hover

El método hover() toma dos funciones tipo callback y es la combinación de los métodos mouseenter() y mouseleave().

La primer función se ejecuta cuando el apuntador del ratón entra al elemento HTML y la segunda función se activa cuando el apuntador del ratón sale del elemento.

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

focus()

El evento focus() se dispara cuando el apuntador del ratón entra a una caja de un formulario HTML. La función se ejecuta cuando tenemos el "foco" sobre el campo:

$("input").focus(function(){
$(this).css("background-color","#cccccc");
});

blur()

El evento blur() se dispara cuando el apuntador del ratón sale de una caja de un formulario HTML. La función se ejecuta cuando perdemos el "foco" sobre el campo:

$("input").blur(function(){
$(this).css("background-color","#ffffff");
});

keydown()

El evento keydown() se dispara cuando pulsamos una tecla dentro de una caja de un formulario HTML.

$("input").keydown(function(){
$("input").css("background-color","yellow");
});

keyup()

El evento keyup() se dispara cuando levantamos la tecla de una caja de un formulario HTML.

$("input").keydown(function(){
$("input").css("background-color","#ffffff");
});

jueves, 14 de febrero de 2013

Eliminar elementos desde jQuery

Existen dos métodos en jQuery que nos permiten eliminar elementos de una página web. Estos son:

remove(): Elimina los subnodos y el nodo contenedor.
empty(): Elimina los subnodos o elementos hijos, pero no al contenedor. Sólo lo vacía.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Remove</title>
<style>
.autor{
    text-align:right;
    font-style:italic;
}
.caja{
    width:300px;
    background-color:#FF9;
    border-color:black;
    height:200px;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#borraPoema").click(onBorraPoema);
    $("#borraAutor").click(onBorraAutor);
    $("#vaciaPoema").click(onVaciaPoema);
}
function onBorraPoema(){
    $("div").remove();
}
function onBorraAutor(){
    $("p").remove(".autor");
}
function onVaciaPoema(){
    $("div").empty();
}
</script>
</head>
<body>
<div class="caja">
<p>En el agua clara</p>
<p>que brota en la fuente</p>
<p>un lindo pescado</p>
<p>sale de repente</p>
<p class="autor">Autor anónimo</p>
</div>
<input type="button" value="Borra poema" id="borraPoema"/>
<input type="button" value="Borra autor" id="borraAutor"/>
<input type="button" value="Vacia poema" id="vaciaPoema"/>
</body>
</html>

Ejemplo: http://pacoarce.com/jQuery/Remove.html
Curso completo en: https://www.udemy.com/jquery-y-mobile/

miércoles, 13 de febrero de 2013

Añadir elementos con after() y before()

Otra funcionalidad muy práctica en jQuery es que podemos añadir elementos antes y depués de otro elemento encontrado. esto lo podemos hacer por medio de los métodos after() y before(). En el siguiente ejemplo añadiremos un párrafo, un botón y una imagen, los cuales no existen en la página inicial:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>After/Before</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#respuesta").click(onRespuesta);
}
function onRespuesta(){
    $("p").after("<p id='res'>Sandro de Botticelli</p>");
    $("#respuesta").before("<input type='button' id='pintura' value='Ver pintura'/>");
    $("#pintura").click(onPintura);
    $("#respuesta").attr("disabled","disabled");
}
function onPintura(){
    $("#res").after("<img src='imagenes/afrodita.jpg'/>");
    $("#pintura").attr("disabled","disabled");
}
</script>
</head>
<body>
<input type="button" id="respuesta" value="Respuesta" />
<p>¿Quién pintó el nacimiento de Venus en 1484?</p>
</body>
</html>

Ejemplo: http://pacoarce.com/jQuery/AfterBefore.html
Curso completo en: https://www.udemy.com/jquery-y-mobile/

Añadir texto al inicio de un objeto con prepend()

Asi como tenemos el método append(), que añade texto al final de un párrafo, tenemos el método prepend() para añadirlo al inicio. Aunque es un poco menos común su uso, aqui ponemos un ejemplo del mismo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Val</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
var poema = new Array()
poema.push("EN EL AGUA CLARA");
poema.push("QUE BROTA EN LA FUENTE,");
poema.push("UN LINDO PESCADO");
poema.push("SALE DE REPENTE");
poema.push("-LINDO PESCADITO,");
poema.push("¿NO QUIERES VENIR");
poema.push("A JUGAR CON MI ARO?");
poema.push("VAMOS AL JARDIN");
var i = poema.length-1;;
var ii = i;
$(document).ready(inicio);
function inicio(){
    $("#boton1").click(onTexto);
    $("#boton2").click(onLista);
}
function onTexto(){
    if(i>=0){
        $("p").prepend(poema[i]+"<br>");
        i--;
    }
}
function onLista(){
    if(ii>=0){
        $("ol").prepend("<li>"+poema[ii]+"</li>");
        ii--;
    }
}
</script>
</head>
<body>
<input type="button" value="Añadir texto" id="boton1"/>
<input type="button" value="Añadir lista" id="boton2"/>
<p></p>
<ol></ol>
</body>
</html>

Ejemplo: http://pacoarce.com/jQuery/Prepend.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

Añadir texto por medio del método append()

El métod append() nos permite añadir texto al final del que ya existe. El método text() los sustituye, pero append() lo anexa. También puede anezar a cualquier elemento de la página, por ejemplo a una lista, ya sea ordenada o sin orden.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="jquery.js">
</script>
<script>
var i = 0;
var ii = 0;
var poema = new Array()
poema.push("EN EL AGUA CLARA");
poema.push("QUE BROTA EN LA FUENTE,");
poema.push("UN LINDO PESCADO");
poema.push("SALE DE REPENTE");
poema.push("-LINDO PESCADITO,");
poema.push("¿NO QUIERES VENIR");
poema.push("A JUGAR CON MI ARO?");
poema.push("VAMOS AL JARDIN");
$(document).ready(function(){
$("#btn1").click(function(){
    $("p").append(poema[i]+"<br>");
   i++;
});

$("#btn2").click(function(){
    $("ol").append("<li>"+poema[ii]+"</li>");
   ii++;
});
});
</script>
</head>

<body>
<button id="btn1">Añade texto</button>
<button id="btn2">Aumenta la lista ordenada</button>
<p></p>
<ol></ol>
</body>
</html>

Ejemplo: http://pacoarce.com/jQuery/Append.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

Leer los resultados de un combo por medio del método val()

El método val() nos permite leer inforación de los comobo box, ya sea que nos regrese un sólo valor <select> o que nos regren múltiples valores <select multiple="multiple">. En este último caso, necesitamos interpretar el resultado como un arreglo. Si ningún valor ha sido seleccionado, regresa un valor null.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
p { color:red; margin:4px; }
b { color:blue; }
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
   $("select").change(muestraValores);
   muestraValores();
}
function muestraValores() {
   var unValor = $("#estado").val();
   var muchosValores = $("#idiomas").val() || [];
   $("p").html("<b>Estado:</b> " +
   unValor +
   " <b>Idiomas:</b> " +
   muchosValores.join(", "));
}
</script>
<title>Val ComboBox</title>
</head>
<body>
<p></p>
<br>
<select id="estado">
<option>Soltero</option>
<option>Casado</option>
<option>Divorciado</option>
<option>Viudo</option>
</select>
<br>
<br>
<select id="idiomas" multiple="multiple">
<option selected="selected">Español</option>
<option>Inglés</option>
<option selected="selected">Francés</option>
<option >Alemán</option>
</select>
</body>
</html>

Ejemplo: http://pacoarce.com/jQuery/ValSelect.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

martes, 12 de febrero de 2013

Escribir en una caja de texto desde jQuery

Otra de las funciones que tiene el método val() es poder escribir en cajas de texto (input) dentro de las formas. No solo podemos leer y escribir en las cajas de input, si no en cualquier elemento de una forma.

El siguiente ejemplo muestra como grabar en cajas de entrada:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Val</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#normal").click(onTitulo);
    $("#secreto").click(onChica);
    $("#artistico").click(onMediana);
}
function onTitulo(){
    $("#nombre").val("Paco");
    $("#apellido").val("Loco");
}
function onChica(){
    $("#nombre").val("James");
    $("#apellido").val("Bond");
}
function onMediana(){
    $("#nombre").val("Pato");
    $("#apellido").val("Lucas");
}
</script>
</head>
<body>
<input type="text" id="nombre">
<input type="text" id="apellido">
<br>
<input type="button" id="normal" value="Nombre normal">
<input type="button" id="secreto" value="Nombre secreto">
<input type="button" id="artistico" value="Nombre artístico">
<p></p>
</body>
</html>

Ejemplo: http://pacoarce.com/jQuery/ValEscribe.html
Curso completo: https://www.udemy.com/jquery-y-mobile/