Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • JQUERY

    Загружено:

    gabo109
    6 просмотров13 страниц

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    DOCX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    6 просмотров13 страниц

    JQUERY

    Загружено:

    gabo109

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 13

    JQUERY Nombre: Gabriel Enrquez F.

    Qu es Jquery?
    jQuery es una biblioteca de JavaScript, que permite simplificar la manera de interactuar con los documentos HTML, manipular el rbol DOM, manejar eventos, desarrollar animaciones y agregar interaccin con la tcnica AJAX a pginas web.

    Caractersticas
    Seleccin de elementos DOM. Interactividad y modificaciones del rbol DOM, incluyendo soporte para CSS 1-3 y un plugin bsico de XPath. Eventos. Manipulacin de la hoja de estilos CSS. Efectos y animaciones. Animaciones personalizadas. AJAX. Soporta extensiones. Utilidades varias como obtener informacin del navegador, operar con objetos y vectores, funciones para rutinas comunes, etc. Compatible con los navegadores Mozilla Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 10.6+ y Google Chrome 8+.

    Uso
    jQuery consiste en un nico fichero JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX. La caracterstica principal de la biblioteca es que permite cambiar el contenido de una pgina web sin necesidad de recargarla, mediante la manipulacin del rbol DOM y peticiones AJAX. Para ello utiliza las funciones $() o jQuery().

    Funcin $() La forma de interactuar con la pgina es mediante la funcin $(), un alias de jQuery(), que recibe como parmetro una expresin CSS o el nombre de una etiqueta HTML y devuelve todos los nodos (elementos) que concuerden con la expresin. $("#tablaAlumnos"); // Devolver el elemento con id="tablaAlumnos" $(".activo"); // Devolver una matriz de elementos con class="activo" Una vez obtenidos los nodos, se les puede aplicar cualquiera de las funciones que facilita la biblioteca. // Se elimina el estilo (con removeClass()) y se aplica uno nuevo (con addClass()) a todos los nodos con class="activo" $(".activo").removeClass("activo").addClass("inactivo"); O por ejemplo, efectos grficos: // Anima todos los componentes con class="activo" $(".activo").slideToggle("slow"); Inicio de jQuery Comnmente antes de realizar cualquier accin en el documento con jQuery(), debemos percatarnos de que el documento est listo. Para ello usamos $(document).ready();, de esta forma: $(document).ready(function() { //Aqu van todas las acciones del documento. });

    Ejemplo En este tutorial vamos a desarrollar un ejemplo de Jquery para demostrar algunas animaciones o efectos grficos.

    Las herramientas que vamos a utilizar son: IDE Eclipse Indigo 3.7 Apache Tomcat 7.0.22 Jquery-1.7.2

    Lo primero que vamos a realizar es crear un proyecto web.

    Para esto podemos presionar ctrl+n, o ir a File -> New -> Other.

    Escribimos Dynamic Web Project, o buscamos la carpeta Web y seleccionamos Dynamic Web Project. Presionamos el botn Next.

    Ingresamos un nombre para nuestro proyecto (Project name), seleccionamos la ubicacin donde queremos que se cree (Project location), escogemos el ambiente de ejecucin (Target Runtime) y en Configuration escogemos alguna configuracin que ya poseamos si es que la deseamos utilizar y presionamos el botn Next.

    Luego si deseamos aadimos una carpeta donde se va a localizar nuestras clases java. Presionamos el botn Next.

    Ingresamos el nombre del contexto de nuestra aplicacin y el directorio donde se va almacenar todos los archivos relacionados con la aplicacin web.

    Se crea nuestro proyecto web. Ahora vamos a crear un archivo html, para esto podemos presionar ctrl+n, o ir a File -> New -> Other. Escribimos HTML File, o buscamos la carpeta Web y seleccionamos HTML File. Presionamos el botn Next.

    Seleccionamos la ubicacin para nuestro archivo, presionamos el botn Next.

    ingresamos un nombre (File name) y

    Si deseamos utilizar un template, seleccionamos Use HTML Template y escogemos el tipo de template que deseemos. Presionamos el botn Finish.

    Se crea el archivo en la ubicacin que escogimos.

    En el archivo .html ingresamos algunos controles con sus propiedades.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test jQuery </title> <script type="text/javascript" src="jquery.js"></script> </head> <body> <p> Ejemplo evento toggle (Activar/Desactivar): <input id="textActivar" type="button" value="Activar"> </p> <p> Ejemplo evento change (Text sincronizados): <input id="text1" type="input"> <input id="text2" type="input"> </p> <p> Efectos visuales: <input id="efectoHide" type="button" value="Hide"> <input id="efectoShow" type="button" value="Show"> <input id="efectoToggle" type="button" value="Toggle"> <input id="efectoShowSlow" type="button" value="Show slow"> <input id="efectoSlide" type="button" value="Slide Toggle"> <input id="efectoFadeOut" type="button" value="Fade out"> <div id="efecto"> <p> Efecto visual </p> </div> </p> </body> <script type="text/javascript" src="test.js"></script> </html>

    <input id="efectoHide" type="button" value="Hide">

    Lo ingresado en la propiedad id de los controles utilizados, ser lo que se va a usar en el archivo jquery.
    <script type="text/javascript" src="jquery.js"></script>

    En la parte superior se declara un script donde se especifica la ubicacin de la librera y el tipo.


    <script type="text/javascript" src="test.js"></script>

    En la parte inferior se declara un script donde se especifica la ubicacin del archivo javascript a utilizar, aqu es donde se realizan las funciones que interactan con la pgina. Ahora necesitamos descargar las libreras de Jquery, para eso vamos al link y descargamos: jquery-1.7.2.js http://code.jquery.com/jquery-1.7.2.js

    Y la pegamos o la ubicamos dentro de la misma carpeta donde se creo el archivo html para evitar problemas de path. Ahora vamos a crear el archivo javascript. Para esto podemos presionar ctrl+n, o ir a File ->
    New -> Other. Escribimos JavaScript Source File, o buscamos la carpeta JavaScript y seleccionamos JavaScript Source File. Presionamos el botn Next.

    Seleccionamos la ubicacin para nuestro archivo, presionamos el botn Finish.

    ingresamos un nombre (File name) y

    En el archivo .js ponemos lo siguiente. En los comentarios se explica que realiza cada funcin. Adems se realizan las funciones como se indic al principio de este documento.
    /* Equivale a window.onload = function() { ... } */ $(document).ready( function() { alert("Benvindo!!!"); $("div#efecto").css( { color: "red", background: "blue"} ); } ); /** * jQuery aade el evento toggle(). * A este mtodo se le pasan dos funciones, cuya ejecucin se alterna, la primera vez * que se haga clic sobre el elemento (y todas las veces impares), se ejecuta la primera funcin * y la segunda vez (y todas las veces pares) se ejecuta la segunda funcin: */ $("input#textActivar").toggle( function() { //alert("Me acabas de activar"); $(this).val("Desactivar"); } , function() { //alert("Me acabas de desactivar"); $(this).val("Activar"); } ); /** * Mantengo las cajas de texto sincronizadas. El valor de una caja de texto * siempre es igual al de la otra. * */ $("input#text1").keyup( function() { $("input#text2").val( $(this).val() ); } ); $("input#text2").keyup( function() { $("input#text1").val( $(this).val() ); } ); /** * Ejecuto algunos los efectos visuales, con los mtodos: * * .hide(); // Ocultar un elemento * .show(); // Mostrar un elemento * .toggle(); // Si estaba oculto, mostrarlo; si era visible,

    ocultarlo * .show("slow"); // Mostrar el elemento con una animacin muy suave * .slideToggle("fast"); // Desplegar/ocultar el elemento con una animacin muy rpida * .fadeOut(); // El elemento desaparece con un fundido muy suave * */ $("input#efectoHide").click( function() { $("div#efecto").hide(); } ); $("input#efectoShow").click( function() { $("div#efecto").show(); } ); $("input#efectoToggle").click( function() { $("div#efecto").toggle(); } ); $("input#efectoShowSlow").click( function() { $("div#efecto").show("slow"); } ); $("input#efectoSlide").click( function() { $("div#efecto").slideToggle("fast"); } ); $("input#efectoFadeOut").click( function() { $("div#efecto").fadeOut(); } );

    Corremos nuestro proyecto y ejecutamos el archive html.

    Podemos probar algunas de las funciones que creamos en el archivo javascript y ver algunos efectos.

    Bibliografa
    http://felinfo.blogspot.com/2009/06/primer-ejemplo-con-jquery.html http://jquery.com/download/ http://es.wikipedia.org/wiki/JQuery http://luauf.com/2008/06/02/escribe-menos-y-haz-mas-con-jquery/ http://www.visualtecnoweb.com/category/tutorial-jquery

    Вам также может понравиться