Ya se ha escrito anteriormente sobre pluggins de jQuery que hacen muchas cosas reproducir sonidos, sliders, images panoramicas , etc , ahora vamos a hacer una pausita para aquellos usuarios que vienen llegando y todavia no saben bien que es jQuery.
Bueno jQuery es un framework para el trabajo en web para javascript, en un momento pensaban que jQuery sustituiria javascript pero jQuery no es un lenguaje aparte sino que trabaja sobre javascript, es decir funciones que llevan mucho tiempo en javascript son simples y sencillas en jQuery.
Otra caracteristica muy importante de jQuery es el trabajo con pluggins lo que hace a jQuery uno de los mejores frameworks, claro esta que antes de jQuery existieron muchos otras frameworks y librerias que trataron de minimizar el trabajo en javascript (porque realmente javascript es duro), y algunas la lograron, pero jQuery a algunas les quito el trono.
jQuery la podemos obtener de la pagina web de sus autores , la version actual lista para descargar esta aqui es la jquery 1.7.2.La version que mas nos interesa es la minificada, al ser la mas ligera y con lo basico para empezar.
Vamos a ver los pasos basicos para darle poder y vida a un sitio con jQuery.
Lo primero que necesitamos una vez descargada la libreria es incluirla en nuestra pagina, esto se hace simplemente hagregandola en head con la etiqueta script como si se tratara de un javascript , por ejemplo :
<html> <head> <script src="jquery.min.js"></script> </head> <body> </body> </html>
Una vez agragada la libreria al documento html nos queda empezar atrabajar con ella, todo dentro de otra etiqueta script …
Paso 0 Verificacion de que todo funciona
Para verificar que todo esta funcionando bien usaremos el siguiente script :
<script>
$(document).ready(function(){
alert("jQuery esta funcionando bien !!!");
});
</script>
Aqui estamos diciendo que cuando carque el documento $(document) y este listo .ready ejecutamos la funcion function(…) en la cual esta una alert que nos pondra que todo esta funcionando … si esto ocurre ya estamos listo para continuar, sino lo mas probable es que colocamos mal el nombre de la libreria al momento de agregarla al documento.
Paso 1 Los selectores
Vamos a empezar a meter mano al verdadero jQuery …
Los selectores en jQuery son las formas que tenemos para obtener un elemento html y empezar a trabajar en su contexto basicamente la forma que tenemos para seleccionar un elemento html del documento es por etiqueta, por identificador o por clase.
Una vez que hemos seleccionado un elemento del documento html podemos trabajar sobre el, para ilustrar esto veamos el siguiente ejemplo :
<script>
$(document).ready(function(){
$("div").css('color':'red');
});
</script>
Lo que hacemos aqui es que a los elementos div del documento les ponemos el color de texto en rojo, $(«div») es nuestro selector, selecciona los elementos con etiqueta div y .css(‘color’:’red’) es la caracteristica que usamos para modificar el css del elemento, en este caso poner el texto en rojo.
Trabajando con Clases
Cuando trabajamos con clases en lo que es jQuery o CSS no nos referimos a programacion orientada a objetos, mas bien nos referimos a estados en el dise~o y apariencia de nuestra pagina Web. En jQuery existen 2 funciones que nos ayudaran extensivamente a agregar y quitar clases de un elemento html.
La funcion addClass(‘nombreClase’) agrega la clase nombreClase al elemento html que se halla seleccionado y la funcion removeClass(‘nombreClase’) quita la clase nombreClase del elemento seleccionado.
Si tenemos el siguiente CSS :
.rojito {
color : blue ;
font-size : 14px;
background : red ;
}
.azulito {
color : red ;
font-size : 14px ;
background : blue ;
}
Y ahora el sigiente html :
<div id='pt1'>Parte uno de jQuery estamos iniciando </div> <div id='pt2'>Parte dos de jQuery ya estamos aprendiendo </div>
Con jquery para agregarle las clases a los elementos html anteriores entonces hacemos :
<script>
$(document).ready(function(){
$("div#pt1").addClass('rojito');
$("div#pt2").addClass('azulito');
});
Con esto le agregamos las clases rojito y azulito a los elementos div con identificador pt1 y pt2 respectivamente.
Evento Click con jQuery
Cuando seleccionamos un elemento jquery y tenemos acceso a un conjunto de eventos, en este caso usaremos el evento click, este se activa al hacer click con el mouse sobre el elemento seleccionado, para aprovechar este evento hacemos lo siguiente :
<script>
$(document).ready(function(){
$("div").click(function(){
alert('haz clickeado el elemento ...');
});
});
Dentro dde la funcion que acompa~a al evento click podemos hacer muchas cosas, ahora vamos a agregarle la clase .rojito al elemento que seleccionamos.
<script>
$(document).ready(function(){
$("div").click(function(){
$(this).addClass('rojito');
});
});</script>
Con esto seleccionamos todos los elementos con etiqueta div y agregamos la clase rojito al elemento que seleccionemos para ello usamos el selector $(this) que hace referencia al elemento actual, es decir al elemento que clickeemos.
Efectos con jQuery
jQuery nos brinda una serie de efectos para darle un toque mas original a nuestros proyectos, para lo que nos ocupa en esta primera parte usaremos solo 2 efectos hide y show. Con ellos se pueden hacer infinidad de maravillas.
Ocultando Elementos
En este ejemplo lo que haremos sera ocultar el elemento div#contenido al presionar el boton button#ocultar :
<button id="ocultar">Ocultar</button><div id="contenido">El contenido de este contenedor se va a ocultar</div>
En jQuery tendriamos :
<script>
$(document).ready(function(){
$("button#ocultar").click(function(){
$("div#contenido").hide();
});
});</script>
Mostrando Elementos
Ahora para mostrar el elemento div#contenido al presionar el boton button#mostrar :
<button id="mostrar">Mostrar</button><div id="contenido">El contenido de este contenedor se iva a ocultar</div>
En jQuery tendriamos :
<script>
$(document).ready(function(){
$("button#mostrar").click(function(){
$("div#contenido").show();
});
});</script>
Para terminar la funcion hide() y show() tienen unos modificadores que alteran el comportamiento de los efectos producidos : son slow y fast, para aplicarlos solo tenemos que agregarlos asi : show(‘fast’), hide(‘fast’) o show(‘slow’),hide(‘show’).
Con esto finalizamos esta primera parte introductoria 😀
Increible !! 😉 ya estamos redactando la segunda parte de esto !!