Olhada rápida no JQuery.

August 18, 2008 at 6:13 pm | In JQuery | Leave a Comment

O que é JQuery ?

Jquery é uma biblioteca JavaScript rápida e concisa que simplifica o modo como você prepara seus documentos HTML, manipula eventos, executa animações e interações Ajax em suas páginas. Jquery destina-se a mudar a maneira que você escreve JavaScript. (tradução livre do site oficial).

O que você precisa saber?

O básico de JavaScript, HTML, e DOM, caso você não saiba nada sobre isso e queira seguir esse pequeno post recomendo os seguintes links:

O que É:

* O que é HTML.
* O que é JavaScript.
* O que é DOM. (Document Object Model – Modelo de Objetos de Documentos).

Um pouco sobre:

* HTML (em inglês).
* JavaScript (em inglês).
* DOM (em inglês).

Download da biblioteca:

Para demostrar alguma coisa do JQuery já funcioando crie uma página simples em html algo com:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    window.onload = function()
    {
        altet(“Alguma coisa aqui”);
    }
</script>
</head>
<body>
      <a href="http://google.com"> Google Page </a>
</body>
</html>

Você pode ter sua cópia do Jquery em outro diretório que não seja o mesmo em que está o html então se for seu caso simplesmente lembre-se de mudar o atributo src e indicar o local onde sua cópia esta.

Aqui como serão exemplos pequenos exemplos iremos incluir o código Jquery no mesmo documento html, obviamente você pode criar um link para um arquivo .js separado, assim:

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

mas aqui iremos colocar tudo no mesmo documento.

Algo que geralmente se faz é uma simples janelinha de alerta quando você acessa uma página, em JavaScript normal geralmente usamos o evento window.onload da seguinte forma:

<html>
<head>
<!-- ainda nao precisamos dessa linha de baixo -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    window.onload = function()
    {
        altet(“Alguma coisa aqui”);
    }
</script>
</head>
<body>
      <a href="http://google.com"> Google Page </a>
</body>
</html>

Rode ou atualize a página e você vai ver o fabuloso alerta aparecer, bom isso funciona, mas tem um porém, esse código JavaScript só será executado após todas imagens e outros elementos serem carregadas, mas o Jquery tem um evento para concertar isso.

O Jquery tem um declaração que “espera” a página estar “pronta” ( ready ), pois praticamente tudo o que se faz com Jquery é a manipulacão DOM (Document Object Model – Modelo de Objetos de Documentos).

Antes de começarmos a manipular o DOM ele tem que estar caregado, assim:

$(document).ready(function(){
    // Código Aqui
})

Uma coisa que eu devia ter escrito no começo desse post mas deixei par escrever agora, é sobre o $, o $ é digamos assim um alias (atalho) para a classe Jquery e o $( ) construe um novo objeto jQuery , e por exemplo $(“a”) é um seletor que era selecionar todos os elementos a, um exemplo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
         $(document).ready(function(){
           $("div.mouseover").mouseover(function(){
                 $("p").text("Mouse em Cima");
             }).mouseout(function(){
                 $("p").text("Mouse Fora");
             });
    })
</script>
</head>
<body>
<div class="mouseover">
Passe o Mouse Aqui</div>
</body>
</html>

Explicando o exemplo acima: começamos fazendo a declaração do ready normalmente para podermos manipular os elementos DOM, usamos o seletor $(“ “) para dizer que será aplicada a div chamada mouseover, usamos então o event mouseover( ocorre quando se passa o mouse em cima do elemento), usamos novamente o seletor dizendo que irá mudar o conteúdo da tag p, e logo abaixo declaramos o event mouseout (mouse fora).

Se nessa mesma página tivermos outras tag dentro da div mouseover o mesmo efeito iria aparecer para elas todos, como dito acima é isso que o seletor $(“ ” ) faz.

Mesmo você tendo outras tag p que não estejam dentro da div mouseover estas irão ter o mesmo efeito, então para o local onde você queira o efeito difina algo do tipo:

<p class=”mudar’> Alguma coisa </p>

e claro no código mude para

$("p.mudar").text("Mouse em Cima");

Agora um exemplo usando o evento click, quando clicamos em algum elemento.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            alert("Hello JQuery");
        }) ;
    })
</script>
</head>
<body>
    <button> Click me </button>
</body>
</html>

Pode-se notar uma coisa que você pode querer aplicar, por exemplo, o evento click em mais de um elemento button, para isso você não precisa escrever novamente o javascript, eu posso ter 10 botões que devem ter um alert quando clicados e não tenho que escrever mais nada, pois como viemos termos o seletor $(“ ”) .

Bom isso foi apenas uma olhada rápida no Jquery ele tem muitas coisas a mais que podem fazer seu trabalho com JavaScript ficar menor, mas com esse pequeno exemplo já pode-se notar que fica calro a diferença entre escrever javascript normal e usando essa biblioteca.

Estarei postando algumas coisas a mais sobre Jquery em breve.

Blog at WordPress.com. | Theme: Pool by Borja Fernandez.
Entries and comments feeds.