Introducción
jQuery es una biblioteca de JavaScript que permite simplificar la escritura de código. Consiste de un conjunto de funciones y subrutinas que pueden utilizarse
cada vez que sea necesario.
jQuery toma muchas tareas comunes que requieren muchas líneas de JavaScript y las coloca en métodos que pueden ser invocados con una línea de código.
La biblioteca jQuery contiene las siguientes características:
Adicionalmente jQuery tiene plugins que permiten extender sus capacidades aún más para casi cualquier tarea. Existen otras bibliotecas para JavaScript tales como:
sin embargo jQuery es la más popular y además la más extendible.
Agregar biblioteca jQuery
Existen muchas formas de agregar jQuery a nuestras páginas, por ejemplo:
Cualquiera que sea el método que elija, jQuery debe agregarse al código HTML tal y como lo hace con cualquier JS.
Existen dos versiones de jQuery, desarrollo y producción. La versión de desarrollo incluye funcionalidades que se encuentran en fase de prueba, mientras
que la versión de desarrollo contiene las funciones que ya pasaron por la etapa de prueba y ha sido minimizada y comprimida. En la mayoría de los casos es
recomendable utilizar la versión de producción.
Sintaxis básica de jQuery.
La sintaxis jQuery está hecha para seleccionar elementos HTML y realizar alguna acción en estos elementos. La sintaxis básica es:
$(selector).action()
-
El símbolo $ define/accesa el inicio de jQuery.
-
El selector es el elemento que se aplicará o buscará en los elementos HTML
-
action() es la acción que jQuery realizará sobre los elementos.
Ejemplo: Oculta el elemento actual.
$(this).hide()
Ejemplo: Oculta todos los elementos <p>.
$("p").hide()
Ejemplo: Oculta todos los elementos de la clase prueba.
$(".prueba").hide()
Ejemplo: Oculta todos los elementos con id prueba.
$("#prueba").hide()
Es recomendable que todo el código que se escriba en jQuery se encuentre dentro del evento ready. Esto se hace para prevenir que el código se ejecute hasta que la
página ha sido completamente cargada y no antes. Si el código se ejecutase antes de que la página haya sido completamente cargada podrían ocurrir situaciones como:
Ejemplo 1. Comenzando con jQuery
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 1</title>
<script type="text/javascript" src="js/jquery.js">
</script>
<script>
$(document).ready(
function() {
$("p").click(
function() {
$(this).hide();
}
);
}
);
</script>
</head>
<body>
<p>Si me clickeas desapareceré.</p>
<p>Click!</p>
<p>Click!</p>
</body>
</html>
Ejemplo 2.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo 2</title>
<script type="text/javascript" src="js/jquery.js">
</script>
</head>
<body>
<div id="capa" style="padding: 10px; background-color: #ff8800">Haz clic en un botón</div>
<br>
<form>
<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>')">
</form>
</body>
</html>
Ejemplo 3.
HTML
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo 3</title>
<script type="text/javascript" src="js/jquery.js">
</script>
<script type="text/javascript" src="js/mijquery.js">
</script>
</head>
<body>
<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 quitalo de la capa)
</div>
</body>
</html>
JS
$(document).ready(function(){
$("#capa").mouseenter(function(evento){
$("#mensaje").css("display", "block");
});
$("#capa").mouseleave(function(evento){
$("#mensaje").css("display", "none");
});
})
Eventos jQuery
jQuery está hecho para responder a los eventos que ocurren en un página HTML. Un evento es cada una de las diversas acciones que puede llevar a cabo el usuario
que la página pueda responder. Un evento representa el momento preciso cuando algo ocurre.
Ejemplos:
-
Mover el ratón sobre un elemento.
-
Seleccionar un botón tipo radio.
-
Hacer click sobre un elemento.
Algunos eventos típicos son los siguientes:
| Ratón |
Teclado |
Formulario |
Documento / Ventana |
| click |
keypress |
submit |
load |
| dbclick |
kydown |
change |
resize |
| mouseenter |
keyup |
focus |
scroll |
| mouseleave |
|
blur |
unload |
Ejemplo 4.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo 4</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(
function() {
$("p").dblclick(
function() {
$(this).hide();
}
);
}
);
</script>
</head>
<body>
<p>¡Si me das doble click moriré!</p>
<p>¡¡No me mates!!</p>
<p>¡Por favor no!</p>
</body>
</html>
Ejemplo 5.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo 5</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(
function() {
$("button").click(
function() {
$("p").hide();
}
);
}
);
</script>
</head>
<body>
<h2>Encabezado</h2>
<p>Un párrafo</p>
<p>Otro párrafo</p>
<button>Presioname</button>
</body>
</html>
Ejemplo 6.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(
function() {
$("#p1").mouseenter(
function() {
alert("Has entrado a p1!");
}
);
}
);
</script>
</head>
<body>
<p id="p1">Entra a este párrafo.</p>
</body>
</html>
Ejemplo 7.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(
function() {
$("#p1").mouseleave(
function() {
alert("Has dejado p1!");
}
);
}
);
</script>
</head>
<body>
<p id="p1">Este es un párrafo!.</p>
</body>
</html>
El método hover() es la combinación de los métodos mouseenter() y mouseleave().
Ejemplo 8.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 8</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(
function() {
$("#p1").hover(
function() {
alert("Entraste al párrafo.");
},
function() {
alert("Saliste del párrafo.");
}
);
}
);
</script>
</head>
<body>
<p id="p1">Éste es un párrafo.</p>
</body>
</html>
El método focus() maneja el evento cuando un campo de un formulario recibe el foco de atención. El método blur() maneja el evento cuando
un campo pierde el foco de atención.
Ejemplo 9.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 9</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(
function() {
$("input").focus(
function() {
$(this).css("background-color","#cccccc");
}
);
$("input").blur(
function() {
$(this).css("background-color","#ffffff");
}
);
}
);
</script>
</head>
<body>
Nombre: <input type="text" name="nombre"><br>
Email: <input type="email" name="email">
</body>
</html>
Ejemplo 10. Modificar el contenido de párrafos y tablas.
HTML
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo 10</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="js/cambiaTexto.js">
</script>
</head>
<body>
<input type="button" value="Obtener el texto contenido en un párrafo" id="boton1"><br>
<input type="button" value="Modificar el texto de un párrafo" id="boton2"><br>
<input type="button" value="Modificar el texto de los elementos de una tabla" id="boton3"><br>
<p id="parrafo1">Texto del primer párrafo</p>
<table>
<tr>
<td>celda (1,1)</td><td>celda (1,2)</td>
</tr>
<tr>
<td>celda (2,1)</td><td>celda (2,2)</td>
</tr>
</table>
</body>
</html>
jQuery
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos () {
var x = $("#boton1");
x.click(extraerTexto);
x = $("#boton2");
x.click(modificarTexto);
x = $("#boton3");
x.click(modificarDatosTabla);
}
function extraerTexto () {
var x = $("#parrafo1");
alert(x.text());
}
function modificarTexto () {
var x = $("#parrafo1");
x.text("Nuevo texto del párrafo");
}
function modificarDatosTabla () {
var x = $("td");
x.text("Texto Nuevo");
}
Efectos en jQuery
Mostrar y ocultar
Los métodos hide() y show() permiten ocultar y mostrar elementos HTML respectivamente.
Ejemplo 11. Efectos en jQuery: Aparecer y desaparecer texto
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript" src="js/jQuery11.js">
</script>
</head>
<body>
<p>Si presionas el botón "Ocultar" desapareceré!.</p>
<button id="hide">Ocultar</button>
<button id="show">Mostrar</button>
</body>
</html>
jQuery
$(document).ready(
function() {
$("#hide").click(
function() {
$("p").hide();
}
);
$("#show").click(
function() {
$("p").show();
}
);
}
);
Las funciones hide() y show() permiten recibir un par de parámetros que permiten controlar la velocidad con la que se llevan a cabo las
animaciones. El parámetro que se envía es un tiempo en milisegundos.
El método toogle() es la combinación de hide y show, si hide es verdadero entonces se aplica show
y viceversa.
Ejemplo 12. Método toogle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript" src="js/jQuery12.js">
</script>
</head>
<body>
<button>Toggle</button>
<p>Un párrafo de ejemplo.</p>
<p>Otro párrafo.</p>
</body>
</html>
jQuery
$(document).ready(
function() {
$("button").click(
function() {
$("p").toggle(100);
}
);
}
);
Desvanecer y Aparecer
Con jQuery se pueden aparecer y desaparecer elementos con los métodos fadeIn() y fadeOut() respectivamente.
Ejemplo 13. FadeIn/FadeOut
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Efectos con jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jQuery13.js"></script>
</head>
<body>
<p>Demostración de fadeIn() y fadeOut() con diferentes parámetros.</p>
<button id="fadeIn">FadeIn</button>
<button id="fadeOut">FadeOut</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
jQuery
$(document).ready(
function() {
$("#fadeIn").click(
function() {
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
}
);
$("#fadeOut").click(
function() {
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
}
);
}
);
El método fadeToggle() es la combinación de fadeIn y fadeOut.
Ejemplo 14. fadeToggle
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Efecto fadeToggle()</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jQuery14.js"></script>
</head>
<body>
<p>Demostración de fadeToggle() con diferentes parámetros.</p>
<button>Click</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
jQuery
$(document).ready(
function() {
$("button").click(
function() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
}
);
}
);
Desplazar
El método slide() permite desplazar hacia arriba o abajo un elemento HTML.
Ejemplo 15. slideDown y slideUp
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jQuery15.js"></script>
<link rel="stylesheet" type="text/css" href="css/jQuery15.css">
</head>
<body>
<div id="flip1">Click para deslizar</div>
<div id="panel1" style="display:none;">Hola Mundo!</div>
<br>
<div id="flip2">Click para ocultar</div>
<div id="panel2">Hola Mundo!</div>
</body>
</html>
jQuery
$(document).ready(
function() {
$("#flip1").click(
function() {
$("#panel1").slideDown("slow");
}
);
$("#flip2").click(
function() {
$("#panel2").slideUp("slow");
}
);
}
);
CSS
#panel1, #panel2, #flip1, #flip2 {
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel1 {
padding:50px;
display:none;
}
#panel2 {
padding:50px;
display:block;
}
El método slideToggle() es una combinación entre slideIn y slideOut.
Ejemplo 16. fadeToggle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript" src="js/jQuery16.js"></script>
<link rel="stylesheet" type="text/css" href="css/jQuery16.css">
</head>
<body>
<div id="flip">Click para mostrar u ocultar</div>
<div id="panel">Acá estoy!</div>
</body>
</html>
jQuery
$(document).ready(
function() {
$("#flip").click(
function() {
$("#panel").slideToggle("slow");
}
);
}
);
CSS
#panel,#flip {
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel {
padding:50px;
display:none;
}
Animación
El método animate() de jQuery permite crear animaciones personalizadas sobre elementos HTML.
Ejemplo 17. Mover un elemento
HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery animate</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jQuery17.js"></script>
</head>
<body>
<button>Comenzar Animación</button>
<p>Por defecto todos los elementos HTML tienen una posición estática y no pueden moverse.
Para manipular la posición, se debe ajustar la propiedad CSS <i>position</i> del elemento
en cuestión a <i>relative</i>, <i>fixed</i> o <i>absolute</i>.</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
JS
$(document).ready(
function() {
$("button").click(
function() {
$("div").animate({left:'250px'});
}
);
}
);
Con el método animate() se pueden modificar varios atributos simultáneamente.
Ejemplo 18. Modificando varios atributos CSS con animate
jQuery
$(document).ready(
function() {
$("button").click(
function() {
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
}
);
}
);
Cuando se mueve un elemento con animate se pueden utilizar posiciones relativas.
Ejemplo 19. Posiciones relativas
jQuery
$(document).ready(
function() {
$("button").click(
function() {
$("div").animate({
left:'+=250px',
height:'+=150px',
width:'+=150px'
});
}
);
}
);
Pueden utilizarse valores predefinidos para las animaciones: show, hide y toggle.
Ejemplo 20. Valores predefinidos para las animaciones.
jQuery
$(document).ready(
function() {
$("button").click(
function() {
$("div").animate({
height:'toggle',
});
}
);
}
);
Por defecto jQuery tiene una cola para las animaciones. Esto es, que si se invocan varias animaciones que afectan al mismo elemento, jQuery crea una cola interna y
las animaciones se realizan una por una en el orden en que se invocaron.
Ejemplo 21. Animaciones en serie 1
jQuery
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
Ejemplo 22. Animaciones en serie 2
jQuery
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
jQuery tiene una colección de algunos otros efectos, aquí puede encontrar más información acerca de ellos.
Interrumpir animaciones
El método stop() permite interrumpir una animación antes de que termine.
Ejemplo 23. Método stop()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Método jQuery stop()</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jQuery22.js"></script>
<link rel="stylesheet" type="text/css" href="css/jQuery22.css">
</head>
<body>
<button id="stop">Detener animación</button>
<div id="flip">Presione para deslizar</div>
<div id="panel">Hola Mundo!</div>
</body>
</html>
jQuery
$(document).ready(
function() {
$("#flip").click(
function() {
$("#panel").slideDown(5000);
}
);
$("#stop").click(
function() {
$("#panel").stop();
}
);
}
);
CSS
#panel,#flip {
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel {
padding:50px;
display:none;
}
Encadenando acciones/métodos
Con jQuery es posible encadenar acciones y métodos. Esto permite poder aplicar varias acciones o métodos a un mismo elemento en una sola línea.
Ejemplo 24. Animaciones en Cadena
HTML
<!DOCTYPE html>
<html>
<head>
<title>Animaciones en Cadena</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript" src="js/jQuery23.js"></script>
</head>
<body>
<button>Click</button>
<p id="p1" style="background-color: #DAE3ED;">jQuery is fun?!</p>
</body>
</html>
jQuery
$(document).ready(function() {
$("button").click(function() {
$("#p1")
.css("color","red")
.slideUp(2000)
.slideDown(2000)
.fadeOut(1000)
.fadeIn(1000)
.animate({left:'+=250px',height:'+=150px',width:'+=150px'})
.animate({fontSize:'3em'},"slow");
});
});