Está en la página 1de 5

Aprendiendo JQUERY Primer paso: Descargar de www.jquery.com la biblioteca de jquery gratuita.

. Se descargar un archivo js que se guardara en una carpeta en ordenador y se guardar en cada carpeta de cada sitio al cual se le aplicar jquery.

Ejercicio de Aplicacin de Jquery en DW Al tener el archivo Js en la carpeta del sitio en el que se est trabajando, se crea un documento nuevo html, se guarda como index. Se crea una nueva hoja de estilo css, se guarda. Se enlaza la hoja de estilo con el html. Ahora vamos a llamar al archivo Js desde el html: Entre la etiqueta <Title> y </head> va la siguiente lnea: <script src="js/mijquery.js" type="text/javascript"></script> esta accin se realiza para llamar al archive script o biblioteca Js y as podremos utilizar animaciones jquery en el sitio y crear un sitio ms dinmico.

Ejemplo: <title>practicando jquery</title> <script src="js/mijquery.js" type="text/javascript"></script> <link href="css/estilo.css" rel="stylesheet" type="text/css" /> </head>

Efectos de jquery: Cuando se comienza a utilizar jquery entre <link href="css/estilo.css" rel="stylesheet" type="text/css" /> y </head> se escibe:

<link href="css/estilo.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function () { $("a").click(function() {

$("#box").show(5000);

});

});

</script> </head>

Jquery utiliza el smbolo de dlar $ al principio de cada funcionluego se escribe parntesis abierto y cerrado (function , luego parntesis abierto y cerrado (), luego llave abierta {, luego se cierra llave } y parntesis ) y al final siempre va punto y coma ; resultando: $(function(){ });

Para comenzar a darle animacin o eventos a ciertos elementos de nuestro sitio en utilizando la formula anterior se da enter luego de la primera llave abierta. Luego dentro de la primera llave luego de dar enter se comienza a construir los parmetros para animar los elementos, se comienza igual con el smbolo $(nombre del elemento que se animar).show(aqu se coloca un valor que determinar el tiempo de transicin de la animacin); .show (mostrar elemento): es un tipo de funcin o de animacin que har el elemento seleccionado. Queda de la siguiente manera: $(function(){

$("#box").show(5000);

});

});

ALGUNAS FUNCIONES PARA MOSTRAR U OCULTAR ELEMENTOS. .ready: esta funcin permite que carguen las funciones del documento asi no carguen todos los elementos del sitio. .show: mostrar element (en a hoja de estilo se debe colocar display: None al utilizar esta funcin) .hide: ocultar elemento, y se puede ajustar el tiempo: .hide(5000) .fadeIn: otra manera de mostrar elemento, desvanecer hacia adentro. .fadeOut: desvanacer hacia afuera (en a hoja de estilo se debe colocar display: None al utilizar esta funcin) .slideUp(fast o slow o intervalo de tiempo): deslizar hacia arriba .slideDown: deslizar hacia abajo (en a hoja de estilo se debe colocar display: None al utilizar esta funcin)

ALGUNAS FUNCIONES PARA ANIMAR ELEMENTOS, CAMBIANDO TAMAO O POSICIN Para que un objeto se mueva en estilo css colocar position: relative .animate: animar

FUNCIONES DE SELECTORES

.click: permite aplicar animacin a un elemento al cual se le dara click .addClass:

EVENTOS Click: Hover: Focus

Funciones DOM .Parent .Children .eq

También podría gustarte