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

• Se puede descargar de jQuery.com (versión producción y versión desarrollo) e incluirla en nuestra web:

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

	<script type="text/javascript" src="jquery.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://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

Full:

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

Nuestro primer ejercicio

• Versión de producción:

Minified y comprimida

Aproximadamente 30KB

• Versión de desarrollo:

Sin comprimir

Aproximadamente 8 veces más pesada