Uso de jQuery
Presentacion:
jQuery es un framework javascript muy proderoso y muy usado, por tal razon en esta seccion empezare con mostar cuestiones basicas de este.
Qué es jQuery
jQuery es un framework Javascript, entiendase como framework unas librerías de código que contienen procesos o rutinas ya listos para usar.
Para lograr la programacion perfecta simplemente debemos conocer las librerías del framework y programar utilizando las clases, sus propiedades y métodos para la consecución de nuestros objetivos. Como ventaja adicional el framework jQuery tiene licencia para uso en cualquier tipo de plataforma y es gratuito. Para usarlo simplemente se tiene que incluir en las páginas un script Javascript que contiene el código de jQuery.
jQuery es un producto con una amplia aceptación por parte de los desarrolladores. Además, es un producto serio, estable y bien documentado. Adicional a lo anterior se encuentran plugins o componentes, lo que hace fácil encontrar soluciones ya creadas en jQuery para implementar asuntos como interfaces de usuario, galerías, votaciones, efectos diversos, etc, etc… Una competencia de jQuery es Mootools.
Lo más complicado de jQuery es aprender a usarlo. Requiere que el desarrollador tenga habilidades avanzadas de programación y conocimiento de la programación orientada a objetos.
Uso de jQuery
Para hacer uso de jquery es necesario tener:
1. El framework de jQuery: Este framework lo puede descargar desde la pagin a http://jquery.com
hay diferentes versiones escoja la que usted prefiera. En mi caso descargue la «DEVELOPMENT» en su version 1.5.1.
2. Crear una pagina HTML: LA creacion de esta pagina debe ser con todas las etiquetas, tenga en cuenta que debe incluir el framework jQuery.
|
<html>
<head>
<script src=»jquery-1.5.1.js» type=»text/javascript»></script>
<script>
$(document).ready(function(){
$(«a»).click(function(evento){
alert(«Has pulsado el enlace…nAhora serás enviado a DesarrolloWeb.com»);
});
});
</script>
</head>
<body>
<a href=»http://www.desarrolloweb.com/»>DesarrolloWeb.com</a>
</body>
</html>
|
Ejecutar código cuando la página ha sido cargada
El siguiente procedimiento es detectar el momento en que la página está lista para recibir comandos Javascript que hacen uso del DOM. Cuando se hacen acciones complejas con Javascript, hay que tener seguro que la página haya terminado de cargar y esté lista para recibir comandos Javascript que utilicen la estructura del documento con el objetivo de cambiar cosas, como crear elementos, quitarlos, cambiar sus propiedades, etc. Si no se da este tiempo de espera es posible que se generen errores de Javascript en la ejecución.
jQuery incluye una manera de identificar en que momento se puede ejecutara cciones sobre la pagina, asi existan elementos que no hayan sido cargados del todo. Esto se hace con la siguiente sentencia.
|
window.onload = function () {
alert(«cargado…»);
}
|
Explicacion del script codigo anterior
1. $(document) : Se obtiene una referencia al documento (la página web) que se está cargando.
2. $(document).ready : Con el método ready() se define un evento, que se desata al quedar listo el documento para realizar acciones sobre el DOM de la página.
3. $(«a») : Se obtiene una referencia al elemento «a» .
4. $(«a»).click(function(evento) : Con el metodo click se define un evento a los elementos de «a»
Funciones que se ejecutarán una detrás de otra
En ocaciones es necesario esperar que una funcion inicie despues de que otra termine y no de manera simultanea, suponga una funcion que se demora dos segundos en ejecutarse y luego sigue otra, si lo hace de la manera tipica la segunda funcion iniciaria ntes de que pasara los dos segundos que se tomna la primera funcion en finalizar, esta accion inmediata da efectos inesperados, esta seccion pretende mostarr la manera correcta de ejecutar una funcion despues que se termina la primera, este procedimiento tambien se conoce como callback.
Teoricamente la manera de realizar este procedimiento sigue la logica
|
miFuncion («parametros de la funcion», function(){
funcionCallback();
});
|
De manera mas real, el siguiente ejemplo lo describe.
|
$(«#micapa»).fadeOut(1000, function(){
$(«#micapa»).css({‘top’: 300, ‘left’:200});
$(«#micapa»).fadeIn(1000);
});
|
El codigo anterior ejecuta primero la funcion fadeOut, espera 1 segundo 1000 milisegundos y despues cambia de posicion a micapa y despues ejecuta fadeIn.
Uso de Ajax con jQuery
El uso de ajax con el framwork de jQuery es muy sencillo, solo se necesita de una linea para realizar el llamado ajax.
|
$(document).ready(function(){
$(«#enlaceajax»).click(function(evento){
evento.preventDefault();
$(«#destino»).load(«contenido-ajax.html»);
});
})
|
La linea encargada de realizar el llamado ajax es
|
$(«#destino»).load(«contenido-ajax.html»);
|
Blog de Luis - Nos estamos cambiando http://www.ingenieroluis.com/blog 