Categoria: Programacion Tema: Java script - Java Titulo: Llamadas encadenadas de metodos del objeto jQuery
Fecha del Tema: 2013-04-19 23:56:52Llamadas 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.
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.
