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:

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

• Versión de desarrollo

	<script type="text/javascript" src="jquery-1.10.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.10.2/jquery.min.js"></script>

• CDN de Microsoft:

	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>

• CDN del propio jQuery:

Minified:

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

Full:

	<script type="http://code.jquery.com/jquery-1.10.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.

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!

$(document).ready(function(){
   // Aquí viene mi código jQuery
});

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:

$(this).hide() 		//oculta el elemento actual
$("p").hide() 		//oculta todos los elementos de tipo párrafo
$("p.test").hide() 	//oculta todos los párrafos con class=test
$("#test").hide() 	//oculta todos los elementos con id=test

Ejemplos de uso del selector de jQuery

$("p")  //se seleccionan todos los elementos de tipo párrafo
$("p.intro")  //todos los párrafos con class=intro
$("p#demo")  //todos los párrafos con id=demo
$("[href]") //todos los elementos con atributo href
$("[href='#']") //todos los elementos con atributo href="#"
$("[href!='#']")  //todos los elementos con atributo href diferente de "#"
$("[href$='.jpg']") //todos los elmentos con atributo href que acabe en .jpg
$("p").css("background-color","yellow"); //modificamos el background-color de todos los párrafos a amarillo
$("p#intro:first") 	//El primer párrafo con id="intro"
$("ul li:first") 	El primer elemento <li> de cada <ul>
$("div#intro .head") //Todos los elementos con class="head" dentro de un <div> con id="intro"

jQuery.noConflict()

• Utilizamos jQuery.noConflict() para evitar conflictos de nombre con otras librerías de JavaScript.

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
var jq=jQuery.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").hide();
  });
});
</script>
</head>
<body>
<p>Esto es un párrafo.</p>
<button>Pulsa aquí</button>
</body>
</html>