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

De WikiEducator
Saltar a: navegación, buscar
 
(24 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 
{{Usuario:juanda/jQuery/nav }}
 
{{Usuario:juanda/jQuery/nav }}
−
{{#widget:Slides}} {{MiTitulo| Curso de jQuery-Características}}  
+
{{#widget:Slides}} {{MiTitulo| Curso de jQuery}}  
 
<div class="slides layout-regular template-default">
 
<div class="slides layout-regular template-default">
 
<div class="slide">
 
<div class="slide">
  
−
= Sintaxis de jQuery =
+
==Efectos en jQuery==
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
===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:
+
=== Efectos ===
 +
* Utilizaremos las siguientes funciones:
 
<source lang="javascript">
 
<source lang="javascript">
−
$(this).hide() //oculta el elemento actual
+
$(selector).hide(speed,callback)
−
$("p").hide() //oculta todos los elementos de tipo párrafo
+
$(selector).show(speed,callback)
−
$("p.test").hide() //oculta todos los párrafos con class=test
+
$(selector).toggle(speed,callback)
−
$("#test").hide() //oculta todos los elementos con id=test
+
$(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)
 
</source>
 
</source>
  
 +
*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
 
</div>
 
</div>
−
 
 
<div class="slide">
 
<div class="slide">
−
 
+
*Con la función animate, podemos hacer efectos más complejos:
−
=== Ejemplos de uso del selector de jQuery  ===
+
*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">
−
$("p") //se seleccionan todos los elementos de tipo párrafo
+
$(selector).animate({
−
 
+
      left:'250px',
−
$("p.intro")  //todos los párrafos con class=intro
+
      opacity:'0.5',
−
 
+
      height:'150px',
−
$("p#demo")  //todos los párrafos con id=demo
+
      width:'150px'
−
 
+
    });
−
$("[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"
+
  
 +
$("button").click(function(){
 +
  $("div").animate({
 +
    left:'250px',
 +
    height:'+=150px',
 +
    width:'+=150px'
 +
  });
 +
});
 +
</source>
 +
*Pararemos una animación mediante la función stop:
 +
<source lang="javascript">
 +
$(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 ===
−
=== Versiones de jQuery ===
+
*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.  
−
*Versión de producción:
+
*Ejemplo:
−
: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 class="slide">
+
−
*Versión de producción:
+
 
<source lang="javascript">
 
<source lang="javascript">
−
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
+
$("p").hide(1000);
−
</source>  
+
alert("El párrafo se ha escondido ¿AHORA?");
−
*Versión de desarrollo
+
</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="jquery-1.8.2.js"></script>
+
$("p").hide(1000,function(){
−
</source>
+
  alert("El párrafo se ha escondido AHORA");
−
</div>
+
});
 +
</source>
  
−
<div class="slide">
 
−
 
−
=== 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:
 
−
<source lang="javascript">
 
−
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.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>
 
−
</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>
 
−
</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»