Para comenzar este tutorial, si no sabes nada de javascript te recomiendo te pases por el curso básico de javascript que realice, esto servirá para que puedas comprender mejor todo lo que veremos en este curso.
Introducción
Hablar de jquery hoy en día es hablar de ajax, pero más allá de la funcionalidad que tiene para las peticiones ajax, existe otro fin con el cual trabaja esta grandiosa librería y es la manipulación de elementos DOM. La manipulación de dichos objetos viene desde realizar sus funcionalidades por medio de eventos hasta realizar animaciones y efectos para hacer que nuestras páginas tengan estética y elegancia.
Jquery es la librería de javascript mas utilizada en el mundo (si no me creen den clic aquí), fue hecha por John Resig y presentada el año 2006, y siendo la librería más utilizada, hay mucho material afuera con el cual se pueden abastecer para realizar cosas, entonces ¿por que nace este curso?, la mayoría del material es para personas que ya tienen nociones de programación avanzadas, o el material se encuentra en ingles, es por ello que realizo este curso básico, pensado en todas esas personas con el deseo de aprender y no tengan el conocimiento en ingles suficiente.
Instalación
Comenzaremos con la instalación de jquery, y para ello seguiremos los pasos siguientes:
- Entraremos a la página oficial de jquery dando clic al siguiente enlace www.jquery.com
- Descargamos la versión actual de Jquery, es fácil encontrar el botón de descarga, siempre es gigante y esta visible. Basta con dar clic y seleccionar una versión de la librería, ya sea comprimida o ya sea descomprimida, recomiendo descarga la comprimida (compressed), ya que pesa menos. Puede pasar que al dar clic en lugar de descargarse se abra en su navegador y se vea el código como tal, en tal caso lo copean y lo pegan en notepad y lo guardan con extensión de javascript (jquery.js)
- Una vez descargada la librería (que es un archivo con extensión js) la pueden pegar en el proyecto que la utilizaran en el lugar que deseen, para hacer una prueba a continuación yo recomiendo que antes creen un archivo con extensión html (miarchivo.html) y en la misma carpeta copien jquery, para que así puedan hacer una prueba (claro si es la primer vez que descargan jquery).
- Ahora solo basta con realizar la referencia a dicha librería desde su archivo con extensión html de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <!-- asi hacemos referencia a jquery siempre y cuando se encuentre en la misma ubicación que este archivo --> <script src="jquery.js"></script> </head> <body> </body> </html>
Y así de fácil se instala jquery, ahora ya podemos hacer uso de su funcionalidad, cabe resaltar que debe tener la referencia en todas las paginas en la cual necesitemos de él, así que deben agregar la referencia en todas para así poder utilizarlo. Para verificar que lo instalamos bien podemos copiar el siguiente código y correrlo en un navegador:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- asi hacemos referencia a jquery siempre y cuando se encuentre en la misma ubicación que este archivo -->
<script src="jquery.js"></script>
</head>
<body>
<!-- un div para poder usar jquery y ver su contenido -->
<div>Un contenido bien bonito en este div</div>
</body>
</html>
<script>
//codigo de jquery para verificar que este instalado bien
alert($("div").html())
</script>
Si nos muestra en una ventana alert() el mensaje «Un contenido bien bonito en este div«, jquery se instalo con éxito. Por el momento no importa que no entendamos lo que está dentro de la función alert(), en los siguientes capítulos explicare con detalle de que trata esa sintaxis.
Ir Capítulo Siguiente (2.- Selectores)
