sábado, 20 de novembro de 2010

JQuery para iniciantes

O JQuery é uma biblioteca feita para simplificar a utilização de JavaScript nas páginas.

Os requisitos para se trabalhar com JQuery são:
    - fazer o download da versão mais atual do JQuery;
    - incluir o arquivo .JS na sua página através do código: 
        <script type="text/javascript" src="nome_do_arquivo.js"></script>
    - conhecer o básico de JavaScript;
    - entender a estrutura do JQuery.


Entendendo a estrutura do JQuery
Cada comando pode ser dividido basicamente em 3 partes:
    $() => É a função que gerencia tudo aquilo que você quiser implementar.
    .click() => Representa o evento que será utilizado.
    function(){ } => Lugar onde deve ser indicado o que irá acontecer quando o evento ocorrer.

No exemplo abaixo, quando a página for carregada, será chamada a função que exibirá uma mensagem ao usuário.

$(document).ready(function(){
    alert("olá mundo!");
   })


Se criarmos uma DIV em nossa página poderemos, por exemplo, aplicar um efeito de desaparecimento apenas clicando nela:

 <div id="mensagem">Eu consigo ler essa frase!</div>


        <script type="text/javascript">
            //<![CDATA[
                $(document).ready(function(){
                    $('#mensagem').click(function(){
                        $('#mensagem').toggle();
                    })
                })
            //]]>
        </script>

Perceba que foi indicado o ID da DIV mensagem para que a mesma suma ao ser clicada.

Essa é apenas uma das formas de se trabalhar com JQuery, para conhecer as demais formas e eventos, acesse a página de documentação do JQuery, nela existem diversos exemplos, não se esqueça de passar também pela página de plugins.


Segue o cógido completo do exemplo (não esqueça de fazer o download do JQuery para que funcione!).

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Trabalhando com JQuery</title>
        <script type="text/javascript" src="jquery-1.4.3.min.js"></script>
   
        <script type="text/javascript">
            //<![CDATA[
                $(document).ready(function(){
                    $('#mensagem').click(function(){
                        $('#mensagem').toggle();
                    })
                })
            //]]>
        </script>
    </head>
   
    <body>
         <div id="mensagem">Eu consigo ler essa frase!</div>
    </body>
</html>

Um comentário:

Written Essay disse...

Your article on the topic "JQuery para iniciantes" includes the information that i was looking for. Your post includes great tips and you managed to keep it simple and understandable. Your post helps me to understand what "JQuery para iniciantes" really is, and i will surely recommend it to other people. Thanks and keep up the good work.