Introducción a JQuery

Qué es Jquery

Básicamente, es una librería Javascript. Existen varias librerías de este tipo, pero Jquery ha cogido una buena posición por tener el apoyo de compañías como Microsoft y Google.

Se apoya básicamente en lo siguiente:

-Esperar a que el árbol DOM de la página HTML esté cargado para añadir funcionalidad de manera no intrusiva (ahora veremos un ejemplo).

-Definir una sintaxis básica y un conjunto de funciones que permitan añadir comportamiento a los elementos del DOM. Para ello, se apoya en los selectores estándares de CSS (que los comentaremos más adelante), una sintaxis propia del lenguaje (que comentaremos ahora), y una serie de funciones predefinidas.

Además de ello, permite que, a partir del lenguaje, podamos desarrollar plugins de terceros. Dichos plugins definen funcionalidades más complejas que las funciones individuales que ofrece Jquery y permiten poder ser integrados fácilmente en las páginas web. Existe una corriente en este sentido bastante importante.

Además de ello, se ha aprovechado Jquery para definir un framework gráfico llamada Jquery UI, que ofrece un conjunto de componentes que permiten ser insertados en una página web para hacerla atractiva desde el punto de vista de la visibilidad.

1. Instalación en la página HTML correspondiente: existen varias vías

   1. Descargar la librería correspondiente y añadirla como un fichero externo de tipo javascript.

   2. Añadirla (sin necesidad de descargarla) desde Google: (//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js).

Es necesario instalar dicha librería Javascript en todas las páginas HTML donde queramos utilizarlas (como en cualquier librería JavaScript).

1. Sintaxis básica: $(selector).action().

   1. $ indica que vamos a escoger un elemento del DOM.

   2. El selector indica que elemento (o elementos) queremos escoger.

   3. Action permite añadir la funcionalidad que queramos.

Veamos ejemplos:

• $(this).hide(): this indica el elemento en el que nos encontrarmos, y hide indica que queremos ocultarlo.

• $("p").hide(): p selecciona todos los elementos de tipo “p” (y hide lo mismo que lo anterior)

• $(".test").hide(): ocultamos todos los elementos cuya clase css sea test.

• $("#test").hide(): ocultamos todos los elementos cuyo id sea test.

1. Cómo añadimos funcionalidad haciendo uso de Jquery. Los creadores de esdta librería pensaron que era buena idea esperar a que todos los elementos del DOM (que definen la página de HTML) estuvieran cargados antes de añadir cualquier funcionalidad. Para ello, definieron la siguiente sintaxis:

   $(document).ready(function(){
   // jQuery methods go here...
   });

   Que permite añadir funcionalidad a los elementos correspondientes que queramos (parecidos a los vistos en ejemplos anteriores) una vez que todo el contenido HTML esté definido.

   Una versión reducida de lo anterior sería, por ejemplo, lo siguiente:

   $(function(){
   
   // jQuery methods go here...
   
   });

Un ejemplo real sería el siguiente: cuando todos los elementos del DOM están cargados, todos los botones de la página, al ser clickeados, generarán que se oculten todos los elementos de tipo párrafo.

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
);

1. Cuáles son las principales funcionalidades sobre las que actúa Jquery.

   1. Efectos visuales: mostrar y ocultar elementos, efectos gráficos atractivos visualmente.

   2. Funciones callback: permite que, una vez terminada la ejecución de un evento, podamos realizar una llamada callback a otra función.

   3. Acciones sobre el DOM de HTML: añadir y eliminar clases, atributos CSS, modificar el contenido de los elementos del DOM...

   4. Acciones de Ajax: cargar contenido de ficheros externos, realizar llamadas de tipo GET y POST

   5. Jquery no conflict: Jquery hace uso de $. Para evitar conflictos con otros frameworks javascript, se hace uso de no conflict (si sólo utilizas una librería, no es necesario).

Más información en:

http://www.w3schools.com/jquery/default.asp

Comments

[artur]

Buen post para comenzar con jQuery

[jcarmonaloeches]

Gracias Artur, a medida que vaya teniendo tiempo, iré publicando más cosas, que ahora estoy profundizando un poco más en HTML5, Css3 y JQuery.
Un saludo amigo

[Jonatan]

Gran aporte.

Para practicar y aprender jQuery también está: http://try.jquery.com/

[Sergio Arbeo]

El 10 de abril daré una charla introductoria a jQuery totalmente gratis en Madrid on Rails.

Tenéis más detalles la página del evento