Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • FATEC - Tutoria de Jquery

    Enviado por

    Vinicius Olivieri
    18 visualizações5 páginas

    Título original

    FATEC - Tutoria de jQuery

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    18 visualizações5 páginas

    FATEC - Tutoria de Jquery

    Enviado por

    Vinicius Olivieri

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 5

    FATEC – Faculdade Tecnologia de São José dos Campos

    Tutorial de jQuery

    Grupo: David Lopes , José Teles , Jovan Ângelo , Paulo França


    Disciplina: Banco de dados para web
    Professor: Eduardo Sakaue
    Introdução
    Este é um tutorial introdutório de jQuery, é um entre muitos que você pode
    encontrar por aí. Foi feito passo-a-passo para quem já conhece lógica de programação e
    tem pelo menos uma boa noção de DOM e javascript.

    No final deste tutorial você será capaz de realmente escrever código jQuery. Nada
    de ler essa 5 páginas e sair daqui só com um "Olá Mundo".

    Aqui vamos mostrar um pouco de seletores, dar a dica importante sobre o $.live() e
    ainda te mostrar como seu código pode ficar melhor. Bom tutorial!

    Preparando o ambiente
    Antes de tudo é necessário baixar a versão mais recente do jQuery em
    http://jquery.com/. Atualmente estão disponíveis as versões de produção (com código
    minificado) e a versão de desenvolvimento (para estudo e customização da biblioteca).

    Baixe a versão de produção. Crie um diretório chamado helloworld na sua


    máquina, dentro deste diretório crie um subdiretório chamado helloworld/jquery e copiei
    seu arquivo da biblioteca jQuery para dentro do subdiretório.

    Crie um arquivo chamado index.html na pasta helloworld com o seguinte conteúdo:


    <html>
    <head>
    <title> Hello World em jQuery </title>
    <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
    <script>
    //Aqui iremos inserir código jQuery
    </script>
    </head>
    <body>
    <h1> Hello World!</h1>
    <a href="#" id="ligadesliga">Exibir</a>
    </body>
    </html>

    Criando uma funcionalidade liga/desliga


    Vamos criar uma função simples em jQuery para que o conteúdo das tags <h1></h1> seja
    exibido/escondido a medida que o link em <a href="#" id="ligadesliga">Desliga</a> seja
    clicado.

    Entre as tags <script> e </script> faça:

    $(document).ready(function(){
    $("h1").hide();
    });

    Este trecho de código diz ao DOM para que, assim que ele estiver carregado, use a
    função $.hide() do jQuery e esconda o conteúdo de qualquer elemento h1 existente.

    Agora vamos deixar esse código mais interessante:

    $(document).ready(function(){
    $("h1").hide();
    $("a#ligadesliga.invisivel").click(function(){
    $("h1").show();
    $(this).text("Ocultar");
    $(this).removeClass("invisivel").addClass("visivel");
    });
    });
    Neste trecho de código dizemos que o elemento a (anchor) que possui a id "ligadesliga" e
    uma classe (class) "invisivel" quando clicado irá receber uma função anônima que fará o
    seguinte:

    • Tornar visíveis todos os elementos do tipo h1;


    • Trocar o texto deste objeto jQuery no DOM por "Ocultar";
    • Remover a classe "invisivel" e adicionar a classe "visivel";

    Aplicando-se a mesma lógica, invertendo a condição de invisível para visível e teremos:

    $(document).ready(function(){
    $("h1").hide();
    $("a#ligadesliga.invisivel").click(function(){
    $("h1").show();
    $(this).text("Ocultar");
    $(this).removeClass("invisivel").addClass("visivel");
    });
    $("a#ligadesliga.visivel").click(function(){
    $("h1").hide();
    $(this).text("Exibir");
    $(this).removeClass("visivel").addClass("invisivel");
    });
    });

    Teste o código!

    O que aconteceu quando você testou o código??


    Percebeu que o código funciona apenas uma vez? Isso acontece por que quando
    atribuímos o índice de elementos DOM que o jQuery é capaz de enxergar é estático.
    É fácil de entender. As trocas de classe que usamos no código são aplicadas com
    sucesso e o elemento passa de "invisivel" para "visivel", mas a árvore DOM não é
    atualizada e o jQuery continua utilizando-a como da primeira vez que o DOM foi
    carregado.
    Para evitar isso devemos simplesmente usar a função live do jQuery, deste modo:

    $(document).ready(function(){
    $("h1").hide();
    $("a#ligadesliga.invisivel").live('click',function(){
    $("h1").show();
    $(this).text("Ocultar");
    $(this).removeClass("invisivel").addClass("visivel");
    });
    $("a#ligadesliga.visivel").live('click',function(){
    $("h1").hide();
    $(this).text("Exibir");
    $(this).removeClass("visivel").addClass("invisivel");
    });
    });
    Teste o seu código agora. Viu a diferença? Com o $.live() o DOM é atualizado juntamente
    com o evento. :)

    Simplificando mais
    Percebeu um pouco de código redundante e isso te deixou sem esperanças no jQuery?
    Vou te dar uma dica, todo esse código ficaria melhor se usássemos a função $.toggle.

    Agora é a sua vez de estudar essa função em http://api.jquery.com/toggle/ e colocar em


    prática o que aprender.

    Você também pode gostar