Diferencia entre revisiones de «Usuario:Juanda/jQuery/Sintaxis»

De WikiEducator
Saltar a: navegación, buscar
 
(29 revisiones intermedias por el mismo usuario no mostrado)
Línea 4: Línea 4:
 
<div class="slide">
 
<div class="slide">
  
−
= Introducción =
+
==Efectos en jQuery==
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
=== Requerimientos previos ===
 
−
*html
 
−
*Conocimiento básico de javascript
 
−
*Conocimiento básico de document object model (DOM)
 
−
</div>
 
  
−
<div class="slide">
+
=== Efectos ===
−
=== ¿Qué es jQuery? ===
+
* Utilizaremos las siguientes funciones:
−
*jQuery es una librería de funciones JavaScript:
+
<source lang="javascript">
−
*'''“Write less, do more”''' (escribe menos, haz más)
+
$(selector).hide(speed,callback)
−
*Funcionalidad:
+
$(selector).show(speed,callback)
−
:Selección y manipulación de elementos HTML y CSS
+
$(selector).toggle(speed,callback)
−
:Funciones de eventos en HTML
+
$(selector).slideDown(speed,callback)
−
:Efectos y animaciones de JavaScript
+
$(selector).slideUp(speed,callback)
−
:AJAX
+
$(selector).slideToggle(speed,callback)
−
:Compatibilidad con todos los navegadores
+
$(selector).fadeIn(speed,callback)
−
:…
+
$(selector).fadeOut(speed,callback)
−
: Versión actual de jQuery: '''1.8.2'''
+
$(selector).fadeToggle(speed,callback)
−
:[http://jquery.org/license/ Licencia MIT]
+
$(selector).fadeTo(speed,opacity,callback)
−
</div>
+
</source>
  
−
<div class="slide">
+
*El primer parámetro nos indica la velocidad y puede tener los valores: slow, fast, normal o milisegundos.
−
 
+
*El segundo parámetro es la función que hay que ejecutar en el momento en que se complete la acción de hide o show.
−
=== Versiones de jQuery ===
+
*Los parámetros son opcionales
−
*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 [http://www.jquery.com/download la web de jQuery]
+
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*Versión de producción:
+
*Con la función animate, podemos hacer efectos más complejos:
 +
*Con valores absolutos o relativos
 +
*Si ponemos varios animates seguidos, los irá encolando (no empezará una instrucción hasta terminar la anterior).
 
<source lang="javascript">
 
<source lang="javascript">
−
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
+
$(selector).animate({
−
</source>  
+
      left:'250px',
−
*Versión de desarrollo
+
      opacity:'0.5',
 +
      height:'150px',
 +
      width:'150px'
 +
    });
 +
 
 +
$("button").click(function(){
 +
  $("div").animate({
 +
    left:'250px',
 +
    height:'+=150px',
 +
    width:'+=150px'
 +
  });
 +
});
 +
</source>
 +
*Pararemos una animación mediante la función stop:
 
<source lang="javascript">
 
<source lang="javascript">
−
<script type="text/javascript" src="jquery-1.8.2.js"></script>
+
$(selector).stop(stopAll,goToEnd);
−
</source>  
+
</source>
 +
*Para ver todas las opciones de efectos recomendamos ver la [http://api.jquery.com/category/effects/ api de efectos de jquery]
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
 
+
=== Callback functions ===
−
=== Uso de un CDN ===
+
*En JavaScript se ejecutan las sentencias línea a línea. Puede ser que una sentencia no haya terminado su ejecución y ya haya comenzado la siguiente.
−
 
+
*Ejemplo:
−
*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:
+
 
<source lang="javascript">
 
<source lang="javascript">
−
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+
$("p").hide(1000);
−
</source>  
+
alert("El párrafo se ha escondido ¿AHORA?");
−
*CDN de Microsoft:
+
</source>
 +
*Para evitar esto, '''pasamos la función como parámetro''', y evitamos que se ejecute hasta que termina la animación. Esto se conoce como callback functions:
 
<source lang="javascript">
 
<source lang="javascript">
−
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
+
$("p").hide(1000,function(){
−
</source>
+
  alert("El párrafo se ha escondido AHORA");
−
*CDN del propio jQuery:
+
});
−
: Minified:
+
</source>
−
<source lang="javascript">
+
 
−
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+
−
</source>  
+
−
:Full:
+
−
<source lang="javascript">
+
−
<script type="http://code.jquery.com/jquery-1.8.2.js"></script>
+
−
</source>
+
 
</div>
 
</div>
−
 
 
<div class="slide">
 
<div class="slide">
−
=== Momento de Ejecución del código Javascript ===
+
=== Encadenar métodos ===
−
* Cuando la página se ha cargado.
+
*Si tenemos que ejecutar varios métodos o acciones sobre el mismo elemento, se pueden encadenar, de modo que el elemento se busque mediante el selector de jQuery una única vez.
 
<source lang="javascript">
 
<source lang="javascript">
−
window.onload = function(){ /*Aquí viene mi código de javascript*/ }
+
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
−
</source>
+
//también lo podríamos haber hecho así:
−
* ¿Por qué? No se puede ejecutar hasta que el DOM se haya cargado completamente
+
$("#p1").css("color","red")
−
* Desventaja: Habrá que esperar la carga completa de imágenes y anuncios para su ejecución.
+
  .slideUp(2000)
−
</div>
+
  .slideDown(2000);
−
<div class="slide">
+
−
{{Actividad|
+
−
Title=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.
+
−
<!--
+
−
<source lang="html4strict">
+
−
<!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>
+
 
</source>
 
</source>
−
-->
 
−
}}
 
−
</div>
 
−
<div class="slide">
 
  
−
=== 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.
 
  
−
<source lang="javascript">
 
−
 
−
$(document).ready(function(){
 
−
  // Aquí viene mi código jQuery
 
−
});
 
−
</source>
 
 
</div>
 
</div>
−
<div class="slide">
 
−
{{Actividad|
 
−
Title=Hola Mundo mediante jQuery|
 
−
* Descarga una versión de jQuery e inserta las siguientes instrucciones de jQuery:
 
  
−
<source lang="html4strict">
 
−
$("a").click(function(event) {
 
−
alert("Hola Mundo");
 
−
event.preventDefault();
 
−
});
 
−
</source>
 
−
<!--
 
−
*Resultado actividad:
 
−
<source lang="html4strict">
 
−
<!DOCTYPE html>
 
−
<html lang="en">
 
−
<head>
 
−
<meta charset="utf-8">
 
−
<title>Hola Mundo con jquery</title>
 
−
<script src="jquery-1.8.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>
 
−
</source>
 
−
-->
 
−
}}
 
−
</div>
 
−
<div class="slide">
 
−
=== 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.
 
−
</div>
 
 
</div>
 
</div>

Última revisión de 05:44 2 nov 2012


Efectos en jQuery

Efectos

  • Utilizaremos las siguientes funciones: 
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
$(selector).toggle(speed,callback)
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeToggle(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
  • El primer parámetro nos indica la velocidad y puede tener los valores: slow, fast, normal o milisegundos.
  • El segundo parámetro es la función que hay que ejecutar en el momento en que se complete la acción de hide o show.
  • Los parámetros son opcionales
  • Con la función animate, podemos hacer efectos más complejos:
  • Con valores absolutos o relativos
  • Si ponemos varios animates seguidos, los irá encolando (no empezará una instrucción hasta terminar la anterior). 
$(selector).animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
 
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});
  • Pararemos una animación mediante la función stop: 
$(selector).stop(stopAll,goToEnd);

Callback functions

  • En JavaScript se ejecutan las sentencias línea a línea. Puede ser que una sentencia no haya terminado su ejecución y ya haya comenzado la siguiente.
  • Ejemplo: 
$("p").hide(1000);
alert("El párrafo se ha escondido ¿AHORA?");
  • Para evitar esto, pasamos la función como parámetro, y evitamos que se ejecute hasta que termina la animación. Esto se conoce como callback functions: 
$("p").hide(1000,function(){
  alert("El párrafo se ha escondido AHORA");
});

Encadenar métodos

  • Si tenemos que ejecutar varios métodos o acciones sobre el mismo elemento, se pueden encadenar, de modo que el elemento se busque mediante el selector de jQuery una única vez. 
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
//también lo podríamos haber hecho así:
$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);


Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/jQuery/Sintaxis&oldid=10154»