¿Qué es jQuery?
jQuery es una librería de JavaScript rápida y concisa que simplifica la manipulación de HTML, manejo de eventos, animaciones e interacciones AJAX para que el desarrollo sea más rápido.
Existen muchas librerías parecidas a jQuery. Entre las más conocidas están Prototype, Script.aculo.us, MooTools, Dojo y YUI.
A pesar de que existen todas las librerías mencionadas, mi favorita es jQuery por las siguientes razones:
- Viene en una versión comprimida que pesa 24KB, mejorando así la velocidad de descarga de las páginas.
- Ofrece un modo "noConflict" que permite usar Javascript de forma que no interfiera con otras librerías. Gracias a esto, es posible utilizar jQuery y Prototype juntas.
- Funciona en múltiples navegadores. Con esto ya no necesito preocuparme del navegador en el que estoy para ejecutar código JavaScript.
- Permite la creación de Plugins.
- Ofrece una versión llamada jQueryUI que tiene componentes visuales como tablas, calendarios, acordeones, etc.
¿Cómo instalo jQuery?
Lo primero que debes hacer es descargar la librería desde http://jquery.com/. Existen dos versiones que puedes descargar. La de producción que es la ideal para tus aplicaciones terminadas (pesa 24KB) y la de desarrollo si quieres ver el código fuente de la librería.
Una vez descargado el archivo jquery-x.x.x.js debes colocarlo en alguna ruta de tu servidor web y enlazarla en tus páginas web. Si no sabes como enlazar un archivo JavaScript en tus páginas web te recomiendo leer Todo lo que necesitas saber acerca de HTML.
Modo noConflict
Toda la funcionalidad de jQuery está dentro del namespace llamado jQuery para evitar conflictos con funciones con los mismos nombres en otras librerías. Sin embargo jQuery utiliza como abreviatura el símbolo $ por lo que invocar a jQuery() es equivalente a invocar a $().
El símbolo de $ es muy común en otras librerías por lo que si incluyeramos las librerías jQuery y Prototype ambas tendrían la función $ generando un conflicto.
Te recomiendo utilizar jQuery en modo noConflict para que tus aplicaciones no interfieran con otras librerías.
Para ejecutar jQuery en modo noConflict basta con agregar el comando jQuery.noConflict(); después de incluida la librería. El código de tu página se debería ver como el siguiente:
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="http://localhost/jquery-1.4.2.min.js"></script> <script> jQuery.noConflict(); </script> </head> <body> </body> </html>
Listo!! jQuery ya está incluido dentro de tu página web y puedes comenzar a utilizarlo.
Utilizando jQuery
Como ya he mencionado, toda la funcionalidad de esta librería se encuentra bajo el namespace jQuery por lo que siempre comenzaremos con esta palabra.
Para que quede un poco más claro voy a mostarte un ejemplo básicos que lo único que hace es cambiarle el color a un elemento de la página.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="http://localhost/jquery-1.4.2.min.js"></script>
<script> jQuery.noConflict(); </script>
</head>
<body>
<!-- Muestro un boton para el evento click -->
<input type="button" onclick="jQuery('#contenido').css('background-color', '#ff0000');" value="Cambiar color" />
<!-- Muestro el contenido que va a cambiar -->
<p id="contenido" style="width:150px;padding:10px;">
Bienvenido al primer ejemplo de copstone con jQuery. En este
ejemplo podrás darte cuenta de cómo utilizar jQuery en un evento
on click.
</p>
</body>
</html>
Cuando presionas el botón, el tag con id contenido cambia de color. Como puedes ver, esto se debe a que hemos ejecutado el comando jQuery('#contenido').css('background-color', '#ff0000'); dentro del evento onclick.
Como mencionamos antes todo comienza con jQuery. Luego entre paréntesis sigue lo que llamamos un selector css, es decir, la indicación del elemento(s) a el/los que queremos aplicar el efecto en este caso #contenido representa a todos los elementos que tengan id="contenido". Luego se llama al método a aplicar, en este caso css y se le mandan los parámetros necesarios. En este caso estoy diciendo que se modifique el valor del atributo background-color con #ff0000 (rojo).
Ejecutar jQuery al inicio
Supongamos que queremos que el color del contenido del ejemplo anterior se cambie de forma automática con verde cuando se inicia la página.
Una solución posible es colocar el mismo código del evento onclick al inicio de la página (en el head), sin embargo esto no es recomendable ya que probablemente el código se ejecutaría antes de que exista el contenido que vamos a cambiar.
Para evitar estos errores, jQuery propone colocar el código dentro de una función llamada ready que se ejecutará una vez que se haya cargado toda la página y esté lista para ser modificada por jQuery. La estructura básica de esta función es:
jQuery(document).ready(function(){
// Contenido de la funcion
});
Al principio puede parecer algo confuso pero piénsalo de la siguiente manera: Primero selecciono a quien le voy a aplicar el evento jQuery(document), es decir, al documento completo (toda la página). Luego selecciono el método ready (cuando el documento esté listo) que recibe como parámetro el código completo de una función function() { } y por último cierras el paréntesis del método ready terminando con un ; de fin de instrucción.
Ahora voy a agregar el código necesario para que al cargar la página se le coloque el color verde al contenido.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="http://localhost/jquery-1.4.2.min.js"></script>
<script> jQuery.noConflict(); </script>
<script>
jQuery(document).ready(function(){
jQuery('#contenido').css('background-color', '#00ff00');
});
</script>
</head>
<body>
<!-- Muestro un boton para el evento click -->
<input type="button" onclick="jQuery('#contenido').css('background-color', '#ff0000');" value="Cambiar color" />
<!-- Muestro el contenido que va a cambiar -->
<p id="contenido" style="width:150px;padding:10px;">
Bienvenido al primer ejemplo de copstone con jQuery. En este
ejemplo podrás darte cuenta de cómo utilizar jQuery en un evento
on click y cuando cargue la página.
</p>
</body>
</html>
Selector CSS
Todos los comandos de jQuery se aplican a uno o más elementos. Para poder distinguir a que elemento se le debe aplicar es necesario utilizar selectores css, es decir, jQuery interpreta los selectores al igual como lo hace CSS. Aquí te doy un ejemplo de algunos selectores posibles:
| jQuery | Aplica a |
|---|---|
jQuery("*") |
Aplica a todos los tags HTML de la página. |
jQuery("#val") |
Todos los tags que tengan como atributo id el valor val. Por ejemplo aplicará a: <p id="val">Parrafo 1</p> |
jQuery(".tipo") |
Aplica a todos los elementos que tengan como atributo class el valor tipo. Por ejemplo aplicará a: <p class="tipo">Parrafo 1</p> |
jQuery("div") |
Aplica a todos los elementos de tipo div. Por ejemplo aplicará a: <div id="uno">Parte uno</div> |
jQuery("div p") |
Aplica a todos los elementos de tipo p que se encuentren dentro de un elemento de tipo div. Por ejemplo aplicará al tag p de: <div>Esto es <p>un ejemplo</p></div> |
| jQuery(document) | Aplica a todo el documento HTML. |
| jQuery(this) | Aplica al elemento actual. Esto es muy útil para jQuery anidado. |
Existen muchos selectores más. Si quieres buscar otros ejemplos te recomiendo visitar la documentación de jQuery.
Una vez que sabes como aplicar los selectores, es simplemente cuestión de llamar a los métodos correctos los cuales puedes consultar en la documentación de jQuery.
Ejemplos
Aquí te dejo unos pequeños ejemplos de lo que puedes hacer con jQuery. Todos los ejemplos invocan a funciones que las declararé dentro de script tags en la cabecera de la página web. En todos los ejemplos podrás ver un botón que dice DEMO, presiónalo para ver el resultado de lo que se quiere lograr. Todos los botones DEMO llaman a la función que aparece abajo del botón por ejemplo:
<button onclick="funcionA();">DEMO</button>
Bloquear todos los links de la página
Este ejemplo los eventos click the todos los tags a para que ejecuten el código de la función que muestro en el código de ejemplo. Esta función evita que se ejecute el click por defecto, luego obtiene el texto del link y cambia el texto para que ahora diga Bloqueado al lado del texto original. Después de aplicar el evento click a todos los links muestra una alerta indicando que se han bloqueado los links.
function deshabilitarLinks()
{
jQuery("a").click(function(event)
{
// Evitamos que se haga el clic
event.preventDefault();
// Obtenemos el texto del tag a
var texto = jQuery(this).text();
// Agregamos la palabra bloqueado al link
jQuery(this).text(texto + ' - Bloqueado');
});
alert("Links bloqueados. Intenta hacer clic a cualquier link");
}
Para volver a activar los links, simplemente refresca la página.
Aplicar transparencia a tags p
Este ejemplo coloca todos los tags p semi transparentes, es decir, a un 25% de su color normal.
function transparenciaTagsP()
{
jQuery("p").fadeTo("slow", 0.25);
}
Quitar transparencia a tags p
Este ejemplo coloca todos los tags p de color solido, es decir, elimina la transparencia al colocarle 100% de su color normal.
function transparenciaTagsP()
{
jQuery("p").fadeTo("slow", 1.00);
}
Ocultar y/o mostrar tags h1, h2, h3, h4, h5, h6
Este ejemplo cambia la visibilidad de todos los tags de tipo cabecera h1, h2, h3, h4, h5, h6. Si están ocultos los muestra y si están visibles los oculta.
function toggleHeaders()
{
jQuery("h1,h2,h3,h4,h5,h6").slideToggle("slow");
}
Mostrar una alerta
Este ejemplo hace visible un span oculto (<span id="demoalert" style="display:none;">Esta es la alerta</span>) y programa para que se oculte despues de 1 segundo (1000 milisegundos).
function displayAlert()
{
jQuery("#demoalert").css("display", "inline").fadeOut(1000);
}
Petición AJAX
Antes de proceder con este ejemplo, te recomiendo que leas Introducción a AJAX. Usando el ejemplo de dicho artículo voy a pedir los datos de una tabla utilizando una petición AJAX de tipo GET que devuelve datos en formato JSON (página C del artículo Introducción a Ajax).
En la invocación AJAX de jQuery he incluido 3 métodos: beforeSend, success y complete.
El método beforeSend se ejecuta antes de realizar la petición y lo único que hará es mostrar un mensaje que diga "Pidiendo datos".
El método success se ejecuta cuando la petición se realizó satisfactoriamente, en este caso voy a armar una tabla HTML con los datos obtenidos y asignarla como contenido al div con id ajaxresult. Para que esto funcione necesitas tener dentro de tu página un tag como el siguiente: <div id="ajaxresult"></div>
El método complete se ejecuta cuando la petición terminó ya sea con un error o no y muestra un mensaje diciendo que la petición ha terminado.
function invocarAjax()
{
jQuery.ajax({
type: "GET",
dataType: "json",
url: '/wp-content/uploads/js/jquery_ajax.html',
beforeSend: function (request) {
jQuery('#ajaxresult').html("Pidiendo datos");
jQuery('#ajaxresult').show("fast");
},
success: function(data) {
var tabla = "<table border='3'>";
for (i = 0; i < data.length; i++)
{
tabla += "<tr>";
for (k = 0; k < data[i].length; k++)
{
if (i == 0) // primera fila
tabla += "<th>" + data[i][k] + "</th>";
else
tabla += "<td>" + data[i][k] + "</td>";
}
tabla += "</tr>";
}
tabla += "</table>";
jQuery('#ajaxresult').html(tabla);
},
complete: function (request, errCode) {
if (errCode != "success")
alert("Ocurrio un error");
else
alert("Termino satisfactoriamente");
}
});
}
Más adelante iré publicando otros artículos que muestran como realizar efectos específicos con jQuery. Por el momento te recomiendo que vayas investigando acerca de jQuery ya que toda la información está en su documentación.
Artículos similares
Hola Alfredo,
Muy interesante tu post y la verdad me sirvio mucho!!
Estoy comenzado y queria probar los bordes redondeados pero la verdad es que no se ven,JQuery Corners…Lo saque de un tutorial de la web y usando Firebug me da el siguiente error jQuery(“.redondear”).corners is not a function…
Si queres puedo darte mas detalles.
De todas maneras muchas gracias!
Verifica que el plugin JQuery Corners sea compatible con el navegador que estas usando.
Hola,
Debo agradecerte, no tenia ni idea de como se comia JQUERY, pensaba k era como japones, o algo asi, ruso, ni como aplicarlo, las paginas k e consultado te muestra cosas pero no dicen nada, ni estructura ni nada, ya baje la libreria, ya estoy haciendo los ejemplos…..GRACIAS, MUCHAS GRACIAS,……LBD
gracias…