Nenhum produto encontrado nessa seleção.
Para que você aprenda qualquer parte da programação, é necessário começar por algum lugar. Este artigo traz uma breve Introdução ao jQuery para que você comece a entender como funciona a biblioteca.
Antes disso, lembre-se de dar uma analisada em nosso Curso de JavaScript, pois, é bom que você entenda JS para trabalhar com jQuery.
Segue o link para o curso de JS:
Agora vamos ao jQuery.
O que é jQuery?
O jQuery é uma biblioteca JavaScript disponibilizada como Software Livre, ou seja, pode ser utilizado tanto em aplicações pessoais como empresariais de modo gratuito (você pode fazer uma doação para seus desenvolvedores se quiser).
Com o jQuery, é possível implementar animações, efeitos, manipulação de eventos JavaScript, percorrer documentos HTML, adicionar CSS, Texto, validar formulários, interagir com Ajax, enfim, é possível fazer tudo isso e muito mais sem ter que atualizar a página. Isso faz com que seu website fique totalmente dinâmico, moderno, leve e elegante.
jQuery veio para mudar a maneira em que você escreve JavaScript, pois milhares de linhas de código poderão se resumir em apenas uma linha de fácil entendimento, por isso, seu lema é “Escreva menos, faça mais!” (Write Less, Do More).
Foi desenvolvido, inicialmente, por John Resig que é um profundo conhecedor da linguagem JavaScript e queria fazer com que o modo de escrever códigos para adicionar pequenos efeitos em páginas fosse mais simples para o desenvolvedor de websites: “Porque submeter os desenvolvedores ao martírio de desenvolver longos e complexos códigos para adicionar simples efeitos?“.
John Resig foi o criador dos livros Pro JavaScript Techniques e Secrets of the JavaScript Ninja.
Baixar o jQuery
Felizmente, se você não tem uma hospedagem para baixar e hospedar o arquivo do jQuery, o código está hospedado pelo próprio site da biblioteca, sendo possível a utilização deste mesmo arquivo diretamente no seu código. Segue o link:
Se você tem uma hospedagem própria, baixe o arquivo no site abaixo:
A versão que vamos trabalhar neste tutorial é a 1.11.1, que, atualmente, é a versão mais recente do jQuery.
Nota importante: Em alguns navegadores de internet (Como o firefox), o link para download pode não apresentar o gerenciador de downloads para salvar o arquivo, então você deve copiar todo o código da página de download do jQuery pressionando as teclas “Ctrl + A” do seu teclado para selecionar tudo; logo em seguida, abra o bloco de notas (ou qualquer editor de textos voltado a programação) e salve os dados em um arquivo com o seguinte nome e extensão “jquery.js“.
É imprescindível a utilização do “.js” ao final do nome do arquivo, como já foi descrito.
Instalando o jQuery
Tudo o que for descrito aqui neste mini-curso poderá ser acompanhado por você utilizando o bloco de notas do seu Windows, ou seu editor de textos voltado para programação de qualquer outro sistema operacional. O bloco de notas pode ser encontrado no seguinte caminho no Windows:
- Abra o menu iniciar;
- Clique em Programas – Acessórios;
- Em seguida “Bloco de Notas”;
Quando for salvar seus arquivos, utilize a seguinte sintaxe: Nome Do seu Arquivo + .html, ex: aula_1.html.
Qualquer arquivo .html, poderá ser aberto em um navegador de internet para que você faça a visualização do código no modo em que ele irá aparecer na sua página da internet.
Para fazer edição nesse arquivo, é necessário clicar com o botão direito do mouse sobre ele, selecionar a opção “Abrir com” e escolher o bloco de notas (ou qualquer outro editor de textos voltado para programação instalado em seu computador).
Para que você entenda melhor, criei uma pequena página HTML, segue o código:
<!doctype html> <html> <head> <title>Aula 1 - Instalando jQuery</title> </head> <body> </body> </html>
Todo e qualquer desenvolvedor web sabe que o código acima é a estrutura mais básica possível de um documento HTML.
Para quem não é um desenvolvedor, o código acima diz que temos um documento HTML com o título “Aula 1 – Instalando jQuery”.
Isso será apresentado na barra de títulos do seu navegador de internet, então comece copiando este código para o bloco de notas e salve como descrito anteriormente: nome_de_sua_preferencia.html.
Como o documento acima é o mais básico, ele ainda não reconhece caracteres como “ç” e acentuação, pois ainda não configuramos o charset. É imprescindível a utilização de uma META descrevendo o que este documento contém (charset), então coloque essa meta logo abaixo da tag <head>, como mostra o código abaixo:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Aula 1 - Instalando jQuery</title> </head> <body> </body> </html>
Para a instalação correta do jQuery, é necessário que você saiba o local onde ele foi salvo.
Em nosso exemplo, vamos salvar o arquivo dentro de uma pasta chamada js na pasta raiz do nosso site.
Na linguagem de programação Web, e várias outras linguagens de programação, raiz é o mesmo que a pasta inicial do seu programa.
Por exemplo, se o arquivo está dentro da raiz do site, não é necessário escrever /nome_do_arquivo.extensao, basta escrever o nome do arquivo e a extensão sem a barra.
Como nosso arquivo do jQuery (nomeado de jquery.js) está na pasta js dentro da raiz do site, o caminho dele será js/jquery.js, o que quer dizer que ele está na pasta js, que está na raiz do site.
Nota: Crie uma pasta e jogue todos os arquivos dentro dela, essa será a raiz do nosso site.
Sabendo onde está nosso arquivo jquery.js, iniciamos a “instalação” dele do mesmo modo que linkamos qualquer arquivo .js em nosso website, iniciamos e terminamos com <script src=”js/jquery.js”></script>.
Lendo este pequeno código e sabendo do que já foi dito, você já pode entender mais ou menos o que ele quer dizer: Abrimos a tag com <script em seguida terminamos indicando o caminho do arquivo jquery.js com src=”js/jquery.js”. Toda e qualquer tag que se abre em HTML ou qualquer outra linguagem de programação, deve ser fechada; então fechamos o nosso script com </script>.
Nosso script de instalação do jQuery, deverá estar entre as tags <head> e </head>, veja o exemplo em nosso arquivo HTML:
Arquivo HTML com jQuery instalado:
<!doctype html> <html> <head> <meta charset=UTF-8"> <script src="js/jquery.js"></script> <title>Aula 1 - Instalando jQuery</title> </head> <body> </body> </html>
Estrutura do jQuery
Agora vamos ver as estruturas mais usadas para o jQuery (você pode utilizar a que preferir).
- A forma mais completa (com a palavra jQuery) que é menos utilizada, porém previne contra incompatibilidade com outras bibliotecas JavaScript;
- A forma com o cifrão ($);
- E a mais forma compacta (a que eu sempre utilizo).
Tudo se passa dentro de um ambiente JavaScript, portanto, todo e qualquer código jQuery deverá estar dentro das tags <script> e </script>, veja o exemplo:
A forma completa:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<script>
// INICIO DO JQUERY
jQuery(document).ready(function(){
// AQUI VEM O CODIGO
}); // FIM DO JQUERY
</script>
<title>Aula 1 - Instalando jQuery</title>
</head>
<body>
</body>
</html>Como você pode notar, escrevi onde começa a estrutura do jQuery, e onde ela termina. Esses scripts poderão ser colocados entre as tags <head> e </head> ou entra as tags <body> e </body>.
Por enquanto só vamos utilizar os códigos na head do documento, como mostra o exemplo anterior, portanto, não vamos mais mostrar todo o código html completo, tudo se passará no local onde foi adicionado o código mostrado no último exemplo.
Forma com apenas o cifrão
Também é possível escrever jQuery com o seguinte formato:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
// AQUI VEM O CODIGO
});
</script>
Forma mais compacta
E por fim, a forma mais compacta para escrever trechos de código jQuery:
<script language="javascript" type="text/javascript">
$(function(){
// AQUI VEM O CODIGO
});
</script>
A partir daqui, você já sabe que estamos falando de JavaScript e jQuery, portanto, agora mostraremos apenas o código jQuery em si, sem o <script> e </script>, mas você já sabe que deve colocar isso em documentos HTML, certo? Caso contrário não vai funcionar.
Escrevendo um texto no documento com jQuery
Para escrever qualquer texto no documento com jQuery, utilizamos a função .text(), veja:
$(document).ready(function(){
$("body").text("Este é meu primeiro texto com jQuery");
});
No início, isso pode parecer um pouco complicado para você, mas vou explicar o código e você vai ver que não é nada complicado.
- Primeiramente, escrevemos a estrutura do nosso jQuery;
- Logo em seguida, escrevemos o código $(“body”).text(“Este é meu primeiro texto com jQuery”);. Isso quer dizer que: 1) $(“body”) – estamos selecionando a tag body do nosso HTML; 2) .text(“Este é meu primeiro texto com jQuery”); – estamos pedindo ao jQuery que escreva “Este é meu primeiro texto com jQuery” dentro da tag selecionada (nesse caso a tag body).
Isso gera um pequeno problema para nós. Todo texto dentro da tag body (o documento inteiro) será substituído pelo texto que escrevemos agora, e nós não queremos um site de uma frase só, certo?
Bom, para isso é simples, basta selecionarmos um elemento apenas, e não todo o “body”. (mas calma que você ainda vai aprender isso, por enquanto vamos trabalhar na tag body).
Escrevendo HTML com jQuery
Com jQuery, é possível escrever em HTML dentro do elemento selecionado com a expressão .html(), veja o exemplo:
$(document).ready(function(){
$("body").html("Este é meu primeiro parágrafo HTML com jQuery");
});Seguindo o mesmo exemplo que utilizamos para escrever um texto no body, utilizamos .html() para escrever em HTML no corpo do documento.
Adicionando conteúdo em elementos com jQuery
Lembra quando dissemos do problema ao adicionar conteúdo direto na tag body, onde substituímos tudo que tem dentro dela? Certo, mas você pode resolver este problema utilizando a expressão .append() para adicionar conteúdo ao fim do elemento, ou .prepend() para adicionar conteúdo ao início do elemento, sem apagar o que já existe nele. Veja:
$(document).ready(function(){
$("body").html("<p>Este é meu primeiro <strong>parágrafo HTML</strong> com jQuery</p>");
$("body").append("<p>Este é meu segundo <strong>parágrafo HTML</strong> com jQuery</p>");
});
O Script sempre é executado de cima para baixo e da esquerda para direita, agora que estamos começando a dar mais valores a nossos elementos é muito importante que você saiba disso. A função .append(), segue o mesmo padrão da função .text() e .html().
Além disso, tanto append quanto prepend suportam texto e HTML.
Adicionando ou removendo atributo de elementos com jQuery
A maioria dos elementos HTML possuem atributos, que podem ser id, class, rel, alt, title, src, style e vários outros. Com jQuery você pode facilmente adicionar ou remover esses atributos com a expressão .attr(), além de ter a possibilidade de acessar os valores já registrados no elemento.
Vamos adicionar uma classe chamada “paragrafo” em um <p> dentro do documento (body), veja:
$(document).ready(function(){
$("body").html("<p>Meu parágrafo com jQuery</p>");
$("p").attr('class', 'paragrafo');
});
Isso será o mesmo que fazer isto:
<p class="paragrafo">Meu parágrafo com jQuery</p>
Como o script é executado de cima para baixo e da esquerda para direita, eu poderia colocar a classe, e criar um novo paragrafo que não terá essa mesma classe, veja como:
$(document).ready(function(){
$("body").html("<p>Meu parágrafo com jQuery</p>");
$("p").attr('class', 'paragrafo');
$("body").append("<p>Meu parágrafo com jQuery</p>");
});
O segundo paragrafo não terá a classe adicionada ao primeiro, porque ela foi adicionada antes dele ser criado.
Vamos supor que queremos remover uma classe ou qualquer outro atributo do documento completo (em todo o documento), logo utilizaremos a função .removeAttr().
Suponhamos que existam três parágrafos com a classe “paragrafo”, veja o documento html abaixo:
<body> <p class="paragrafo">P 1</p> <p class="paragrafo">P 2</p> <p class="paragrafo">P 3</p> </body>
O arquivo CSS do documento está assim:
.paragrafo {
color:red;
}
Estamos indicando que todos os parágrafos do documento tenham a cor vermelha, certo? Se você quer que isso não ocorra, basta fazer isso com jQuery:
$(document).ready(function(){
$("p").removeAttr("class", "paragrafo");
});
No trecho acima eu removi todas as classes “paragrafo” do documento, ou seja, os “p”s não terão mais a cor vermelha.
Então vamos brincar um pouco mais com o jQuery. Já que removemos a classe do parágrafo, vamos adicionar um id no CSS como mostra o exemplo abaixo:
.paragrafo {
color:red;
}
#paragrafo {
color:blue;
}
E no jQuery, adicione mais uma linha, como mostra o exemplo abaixo:
$(document).ready(function(){
$("p").removeAttr("class", "paragrafo");
$("p").attr("id", "paragrafo");
});
Deu para entender? Veja que removemos a classe “paragrafo” do nosso “p” e adicionamos o ID “paragrafo” no mesmo.
Você pode manipular os elementos do site da maneira que achar melhor utilizando o exemplo acima.
Seletores básicos
Para quem entende mais de CSS e HTML, já deve ter notado que os seletores do CSS são os mesmo para o jQuery, certo? Existem milhares de seletores e milhares de funções, mas se você sabe utilizar o CSS, sabe selecionar elementos com jQuery (ou pelo menos consegue fazer algumas coisas).
Vamos aos exemplo práticos. A partir daqui, vou mostrar os exemplo em páginas externas, para que você veja o que acontece.
Veja um exemplo HTML e CSS (no mesmo arquivo):
<style>
.paragrafo {
color:red;
}
</style>
<body>
<p class="paragrafo">P 1</p>
<p class="paragrafo">P 2</p>
<p class="paragrafo">P 3</p>
</body>
Isso simplesmente faria com que os parágrafos com a classe “paragrafo” ficassem vermelhos, ok? Bem, então eu quero selecionar os parágrafos com a classe paragrafo e remover esse atributo deles, veja como fazer com o jQuery:
$(document).ready(function(){
$(".paragrafo").removeAttr("class", "paragrafo");
});
Note que mesmo adicionando o CSS dizendo que os parágrafos com a classe “paragrafo” serão vermelhos, eles continuam com a cor padrão, isso acontece porque removemos o atributo “class” deles.
Seletores funcionam sempre assim: $(“SELETOR_AQUI”).FUNCAO(“ATRIBUTOS”);
Ou seja, primeiro você seleciona o elemento, depois diz quem vai trabalhar com ele, em seguida diz o que fazer com o elemento. Ficou mais claro agora?
Na documentação do jQuery você tem todos os seletores disponíveis, segue o link: http://api.jquery.com/category/selectors/
Adicionando CSS ao elemento com jQuery
Com jQuery você pode adicionar CSS em elementos HTML utilizando os seletores e a expressão .css().
Vamos criar outro documento HTML, para isso siga o exemplo que já explicamos e, dentro do body, adicione 5 DIVs sem valor nenhum, como o exemplo abaixo:
<body> <div></div> <div></div> <div></div> <div></div> <div></div> </body>
Agora vá no head do documento, onde estão nossos scripts, e vamos alterar nosso jQuery como mostra o exemplo abaixo:
$(document).ready(function(){
$("div").css({
"width":"50px",
"height":"50px",
"background":"red",
"margin":"5px",
"float":"left"
});
});Viu que mudamos o seletor? Agora é “div”.
No exemplo acima, todos os DIVs terão o CSS indicado no jQuery.
Agora vamos fazer com que o primeiro DIV tenha um valor diferente dos outros, veja o exemplo:
$(document).ready(function(){
$("div").css({
"width":"50px",
"height":"50px",
"background":"red",
"margin":"5px",
"float":"left"
});
$("div:first").css({
"width":"50px",
"height":"50px",
"background":"blue",
"margin":"5px",
"float":"left"
});
});Neste exemplo, o primeiro DIV terá o fundo azul.
Reparou que para selecionar o primeiro elemento de cada item, basta adicionar :first.
Eventos jQuery
Um evento é quando algo tem que ocorrer para que o script seja disparado. Caso não tenha reparado, estamos utilizando o evento “load” desde que iniciamos este curso. Trata-se do .ready(), que indica para o jQuery que o script só será executado quando o documento é completamente carregado.
Existem vários outros eventos que vamos ver a seguir (além de vários outros).
Para uma lista completa de eventos, basta acessar o endereço abaixo:
Vamos ver alguns eventos abaixo:
Click – O evento click, como o próprio nome já diz, acontece quando o elemento é clicado.
Vamos ao código:
Crie dois botões, um com ID = bt1 e outro com ID = bt2:
<body> <button id="bt1" type="button">Botão 1</button> <button id="bt2" type="button">Botão 2</button> </body>
Agora vamos criar o nosso evento click em nosso jQuery, veja o exemplo:
$(document).ready(function(){
$("#bt1").click(function(){
alert("Você clicou no Botão 1");
});
$("#bt2").click(function(){
alert("Você clicou no Botão 2");
});
});Agora, ao clicar em qualquer um dos botões, uma mensagem será exibida na tela.
O evento hover, acontece quando o usuário passa o mouse sobre o elemento ou retira o mouse do mesmo, veja um exemplo com os mesmos botões criados anteriormente (apenas o jQuery muda):
$(document).ready(function(){
$("#bt1").hover(function(){
alert("Você passou o mouse sobre o Botão 1");
}, function(){
alert("Você tirou o mouse do Botão 1");
});
$("#bt2").hover(function(){
alert("Você passou o mouse sobre o Botão 2");
}, function() {
alert("Você tirou o mouse do Botão 2");
});
});Agora vamos começar a integrar nosso arquivo CSS com o jQuery, portanto, é necessário saber o que é CSS.
Considere o seguinte exemplo de CSS integrado ao documento:
<style>
.div_1 {
width:500px;
height:500px;
background:blue;
}
.div_2 {
width:500px;
height:500px;
background:red;
}
</style>
<body>
<div class="div_1"></div>
</body>Quem entende de HTML e CSS, já percebeu que temos uma classe que adiciona um background azul no “div_1”, e também já notou que temos uma classe que não faz referência a nada, que é a .div_2.
Podemos fazer com que o jQuery remova a classe 1 do elemento e adicione a classe 2 com o evento .toggleClass(), veja:
$(document).ready(function(){
$(".div_1").click(function () {
$(this).toggleClass("div_2");
});
});Assim como todas as outras funções, é muito simples utilizar o .toggleClass().
Efeitos com jQuery
Agora vamos iniciar uma das partes mais interessantes (se não a mais) do jQuery, os efeitos.
Você já deve ter notado que várias páginas web possuem efeitos de DIVs que somem, deslizam ou apresentam qualquer efeito que não poderia ser adicionado com HTML ou CSS puro. Veja uma demonstração de efeito aqui.
Os efeitos são criados juntamente com os eventos, ou seja, quando você clica, quando a página carrega, ou vários outros eventos que existem.
Os efeitos também podem ser ligados ao nosso arquivo CSS, ou seja, você cria uma classe no CSS e depois a remove com jQuery, proporcionando um efeito.
Veja nosso exemplo de HTML e CSS:
<style>
.div_1 {
width:500px;
height:500px;
background:blue;
display:none;
}
</style>
<body>
<button type="button">Clique para aparecer</button>
<button type="button">Clique para sumir</button>
<div class="div_1"></div>
</body>Perceba que temos 2 botões: O primeiro “Clique para aparecer” e o segundo (e último) “Clique para sumir”, perceba também que nenhum dos dois tem class ou id, então como poderíamos utilizar os seletores para interagir com estes botões?
Simples, podemos utilizar os seletores :first e :last, veja o exemplo com jQuery:
$(document).ready(function(){
$("button:first").click(function () {
$(".div_1").fadeIn("slow");
});
$("button:last").click(function () {
$(".div_1").fadeOut("slow");
});
});Como estamos ocultando nosso div_1 com CSS display:none;, podemos utilizar os efeitos .fadeIn() e .fadeOut() para apresentar e esconder o elemento.
Também poderíamos utilizar .show() ou .hide() com o em nosso evento acima.
FadeIn e FadeOut podem ser utilizados com tempo de execução, normalmente “slow” ou “fast”, mas também poderíamos utilizar milissegundos, como fadeOut(3000) ou fadeIn(600).
Veja uma demonstração do fadeIn e fadeOut aqui.
Outra função muito interessante e utilizada com jQuery é o efeito .slideToggle(), veja uma demostração do .slidetoggle().
Utilizando nosso mesmo exemplo de HTML e CSS, vamos modificar o jQuery e utilizar o efeito .slideToggle():
$(document).ready(function(){
$("button:first").click(function () {
$(".div_1").slideToggle("slow").text("Clique no botão para sumir");
});
});É muito interessante a utilização do .slideToggle(); porque ele tem duas variações, mostra e esconde o elemento. Você não precisa criar várias linhas de código para que isso aconteça.
Exercício
Agora vou lançar um desafio a você, vou mostrar um código HTML, CSS e jQuery.
Tente entender o que fiz.
O HTML:
<body> <h1>Segue o Mouse com jQuery</h1> <div id="segue">Eu vou seguir você!</div> <div id="mostra_na_div">Só sigo dentro da DIV</div> <div id="div_caixa">Passe o mouse.</div> </body>
Agora o CSS:
#segue {
background: purple;
padding: 15px;
border: 1px solid #bdbdbd;
position: absolute;
color:#fff;
}
#mostra_na_div {
background: purple;
padding: 15px;
border: 1px solid #ddd;
position: absolute;
color:#fff;
}
#div_caixa {
background: #123456;
padding: 15px;
border: 1px solid #ddd;
color:#fff;
width:600px;
height:300px;
}Agora o jQuery:
$(document).ready(function(){
$("#segue").hide();
$("#mostra_na_div").hide();
$(document).mousemove(function(e){
$("#segue").show();
$("#segue").html("Y = " + e.pageY + " px X = " + e.pageX + " px");
$("#segue").css({
top: (e.pageY + 15) + "px",
left: (e.pageX + 15) + "px"
});
});
$("#div_caixa").mousemove(function(e){
$("#mostra_na_div").show();
$("#mostra_na_div").css({
top: (e.pageY + 90) + "px",
left: (e.pageX + 15) + "px"
});
});
$("#div_caixa").mouseout(function(e){
$("#mostra_na_div").hide();
});
});O que todo este código faz?
Você viu um DIV seguindo o mouse certo? Isso mesmo, então tente utilizar a sua imaginação e criar um código com jQuery.
Validação de formulários
Agora vamos utilizar uma função muito interessante do jQuery, a validação de formulários. Essa será a nossa última etapa do nosso mini-curso.
A validação de formulários é interessante para que não chegue nada indesejado nos seus emails ou no seu banco de dados.
Crie agora um pequeno formulário em html:
<body>
<form method="post" action="">
<p>Nome: <input type="text" /></p>
<p><input type="submit" /></p>
</form>
</body>Agora você vai ver estruturas condicionais do JavaScript, que são IF e ELSE.
Essas estruturas são baseadas em condições do tipo: “Se isso ocorrer, faça isso; se não, faça aquilo”. Veja um exemplo:
if (crianca == "comer") {
crianca = "vai brincar";
} else {
crianca = "não vai brincar";
}Nesse caso, a condição para a criança é comer; se a criança comer, vai brincar; diferente disso (qualquer valor diferente), não vai brincar.
Agora vamos ver outra função interessante, a .val().
Ela retorna o valor de qualquer elemento do formulário utilizando os seletores, ou seja, para o input com id “nome”, o seletor será $(“#nome”), e para pegar o valor desse input $(“#nome”).val();.
Outra parte interessante são as variáveis. Com elas eu posso criar um pequeno trecho de um código para memorizar qualquer coisa que eu quiser.
Por exemplo, se quero o valor do primeiro input do meu formulário, então eu crio uma variável deste modo:
var variavel = $('input:first').val();Setamos uma variável utilizando var nomedavariável = “valordavariável”;.
Vamos ver como obter o evento de submit do formulário HTML utilizando jQuery:
$(document).ready(function(){
$("form").submit(function() {
var nome = $('input:first').val();
if (nome == "nome"){ alert("Enviado"); return true; }
else { alert('Você deve digitar "nome"'); return false; }
});
});Nesse caso utilizamos a função .submit(). Isso significa que o formulário só será checado se for enviado. Se o usuário digitar “nome”, o formulário é submetido; caso contrário, ele recebe uma mensagem dizendo que deve digitar “nome”.
Utilizamos return true e return false. Se return true (verdadeiro), o formulário é submetido e a página é atualizada; se false (falso), o formulário não é submetido e a página não é atualizada, assim o usuário não perde o que já foi digitado no seu formulário.
Concluindo
Essa foi uma breve introdução (muito superficial, pra dizer a verdade) para que você compreenda o que é jQuery e o que essa biblioteca JavaScript pode fazer por você. Continue estudando e sempre aprimorando seus conhecimentos sobre JavaScript e jQuery, com apenas isso você poderá fazer coisas incríveis nas suas páginas web.
Não pense que lendo este artigo você estará apto a começar a desenvolver utilizando jQuery, ainda existem muitas coisas para aprender, várias das quais você vai continuar aprendendo se continuar seguindo o Tutsup.
Até o próximo tutorial.
