jQuery es una biblioteca multiplataforma de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es la biblioteca de JavaScript más utilizada.
Como usar JQuery en mis páginas
El primer requisito para usar JQuery es agregar la librería, que podemos cargar desde su principal repositorio o desde otros CDN de internet, como explicamos más abajo.
A continuación debemos de insertar dentro de un elemento SCRIPT, las instrucciones de la siguiente forma:
$(function () {
// Instrucciones de JQuery
});
</script>
En esta página mostramos los ejemplos usando el evento (desencadenador) «click» en un botón.
También se puede emplear en enlaces, bloques (DIV) o en otros elementos HTML, siempre que se les agregue un identificador (ID).
Es posible también usar otros eventos como dblclick, hover (posicionar el cursor del mouse encima), keypress, keyup, focus y otros.
La sintaxis básica es la siguiente.
$(«selector inicio»).evento(function () {
$(«selector destino»).funcion o método(atributo)
});
</script>
En JQuery se pueden usar como selectores elementos HTML como a (enlaces) h1, h2, etc. También clases usando (.nombre) e identificadores (#nombre).
✔ Evento puede ser click, hover, etc.
✔ Selector de destino es el que identifica el elemento a modificar.
✔ Las funciones o métodos son quienes finalmente ejecutan la tarea y los atributos son opcionales en algunos casos.
En la siguiente imagen se puede ver de forma gráfica el uso de cada elemento.
Ejemplos prácticos del uso de JQuery
Efectos y animaciones
En los primeros ejemplos usamos varios métodos de efectos de JQuery, para mover, ocultar y mostrar elementos, usando animaciones.
En el primero de ellos al dar clic en el botón «Ocultar bloque» usamos el evento «click()» para ocultar con la función «hide()» el bloque de ejemplo que posee el identificador «cont1».
Usamos el siguiente código.
<script>
$("#c1").click(function() {
$("#cont1").hide(1500);
});
</script>
. HTML + jQueryCreate a simple HTML file (test.html),
and include the downloaded jQuery library
as normal JavaScript file
(.js)
.<html><head><title>
jQuery Hello World
</title>
<script type=»text/javascript» src=»jquery-1.2.6.min.js»></script>
</head><body><script type=»text/javascript»>$(document).ready(function(){$(«#msgid»).html(«This is Hello World by JQuery»);});
</script>This is Hello World by HTML<div id=»msgid»></div></body></html>