TUTORIAL JQUERY JQUERY es una biblioteca de JavaScript que permite simplificar la manera de interactuar con documentos HTML Para trabajar con el contenido de este manual necesitara varias de las siguientes herramientas: Un navegador web Actualizado Un editor de textos planos(como Notepad++,etc) Las bibliotecas jQuery y jQueryUI CREACION PROGRAMA; EFECTOS JQUERY; METODO FADE Utilizando jQuery podemos crear de una forma muy sencilla efectos de Fade, es decir, ocultar o mostrar un elemento de forma gradual. Para poder realizar un efecto de Fade en jQuery utilizaremos los métodos .FadeOut() y .FadeIn(). Creamos un documento de texto con extensión .html y lo editamos con notepad++, PRIMER PASO Creamos la estructura HTML que empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas. La primera <head></head> es la cabecera de la página. Donde ira nuestro código JavaScript con Jquery. La segunda parte es <body></body>. Aquí va el contenido de la página: el párrafo con la información a mostrar y los estilos del contenido. <!DOCTYPE html> <html> <head> </head> <body> </body> </html> SEGUNDO PASO Al tener toda la estructura del diseño, empezamos a construir el código y su funcionamiento; Insertamos código JavaScript dentro de nuestra pagina, el cual ira dentro de un archivo con extensión “.js” <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min .js"></script> </script> Dentro del atributo ‘src’ debe ir la ruta donde se encuentra en este caso el archivo con extensión.js. Y asi es como agregamos la biblioteca JQuery a nuestra pagina web. Luego ira el código en JavaScript utilizando JQuery En el código JQuery permite detectar dicho estado para la manipulación a través de la declaración $(document).ready() de forma que tal que el bloque se ejecute solo una vez que la pagina esté disponible. Dentro de la declaración ira los eventos MouseEnter para controlar la posición del puntero y si encuentra sobre el elemento que hace uso de la función,igualmente lo métodos principales que se ingresaron para JQuery para desvanecer la visibilidad, los cuales son fadeOut(), fadeIn() fadeIn: Muestra el elemento sobre el que se ejecuta, haciéndolo visible mediante un efecto de fade. fadeOut: Oculta el elemento sobre el que se ejecuta realizando un efecto de fade. Su estructura del programa es la siguiente <script type="text/javascript"> $(document).ready(function() { $("#ProgramaJquery").mouseenter(function(e){ $("#ProgramaJquery").fadeOut("slow"); }); $("#ProgramaJquery").mouseenter(function(e) { $("#ProgramaJquery").fadeIn("slow"); }); $("#imagen").mouseenter(function(e){ $("#imagen").fadeOut("slow"); }); $("#imagen").mouseenter(function(e) { $("#imagen").fadeIn("slow"); }); }); </script> TERCERO Y ÚLTIMO PASO Finalmente el cuerpo del programa <body></body>, ingresamos la información a procesar con las funciones del código JavaScript con JQuery <body style="background:#000000;text-align:center"> <div id="ProgramaJquery" style="font: bold 28px Agency FB;color:#FFBF00"> <p> ESTE ES UN PROGRAMA SENCILLO DE JQUERY,<br>QUE DESAPARECE CUANDO NOS PONEMOS ENCIMA Y LUEGO APARECE</br> </p> </div> <img id="imagen" src="imagen.jpg" style="width:350px;height:430px"/> </body>