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);
jQuery.ajax(); conoce más sobre ésta función en éste post ajax al vuelo, incluye videotutorial!
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!
¿Eres desarrollador web?
Visita éste post para hacer comentarios en PHP bajo estándares, si programas en equipo conoce cómo comentar código aqui!
Gran tutorial
me alegro que alguien mas se interese en este gran framework que lo estoy descubriendo poco a poco
Gracias.
jose.