Introdução
Se você está familiarizado com o mundo da programação, sabe o quão importantes são as linguagens de programação. Algumas das mais críticas e frequentemente utilizadas incluem HTML, CSS, e JavaScript. Enquanto o HTML e o CSS ajudam você a projetar e estruturar seu site, o JavaScript permite torná-lo interativo. Há uma série de bibliotecas JavaScript que você pode usar para adicionar recursos exclusivos ao seu projeto web. Entre elas está a biblioteca jQuery.
jQuery por si só não é uma linguagem de programação. É uma ferramenta que você pode usar para facilitar o desenvolvimento web em JavaScript. Isso ajuda a tornar as tarefas mais simples e diretas. É famosamente baseado no conceito de ‘Escreva Menos, Faça Mais’. Além de facilitar o desenvolvimento web, o jQuery também oferece o benefício adicional da compatibilidade entre navegadores. Isso significa que o código pode ser renderizado adequadamente, independentemente de qual navegador seja usado para a saída.
Para visualizar melhor como o jQuery torna as coisas mais concisas, considere um exemplo. Digamos que estamos escrevendo o programa “Hello, World!”. Veja como ele apareceria em JavaScript e jQuery, respectivamente:
|
1 2 |
JavaScript document.getElementById("demo").innerHTML = "Hello, World!"; |
|
1 2 |
jQuery $("#demo").html("Hello, World!"); |
Ambas as linhas de código produzirão o mesmo resultado. No entanto, como você pode ver, o jQuery torna a escrita mais concisa e direta ao ponto.
Neste tutorial, você aprenderá tudo sobre o básico do jQuery. Você pode baixar a ferramenta para si mesmo em este site. Prosseguiremos como se você fosse um iniciante completo, sem nenhum conhecimento sobre o jQuery. Este tutorial ensinará como instalar o jQuery e alguns dos conceitos fundamentais associados a ele. Exploraremos alguns dos seletores, eventos e efeitos comuns no jQuery. Em seguida, você aprenderá a testar conceitos de desenvolvimento como API, DOM e CDN por meio de exemplos práticos. Continue lendo para se familiarizar com o mundo do jQuery.
Antes de Começarmos
Existem certas coisas que funcionarão a seu favor se você as conhecer de antemão. Por exemplo, ter uma compreensão básica de como o HTML e o CSS funcionam ajudará muito. Não cobriremos isso neste tutorial. Trabalharemos com a suposição de que você sabe como configurar um site simples, pelo menos. Você também deve ter uma compreensão básica de como a programação funciona em geral. Isso não significa necessariamente que você precise ser um especialista em JavaScript para prosseguir. Ter apenas alguma familiaridade com coisas como lógica, variáveis e tipos de dados na programação é suficiente.
Como Configurar o jQuery no Seu Sistema
Antes de mais nada, vejamos como você pode configurar o jQuery no seu sistema. O jQuery está disponível como um arquivo JavaScript, pois é uma biblioteca JavaScript. Você precisa vincular esse arquivo no código HTML do nosso site. Existem duas maneiras de fazer isso. Como mencionei antes, uma maneira de fazer isso é baixá-lo de aqui. Além do site oficial, você também pode encontrar o jQuery nas Google Hosted Libraries bem aqui.
Outra maneira é usar a Content Delivery Network ou CDN para vincular o arquivo. Uma CDN compreende um conjunto de servidores que ajuda a entregar conteúdo web localmente. Hospedar um arquivo jQuery via CDN permite que o conteúdo chegue muito mais rápido ao usuário. É por isso que usaremos a Content Delivery Network a partir deste ponto em diante neste tutorial.
No nosso primeiro exemplo, faremos um projeto web. Este pequeno projeto contém style.css no css/ diretório. script.js está localizado no js/ diretório. Por fim, um index.html está presente na raiz do projeto web:
De acordo com este projeto, criaremos um esqueleto HTML. Posteriormente, o salvaremos como index.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> |
É aqui que faremos o link do arquivo jQuery. Como eu disse antes, faremos o link via CDN. Você inserirá o link do jQuery antes da </body> tag. Depois disso, você pode adicionar seu arquivo JavaScript personalizado que era script.js no nosso exemplo. Lembre-se de sempre colocar o arquivo JavaScript abaixo da biblioteca jQuery, assim:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/script.js"></script> </body> </html> |
O que você faria se, em vez disso, baixasse uma cópia local da biblioteca jQuery? Nesse caso, você deve salvar o arquivo jQuery na pasta js/ . Depois, você pode vinculá-lo como js/jquery.min.js.
jQuery: Os Fundamentos
Antes de mergulharmos nos detalhes, vamos repassar alguns dos fundamentos do jQuery. O principal trabalho do jQuery é usar o DOM para conectar elementos HTML no navegador. DOM significa Document Object Model. É o método que permite ao JavaScript interagir com o HTML em um navegador. Você pode visualizar o DOM clicando com o botão direito na sua página web e selecionando Inspecionar. O HTML que aparece nas Ferramentas do Desenvolvedor é o DOM.
Um nó é um elemento HTML individual no DOM. O JavaScript pode modificar todos esses objetos ou elementos. Você pode imaginar a disposição desses objetos como uma estrutura em árvore. <html> fica na raiz, enquanto os elementos se ramificam ainda mais.
Clicar com o botão direito e selecionar Exibir Código Fonte da Página mostrará o HTML bruto do site. Lembre-se de que isso não é o mesmo que o DOM. Enquanto o DOM pode ser alterado, a fonte HTML é completamente estática. Qualquer alteração que você fizer no JavaScript não afetará este arquivo HTML. Todo o nó <html> é envolvido em uma camada externa chamada objeto document.
A seguir, veremos como você pode manipular sua página web e seus recursos usando o jQuery. Antes de fazer isso, no entanto, você deve garantir que a página esteja pronta.
Digite o seguinte após criar o arquivo script.js no diretório js/:
|
1 2 3 4 5 |
$(document).ready(function() { // todo o jQuery personalizado irá aqui }); |
Agora, qualquer código que você escrever será envolvido por este código. O jQuery detectará a prontidão do código. O código dentro desta função será executado apenas quando o DOM estiver preparado.
Revisitaremos o script “Hello, World!” de que falamos no início do tutorial. Considere que queremos iniciar este script. Para usar o jQuery para imprimir este texto no navegador, temos que aplicar o ID demo a um parágrafo vazio em nível de bloco como este:
|
1 2 3 4 5 6 |
... <body> <p id="demo"></p> ... |
Para chamar o jQuery, temos que usar o $ símbolo. Você pode aplicar a sintaxe e os métodos do CSS para acessar o DOM com o jQuery. Um exemplo simples é o seguinte:
|
1 |
$("selector").method(); |
Este é o formato que você usará com o jQuery. Nós já sabemos que o # símbolo representa o ID no CSS. Portanto, você pode acessar o ID demo usando o seletor #demo.html() . Este método permitirá que você altere o HTML presente em um elemento.
O código a seguir mostra a colocação do programa “Hello, World” no wrapper jQuery ready() do arquivo script.js:
|
1 2 3 |
$(document).ready(function() { $("#demo").html("Hello, World!"); }); |
Você precisa adicionar esta linha de código ao script.js arquivo. Salve este arquivo. Depois disso, você pode abrir o index.html arquivo no navegador. Você deverá conseguir ver a saída Hello, World!. Este é também um bom ponto para verificar o DOM para fins de compreensão. Clique com o botão direito no texto “Hello, World!”. Selecione Inspecionar Elemento. O DOM mostrará <p id="demo">Hello, World!</p>. Clicar em Exibir Código Fonte da Página, por outro lado, mostrará apenas o HTML bruto. Neste caso, seria <p id="demo"></p>.
O que são Seletores?
Agora vamos passar para alguns dos recursos críticos no jQuery. Entre eles estão os seletores. Seletores jQuery dizem ao programa com quais elementos você deseja trabalhar ou 'selecionar'. Eles são muito semelhantes aos seletores que você pode usar no CSS. Aqui está o formato básico de como acessar um seletor no jQuery:
|
1 |
$("selector") |
Você pode usar strings com aspas simples ou duplas, embora o guia de estilo do jQuery prefira o último. Se desejar, você pode ver a lista completa de seletores jQuery nesta página oficial. Para sua informação, aqui estão alguns dos seletores mais frequentemente usados:
-
$("*")
Este é o seletor Curinga. Ele selecionará todos os elementos da sua página.
-
$(this)
Este é o seletor Atual. Ele seleciona o elemento no qual você está operando atualmente com uma função.
-
$("p")
Este é o seletor de Tag. Ele seleciona todas as instâncias da tag <p>.
-
$(".example")
Este é o seletor de Classe. Ele selecionará cada elemento que tenha a classe example aplicada.
-
$("#example")
Este é o seletor de Id. Ele seleciona apenas uma única instância do id example.
-
$("[type='text']")
Este é o seletor de Atributo. Ele selecionará qualquer elemento com text aplicado ao atributo type.
-
$("p:first-of-type")
Este é o seletor de Pseudo-elemento. Ele ajuda a selecionar o primeiro <p>.
O que são Eventos?
Existem alguns recursos da página da web que são carregados assim que a página é carregada. Considere o exemplo “Hello, World”. Neste caso, poderíamos adicionar o código diretamente ao HTML de origem. Mas o que acontece quando o carregamento de um recurso exige a interação do usuário? É aí que o jQuery se torna útil.
Digamos que queremos que algum texto apareça depois que o usuário clicar em um botão. Para adicionar esse recurso, você deve adicionar um elemento <button> ao arquivo index.html. Este botão estará escutando o ‘evento’ de clique:
|
1 2 3 4 5 6 |
... <body> <button id="trigger">Clique em mim</button> <p id="demo"></p> |
Qualquer momento em que o usuário interage com o navegador é considerado um evento. A interação pode ser através do ponteiro do mouse ou do teclado. No exemplo acima, o clique de um botão é o nosso evento. É por isso que é chamado de evento de clique.
Em seguida, temos que chamar uma função que possui o código “Hello, World”. Para fazer isso, usaremos o método click() :
|
1 2 3 |
$(document).ready(function() { $("#trigger").click(); }); |
Como você pode ver, o ID do nosso elemento <button> é chamado trigger. Podemos selecioná-lo usando $(“#trigger"). O objetivo de adicionar o método click() é fazer com que o programa escute o evento de clique. Em seguida, colocaremos a função com o código de texto dentro do método:
|
1 2 3 |
function() { $("#demo").html("Hello, World!"); } |
Nosso código ficará mais ou menos assim no final:
|
1 2 3 4 5 |
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); }); |
Agora você pode salvar o arquivo script.js. Atualize o arquivo index.html no navegador para aplicar as alterações. Depois de clicar no botão, a saída de teste “Hello, World!” aparecerá.
Existem outros tipos de eventos jQuery além do clique também. Você pode ver uma lista completa desses métodos de evento em este documento oficial. Aqui estão alguns dos mais frequentemente utilizados com os quais você pode se deparar ocasionalmente:
-
click()
O evento click executa o código com um único clique do mouse.
-
hover()
O evento hover executa o código quando o ponteiro do mouse passa sobre um elemento. Você também pode especificar se o código é acionado pela entrada ou saída do mouse com mouseenter() e mouseleave() respectivamente.
-
submit()
O envio de um formulário aciona o código.
-
scroll()
Rolar a tela para baixo será o evento que executa o código.
-
keydown()
Pressionar a tecla para baixo no teclado executará o código.
O que são Efeitos?
efeitos jQuery funcionam em conjunto com os eventos jQuery. O principal objetivo dos efeitos, como o termo sugere, é adicionar animações à página. Ele permite manipular os elementos para aplicar vários tipos de efeitos. Esses efeitos podem ser acionados por determinados eventos.
Para entender melhor, vamos considerar um exemplo. Digamos que queremos abrir e fechar uma sobreposição (overlay) de popup. Uma maneira de fazer isso seria usar dois IDs diferentes. Um abriria a sobreposição e o outro a fecharia. A outra maneira de fazer isso é usar uma classe. O benefício de usar uma classe é que a mesma função é capaz de abrir e fechar a sobreposição.
Abra o seu index.html arquivo. Em seguida, exclua as tags <button> e <p> do corpo. Agora adicione as seguintes linhas de código ao HTML:
|
1 2 3 4 5 6 7 8 9 10 |
... <body> <button class="trigger">Abrir</button> <section class="overlay"> <button class="trigger">Fechar</button> </section> ... |
Vamos dar uma olhada no nosso arquivo style.css a seguir. Aqui, nosso objetivo é usar o mínimo de CSS para ocultar a sobreposição. Para isso, usaremos display: none e centralizá-la assim:
|
1 2 3 4 5 6 7 8 9 10 |
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray; } |
Em seguida, usaremos o método toggle(). Este método nos permitirá alternar a propriedade display entre none e block. Assim, a sobreposição será ocultada e exibida sempre que clicarmos. Adicione este código ao arquivo script.js:
|
1 2 3 4 5 |
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); }); }); |
Finalmente, atualize o index.html para aplicar as alterações. Agora você poderá alternar a visibilidade do modal. Tudo o que você precisa fazer é clicar nos botões. Existem outros efeitos jQuery que você pode usar em combinação com este. Por exemplo, você pode alterar o simples toggle() para slideToggle() ou fadeToggle().
A seguir estão alguns dos métodos de efeitos comumente usados no jQuery:
-
toggle()
Este método permite alterar a visibilidade do elemento. Os efeitos unidirecionais associados a ele são show() e hide().
-
fadeToggle()
Este método permitirá alternar a visibilidade e a opacidade do elemento por meio de animação. Os efeitos unidirecionais neste caso são fadeIn() e fadeOut().
-
slideToggle()
Este método permitirá usar efeitos de deslizamento para alternar a visibilidade do elemento. Os efeitos unidirecionais neste caso são slideUp() e slideDown().
-
animate()
Este método de efeito permite realizar efeitos de animação personalizados. Ele usa a propriedade CSS do elemento fornecido.
Conclusão
Esperamos que este tutorial tenha sido útil para fornecer uma introdução detalhada ao jQuery. É uma ferramenta incrivelmente útil que ajuda muito a facilitar o desenvolvimento web e a escrita de código. Isso é especialmente verdadeiro se você for relativamente novo no mundo da programação.
Exploramos os vários elementos que compõem os fundamentos do jQuery. Também aprendemos como você pode selecionar e modificar esses elementos, e como fazer bom uso de eventos e efeitos. O domínio de ferramentas como o jQuery pode ajudar você a criar sites repletos de recursos interativos que proporcionam uma experiência de usuário envolvente.
Confira alguns recursos do nosso blog que ajudarão você ao trabalhar com JavaScript:
- Um Guia sobre Como Adicionar JavaScript ao HTML
- Trabalhando com JavaScript: Como as Classes Funcionam
- Trabalhando com JavaScript: Como Funcionam os Protótipos e as Heranças
Feliz computação!
Comentários
Nenhum comentário ainda. Seja o primeiro.