Hola! Hace mucho que no escribía en el blog (por N motivos), estuve aprendiendo a usar AJAX y jQuery para hacer unas cuantas páginas web, y aquí les digo la forma de usar este tan preciado y adorado framework, en este post una explicación muy vaga uso de jQuery.
¿Qué es jQuery?
Es un framework de 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.
¿Dónde consigo jQuery?
Pues en la página oficial de jQuery!
¿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="direccion/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 $(), los parametros que reciben pueden ser objetos, 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 leer el contenido de un formulario, haríamos lo siguiente:
miVariable = $("#idInputForm").val();
Con ello cojeremos el valor del <input> 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”…
Efectos gráficos en 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 fáciles de recordar!
- $(“target”).load(“url_archivo_remoto”,{parametrosGET:valor},queHacerLuegoDeCargar);
- $.post(“archivoRemoto”,{parametrosPOST:valor},queHacerLuegoDeCargar);
Eventos jQuery
- $(“div,a,p,#id,.class”).click(ejecutoEstoSiSeHizoClick);
- $(“div,a,p,#id,.class”).mouseover(ejecutoEstoSiSeHizoClick);
- $(“div,a,p,#id,.class”).mouseout(ejecutoEstoSiSeHizoClick);
¿Sombras con jQuery?
Clic Aquí: Sombras con jQuery, para conocer más sobre la creación de Sombras con jQuery, lamentablemente no funcionan del todo bien con internet explorer 
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!
