|
|
| Línea 40: |
Línea 40: |
| | | | |
| | *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:
| + | </div> |
| | + | <div class="slide"> |
| | + | *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-1.8.2.min.js"></script> |
| | </source> | | </source> |
| − | :Versión de desarrollo
| + | *Versión de desarrollo |
| | <source lang="javascript"> | | <source lang="javascript"> |
| − | <script type="text/javascript" src="jquery.min.js"></script> | + | <script type="text/javascript" src="jquery-1.8.2.js"></script> |
| | </source> | | </source> |
| | </div> | | </div> |
| Línea 67: |
Línea 69: |
| | : Minified: | | : Minified: |
| | <source lang="javascript"> | | <source lang="javascript"> |
| − | <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script> | + | <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> |
| | </source> | | </source> |
| | :Full: | | :Full: |
| | <source lang="javascript"> | | <source lang="javascript"> |
| − | <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> | + | <script type="http://code.jquery.com/jquery-1.8.2.js"></script> |
| | </source> | | </source> |
| | </div> | | </div> |
| Línea 126: |
Línea 128: |
| | }); | | }); |
| | </source> | | </source> |
| − | | + | </div> |
| | + | <div class="slide"> |
| | {{Actividad| | | {{Actividad| |
| | Title=Hola Mundo mediante jQuery| | | Title=Hola Mundo mediante jQuery| |
Revisión de 09:17 27 oct 2012
jQuery
Tutorial para desarrollar en Web mediante jQuery.
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
- Minified y comprimida
- Aproximadamente 30KB
- Sin comprimir
- Aproximadamente 8 veces más pesada, aproximadamente 240KB
- 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-1.8.2.min.js"></script>
<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>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
- 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.
$(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.
