advertisement

Diseño web 4

50 %
50 %
advertisement
Information about Diseño web 4

Published on March 1, 2014

Author: henry161088

Source: slideshare.net

advertisement

Data Systems Computadoras Módulo: Diseño Web Instructor: Br. Henry Renderos Conceptos Básicos de Jquery ¿Qué es jQuery? Jquery es una liviana, “escribe menos, haz más”, librería de javascript. El propósito de jQuery es hacer mucho más fácil el uso de JavaScript en nuestros sitios web. Jquery toma un montón de tareas comunes que requieren muchas líneas de código javascript para lograrlo, y las envuelve hacia métodos que podemos llamar con una simple línea de código. Jquery también simplifica muchas de las cosas complicadas de javascript, como llamadas AJAX y manipulación DOM. La librería de jQuery contiene las siguientes características: • Manipulación de HTML/DOM • Manipulación de CSS • Eventos y métodos HTML • Efectos y animaciones • AJAX • Utilidades Descargando jQuery Hay dos versiones de jQuery disponibles para ser descargadas: • Versión de producción: esta es para tu sitio web porque ha sido minimizada y comprimida. • Versión de Desarrollo: esta es para pruebas y desarrollo (sin comprimir y código leible) Las dos versiones pueden ser descargadas de http://jquery.com/download/ La librería de jQuery es un solo archivo de JavaScript, y la referencias con la etiqueta <script> de HTML (recuerda que la etiqueta <script> dete estar dentro de la sección <head>). <head> <script src=”jquery-1.10.2.min.js”></script> </head> Coloca el archivo que descargaste en el mismo directorio donde están las páginas en donde quieres usarlo. Sintáxis de jQuery Con jQuery puedes seleccionar (preguntar) elementos de HTML y realizar “acciones” sobre ellas. La sintaxis de jQuery está hecho a la medida para seleccionar elementos HTML y realizar algunas acciones sobre esos elementos. La sintaxis básica es: $(selector).accion() • Un símbolo de dólar ($) define/accesa a jQuery. • Un (selector) para “preguntar (o buscar)” elementos HTML. • Una accion() de jQuery para ser realizada sobre los elementos. Por ejemplo: $(this).hide() - oculta el elemento actual.

$(“p”).hide() - oculta todos los elementos <p> $(“.test”).hide() - oculta todos los elementos con class=”test”. $(“#test”).hide() - oculta el elemento con id=”test”. El evento Document Ready Esto es para prevenir cualquier código jQuery que se ejecute antes de que el documento se ha terminado de cargar (es listo). Es una buena práctica esperar a que el documento esté completamente cargado y listo antes de trabajar con él. Esto también le permite tener su código JavaScript antes que el cuerpo del documento, en la sección de cabecera. Selectores jQuery Los selectores de jQuery te permiten seleccionar y manipular elementos HTML. Los selectores de jQuery son usados para “buscar” (o seleccionar) elementos HTML basados en su identificadores, clases, tipos, atributos, valores de atributos y mucho más. Estos están basados sobre el selector CSS existente, y como agregado, esto tiene algunos propios selectores personalizados. El selector de elementos. El selector de elementos jQuery selecciona elementos basados en el nombre del elemento. Puedes seleccionar todos los elementos <p> en una página haciendo esto: $(“p”) Ejemplo: Cuando el usuario hace click en el botón, todos los elementos <p> se ocultan. <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>Este es un encabezado</h2> <p>Este es un párrafo</p> <p>Este es otro párrafo</p> <button>Click acá</button> </body> </html> El selector #id El selector de #id de jQuery usa el atributo id de una etiqueta HTML para buscar el elemento específico. Un id debería ser único dentro de la página, así que debes usar el selector #id cuando quieras encontrar un único elemento. Para buscar un elemento con un id específico, escribe el símbolo #, seguido por el id del elemento.

$(“#test”) Ejemplo: Cuando el usuario hace click en el botón, el elemento con id=”test” será ocultado. <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>Este es un encabezado</h2> <p>Este es un párrafo</p> <p id="test">Este es un párrafo con id</p> <button>Click aquí</button> </body> </html> El selector .class El selector de jQuery class busca elementos con una clase específica. Para buscar elementos con una clase específica, escribe un punto, seguido por el nombre de la clase: $(“.test”) Ejemplo: Cuando el usuario hace click sobre un botón, el elemento con class=”test” será ocultado. <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); </script> </head> <body> <h2 class="test">Este es un encabezado</h2> <p class="test">Este es un párrafo con class=”test”</p> <p>Este es otro párrafo</p> <button>Click aquí</button> </body> </html>

¿Qué son eventos? Todas las diferentes acciones que hace un visitante y que una página web puede responder son llamados eventos. Un evento representa el preciso momento cuando algo sucede. Ejemplo: • Mover el ratón sobre un elemento. • Seleccionando un radio button. • Hacer click sobre un elemento. El término “disparar” es usado a menudo con eventos. Ejemplo: “El evento keypress se disparó al momento en que presionaste la tecla”. Acá hay algunos eventos DOM comunes: Eventos del Ratón Eventos del Teclado Eventos del Formulario Eventos del documento/ventana click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll blur unload mouseleave Sintaxis jQuery para métodos de eventos En jQuery, la mayoría de los eventos DOM tienen un método jQuery equivalente. Para asignar un evento click a todos los párrafos en la página puedes hacer esto: $(“p”).click(); El siguiente paso es definir qué podría suceder cuando el evento se dispare. Podrías pasar una función al evento: $(“p”).click(function(){ //acá van las acciones }); Métodos de Eventos jQuery comúnmente usados $(document).ready() El método $(document).ready() nos permite ejecutar una función cuando el documento esté totalmente cargado. Click() El método click () atribuye una función de controlador de eventos a un elemento HTML. La función es ejecutada cuando el usuario hace clicks sobre elementos HTML. El siguiente ejemplo dice: Cuando un evento click se dispara en un elemento <p>; oculta el actual elemento <p>: <!DOCTYPE html> <html>

<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>Si das click sobre mi, desapareceré</p> <p>Hazme click también</p> <p>También clickeame</p> </body> </html> dblclick() El método dblclick () atribuye una función de controlador de eventos a un elemento HTML. La función es ejecutada cuando el usuario hace doble-click sobre elementos HTML: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").dblclick(function(){ $(this).hide(); }); }); </script> </head> <body> <p>Si haces doble click sobre mí, desapareceré</p> <p>Hazme doble click!!</p> <p>A mi también</p> </body> </html> Efectos con jQuery jQuery hide() y show() Con jQuery, puedes ocultar y mostrar elementos HTML con los métodos hide() y show(): Ejemplo: <!DOCTYPE html>

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>Si das click en el botón Ocultar, desapareceré</p> <button id="hide">Ocultar</button> <button id="show">Mostrar</button> </body> </html> Sintaxis: $(selector).hide(speed,callback); $(selector).show(speed,callback); El parámetro opcional speed específica la velocidad de ocultar/mostrar, y puede tomar los siguientes valores: “slow”, “fast”, o milisegundos. El parámetro opcional callback es una función a ser ejecutada después de que el método hide() o show() termine. El siguiente ejemplo demuestra el parámetro speed con hide(): <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); }); }); </script> </head> <body> <button>Ocultar</button> <p>Este es un párrafo con algo de contenido.</p> <p>Este es otro párrafo pequeño</p> </body> </html> jQuery toggle Con jQuery, puedes hacer palanca entre los métodos hide() y show() con el método toggle().

Mostrando elementos que están ocultos y ocultando elementos que son visibles: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </head> <body> <button>Toggle</button> <p>Este es un párrafo con un pequeño contenido</p> <p>Este es otro pequeño párrafo</p> </body> </html> Sintaxis: $(selector).toggle(speed,callback); El parámetro opcional speed específica la velocidad de ocultar/mostrar, y puede tomar los siguientes valores: “slow”, “fast”, o milisegundos. El parámetro opcional callback es una función a ser ejecutada después de que el método toggle() termine. Método jQuery fadeToggle() El método jQuery fadeToggle() hace palanca entre los métodos fadeIn() y fadeOut(). Si los elementos están desaparecidos, fadeToggle() los aparederá. Si los elementos están desvanecidos, fadeToggle() los desaparecerá. $(selector).fadeToggle(speed,callback); El parámetro opcional específica la duración del efecto. Este puede tomar los siguientes valores: “slow”, “fast”, o milisegundos. Ejemplo: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $("#div2").fadeToggle("slow");

}); }); </script> </head> <body> <div id="div1" align="center" style="padding:5px;width:400px;height:30px;backgroundcolor:#DCFFC2;margin-bottom:5px;border-radius:5px;border:2px solid #7CB054;"> <p>Haz click sobre mi, y ocultaré/mostraré el div de abajo.</p> </div> <div id="div2" style="width:400px;height:100px;background-color:#DCFFC2;borderradius:5px;border:2px solid #7CB054;"></div> </body> </html> Todo el material fue extraído de http://www.w3schools.com/jquery/default.asp

Add a comment