Temas > Programacion > Java script - Java > Llamadas encadenadas de metodos del objeto jQuery
Julio

Llamadas encadenadas de métodos del objeto jQuery
Otra característica muy utilizada en la librería jQuery 
es la llamada sucesiva de métodos, esto se puede hacer 
ya que casi todos los métodos de la clase jQuery retornan 
un objeto de tipo jQuery.
Para entender esta sintaxis implementaremos un problema.
Problema:Confeccionar una página que muestre un recuadro 
con texto. Disponer dos botones, uno que cambie la opacidad 
lentamente hasta el valor 0.5, seguidamente oculte el recuadro 
también lentamente, y el otro botón que lo muestre en forma 
instantánea y aumente su opacidad al 100%.
pagina1.html
<?php //esto no va
 <html>
 <head>
 <title>Problema</title>
 <link rel="StyleSheet" href="estilos.css" type="text/css">
 <script type="text/javascript" src="../jquery.js"></script>
 <script type="text/javascript" src="funciones.js"></script>
 </head>
 <body>
 <input type="button" id="boton1" value="Reducir opacidad
 y ocultar">
 <input type="button" id="boton2" value="Mostrar en
 forma instantánea">
 <div id="descripcion" class="recuadro">
 <p>HTML es el lenguaje que se emplea para el desarrollo de
 páginas de internet.</p>
 <p>Este lenguaje está constituido de elementos que el
 navegador interpreta y las despliega en la pantalla de acuerdo 
 a su objetivo. Veremos que hay elementos para disponer 
 imágenes sobre una página, hipervínculos que nos permiten 
 dirigirnos a otra página, listas, tablas para tabular datos,
 etc.</b><p>Para poder crear una página HTML se requiere un
 simple editor de texto (en nuestro caso emplearemos este sitio) 
 y un navegador de internet (IExplorer, FireFox etc.), emplearemos 
 el navegador que en este preciso momento está utilizando 
 (recuerde que usted está viendo en este preciso momento una
 página HTML con su navegador).</p>
 <p>Lo más importante es que en cada concepto desarrolle los
 ejercicios propuestos y modifique los que se presentan ya 
 </div>
 </body>
 </html>
?>//esto no va
funciones.js
<?php //esto no va
 $(document).ready(function () {
   $("#boton1").click(function () {
      $("#descripcion").fadeTo("slow",0.5).hide("slow");
   });
   $("#boton2").click(function () {
      $("#descripcion").show().fadeTo("slow",1);
   })
 })
?>//esto no va
estilos.css
<?php //esto no va
 .recuadro {
    background-color:#ffffcc;
    font-family:verdana;
    font-size:14px;
    border-top-width:1px;
    border-right-width:3px;
    border-bottom-width:3px;
    border-left-width:1px;
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:solid;
    border-left-style:dotted;
    border-top-color:#ffaa00;
    border-right-color:#ff0000;
    border-bottom-color:#ff0000;
    border-left-color:#ffaa00;
 }
?>//esto no va
Como podemos observar en la siguiente línea tenemos 
llamadas encadenadas:
<?php //esto no va
     $("#descripcion").fadeTo("slow",0.5).hide("slow");
estilos.css
.recuadro { background-color:#ffffcc; font-family:verdana;
font-size:14px; border-top-width:1px; border-right-width:3px; 
border-bottom-width:3px; border-left-width:1px;
border-top-style:dotted; border-right-style:solid; 
border-bottom-style:solid; border-left-style:dotted; 
border-top-color:#ffaa00; border-right-color:#ff0000; 
border-bottom- color:#ff0000; border-left-color:#ffaa00; }
?>//esto no va
Primero obtenemos la referencia del id descripcion, la función 
$ nos retorna un objeto jQuery que utilizamos directamente 
para llamar al método fadeTo para aumentar su opacidad 
lentamente. Seguidamente el método fadeTo nos retorna la 
referencia del objeto jQuery y la utilizamos para llamar al 
método hide indicándole que oculte el div lentamente.
Es importante notar que los métodos se ejecutan de izquierda 
a derecha.
Recordemos como era nuestro código cuando comenzamos 
a estudiar jQuery:
<?php //esto no va
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
   var x=$("#boton1");
   x.click(ocultarRecuadro);
   x=$("#boton2");
   x.click(mostrarRecuadro);
}
function ocultarRecuadro()
{
   var x=$("#descripcion");
   x.fadeTo("slow",0.5);
   x.hide("slow");
}
function mostrarRecuadro()
{
   var x=$("#descripcion");
   x.show();
   x.fadeTo("slow",1);
}
?>//esto no va
Con funciones anónimas y encadenamiento de llamadas a 
métodos:
<?php //esto no va
$(document).ready(function () {
   $("#boton1").click(function () {
      $("#descripcion").fadeTo("slow",0.5).hide("slow");
   });
   $("#boton2").click(function () {
      $("#descripcion").show().fadeTo("slow",1);
   })
})
?>//esto no va
Luego de haber estudiado jQuery con la metodología larga 
no debería ser muy difícil adaptarse a esta metodología resumida.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
 123456
789101112 13
14151617181920
21222324252627
28293031   

Domingo 13 de Julio 2025
Semana 28



Java script - Java


-Input type submit con evento onclick
-Maneras de salir de un iframe con java script
-Sintaxis de un list array en java
-Consumir un JSON desde PHP
-Producir JSON desde PHP
-Mostrar un tooltip con datos recuperados en jQuery
-Menu desplegable en jQuery
-Funcion ajax en jQuery
-JSON en jQuery
-Pasando datos por los metodos GET y POST en jQuery
-Ajax metodos ajaxStart y ajaxStop en jQuery
-Ajax metodo load en jQuery
-Iteracion por los elementos each en jQuery
-Efecto con el metodo toggle en jQuery
-Efecto con el metodo fadeTo en jQuery
-Efectos con los metodos fadeIn y fadeOut en jQuery
-Efectos con los metodos show y hide en jQuery
-Manipulacion de los elementos del DOM en jQuery
-Evento blur en jQuery
-Evento focus en jQuery
-Evento dblclick en jQuery
-Eventos mousedown y mouseup en jQuery
-Evento mousemove en jQuery
-Evento hover en jQuery
-Eventos mouseover y mouseout en jQuery
-Administracion de eventos con jQuery
-Metodos html y html valor en jQuery
-Metodos addClass y removeClass en jQuery
-Metodos attr y removeAttr en jQuery
-Metodos text, text valor en jQuery
-Seleccion de elementos con la clase CSS definida
-Seleccion de elementos utilizando el selector CSS
-Seleccion de elementos por el tipo de elementos jQ
-Seleccion de un elemento mediante el id jQuery
-Nueva manera de programar JavaScript con jQuery
-Que es el jQuery
-Archivo JavaScript externo
-Propiedad screen del objeto window en java script
-Propiedad location de objeto window en java script
-El objeto window en java script
-Eventos onMouseOver y onMouseOut en java script
-Eventos onFocus y onBlur en java script
-Control TEXTAREA en java script
-Control RADIO en java script
-Control CHECKBOX en java script
-Control SELECT en java script
-Control PASSWORD en java script
-Controles FORM, BUTTON y TEXT en java script
-Formularios y Eventos en java script
-Clase Math en java script
-Clase String en java script
-Clase Array en java script
-Clase Date en java script
-Programacion orientada a objetos en java script
-Funciones que retornan un valor en java script
-Funciones con parametros en java script
-Funciones en java script
-Estructura repetitiva for en java script
-Estructura repetitiva do while en java script
-Concepto de acumulador en java script
-Estructura repetitiva (while) en java script
-Operadores logicos or en las estructuras java s
-Operadores logicos (and) en las estructuras java s
-Estructuras condicionales anidadas en java script
-Estructuras condicionales compuesta en jaca script
-Estructuras condicionales simples en java script
-Estructuras secuenciales en java script
-Entrada de datos por teclado en java script
-Variables en java script
-Que es JavaScript
-Lectura y escritura de archivos en java
-Entrada y salida estandar en Java
-Programa para contar vocales de un fichero en java
-Convertidor de divisas en java
-Form con una ventana nueva
-Seleccionar un elemento html mediante su id
..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar