Por onde começar com o jQuery

Enviado por: Deivison Arthur L. Serpa Data de envio: janeiro 25, 2012 em: Desenvolvimento, Destaque, Dicas e Tutoriais | Comentários : 1

Oque é jQuery?

“Escrever menos e fazer mais” É este o lema de jQuery, uma biblioteca de funções de Javascript, de formato leve, sintaxe simples e fácil de aprender. A sua aparição remonta a Janeiro de 2006, tendo sido anunciado no BarCampNYC, sendo que até à data tem tido constantes actualizações, novos addons e melhorias. Veio ajudar a resolver problemas de incompatibilidades entre os navegadores, reduzir o tamanho de código e introduzir a reutilização de código através de plugins. Além disso, permite a implementação de recursos de CSS1, CSS2 e CSS3 e trabalha com AJAX e DOM. Neste tutorial, vou abordar os temas mais usados em jQuery, desde os selectores, à sintaxe, ou desde a integração AJAX ao CSS. Partilhe e comente deixando-nos a sua opinião sobre o tutorial!
Configuração

Para começar, nós precisamos de uma cópia da bliblioteca jQuery. Ainda que a versão mais recente possa ser encontrada aqui, este guia fornece um pacote básico que você poderá baixar

Kit para começar com o jQuery

Faça o download deste arquivo e extraia o seu conteúdo. Abra o starterkit.html e o custom.js com o seu editor preferido e o starterkit.html com o navegador.

Agora nós temos tudo o que precisamos para inciar o notório exemplo do “Alô mundo”.

Primeiramente vamos analizar o funcionamento da sintaxe e os seletores:

A Sintaxe:

A sintaxe jQuery é orientada para seleccionar elementos HTML e de seguida efectuar acções nos mesmos. A sintaxe básica é :

 $(selectorHTML).ação()

Trocando por palavras, o simbolo $ é para definir jQuery, (selectorHTML) é onde se introduz o elemento e acção() é onde irão ser introduzidas as acções a efectuar nos elementos.

Exemplos:

 $(this).hide() // Esconde o elemento actual
 $("p").hide() // Esconde todos os parágrafos
 $("p.teste").hide() // Esconde todos os parágrafos com a classe="teste"
 $("#test").hide() // Esconde o elemento com o id="teste"

Os seletores:

Os selectores permitem-lhe seleccionar e manipular elementos HTML. É possível seleccionar por nome, nome de atributo ou conteúdo.

jQuery utiliza selectores CSS para seleccionar elementos HTML

 $("p") selecciona os elementos <p>
 $("p.intro") seleccionar todos os elementos <p> com.
 $("p#demo") selecciona o primeito elemento <p> com id="demo".

Selectores de Atributos

jQuery utiliza expressões XPath para seleccionar elementos com dados atributos.

 $("[href]") // Selecciona todos os elementos com um atributo href
 $("[href='#']") // Seleccionar todos os elementos com um valor href igual a "#"
 $("[href!='#']") // Selecciona todos os elementos com um valor href não igual a "#"
 $("[href$='.jpg']") // Selecciona todos os elementos com um atributo href que acabe em ".jpg"

Links interessantes para este capítulo:

Olá jQuery

Como quase tudo o que fazemos quando estamos utilizando o jQuery lê ou manipula um modelo de objeto de documento (DOM), precisamos nos certificar que começamos adicionado eventos etc tão logo o DOM esteja pronto.

Antes temos que colocar o código de inserção do frameword jQuery:

No jQuery, além da opção de colocar localmente, fazendo download do script e inserindo no código HTML, podemos chamar o framework remotamente pelo Google ou Microsoft

Chamando Locamente

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

Chamando pelo Google

 <head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 </head>

Chamando pela Microsoft

 <head>
 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
 </head>

Depois temos que registrar o evento ready (pronto) para o documento.


$(document).ready(function() {
 // faça alguma coisa quando o DOM estiver pronto
 });

Colocar um alert nesta função não faz muito sentido, pois o alert não requer que o DOM esteja carregado. Então vamos tentar algo mais sofisticado: Mostrar um alert quando clicarmos o link.


$(document).ready(function() {
 $("a").click(function() {
 alert("Olá mundo!");
 });
 });

Dessa forma o alert será exibido assim que você clicar no link.

Vamos dar uma olhada no que estamos fazendo: $(“a”) é um seletor do jQuery, neste caso, ele seleciona todos os elementos a. O $ por si só é um alias para a “classe” jQuery, por outro lado o $() constrói um novo objeto jQuery. A função click() que chamamos depois é um método do objeto jQuery. Ele liga o evento clique a todos os elementos selecionados (neste caso, um único elemento a) e executa a função fornecida quando o evento ocorre.
Isto é similar ao seguinte código:


<a href="#" onclick="alert('Olá mundo')">Link</a>

A diferença é bem óbvia: Nós não precisamos escrever onclick para todo elemento. Nós temos uma separação clara de estrutura (HTML) e comportamento (JS), assim como separamos estrutura e formatação utilizando CSS.

Com isso em mente, exploramos seletores e eventos um pouco mais a fundo.

Alguns métodos

Deslizar ( slideDown(), slideUp(), slideToggle() )

Os métodos de deslizamento do jQuery alteram gradualmente a altura dos elementos seleccionados, através dos seguintes métodos

 $(selector).slideDown(speed,callback)
 $(selector).slideUp(speed,callback)
 $(selector).slideToggle(speed,callback)

Mais uma vez, relembro que o parâmetro “speed” aceita valores “slow”, “normal”, “fast” ou em milisegundos.

O parâmetro “callback” é o nome de uma função a ser executada depois da função hide/show estar completa.

Exemplos Práticos

slideDown()

 $("flip").click(function(){
 $(".panel").slideDown();
 ));

slideUp()

 $("flip").click(function(){
 $(".panel").slideUp()
 ));

[/cce_bash]

<span style="font-size: 14px;"><strong>slideToggle()</strong></span>
 [cce_bash lang="html"]
 $("flip").click(function(){
 $(".panel").slideToggle();
 ));

Desvanecer ( fadeIn(), fadeOut(), fadeTo() )

Os métodos de desvanecer alteram gradualmente a opacidade dos elementos seleccionados

jQuery tem os seguintes métodos de desvanecimento:

 $(selector).fadeIn(speed,callback)
 $(selector).fadeOut(speed,callback)
 $(selector).fadeTo(speed,opacity,callback)

Os parâmetros de “speed” e “callback” são os mesmos de anteriormente, e o parâmetro “opacity” permite desvanecer para uma opacidade escolhida, como irá ser demonstrado no exemplo mais à frente.

Exemplos Práticos

fadeIn()

 $("botão").click(funçao(){
 $("div").fadeIn(2000);
 ));

fadeOut()

 $("botão").click(funçao(){
 $("div").fadeIn(2000);
 ));

fadeTo()

 $("botão").click(funçao(){
 $("div").fadeTo("slow",0.30);
 ));

Animações jQuery

As animações são introduzidas através do seguinte código

 $(selector).animate({parametros},[duracao],[e asing],[callback])

O parâmetro chave é “parametros” onde irão ser introduzidas propriedades CSS que vão ser animadas. Podem ser animadas várias propriedades ao mesmo tempo.

 animate({width:"60%",opacity:0.3,marginTop:"0.3in",fontsize:"2em"})

O segundo parâmetro é a duração, que define o tempo da animação. Aceita valores “slow”, “fast”, “normal” e em milisegundos.

Vejamos um exemplo:

 <script type="text/javascript">

$(document).ready(funcao(){
 $("botao").click(funcao(){
 $("div").animate({left:"29px"},"slow");
 $("div").animate({fontsize:"4em","slow");
 ));
 ));

</script>

Exemplos de efeitos jQuery

 $(selector).hide()
 $(selector).show()
 $(selector).toggle()
 $(selector).slideDown()
 $(selector).slideUp()
 $(selector).slideToggle()
 $(selector).fadeIn()
 $(selector).fadeOut()
 $(selector).fadeTo()
 $(selector).animate()

Download do jQuery 1.7 Visual Cheat Sheet

Links interessantes para este capítulo:

‹ Anteriores Próximos ›

Sobre o Autor

Deivison Arthur L. Serpa

Designer, Web Developer & Linux Administrator

Meu nome é Deivison Arthur, tenho 29 anos, sou Administrador Linux, Analista de Sistema, Webdesigner e Pesquisador. há mais de dez anos. Nasci no Rio de Janeiro, atualmente trabalho como Gerente de Tecnologia e E-commerce at Grupo FFernandes e Freelancer nas horas vagas. Desenvolvimento em Joomla, Wordpress, Drupal, Magento e outros GPLs...

Quantidade de Artigos : 90