Última revisión de 06:24 19 nov 2013

Contenido

1 Introducción
2 Hola Mundo mediante javascript
- 2.1 Momento de Ejecución del código jQuery
3 Hola Mundo mediante jQuery

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.

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.

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

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
});

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();
		});

Resultado actividad:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hola Mundo con jquery</title>
<script src="jquery-1.10.2.min.js"></script>
<script>
	$(document).ready(function() {
		$("a").click(function(event) {
			alert("Hola Mundo");
			event.preventDefault();
		});
	});
</script>
</head>
<body>
	<a href="http://jquery.com/">jQuery</a>
</body>
</html>

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>

@@ Línea 25: / Línea 25: @@
 :Compatibilidad con todos los navegadores
 :…
-: Versión actual de jQuery: '''1.10.2''' y '''2.0.3'''
+</div>
-:[http://jquery.org/license/ Licencia MIT]
+<div class="slide">
+===Versiones de jQuery===
+*Versión actual de jQuery: '''1.10.2''' y '''2.0.3'''
+*[http://jquery.org/license/ 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
 </div>
@@ Línea 34: / Línea 44: @@
 *Versión de producción:
 :Minified y comprimida
-:Aproximadamente 30KB
+:Aproximadamente 90KB
 *Versión de desarrollo:
 : Sin comprimir
-: Aproximadamente 8 veces más pesada, aproximadamente 240KB
+: Aproximadamente 3 veces más pesada, en torno a 270KB
+*La rama 2.x pesa un 10% menos, resulta inapreciable
 *Se puede descargar de [http://www.jquery.com/download la web de jQuery]
@@ Línea 44: / Línea 56: @@
 *Versión de producción:
 <source lang="javascript">
-	<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
+	<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
 </source>
 *Versión de desarrollo
 <source lang="javascript">
-	<script type="text/javascript" src="jquery-1.8.2.js"></script>
+	<script type="text/javascript" src="jquery-1.10.2.js"></script>
 </source>
 </div>
@@ Línea 60: / Línea 72: @@
 * CDN de Google:
 <source lang="javascript">
-	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 </source>
 *CDN de Microsoft:
 <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://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
 </source>
 *CDN del propio jQuery:
 : Minified:
 <source lang="javascript">
-	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 </source>
 :Full:
 <source lang="javascript">
-	<script type="http://code.jquery.com/jquery-1.8.2.js"></script>
+	<script type="http://code.jquery.com/jquery-1.10.2.js"></script>
 </source>
 </div>
 <div class="slide">
 === Momento de Ejecución del código Javascript ===
 * Cuando la página se ha cargado.
@@ Línea 146: / Línea 159: @@
 <meta charset="utf-8">
 <title>Hola Mundo con jquery</title>
-<script src="jquery-1.8.2.min.js"></script>
+<script src="jquery-1.10.2.min.js"></script>
 <script>
 	$(document).ready(function() {
@@ Línea 165: / Línea 178: @@
 <div class="slide">
-=== Instalación plugin de jQuery para Eclipse Juno ===
+=== Instalación plugin de jQuery para Eclipse Kepler o Luna ===
-*Instalamos el Marketplace de Eclipse desde Help->Install new Software
+*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
-*Configuración:
+*Seleccionamos el proyecto y pulsamos en properties (botón derecho) y pulsamos JavaScript->Include Patht Library y seleccionamos jQuery.
-:Project Explorer->JavaScript Resources
-:Properties (botón derecho) y pulsamos en Add JavaScript Library y seleccionamos jQuery.
+*Si el plugin de jQuery no funciona, tocará utilizar Eclipse Juno :-(
+*En Brackets funciona correctamente :-)
 </div>
 <div class="slide">
 ===Sintaxis===
 '''$(selector).action()'''

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

Última revisión de 06:24 19 nov 2013

Contenido

Introducción

Requerimientos previos

¿Qué es jQuery?

Versiones de jQuery

Versiones de jQuery

Uso de un CDN

Momento de Ejecución del código Javascript

Hola Mundo mediante javascript

Momento de Ejecución del código jQuery

Hola Mundo mediante jQuery

Instalación plugin de jQuery para Eclipse Kepler o Luna

Sintaxis

Ejemplos de uso del selector de jQuery

jQuery.noConflict()

Menú de navegación

Herramientas personales

Espacios de nombres

Variantes

Vistas

Acciones

Buscar

Navegación

Herramientas

Imprimir/exportar