JQuery, parte 1: Introducción

Ferchu Javascript, Jquery

Desde mi corta experiencia como desarrollador web puedo decir que una de las cosas que aprendí es que la historia de Javascript tiene un antes y un después, Javascript solo y Javascript con Jquery.

Jquery es una librería creada por John Resig, un joven programador que, desde mi punto de vista con su trabajo ha demostrado el potencial que puede alcanzar Javascript.

Javascript permite tres cosas fundamentales:

  • Por medio de un sintaxis amigable y eficiente, una excelente manipulación del árbol DOM de Javascript. Jquery es estándard y funciona perfectamente sin importar el navegador y su versión.
  • Animaciones y otros funcionalidades de interfaz que llevarían extensas líneas de código pueden resumirse en muchísimo menos.
  • Una forma muy fácil de trabajar con ajax.

Si bien Jquery no es la única librería para Javascript, ya que existen otras, las más conocidas son Prototypey Mootools, Jquery tiene una línea de aprendizaje más corta y hay mucha más documentación en la web.

Ok, ahora empecemos. Primero que nada para ejecutar la sintáxis de Jquery necesitaremos importar su librería. Para ello iremos a la siguiente dirección: https://code.jquery.com/jquery-1.8.3.js, nos dirigirá a una página con un código Javascript, copiaremos ese código y lo pegaremos dentro de un nuevo archivo .js que tendrá el nombre que ustedes quieran. En mi caso yo crearé una carpeta llamada js, y dentro de esa carpeta crearé un archivo llamado jquery.js, y dentro del mismo pegaré el código.

Nota: Ésta es la versión que yo usaré, si copian otra y después lo que yo publico no funciona ya saben por qué es.

Si ya lo hicieron entonces deberían importarlo de la siguiente forma:

<script type="text/javascript" src="js/jquery.js"></script>

El atributo src debería apuntar al archivo que ustedes crearon y donde pegaron el código de la librería de Jquery.

Ahora bien, la sintaxis básica de Jquery se escribe más o menos de la siguiente forma:

$(elemento).metodoAEjecutar();

Cómo verán primero se utiliza el signo pesos $ seguido por paréntesis pondremos el elemento que intentamos levantar y luego mediante el punto llamamos al método que vamos a ejecutar:

Para probar que todo ha salido bien y que Jquery está funcionando llamaremos al método ready():

<!doctype html>
<html>
 <head>
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript">
    $(document).ready(function(){
       alert('Hola Jquery');
    });
 </script>
 </head>
 <body>
 </body>
</html>

Si apareció un cartel alert() con el mensaje ‘Hola Jquery’ entonces todo está funcionando bien.

En caso de que ya tengan otra librería cargada que utilice el caracter $ entonces pueden reemplazar este signo por jQuery de la siguiente forma:

jQuery(document).ready(function(){
   alert('Hola Jquery');
});

Y tendrá el mismo efecto.

El método ready() es el equivalente a window.onload, pero sirve para comprobar que la librería de Jquery está cargada. Como se muestra en el ejemplo este método recibirá un parámetro que será una función en donde nosotros tendremos que escribir el código que se ejecutará una vez que el código html se haya cargado en el navegador del usuario.

Siguiente: JQuery, parte 2: Eventos y métodos .html(), .text() y .val()

4 Replies to “JQuery, parte 1: Introducción”

Comments are closed.