Otras Páginas

Jquery

Objetivos

  • Incluye jQuery en tu página
  • Escribe unas cuantas líneas de código jQuery

Pasos

Paso 1

Primero, incluyamos el código jQuery en el archivo index.html (no en el archivo hello.html), así podemos empezar a trabajar en él. Google y Microsoft almacenan copias publicas de jQuery que puedes enlazar, ni siquiera ocupas descargarlas. (El navegador puede descargar archivos de sitios, si incluyes el link a ellos.) Agrega esta línea dentro de tu documento en head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>

Asegúrate de incluir la línea antes de cualquiera de tu javascript que utilice jQuery o saldrá un error de que jQuery no ha sido cargado aún

Guarda y actualiza la ventana de tu navegador. Tu página deberá verse igual, pero habrás agregado jQuery en la página.

Paso 2

jQuery es una librería de JavaScript que está diseñada para facilitar la interacción con el contenido de tu HTML. Cuando estás escribiendo jQuery, estás escribiendo JavaScript — estás interactuando con objetos y funciones que jQuery ya tiene definidos.

Desde que usas jQuery para interactuar con tu documento, querrás esperar a que tu documento esté listo y cargado antes de ejecutar tu código. jQuery tiene un método de carga llamado 'ready' y lo revisa, y ejecuta tu código después. Agreguémos esto a tu archivo 'javascript.js', así podrás escribir algo de jQuery.

$(document).ready(function() {
  /* Agrega código de los siguientes pasos aquí */.
});

Paso 3

Usemos jQuery para interactuar con la página. Usualmente escribirás jQuery para darle un selector con el cual trabajar (jQuery puede usar el mismo selector de sintaxis como CSS) y después usa un método de jQuery para manejar acciones en elementos que incluyan ese selector. Verás demasiadas líneas de jQuery que están estructuradas así:

$("selector").click(function(){ /* do something */ });

Agreguémos un selector real y hagamos que la función arroje un resultado:

$("#copyright").click(function(){ 
  $(this).css('color','purple'); 
});

Cuando hagas click en la línea del copyright al final de la página, deberás ver un resultado como éste:

Explicación

¿Qué hicimos con jQuery?

Usamos jQuery para manejar el evento click y seguimos las instrucciones para cambiar el estilo de elementos cuando se le hace click. Agarramos todo el código en una llamada $(document).ready(function(){ ... }); para asegurarnos de que solo corra cuando el navegador lea el documento y esté listo para actuar en él.

Cuando trabajes con tu documento HTML en jQuery, estarás haciendo algo llamado manipulación DOM. El DOM es el documento del modelo del objeto — es la representación de tu HTML que habita en la capa de tu JavaScript. Cuando la gente dice que javascript es difícil, frecuentemente se refieren a que la manipulación DOM es difícil — estás forzado a pensar en tu documento con 3 modelos completamente diferentes en cuestión de todos a uno (uno para HTML, uno para CSS, uno para JavaScript). jQuery le ofrece a los desarrolladores la facilidad de una interfaz más concisa para trabajar con el DOM que con lo que hace nativamente JavaScript.

¿Por qué jQuery?

jQuery es una librería de código escrita en JavaScript. Cualquier cosa que puedas hacer con jQuery puedes escribirla directamente también en JavaScript sin jQuery, pero hay ciertas ventajas:

  • jQuery te permite escribir código que se ejecutará en varios navegadores sin modificación. Aunque esto se implemente conforme pasan los años, hay ciertas diferencias en cuanto a cómo escribes JavaScript para navegadores populares (Chrome) a diferencia de otros (Internet Explorer 8). jQuery te deja escribir tus funciones de una sola manera, y después de que tu código es cargado en el navegador del usuario, jQuery hace el trabajo de traducir el formato correcto para el navegador que se esté utilizando.

  • jQuery te permite seleccionar elementos usando la misma sintaxis de CSS. Desde que varios desarrolladores web son buenos seleccionando elementos con CSS, puedes utilizar el mismo conocimiento en JavaScript.

  • jQuery está diseñado para hacerle la vida más fácil a los desarrolladores web, y tiene muchas funciones de abreviación para hacer cosas comunes como animaciones y mostrar y ocultar elementos. jQuery no es la única opción al framework JavaScript, solo es popular. Puedes ver otras librerías como Dojo, Zepto o YUI.

Siguiente Paso:

Ir a Jquery Vs Javascript