JQuery Paso a Paso [Parte I]
Bienvenidos a nuestro primer episodio sobre cómo utilizar JQuery,
en este tutorial veremos las funcionalidades básicas para su uso
de tal manera que nuestras aplicaciones web sean más atractivas e interactivas.
Hagamos una breve definición sobre que es JQuery.
JQuery en pocas palabras es un framework o una librería hecha en Javascript que
nos ayuda y nos facilita la manera de trabajar con los elementos de HTML.
Con esta librería podemos desarrollar animaciones, manipular eventos e interactuar
con la nueva tecnología AJAX de manera muy práctica y sencilla.
Sitio Oficial
http://jquery.com/
Enlazes para Descarga
Versión Comprimida
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js
Versión Normal
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js
Para manipular los elementos de nuestra página web con JQuery lo haremos por medio del función $().
Uso de la función $()
La función $() se utiliza de la siguiente manera:
$(elemento) donde elemento = al id de un elemento, la expresión css de un elemento o el nombre de la etiqueta html.
Ejemplo:
$(“#Box”) ---> Devolverá el o los elementos que contenga el id=”Box”
$(“.Layer”) ---> Devolverá el o los elementos que contengan la expresión css class=”Layer”
$(“a”) ---> Devolverá el o los elementos con etiqueta html <a> .
Trabajando con JQuery
Lo primero que debemos hacer es enlazar la librería JQuery, lo cual es muy fácil.
(http://img5.imagebanana.com/img/k10shai/img01.gif)
Sintaxis de Ejecución en JQuery.
$(elemento).evento(función o parámetro);
elemento = al id de un elemento, la expresión css de un elemento
o el nombre de la etiqueta html.
evento = hace referencia al evento en el cual queremos que se
ejecute la función o se ejecuten los parámetros, como por ejemplo click,
change, focus, etc.
En el siguiente ejemplo veremos cómo usar la sintaxis de ejecución de JQuery.
Este ejemplo nos muestra cómo podemos hacer referencia a un enlace (<a>)
y ejecutar algo cuando se acciona el evento click.
(http://img5.imagebanana.com/img/ax7qsq9/img01.gif)
Como podemos observar en el código anterior, encontramos al evento ready,
este evento es propio de JQuery, el cual se encarga de revisar y verificar
que el DOM esté listo para usarse. Este funciona similarmente al window.onload,
nada más que mejor optimizado.
Explicando lo que pasa, con el código anterior.
Primero hacemos el llamado del evento ready de JQuery.
(http://img5.imagebanana.com/img/jl9xddlf/img03.gif)
Posteriormente colocamos otra función, dentro de la función del evento ready
(http://img5.imagebanana.com/img/xb2u0dgx/img04.gif)
Esta función se ejecuta cuando hacemos clic sobre el elemento que posee el id=”Link1”, cuando hacemos clic sobre dicho elemento, envía un mensaje que dice “Has presionado al elemento Link1”.
(http://img5.imagebanana.com/img/wu4q50f/img05.gif)
En el siguiente ejemplo vamos a obtener el texto ingresado en un textbox cuando hagamos clic en el enlaze.
(http://img5.imagebanana.com/img/kqyj3vbo/img06.gif)
Explicando el Ejemplo 3 paso a paso
Enlazamos a la librería JQuery.
(http://img5.imagebanana.com/img/neuyezw/img07.gif)
Luego tenemos la funcio ready, para inicializar las demas funciones.
(http://img5.imagebanana.com/img/tdoe2zjb/img08.gif)
La función que está dentro de la función ready, hace que cada vez que hagamos clic en elemento con el id=”Boton”,
envie un mensaje con el texto “Bienvenido ” concatenado con el value (.val()) del elemento con la expresión css class=”TuNombre”.
Manipulando Clases de Estilo
JQuery nos ofrece una manera muy sencilla de poder manipular los estilos en los elementos html,
el siguiente ejemplo nos muestra cómo podemos cambiar el estilo dinámicamente usando JQuery.
(http://img5.imagebanana.com/img/4qlt1yoo/img09.gif)
Como podemos observar, con JQuery es muy fácil interactuar con los elementos html y css,
en este ejemplo podemos ver cómo podemos asignar un estilo a un elemento por medio del método .addClass
y también podemos revomer un estilo con el método .removeClass.
Hemos llegado por hoy al final de este episodio, en donde hemos aprendido sobre JQuery,
aprendimos a como interactuar con los elementos html utilizando la función $() de JQuery,
utilizamos algunos eventos y por último sobre como manipular dinámicamente los elementos
html con estilos (css). En nuestro próximo episodio, aprenderemos a como trabajar con los
elementos html de una manera más detallada, nos vemos pronto.
:thumbsup: PD: Dejo adjunto los ejemplos desarrollados en este mini-tutorial de JQuery.