Curso de jQuery-Características

jQuery

Tutorial para desarrollar en Web mediante jQuery.

Introducción | Efectos | html | Eventos | Ajax | Plugins  | jQueryUI

Sintaxis de jQuery

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"

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, aproximadamente 240KB

• Se puede descargar de la web de jQuery

• Versión de producción:

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

• Versión de desarrollo

	<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>

• 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://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.