Introducción
De WikiEducator
Saltar a: navegación, buscar
jQuery
Tutorial para desarrollar en Web mediante jQuery.
Contenido
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:
- 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>
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.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hola Mundo en javaScript</title> <script type="text/javascript"> window.onload = function() { document.getElementById("holamundo").onclick = holaMundo; } function holaMundo() { alert ("Hola Mundo"); return false; } </script> </head> <body> <a id="holamundo" href="http://jquery.com/">jQuery</a> </body> </html>
|
<div class="slide"
Momento de Ejecución del código jQuery
- Javascript:
- Cuando el documento (DOM) esté preparado para ser manipulado.
- Antes de que se carguen imágenes o anuncios.
$(document).ready(function(){ // Aquí viene mi código jQuery });
</div>