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

De WikiEducator
Saltar a: navegación, buscar
(→‎Efectos)
 
(14 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">
 
−
===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:
 
−
<source lang="javascript">
 
−
$(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
 
−
</source>
 
−
 
−
</div>
 
−
 
−
<div class="slide">
 
−
 
−
=== Ejemplos de uso del selector de jQuery  ===
 
−
<source lang="javascript">
 
−
$("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"
 
−
</source>
 
−
</div>
 
−
 
−
<div class="slide">
 
−
===jQuery.noConflict()===
 
−
* Utilizamos jQuery.noConflict() para evitar conflictos de nombre con otras librerías de JavaScript.
 
−
<source lang="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>
 
−
</source>
 
−
 
−
</div>
 
−
 
−
 
  
 
<div class="slide">
 
<div class="slide">
Línea 93: Línea 30:
 
<div class="slide">
 
<div class="slide">
 
*Con la función animate, podemos hacer efectos más complejos:
 
*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">
 
$(selector).animate({
 
$(selector).animate({
Línea 100: Línea 39:
 
       width:'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">
 +
$(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 ===
 
=== Callback functions ===
−
</div>
 
 
*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.  
 
*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:
 
*Ejemplo:
 
<source lang="javascript">
 
<source lang="javascript">
 
$("p").hide(1000);
 
$("p").hide(1000);
−
alert("The paragraph is now hidden");
+
alert("El párrafo se ha escondido ¿AHORA?");
 
</source>
 
</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:
 
*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">
 
$("p").hide(1000,function(){
 
$("p").hide(1000,function(){
−
   alert("The paragraph is now hidden");
+
   alert("El párrafo se ha escondido AHORA");
 
});
 
});
 
</source>
 
</source>
−
<div class="slide">
 
  
−
=== Manipulación de html ===
 
 
</div>
 
</div>
−
*Cambia el contenido del elemento/s html seleccionado/s:
 
−
<source lang="javascript">
 
−
$(selector).html(contenido)
 
−
</source>
 
−
*Añaden contenido en el elemento HTML seleccionado:
 
−
<source lang="javascript">
 
−
$(selector).append(content)
 
−
$(selector).prepend(content)
 
−
</source>
 
−
*Añaden contenido después o antes del elemento HTML seleccionado:
 
−
<source lang="javascript">
 
−
$(selector).after(content)
 
−
$(selector).before(content)
 
−
</source>
 
 
<div class="slide">
 
<div class="slide">
−
 
+
=== Encadenar métodos ===
−
=== Manipulación de css ===
+
*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.
−
 
+
−
Obtiene la propiedad CSS del primer elemento seleccionado:
+
 
<source lang="javascript">
 
<source lang="javascript">
−
//$(selector).css(name)
+
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
−
$(this).css("background-color");  
+
//también lo podríamos haber hecho así:
 +
$("#p1").css("color","red")
 +
  .slideUp(2000)
 +
  .slideDown(2000);
 
</source>
 
</source>
  
−
Establece el valor de una propiedad CSS de los elementos seleccionados:
 
−
<source lang="javascript">
 
−
//$(selector).css(name,value)
 
−
$("p").css("background-color","yellow");
 
−
</source>
 
  
−
Establece varias propiedades CSS de los elementos seleccionados:
 
−
<source lang="javascript">
 
−
//$(selector).css({properties})
 
−
$("p").css({"background-color":"yellow","font-size":"200%"});
 
−
</source>
 
−
 
−
Establece la altura de los elementos seleccionados:
 
−
<source lang="javascript">
 
−
//$(selector).height(value)
 
−
$("#div1").height("200px");
 
−
</source>
 
−
 
−
Establece la anchura de los elementos seleccionados:
 
−
<source lang="javascript">
 
−
//$(selector).width(value)
 
−
$("#div2").width("300px");
 
−
</source>
 
 
</div>
 
</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»