Diferencia entre revisiones de «Usuario:Juanda/jQuery/Introducción»

De WikiEducator
Saltar a: navegación, buscar
(Versiones de jQuery)
(Versiones de jQuery)
Línea 41: Línea 41:
  
 
*Se puede descargar de jQuery.com (versión producción y versión desarrollo) e incluirla en nuestra web:
 
*Se puede descargar de jQuery.com (versión producción y versión desarrollo) e incluirla en nuestra web:
 +
: Versión de producción:
 
<source lang="javascript">
 
<source lang="javascript">
 
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript" src="jquery.js"></script>
 
</source>  
 
</source>  
 +
:Versión de desarrollo
 
<source lang="javascript">
 
<source lang="javascript">
<script type="text/javascript" src="jquery.js"></script>
+
<script type="text/javascript" src="jquery.min.js"></script>
 
</source>  
 
</source>  
 
</div>
 
</div>

Revisión de 06:59 27 oct 2012



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:
Versión de producción:
	<script type="text/javascript" src="jquery.js"></script>
Versión de desarrollo
	<script type="text/javascript" src="jquery.min.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