Tutorial jQuery: o que é e como usar o jQuery!
Autor: Edilene brandao da silva | Publicado: 2015-07-17T04:54:00-07:00




Tutorial jQuery: o que é e como usar o jQuery!

“Escrever menos e fazer mais”&nbsp;

"É este o lema de jQuery, uma livraria de funções de Javascript,  de formato leve, sintaxe simples e fácil de aprender.&nbsp;

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.&nbsp;

Além disso, permite a implementação de  recursos de CSS1, CSS2 e CSS3 e trabalha com AJAX e DOM.&nbsp;

Neste tutorial...
...abordar os temas mais usados em jQuery,&nbsp;
desde os&nbsp;
selectores,&nbsp;
à  sintaxe,&nbsp;
ou desde a integração AJAX ao CSS. "




1. ANTES DE COMEÇAR
Você deverá ter conhecimentos básicos de HTML, CSS e Javascript.

2. O QUE É JQUERY?

É uma livraria de funções Javascript
É uma livraria com o lema “Escrever menos e fazer mais”
Contém os seguintes recursos 
Selecções de elementos HTML
Manipulação de elementos HTML
Manipulação CSS
Eventos HTML
Efeitos e animações Javascript
HTML DOM
AJAX




3. COMO ADICIONAR A LIVRARIA JQUERY
A livraria jQuery é guardada num ficheiro Javscript, que contém as  funções jQuery. Para adicionar a uma página web, utilize o seguinte  código






1

2

3


&lt;head&gt;

&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;

&lt;/head&gt;






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

Google





1

2

3


&lt;head&gt;

&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

&lt;/head&gt;






Microsoft





1

2

3


&lt;head&gt;

&lt;script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"&gt;&lt;/script&gt;

&lt;/head&gt;






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:




1

2

3

4

5

6

7


$(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




1

2

3

4

5


$("p") selecciona os elementos &lt;p&gt;



$("p.intro") seleccionar todos os elementos &lt;p&gt; com class="intro".



$("p#demo") selecciona o primeito elemento &lt;p&gt; com id="demo".






2 – Selectores de Atributos

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




1

2

3

4

5

6

7


$("[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




1


$("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.




1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20


&lt;html&gt;

&lt;head&gt;

&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;

$(document).ready(function(){

&nbsp;&nbsp;$("button").click(function(){

&nbsp;&nbsp;&nbsp;&nbsp;$("p").hide();

&nbsp;&nbsp;});

});

&lt;/script&gt;

&lt;/head&gt;



&lt;body&gt;

&lt;h2&gt;Isto é um titulo&lt;/h2&gt;

&lt;p&gt;Isto é um parágrafo.&lt;/p&gt;

&lt;p&gt;Isto é mais um parágrafo.&lt;/p&gt;

&lt;button&gt;Clica-me&lt;/button&gt;

&lt;/body&gt;



&lt;/html&gt;






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 &lt;p&gt;:

$(“p”).hide();

6.2 Utilizar funções &nbsp;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 &lt;head&gt;. No entanto, algumas vezes é  preferível introduzir as funções num ficheiro, e chamá-las através do  atributo “src”. Vejamos:

 




1

2

3

4


&lt;head&gt;

&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript" src="a_minha_funçao.js"&gt;&lt;/script&gt;

&lt;/head&gt;






6.3 – Conflitos de nomes jQuery

jQuery usa o&nbsp;símbolo&nbsp;$ como atalho para jQuery. Outras livrarias de Javascript também utilizam este&nbsp;símbolo&nbsp;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.




1

2

3

4

5

6


$("#hide").click(funçao(){

&nbsp;&nbsp;$("p").hide();

});

$("#show").click(funçao(){

&nbsp;&nbsp;$("p").show();

});






Ambos podem funcionar em conjunto com parâmetros opcionais: “speed” e “callback”.




1

2

3


$(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:




1

2

3

4

5


$("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&nbsp;visíveis&nbsp;são&nbsp;escondidos.




1


$(selector).toggle(speed,callback)






Tal como referido anteriormente, o parâmetro “speed” aceita valores “slow”, “normal”, “fast” ou em milisegundos.




1

2

3

4

5


$("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




1

2

3

4

5


$(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()




1

2

3

4

5


$("flip").click(function(){



&nbsp;&nbsp;&nbsp;&nbsp;$(".panel").slideDown();



));






slideUp()




1

2

3

4

5


$("flip").click(function(){



&nbsp;&nbsp;&nbsp;&nbsp;$(".panel").slideUp();



));






slideToggle()




1

2

3

4

5


$("flip").click(function(){



&nbsp;&nbsp;&nbsp;&nbsp;$(".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:




1

2

3

4

5


$(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()




1

2

3

4

5


$("botão").click(funçao(){



&nbsp;&nbsp;&nbsp;&nbsp;$("div").fadeIn(2000);



));






fadeOut()




1

2

3

4

5


$("botão").click(funçao(){



&nbsp;&nbsp;&nbsp;&nbsp;$("div").fadeIn(2000);



));






fadeTo()




1

2

3

4

5


$("botão").click(funçao(){



&nbsp;&nbsp;&nbsp;&nbsp;$("div").fadeTo("slow",0.30);



));






7.5 Animações jQuery

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




1


$(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.




1


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:




1

2

3

4

5

6

7

8

9

10

11

12

13


&lt;script type="text/javascript"&gt;



$(document).ready(funcao(){



&nbsp;&nbsp;&nbsp;&nbsp;$("botao").click(funcao(){



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("div").animate({left:"29px"},"slow");



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("div").animate({fontsize:"4em","slow");



&nbsp;&nbsp;&nbsp;&nbsp;));



));









1


&lt;/script&gt;






7.6 Exemplos de efeitos jQuery




1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19


$(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:





1

2

3


$("p").hide(1000,function(){

&nbsp;&nbsp;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.




1


$("p").html("Escola de Criatividade");






9.2 Adicionar conteúdo HTML

Utilizando a sintaxe&nbsp;$(selector).append(content), pode-se anexar informação aos elementos seleccionados.

Utilizando a sintaxe&nbsp;$(selector).prepend(content), pode-se “des-anexar” informação dos elementos seleccionados.





1

2


$("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.




1


$("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.




1


$("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.




1


$(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.




1


$("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




1


$("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




1

2

3


$("#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&nbsp;$(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.




1

2

3

4

5


$(document).ready(function(){



&nbsp;&nbsp;&nbsp;// Funções jQuery entram aqui



});







fonte e créditos:
escolacriatividade


escolacriatividade