Tutorial JQUERY – Introdução (com 2 exemplos)

Marcas Technorati: ,,,,,

Mudámos de casa – visitem o novo site em www.istomesmo.com

Ultimamente muito se tem ouvido falar sobre JQUERY. Mas afinal que linguagem é esta? A JQUERY é uma biblioteca de Javascript extremamente útil no desenvolvimento com esta linguagem.

Mas quais são as mais valias que a JQUERY traz ao desenvolvimento com javascript?

Só quem ainda não teve necessidade de utilizar javascript no desenvolvimento de websites, não se deparou com a dificuldade que é desenvolver utilizando esta linguagem, problemas com CSS’s, compatiblidade entre browsers, problemas de acessibilidade, etc…

O objectivo deste tipos de bibliotecas, como a JQUERY, é exactamente facilitar e uniformizar o desenvolvimento com Javascript, abstraindo os programadores deste tipo de problemas, focando-os apenas no desenvolvimento puro.

As várias bibliotecas Javascript existentes, utilizam aproximações um pouco diferentes umas das outras, mas todas com o mesmo objectivo. Existem bibliotecas que são constituídas por vários ficheiros, com as várias funcionalidades separadas em cada ficheiro, permitindo optimizar o seu download, restringindo-nos apenas aos ficheiros necessários. Um exemplo desta aproximação é a biblioteca MooTools.

A JQUERY é constituída por um ficheiro javascript único, onde tenta criar um modelo de abstração que nos permite programar em javascript de uma forma simples, elegante e intuitiva. A versão comprimida deste ficheiro ocupa apenas 14KB! Excelente!

image

A popularidade desta biblioteca tem aumentado bastante nos últimos anos, como é visível através do Google Trends:

image

Sites como a BBC, o Digg, a Intel, o Technorati, entre outros, já utilizam esta biblioteca, o que demonstra que as suas capacidades estão comprovadas.

Agora que já ficámos com uma introdução sobre JQUERY, vamos passar a um pequeno exemplo, para que possamos ver o verdadeiro poder desta biblioteca. Para isso, vamos efectuar o download da última versão (neste momento 1.2.3) através do endereço :

http://docs.jquery.com/Downloading_jQuery

Para efeitos de teste, podemos efectuar download da versão normal (não compactada)

O primeiro exemplo será o famoso Olá Mundo, utilizando JQUERY. Umas das vantagens que vamos encontrar imediatamente neste exemplo, é na utilização do evento window.onload, que provocava imensas chatices. Com o JQUERY este problema está resolvido, pois dispomos de uma pequena função que é executada assim que o DOM está carregado.

$(document).ready(function(){alert("Olá Mundo JQUERY!");});
image

Fácil, não é?🙂
Esta função pode ser usada as vezes que necessitarmos, sem que exista qualquer problema.

Vamos passar para um exemplo com animação e com o click num link.
No código HTML vamos criar um link e uma div por baixo com algum texto, como é mostrado de seguida:

<div>
   <a href="#">Clica Aqui</a>
   <div id="divTexto" style="background-color:#FF0000">
      Texto e mais texto...
   </div>
</div>

image

No header da página vamos inserir o código para mostrar/esconder o div que contém o texto. Esse código é apresentado a seguir:

<script type="text/javascript" language="javascript">
$(document).ready(function() {
    $("a").toggle(function() {
        $("#divTexto").hide('slow');
        }, function() {
        $("#divTexto").show('fast');
    });
});
</script>

Experimentem agora clicar no link, e verifiquem que a div de texto é escondida/mostrada com um efeito bastante agradável.

image

Esta função esconde ou mostra a div “divTexto” ($(“#divTexto”)) sempre que se clica num link da página ($(“a”)).

Para obtermos o objecto divTexto utilizamos $(“#divTexto”) que é muito semelhante ao document.getElementByID(“divTexto”), mas muito mais simples, e sem problemas de compatibilidade entre browsers.

Como devem ter reparado, adicionámos funcionalidades à página, sem introduzirmos javascript no body do html. Esta é uma grande vantagem desta biblioteca, pois permite-nos interagir com os elementos do DOM de uma forma fácil e não intrusiva, tornando mais fácil possíveis alterações no futuro.

Espero que com este tutorial tenham ficado com uma pequena ideia das capacidades da JQUERY, pelo menos que tenham ficado curiosos.🙂

Se gostaram deste artigo subscrevam a feed RSS do istomesmo, para ficarem actualizados sobre os últimos artigos.

Subscrevam aqui a fedd RSS

8 Respostas

  1. […] Tutorial JQUERY – Introdução (com 2 exemplos) « Isto Mesmo (tags: istomesmo.wordpress.com 2008 mes1 dia26 at_home JQuery javascript explicação_introdutória) […]

  2. Olá amigo,

    muito legal seu artigo. Eu estou querendo usar Jquery como meu framework padrão de javascript.

    Tenho uma dúvida que sempre me pega quando leio sobre o Jquery.
    No seu segundo exemplo você coloca na função:
    $(“a”).toggle(function() {

    Mas e quando eu tenho vários botões, e cada um fazendo uma determinada ação?

    Em outros exemplos que passei olho esses dias, todos os links só tinha .

    Se puder dar uma luz quanto a isso. vou ficar muito agradecido.

    Abraços

  3. foi errado meu código…

    repetindo o final ai

    Olá amigo,

    muito legal seu artigo. Eu estou querendo usar Jquery como meu framework padrão de javascript.

    Tenho uma dúvida que sempre me pega quando leio sobre o Jquery.
    No seu segundo exemplo você coloca na função:
    $(“a”).toggle(function() {

    Mas e quando eu tenho vários botões, e cada um fazendo uma determinada ação?

    Em outros exemplos que passei olho esses dias, todos os links só tinha: href=#.

    Se puder dar uma luz quanto a isso. vou ficar muito agradecido.

    Abraços

  4. Olá Filipe, não sei se entendi a sua questão, mas a JQuery permite seleccionar elementos de várias formas. No exemplo que referiu estamos a seleccionar todos os links da página (com a tag “a”). Mas podemos especificar qual o elemento que desejamos através do seu id por exemplo, como é apresentado no exemplo que dei, onde seleccionamos a div com o id “divTexto”. A JQuery permite muitos outros tipos de selectores. Brevemente vou fazer um artigo onde os explicarei melhor. Subsescreva a feed RSS para se manter actualizado. Se precisar de mais ajuda envie-me um e-mail para blog.istomesmo@gmail.com. Abraço.

  5. Olá NC,

    já adicionei seu feed no meu leitor e vou ficar aguardando maiores dicas então.
    Você já testou outros frameworks?
    Já li muito sobre varios outros e até já utilizei alguns, mas parece que o JQuery é o mais completo e com maior gente por trás desenvolvendo novidas, etc.

    Você concorda?

    abraços

  6. Olá Filipe, ainda não utilizei muito outras frameworks, apenas o prototype. Para mim o JQuery é o que se adequa mais às minhas necessidades, e é sem dúvida o mais utilizado, como pode ver pelo gráfico apresentado neste artigo. No entanto, a escolha da framework, depende um pouco de cada um, por isso, analise bem as que existem e utilize a que achar melhor. O JQuery permite até ser utilizado em conjunto com outras frameworks, sem que existam conflitos, utilizando a propriedade “jQuery.noConflict();”.

  7. Olá NC,

    Usei o jQuery.noConflict(); mas nao funcionou,
    estou usando o jQuery com o Prototype.
    Existe alguma outro solução para resover o conflito entre o frameworks?

    Valeu.

  8. Cool. Gostei cara. Estou tentando aprender um pouco sobre o assunto, é isso ai!
    Estou ansioso por mais.

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

%d bloggers like this: