Scribd Logo
Загрузить

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

  • Jquery

    Загружено:

    Markitos Mendez
    88 просмотров5 страниц

    Оригинальное название

    jquery

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

    © Attribution Non-Commercial (BY-NC)

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

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

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

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

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

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

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

    Jquery

    Загружено:

    Markitos Mendez

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

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

    jQuery es una liviana libreria de JavaScript, pensada para interactuar con los elementos de una web por

    medio del DOM. Lo que la hace tan especial es su sencillez y su reducido tamaño.

    ¿Por que debería usarlo?


    La sencillez de su sintaxis y la poca extension del codigo que necesitas escribir son las caracteristicas
    más notables. Si hicieras lo que hace jQuery con getElementById y window.onload no solo tendrias
    que escribir mucho, si no que podrian haber diversos problemas.

    ¿Como empiezo a usarlo?


    Lo primero que debes hacer, es descargarlo de la web oficial: jQuery. Una vez descargada la libreria
    (son más o menos 16k) puedes proceder a tu primer script:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Prueba de jQuery</title>
    <script src="jquery.js" type="text/javascript"></script>
    </head>
    <body>
    </body>
    </html>

    Lo primero que hacemos es linkear el jQuery a nuestro documento. Facil, no?

    Ejecución y sintaxis básica


    jQuery tiene una sintaxis muy sencilla. Los comandos se reconocen por comenzar con el simbolo "$".
    Ahora, la forma de una sentencia es la siguiente:
    $(elemento).evento(funcion-o-parametro);

    La manera de inicializar jQuery es muy util:


    $(document).ready(function(){
    //Aqui tu codigo
    });

    Ready es un método propio de jQuery, que revisa si el DOM está listo para usarse. Es más util que el
    window.onload, pues este debe esperar a que todos los elementos de la pagina esten cargados (como
    scripts e imagenes) paa ejecutar. El "ready", en cambio, espera solo a la estructura.

    Acceso a elementos y eventos


    Acceder a los elementos de la página es sencillo pues se usa la misma nomenclatura que en CSS:
    Tipo de elemento Modo de llamado
    Etiqueta Nombre de la etiqueta. Ejemplos: "a", "strong", "div"
    Elemento con un Id Id precedido por el signo "#". Ejemplos: "#principal","#texto"
    Elemento con una clase (class) Clase precedida por un punto (.). Ejemplos: ".codigo", ".titulo"
    Nota: Tambien funcionan muchos de los selectores de CSS como ">", "*", etc. Un ejemplo de su uso
    seria:
    $("* > a").click( function(){alert("nada");});

    Los eventos que se pueden usar son los mismos que usariamos normalmente. El unico cambio es la
    supresión del "on" inicial: mouseover, click, focus, etc

    Veamos todo junto


    Veamos un ejemplo de lo visto hasta ahora:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Prueba de jQuery</title>

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


    <script type="text/javascript">
    $(document).ready(function (){
    //Aqui asignamos el click al elemento <a>
    $("a").click(function (){
    alert("Presionaste un <a>");
    });
    });
    </script>

    </head>
    <body>
    <a href="#"> Presioname! </a>
    </body>
    </html>

    Al presionar cualquier etiqueta "a" del documento, se ejecutaria el alert.

    Añadir o retirar clases


    Cuando queremos que un elemento pueda interactuar con un css ya establecido, usamos las clases. Con
    jQuery, estas pueden ser asignadas dinamicamente:
    $("a").addClass("boton");

    O tambien removidas:
    $("a").removeClass("boton");

    Ahora, podemos añadirle CSS a esa determinada clase, y ver como se comporta:
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <title>
    Prueba de jQuery
    </title>
    <script src="jquery.js" type="text/javascript">
    </script>

    <script type="text/javascript">
    $(document).ready(function (){
    //Aqui asignamos el click al elemento <a>
    $("a").click(function (){
    alert("Presionaste un <a>");
    //Aqui removemos la clase!
    $("a").removeClass("boton");
    });
    //Aqui añadimos la clase a los elementos <a>
    $("a").addClass("boton");
    });
    </script>
    <style type="text/css">
    .boton{
    color:#f00;
    display:block;
    width:100px;
    text-align:center;
    border:#f00 solid 1px;
    }
    </style>
    </head>

    <body>
    <a href="#" class="algo">Presioname!</a>
    </body>
    </html>

    Al ejecutarse el script, todos los "a", tomarán la clase "boton", que tiene propiedades de CSS. Sin
    embargo, al oprimir el elemento, la clase es removida.

    Efectos especiales
    Esta librería también esta compuesta por algunos efectos, que resultan muy útiles. Son livianos y
    faciles de llamar. A continuación, una breve descripcion de cuales son, que hacen y como se usan:
    ombre del
    Descripcion Descripcion de los parámetros
    efecto
    Modifica los atributos alto, ancho y transparencia, Velocidad: Determina el tiempo en el que se realizará el
    partiendo de 0. efecto. Puede ser "slow" (lento), "normal", o "fast" (rápido)
    ow
    ostrar)
    $(objeto).show("velocidad")

    Modifica los atributos alto, ancho y transparencia,


    partiendo de los valores actuales hasta llegar a 0.
    de
    cultar)
    $(objeto).hide("velocidad")

    de Down Modifica los atributos alto y transparencia, partiendo de


    parecer 0. Es similar a "show", salvo que no modifica el ancho,
    ia abajo) creando un efecto de "cortinilla".

    $(objeto).slideDown("velocidad")
    Modifica los atributos alto y transparencia, partiendo de
    los actuales, hasta llegar a 0. Es similar a "show", salvo
    de Up que no modifica el ancho, creando un efecto de
    parecer "cortinilla".
    ia arriba)
    $(objeto).slideUp("velocidad")

    Modifica el atributo transparencia desde 0.


    de
    Aparecer) $(objeto).fadeIn("velocidad")

    Modifica el atributo transparencia desde el valor actual,


    de hasta llegar a 0.
    t(Desapare
    ) $(objeto).fadeOut("velocidad")

    Centra un elemento con respecto a su "parent".


    nter
    ntrar) $(objeto).center("velocidad");

    Velocidad: Determina el tiempo en el que se realizará el


    de Modifica el atributo transparencia a un valor especifico.
    efecto. Puede ser "slow" (lento), "normal", o "fast" (rápido)
    Cambiar
    nsparencia $(objeto).fadeTo("velocidad", transparencia)
    Transparencia: Un numero de 0 a 100 que indica que tan
    visible es el elemento.
    Velocidad: Determina el tiempo en el que se realizará el
    efecto. Puede ser "slow" (lento), "normal", o "fast" (rápido)
    Modifica un atributo especifico.
    imate Propiedades: Una o más propiedades con valor numérico e
    nimar) $(objeto).animate("propiedades","velocidad"); CSS, por ejemplo width y height. La llamada seria:

    $(objeto).animate({width:20,height:200}, "slow"

    "Callbacks", llamar funciones y pasar parametros


    Despues de un evento se pueden llamar otras funciones JavaScript y jQuery, de la forma tradicional:
    funcion();

    Hay eventos que permiten, acabada su ejecución, llamar funciones. Los efectos, por ejemplo, permiten
    un parámetro opcional, el de "callback". De modo que la sintaxis para un efecto con callback, sería (por
    ejemplo) la siguiente:
    $(objeto).show("velocidad", funcion);

    Nota: La funcion debe colocarse sin los parentesis y sin comillas


    Como no se pueden usar parentesis en un callback, el modo de pasar los parametros seria el siguiente:
    $(objeto).show("slow", function(){
    lafuncion("parametro1","parametro2");
    });

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