Usuario:Juanda/jQuery/Introducción

= 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

Versiones de jQuery

 * Versión actual de jQuery: 1.10.2 y 2.0.3
 * Licencia MIT
 * La funcionalidad es la misma
 * La rama 2.x no es compatible con IE 6-8
 * La rama 2.x es algo más ligera
 * Usaremos la rama 1.x:
 * Misma funcionalidad
 * Mayor compatibilidad

Versiones de jQuery

 * Versión de producción:
 * Minified y comprimida
 * Aproximadamente 90KB


 * Versión de desarrollo:
 * Sin comprimir
 * Aproximadamente 3 veces más pesada, en torno a 270KB


 * La rama 2.x pesa un 10% menos, resulta inapreciable


 * Se puede descargar de la web de jQuery
 * Versión de producción:
 * Versión de desarrollo

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:
 * CDN de Microsoft:
 * CDN del propio jQuery:
 * Minified:


 * Full:

Momento de Ejecución del código Javascript

 * Cuando la página se ha cargado.
 * ¿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.

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!

Instalación plugin de jQuery para Eclipse Kepler o Luna

 * Instalamos el Marketplace de Eclipse desde Help->Install new Software (por defecto ya está instalado en Eclipse Kepler)
 * Ejecutamos Help->Eclipse Marketplace y buscamos JSDT jQuery y lo instalamos
 * Seleccionamos el proyecto y pulsamos en properties (botón derecho) y pulsamos JavaScript->Include Patht Library y seleccionamos jQuery.


 * Si el plugin de jQuery no funciona, tocará utilizar Eclipse Juno :-(
 * En Brackets funciona correctamente :-)

Sintaxis
$(selector).action
 * $: Simbolo para definir JQuery (podríamos usar también JQuery)
 * selector: Consulta sobre los elementos HTML (sintaxis muy similar a CSS)
 * action:	Acción que se ejecuta sobre los elementos


 * Ejemplos:

jQuery.noConflict

 * Utilizamos jQuery.noConflict para evitar conflictos de nombre con otras librerías de JavaScript.