JQuery es un framework javascript creado para facilitarnos la vida engran medida. Los frameworks agrupan diferentes funcionalidades para simplificar y reducir el código utilizado.
Así, lo que en javascript sería una tarea bastante compleja y larga, podemos reducirla a unas pocas líneas con este framework javascript.
Vamos a ver como podemos implementar este framework y algunas funcionalidades básicas para que podais empezar a utilizar este fantastico framework. Os aseguro que si lo probais no volvereis al javascript tradicional.
Para empezar, la forma de instalación de JQuery es tan simple como descargarnos la librería Jquery e incluirla en nuestra página HTML.
Un ejemplo muy básico de utilización es el siguiente:
<head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="javascript.js"></script> </head> <body> <div> Clicame </div> </body>
El código anterior sería el HTML sobre el que actuará el script.Vamos a implementar un script muy sencillo y lo guardaremos como javascript.js. Tan sólo hará que cuando clicame sobre el "div" aparezca un aviso.
jQuery(document).ready(function() {
$('div').click(function(){
alert("Has clicado");
});
});
Ahora vamos a ver unas funcionalidades básicas con las que podreis empezar a hacer vuestros script en JQuery.
$()
Esta es la función básica de selección de elementos. Nos permite elegir tanto IDs, class o tags.
Su forma de uso es la siguiente:
Seleccionamos el elemento con id="id_elemento"
$('#id_elemento');
Seleccionamos el elemento con class="class_elemento"
$('.class_elemento');
Seleccionamos todos los elementos "div"
$('div');
Seleccionamos todos los elementos
$('*');
Seleccionamos el elemento que invoca la función
$(this);
.parent()
Nos permite seleccionar el padre del elemento seleccionado
Su forma de uso es la siguiente:
$('#id_elemento').parent();
.next()
Nos permite seleccionar el siguiente hermano del elemento seleccionado
Su forma de uso es la siguiente:
$('#id_elemento').next();
.prev()
Nos permite seleccionar el hermano anterior del elemento seleccionado
Su forma de uso es la siguiente:
$('#id_elemento').prev();
<h4>.slideDown()</h4>
Es una función que muestra un elemento oculto con display:none haciendo un efecto de desplegado hacia abajo.Esta función nos permite también establecer el tiempo que queremos que dure el efecto(milisegundos o un string con fast,slow o normal) y una función callback a la que llamar cuando termine la ejecución.
Su forma de uso es la siguiente:
La llamaba más básica:
$('#id_elemento').slideDown();
Si queremos que tarde 1 segundo en desplegarlo:
$('#id_elemento').slideDown(1000);
Si además queremos que de un aviso cuando termine de desplegarse:
$('#id_elemento').slideDown(1000, function(){
alert("Terminó el despliegue");
});
.slideUp()
Es una función que oculta un elemento mostrado haciendo un efecto de replegado hacia arriba.Esta función nos permite también establecer el tiempo que queremos que dure el efecto(milisegundos o un string con fast,slow o normal) y una función callback a la que llamar cuando termine la ejecución.
Su forma de uso es la siguiente:
La llamaba más básica:
$('#id_elemento').slideUp();
Si queremos que tarde 1 segundo en desplegarlo:
$('#id_elemento').slideUp(1000);
Si además queremos que de un aviso cuando termine de desplegarse:
$('#id_elemento').slideUp(1000, function(){
alert("Terminó el repliegue");
});
.click()
Nos permite capturar el evento click sobre un elemento determinado permitiendonos realizar la acción que queramos.
Su forma de uso es la siguiente:
$('#id_elemento').click(function(){
alert('Has clicado');
});
La mayoría de eventos tiene una utilización similar a la de click a la hora de su invocación.
A partir de estas indicaciones ya podeis empezar a realizar vuestros scripts e ir aumentando la complejidad poco a poco.
Espero que os haya sido de utilidad.