“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!
1. ANTES DE COMEÇAR
Você deverá ter conhecimentos básicos de HTML, CSS e Javascript.
2. O QUE É JQUERY?
- É uma biblioteca de funções Javascript
- É uma biblioteca com o lema “Escrever menos e fazer mais”
- Contém os seguintes recursos
3. COMO ADICIONAR A BIBLIOTECA JQUERY
A biblioteca jQuery é guardada num ficheiro Javascript, que contém as funções jQuery. Para adicionar a uma página web, utilize o seguinte código
<head> <script type="text/javascript" src="jquery.js"></script> </head>
Existem 2 versões disponíveis para download, uma simplificada, e outra descomprimida, para correcção de erros ou leitura. Ambas podem ser baixadas em jQuery.com
Alternativamente, se não pretender baixar os arquivos, poderá utilizar os ficheiros alojados nos servidores da Google ou da Microsoft
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head>
Microsoft
<head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> </head>
4. SINTAXE JQUERY
A sintaxe jQuery é orientada para seleccionar elementos HTML e de seguida efectuar acções nos mesmos.
A sintaxe básica é $(selectorHTML).acçã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"
5. SELECTORES JQUERY
Os selectores permitem-lhe seleccionar e manipular elementos HTML. É possível seleccionar por nome, nome de atributo ou conteúdo.
1 – Selectores de elementos
jQuery utiliza selectores CSS para seleccionar elementos HTML
$("p") selecciona os elementos <p>
$("p.intro") seleccionar todos os elementos <p> com class="intro".
$("p#demo") selecciona o primeito elemento <p> com id="demo".
2 – 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"
3 – Selectores CSS
Os selectores CSS podem ser utilizados para alterar propriedades CSS de elementos HTML
No exemplo a seguir alteramos a cor de fundo de todos os elementos “p” para amarelo
$("p").css("background-color","yellow");
6. EVENTOS JQUERY
6.1 – Eventos
Os eventos jQuery são peça chave. As funções que lidam com os eventos são chamados quando “algo acontece” no HTML. Quando isto acontece, o termo “accionado por um evento” é muito conhecido e frequentemente utilizado.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Isto é um titulo</h2>
<p>Isto é um parágrafo.</p>
<p>Isto é mais um parágrafo.</p>
<button>Clica-me</button>
</body>
</html>
No exemplo acima, uma função é chamada quando o evento de clique no botão é accionado:
$(“botão”).click(função() {código}
E esta função esconde todos os elementos <p>:
$(“p”).hide();
6.2 Utilizar funções em ficheiro separado
Se a sua página web contém inúmeras páginas, e pretende que as suas funções jQuery tenham fácil acesso para manutenção, pode introduzi-las num ficheiro .js separado. Nos casos citados acima, temos introduzido as funções jQuery na secção <head>. No entanto, algumas vezes é preferível introduzir as funções num ficheiro, e chamá-las através do atributo “src”. Vejamos:
<head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="a_minha_funçao.js"></script> </head>
6.3 – Conflitos de nomes jQuery
jQuery usa o símbolo $ como atalho para jQuery. Outras bibliotecas Javascript também utilizam este símbolo para as funções. No entanto, para evitar conflitos com jQuery, o método noconflict() permite atribuir um nome alternativo, por exemplo “jq”, em vez de utilizar o simbolo $.
7. EFEITOS JQUERY
7.1 Mostrar e Esconder ( hide(), show() )
Com jQuery é possível mostrar, esconder elementos HTML com estas funções.
$("#hide").click(funçao(){
$("p").hide();
});
$("#show").click(funçao(){
$("p").show();
});
Ambos podem funcionar em conjunto com parâmetros opcionais: “speed” e “callback”.
$(selector).hide(speed,callback) $(selector).show(speed,callback)
O parâmetro “speed” especifica a velocidade de mostrar/esconder, e pode ter os valores “slow”, “normal”, “fast” ou em milisegundos:
$("botao").click(funçao(){
$("p").hide(800);
));
O parâmetro “callback” é o nome de uma função a ser executada depois da função hide/show estar completa.
7.2 Alternar ( toggle() )
O método toggle() permite alterar a visibilidade de elementos HTML que usam a função show/hide. Os elementos escondidos são mostrados, e os elementos visíveis são escondidos.
$(selector).toggle(speed,callback)
Tal como referido anteriormente, o parâmetro “speed” aceita valores “slow”, “normal”, “fast” ou em milisegundos.
$("botao").click(funçao(){
$("p").toggle(850);
));
7.3. 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.
7.3.1 Exemplos Práticos
slideDown()
$("flip").click(function(){
$(".panel").slideDown();
));
slideUp()
$("flip").click(function(){
$(".panel").slideUp();
));
slideToggle()
$("flip").click(function(){
$(".panel").slideToggle();
));
7.4 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.
7.4.1 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);
));
7.5 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>
7.6 Exemplos de efeitos jQuery
$(selector).hide() $(selector).show() $(selector).toggle() $(selector).slideDown() $(selector).slideUp() $(selector).slideToggle() $(selector).fadeIn() $(selector).fadeOut() $(selector).fadeTo() $(selector).animate()
8. FUNÇÃO CALLBACK
Vamos agora ficar a conhecer o que é o “callback” em jQuery.
A função callback é executada depois de a animação estar concluída. As declarações Javascript são executadas linha-a-linha. No entanto, com as animações, a próxima linha de código pode ser executada mesmo que a animação não esteja concluída, o que pode levar a erros. Para prevenir estas situações, cria-se a função callback. Esta não será chamada antes de animação estar terminada.
Exemplo:
$("p").hide(1000,function(){
alert("O parágrafo foi escondido");
});
9. MANIPULAÇÃO HTML
jQuery tem ferramentas muito poderosas que permitem alterar e manipular atributos e elementos HTML.
9.1 Alterar conteúdo HTML
Utilizando esta sintaxe $(selector).html(content) alterámos o conteúdo de um dado parâmetro.
$("p").html("Escola de Criatividade");
9.2 Adicionar conteúdo HTML
Utilizando a sintaxe $(selector).append(content), pode-se anexar informação aos elementos seleccionados.
Utilizando a sintaxe $(selector).prepend(content), pode-se “des-anexar” informação dos elementos seleccionados.
$("p").append("Escola de Criatividade");
$("p").prepend("Escola de Criatividade");
9.3 Inserir conteúdo depois de elementos HTML
Utilizando a sintaxe $(selector).after(content) pode ser introduzido conteúdo depois do elemento escolhido.
$("p").after(" Escola de Criatividade.");
9.4 Inserir conteúdo antes de elementos HTML
Utilizando a sintaxe $(selector).before(content) pode ser introduzido conteúdo antes do elemento escolhido.
$("p").before("Escola de Criatividade.");
10 – MÉTODOS CSS
10.1 Método css()
jQuery tem um método bastante importante para manipulação CSS que é css(). Tem três sintaxes diferentes:
css(nome) – Devolve o valor de uma propriedade CSS
css(nome,valor) – Define um valor numa propriedade CSS
css({propriedades}) – Define múltiplos valores em múltiplas propriedades
10.2 Devolver propriedade CSS
Utilize o método css(nome) para devolver uma propriedade CSS escolhida, que será extraída do primeiro elemento encontrado que tenha a propriedade.
$(this).css("background-color");
10.3 Definir propriedade e valor CSS
Utilize css(nome,valor) para definir as propriedades de uma propriedade CSS para todos os elementos que combinam com o introduzido.
$("p").css("background-color","yellow");
10.4 Definir múltplas propriedades e valores CSS
Utilize css({propriedades}) para definir uma ou mais proriedades/valores para os elementos seleccionados
$("p").css({"background-color":"yellow","font-size":"200%"});
10.5 Métodos de Altura e Largura ( height () e width() )
Altera a largura e altura para os elementos seleccionados
$("#div1").height("200px"); // altura
$("#div1").width("200px"); // largura
11 – JQUERY E FUNÇÕES AJAX
AJAX significa “Asynchronous JavaScript and XML”. É uma técnica para criar páginas rápida se dinâmicas
AJAX permite que páginas sejam actualizada de forma assincronizada alterando pequenas quantidade de dados com o servidor a fazer o trabalho. Isto significa que é possivel actualizar partes da página sem actualizar toda a página.
11.1 Escreva menos, faça mais
A função jQuery load() é uma função AJAX simples mas muito poderosa, que pode ser utilizada com a seguinte sintaxe $(selector).load(url,data,callback).
Utilize o selector para definir os elementos HTML a alterar e o parâmetro url para especificar o endereço web para os dados.
11.2 AJAX de baixo nível
A sintaxe para o baixo nível das funções AJAX é $.ajax(opçoes) que oferece mais funcionalidade do que as funções de alto nível, como “load”,”get” entre outros, mas é também um pouco mais difícil de utilizar. O parâmetro opções aceita nomes/valor que definam dados url, passowords, tipos de dados, filtros, funções de erro, entre outros.
12 – DICAS
- Função Documento Pronto
Esta função permite-lhe garantir que o conteúdo jQuery só é acedido depois de a página estar completamente aberta. Isto evita que o jQuery tente aceder a elementos da página que ainda não tenham sido baixados.
$(document).ready(function(){
// Funções jQuery entram aqui
});
Aceitam-se mais dicas e truques para adicionar e criar uma extensa e útil lista. Participe!
Até já!
Jonathan [JCM]
Sinceramente, um dos melhores posts que eu já vi sobre as funções e a usabilidade do JQuery, meus parabéns.
Creio que só faltou alguns exemplos sendo exibidos no conteúdo do post (mas creio que isto teria vindo a tornar o post lento), de resto, está perfeito.
Realmente o Jquery é uma ótima ferramenta para criar sites dinâmicos e com ótimos efeitos, além de ser muito mais leve que o JavaScript em si e ele é muito mais fácil de se entender e aprender (mas caso saiba JavaScript é ainda melhor).
Cumprimentos.
Diogo Espinha
Muito obrigado Jonathan. De facto poderiam ter sido incluídos mais exemplos ao logo do artigo, mas com um artigo já tão extenso, incluir os exemplos iria torná-lo demasiado lento, se calhar ao ponto de não chegar a ser concluído pelo leitor. Assim está mais concentrado e penso que irá encher as medidas de quem lê.
Obrigado e abraço! :)
Jonathan [JCM]
Colocando em prática uma parte do que você repassou no post, fiz um slide para exibir os sites que recomendo. :)
Veja em meu blog, no footer.
Mais tarde tentarei colocar algumas regras If para exibir somente sob determinada condição.
Cumprimentos.
Diogo Espinha
Está indo bem, bem jogado!
Luiz Alexandre Ruiz
Olá Jonathan, só acrescentando algo para ti, o JQuery é feito em Javascript…
Abraços,
Luiz Alexandre Ruiz
Desenvolvedor
Jonathan [JCM]
@Luiz Alexandre Ruiz
Eu sei disto, o JQuery na realidade é uma framework para Javascript, disse que se torna mais rápido utilizar JQuery pela facilidade de uso e por não ter que reinventar a roda. ;)
Pedro F
Ótimo artigo, meus parabéns!
(:
Werner
Ótimo artigo! Muito bom!
Só não intendi direito a função load(url,data,callback) e $.ajax(opçoes) pode explicar melhor por favor? =)
Muito obrigado!
Mais uma vez, ótimo artigo.
Parabéns!!!
Abçs.
Flávio
Fiz tudo certinho, baixei os dois arquivos, salvei numa pasta ” TESTE” montei a index.html. do jeito que esta no exemplo. não mudei nada, apenas a pasta indicando o caminho dos arquivos jquery e o nome das imagens, a DIV ficou o mesmo nome. porem as imagens aparecem uma do lado da outra e não ocorre a transição. oque pode estar errado.?
Douglas Lopes
Excelente post, traduz com muita praticidade os documentos oficiais das API’s Jquery.
Deivison
$(“div”).animate({‘font-size’:’4em’},”slow”);
Robson Moulin
Muito bom, aprendi bastante com sua mini aula!!!
Parabéns!
Sofia
Olá Diogo,
Achei o post muito interessante e de grande ajuda.
Eu estou a desenvolver uma página e precisava de umas dicas.
É o seguinte: tenho as barras com o seguinte codigo:
$(function() {
$(“.ProdutosTitulo”).click(function() {
$(‘#’+this.id+’C').toggle(‘blind’, {}, 300 );
$(‘#’+this.id+’S').toggleClass(“PTimgBaixo”);
$(this).toggleClass(“ProdutosTituloB”);
});
});
Esta para funcionar que quando cliques abra a informação, mas eu queria que depois de clicar, quando deixasse de estar o rato por cima a barra volta-se a fechar ou então que durasse um determinado período de tempo e fecha-se e não estou a conseguir, será que me podes ajudar?
Muito obrigado e mais uma vez parabéns pelo post.
Fábio
Boas Diogo,
Muito bom, parabens.
Explicaste a base, com isto já consigo desenvolver o resto.
Obrigado.
Andrea dias
Realmente um excelente tutorial ,estou tentando criar uma um site de uma agencia de viagem ,so que infelizmente eu ainda sou principiante mas bastante aplicada e este será o meu projecto no final do ano será que alguem me ajuda,por favor!?
quem estiver interessado este é o meu email: brandy-hymanilsie@hotmail.com
Alyson
Queria saber como pegar o id da div com id=”${arquivo.dsArquivo}”?
em JQuery como pego esse parametro
ja tentei colocar $(“div#${arquivo.dsArquivo}”).toggle(); e não prestou como fazer galera vlw
Kevin Oliveira
Jquery ainda é muito usado, mas tenho certeza que daqui uns 2 anos (ou até menos) o CSS3 estará no lugar.
Marcio
Demais amigo, muito bom seu site
Deus te abençõe muito pela ajuda a todos
abraço
Raphael Ivo
Library != Livraria;
Library = Biblioteca;
;)
Raphael Ivo
PS. Ótimo tutorial e ótimo site também! Parabéns!
adonis domingues
parabéns !
Robson Morais
Belo post…
Parabéns!
Marcelo Ferreira
Excelente tutorial, lança luz a vários recursos que nos fogem como possíveis no dia a dia,
Sou iniciante em programação, e tenho tido alguma dificuldade em implementar estes recursos em diferentes navegadores, o show/hide como exemplo, não funciona em alguns casos no Chrome e Safari, isso acontece mesmo, ou estou fazendo algo de errado.
Gabriel F. R. Nascimento
Muito bom o artigo.
Val Barion
Parabéns pela publicação do artigo. Excelente!
wesley
cara melhor post que ja li javascript muito bom esta de parabens……
Carlos
Parabéns Diogo, seu post é muito bom e informativo, gostei muito!
Alisson Silveira
Ótimo post, tenho que apresentar um trabalho sobre jQuery para a turma da faculdade, e ainda não tinha tido uma base do conteudo, após pesquisar um pouco achei este post, simplesmente Ótimo, a didática incrível até para que não tem muito conhecimento dá para entender e aplicar de uma forma simples e funcional.Parabéns
Eduardo
Excelente artigo. JQuery é ótima opção para customizacoes rápidas em SharePoint
Iury
Parabéns pelo post, ótimo tutorial!
Cuidado com alguns detalhes como do “prepend” que não é pra “des-anexar” e sim para anexar no início enquanto o append no final!
E o Library que na verdade é uma biblioteca e não uma livraria!
De resto está ótimo, aprendi bastante!
obrigado!
Evandro Junqueira Ramos
Já utilizei JQuery em alguns sites que trabalhei.
Sempre muito fácil e muito rápido. Vale a pena investir algumas horinhas para conhecer esta ferramenta!
Vanderlan
Muito bom! Aprendi demais com esta pequena aula. Pra quem não sabia nada de JQuery, como eu, que vim aqui pra tentar entender um pouco dessa ferramenta… Cara, vc cumpriu o seu objetivo. Parabéns Diogo! Ótima explicação.
Ueliton
Parabéns,
estive garimpando a net atrás de um blog que fosse simples e objetivo.
este post é o melhor que eu já lí até agora recomendo a todos que quiserem conhecer sobre JQuery!
Nota 10!
Eduardo
Ótimas dicas já tinha visto no site da jquery mais aqui esta bem mais simples e explicado como funciona mesmo o jquery.
Fico muito feliz
Nossa!fico encantado como o domínio que vocês tem com essa maravilhosa biblioteca!
LuviMemel
Olá, tenho um slideshow na abertura do meu site no WordPress (tema Mantra) e utilizo também o NextGenGallery. Porém, desde que passei a usar o jQuery (Toggle), os slides pararam de funcionar (tanto o da abertura quanto a opção do NextGen). Não aparece nenhuma mensagem de erro, ele simplesmente fica tentando carregar a imagem eternamente.
Já li sobre o conflito de variáveis, o tal noConflit() etc e tal.
Já tentei várias coisas, mas não descobri como/onde substituir as tais variáveis para que o conflito tenha fim.
O script Toggle que utilizo é (que acrescentei no meu header.php antes da tag :
$(document).ready(function(){
//Ocultar o toogle no carregamento da página
$(“.togglebox”).hide();
//Exibir o conteúdo quando clicar sobre o H5
$(“h5″).click(function(){
//Ocultar o conteúdo quando clicar sobre o H5.
$(this).next(“.togglebox”).slideToggle(“slow”);
return true;
});
});
_________________________________________________
Alguém poderia/saberia me orientar?
Luvi
Kelly
Muito muito muito bom mesmo!
Pedro
Não consegui entender a parte do conflito… pois estou tentando usar dois script juntos e entram em conflito e nenhum dos dois funcionam… separadamente funciona normal… alguém teria como ajudar?
Gleidson
Em nome da comunidade agradeço pelo tutorial, é excelente…
Parabéns!!!