Hola!
En este post repasaremos un poco el uso de jQuery, veremos como hacer cargas asíncronas y como darle “vida” a nuestra página web …
¿Qué es jQuery?
Es un framework hecho en javaScript con el cual podremos darle “vida a nuestra página web”, con él podemos crear lindos efectos en la web, usar una carga asíncrona en la web, enviar datos por formularios, cargar secciones de la web dependiendo a una condicion (ejemplo, “click en noticias” y carga la parte de noticias de la web), etc. Lo mejor de todo es que cargar jQuery es como cargar un jpg (en cuestiones de tamaño) el framework solo pesa > 30KB!
¿Dónde consigo jQuery?
Pues en la página oficial de jQuery!
Necesitamos descargar la versión de producción, actualmente está en la version 1.5.2 y pesa algo de 29KB
¿Cómo incluyo jQuery en mi web?
Incluyendo en “src” la direccion de jquery en nuestro host, dentro de las etiquetas <script src=”ruta/de/jquery.js”></script> dentro de <head></head>
<script src="url/de/jquery.js"></script>
Sintaxis de jQuery
La función mágica (yo le digo así, hasta ahora no encuentro otra palabra mejor) es ésta $() – el signo de dolar – los parametros que reciben pueden ser objetos DOM (id, class, tags html, etc).
Las funciones que acompañan su uso son variadas, supongamos que quisieramos poner transparente el contenido de un <div> de nuestra página web, tendríamos que usar la siguiente sintaxis:
$("#idDiv").fadeTo("slow",0.5)
Con ello volvemos transparente a nuestro div (y todo su contenido) de la manera “lenta” (slow), se creará una linda atenuación y transparencia. Si quisieramos obtener el contenido de alguna etiqueta html, haríamos lo siguiente:
miVariable = $("#idInputForm").val();
Con ello cojeremos el valor de la etiqueta cuyo ID es “idInputForm” y lo depositamos en la variable “miVariable”.
Supongamos que ahora queremos recargar la sección noticias de nuestra página web cuando le den clic a un enlace cualquiera:
$("a").click(function(){
$("#div").load("archivoRemoto.php");
});
Cuando alguien haga clic en una etiqueta <a> (dentro de ella tenemos que poner href=#, de lo contrario nos enviaria a otra URL), el contenido de #div será actualizado por el contenido entregado de “archivoRemoto.php”…
Lo anterior es una breve reseña sobre el funcionamiento de jQuery
Efectos visuales con jQuery
- $().fadeIn(); //aparece con degradado
- $().fadeOut(); //desaparece con degradado
- $().fadeTo(); //genera transparencia
- $().slideUp(); //se desliza hacia arriba
- $().slideDown(); //se desliz hacia abajo
- $().show(); //se muestra
- $().hide(); //se oculta
- $().animate(); //se anima cambiando valores css
Funciones AJAX, las cuales no debemos olvidar
- $(“target”).load(“url_archivo_remoto”,{parametrosGET:valor},queFuncionDebemosLlamarLuegoDeCargar);
- $.post(“archivoRemoto”,{parametrosPOST:valor},queFuncionDebemosLlamarLuegoDeCargar);
Eventos jQuery
- $(“div,a,p,#id,.class”).click(ejecutoEstoSiSeHizoClick);
- $(“div,a,p,#id,.class”).mouseover(ejecutoEstoSiSeHizoClick);
- $(“div,a,p,#id,.class”).mouseout(ejecutoEstoSiSeHizoClick);
Iterar JSON con jQuery.each();
Existe un montón de información en la web sobre el uso de jQuery, a medida que vaya conociendo más sobre jQuery iré escribiendo más en el blog, en esta página conocerán el uso y la sintaxis de las funciones de jQuery, espero les sirva, hasta luego!
Gran tutorial
me alegro que alguien mas se interese en este gran framework que lo estoy descubriendo poco a poco
Gracias.
jose.