Curso de jQuery-Introducción

jQuery

Tutorial para desarrollar en Web mediante jQuery.

Introducción | Efectos | html | Eventos | Ajax | Plugins  | jQueryUI

Introducción

Requerimientos previos

• html
• Conocimiento básico de javascript
• Conocimiento básico de document object model (DOM)

¿Qué es jQuery?

• jQuery es una librería de funciones JavaScript:
• “Write less, do more” (escribe menos, haz más)
• Funcionalidad:

Selección y manipulación de elementos HTML y CSS

Funciones de eventos en HTML

Efectos y animaciones de JavaScript

AJAX

Compatibilidad con todos los navegadores

…

Versión actual de jQuery: 1.8.2

Licencia MIT

Versiones de jQuery

• Versión de producción:

Minified y comprimida

Aproximadamente 30KB

• Versión de desarrollo:

Sin comprimir

Aproximadamente 8 veces más pesada, aproximadamente 240KB

• Se puede descargar de la web de jQuery

• Versión de producción:

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

• Versión de desarrollo

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

Uso de un CDN

• También a través de un CDN (Content Delivery Network).
• ¿Qué es un CDN? Grupo de servidores repartidos por todo el mundo en puntos estratégicos y pensados para la distribución de ficheros):
• CDN de Google:

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

• CDN de Microsoft:

	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

• CDN del propio jQuery:

Minified:

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

Full:

	<script type="http://code.jquery.com/jquery-1.8.2.js"></script>

Momento de Ejecución del código Javascript

• Cuando la página se ha cargado.

window.onload = function(){ /*Aquí viene mi código de javascript*/ }

• ¿Por qué? No se puede ejecutar hasta que el DOM se haya cargado completamente
• Desventaja: Habrá que esperar la carga completa de imágenes y anuncios para su ejecución.

Hola Mundo mediante javascript

Crea una página web con un enlace que muestre un alert con el texto "Hola Mundo" y que "anule" el enlace.

Momento de Ejecución del código jQuery

• Cuando el documento (DOM) esté preparado para ser manipulado.
• Antes de que se carguen imágenes o anuncios.
• ¡Ojo al efectuar acciones sobre imágenes si no están todavía cargadas!

$(document).ready(function(){
   // Aquí viene mi código jQuery
});

Hola Mundo mediante jQuery

Descarga una versión de jQuery e inserta las siguientes instrucciones de jQuery: $("a").click(function(event) { alert("Hola Mundo"); event.preventDefault(); });

Instalación plugin de jQuery para Eclipse Juno

• Instalamos el marketPlace de Eclipse desde Help->Install new Software
• Ejecutamos Help->Eclipse Marketplace y buscamos JSDT jQuery y lo instalamos
• Configuración:

Project Explorer->JavaScript Resources

Properties (botón derecho) y pulsamos en Add JavaScript Library y seleccionamos jQuery.