Introducción a JQuery
Llevo unos días sin publicar ningún tutorial o memoria, y como hoy no tengo demasiado tiempo, he decidido publicar una introducción a JQuery, utilizada en mi web de ganar dinero para conseguir efectos como el contraer y expandir los elementos del sidebar (hacer click en el título de cada uno), tener bordes redondeados, utilizar Ajax + Json para optimizar el tráfico y un sinfín más de cosas que puedes hacer de la manera mas sencilla que puedas imaginar.
¿Qué es JQuery?
JQuery es un framework de Javascript, que permite interactuar fácilmente con los elementos HTML, manipular el arbol DOM, manejar eventos y animaciones e integrar la tecnología AJAX de manera fácil y cómoda.
He puesto enlaces a la wikipedia en todas las palabras que considero que es recomendable conocer, y decir que la definición la he basado en la de la wikipedia.
¿Cómo se instala?
De la forma mas sencilla que puedas imaginarte, simplemente accede a la página oficial de JQuery y descárgatelo en la carpeta donde tengas la página web, en mi caso uso la versión 1.3.2 en su versión completa, así que tengo un fichero llamado jquery-1.3.2.js.
Ahora tienes que ir al fichero index.html y añadir la siguiente linea a la cabecera (dentro de las etiquetas <head></head>)
-
<script src="jquery-1.3.2.js" type="text/javascript"></script>
Y ya está listo para ser usado.
¿Cómo empiezo a hacer cosas con JQuery?
Este fin de semana empezaré a publicar entradas con todo lo que he hecho con JQuery en Sinpastaenelbolsillo, pero si no puedes esperar hasta entonces, vamos a hablar un poco de los selectores, algunas funciones básicas y de los plugins
Selectores:
El primer paso para poder hacer cosas con JQuery es saber como seleccionar cada elemento, y para eso está la función $(String), que devuelve el elemento (o elementos) que están definidos como se indica en la String, pongo unos ejemplos
-
$("body") //Devuelve el body
-
$("#menu") //Devuelve el menú
-
$(".sidebarcontent") //Devuelve los sidebarcontents
-
$(".post p") //Devuelve los párrafos dentro de post
Como puedes observar, la String que hay que pasar como parámetros, son los selectores que usas normalmente en el CSS.
Funciones básicas y/o más comunes:
addClass(String)/removeClass(String) - Estos dos métodos sirven para añadir o eliminar clases a los elementos html seleccionados, de manera que puedes cambiar el estilo de cualquier cosa de manera dinámica.
Ejemplo:
-
$("body").addClass("fondoNegro");
-
.fondoNegro {
-
background-color: #000000;
-
}
En el ejemplo, al ejecutarse JQuery, le añadirá la clase fondoNegro al body, y el fondo de la página será negro.
html(String) - Con este método cambiaremos el html que haya dentro de un elemento por el pasado como String.
Si no pasas ningún atributo, es decir, lo dejas en html() te devuelve el html que haya dentro del elemento seleccionado.
Ejemplo:
-
$("body").html("
-
<h1>Hola!!</h1>
-
");
Ahora, al ejecutarse, cambiará el contenido del body por "<h1>Hola!!</h1>".
show()/hide() - Muestra/oculta los elementos seleccionados. Ambos tienen una variante con paŕametos que sirven para modificar la velocidad a la que muesta/oculta los elementos seleccionados.
Plugins:
Existen multitud de plugins para JQuery creados por la comunidad, con infinita variedad de efectos, desde menús animados, como el que tengo en mi web para ganar dinero, redondear elementos o widgets para añadir a tu web.
Instalarlos suele ser sencillo, por regla general viene un fichero README en el cual indican la instalación, que no suele ser mas complicada que extraer los ficheros dentro del servidor y enlazarlos dentro de <head></head> al igual que hiciste con JQuery.
Para finalizar, y en previsión de siguientes tutoriales, te recomiendo crear un documento *.js llamado ready, es decir, un fichero llamado ready.js, y enlazarlo como si fuera un plugin.
En este documento irá todo lo que se tiene que ejecutar cuando la página esté cargada, para ello escribe lo siguiente dentro del fichero y dejalo asi:
-
$(document).ready(function(){
-
-
});
No comments yet.