Este conteúdo faz parte do livro “Introdução à programação Web para a Bioinformática: HTML, CSS, PHP & JavaScript“. Você pode adquirir a versão impressa desse livro aqui ou a versão para Kindle aqui. Para nos citar, consulte este link.
jQuery é uma biblioteca JavaScript de código aberto desenvolvida John Resig em 2006 para simplificar a criação de scripts JavaScript e a interação com o DOM.
Você pode conseguir o jQuery na página: <https://jquery.com>. Você também pode usar o jQuery sem a necessidade de baixar o código-fonte. Para isso insira na sua página o seguinte código:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
c12_s1.html | https://goo.gl/2H4ubT
Hello world, jQuery!
Vamos aprender a fazer uma simples manipulação usando jQuery. Primeiro crie um simples arquivo HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<meta charset="utf-8">
</head>
<body>
<div id="div1"></div>
<footer>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
</footer>
</body>
</html>
c12_s2.html | https://goo.gl/O8GR7K
Agora vamos criar o arquivo “script.js”. Será nesse arquivo que iremos inserir manipulações com jQuery. Lembre-se que não há problemas em misturar código JavaScript com jQuery.
/* jQuery */
$('#div1').text('Hello world, jQuery!');
c12_s3.js | https://goo.gl/MzkMUJ

Essa sintaxe seria o equivalente em JavaScript a:
/* JavaScript */
document.getElementById('div1').innerHTML = 'Hello world, JavaScript';
c12_s4.js | https://goo.gl/hTB7OF
Observe o quão mais simples é o uso do jQuery comparado com o JavaScript tradicional.
Em jQuery começamos uma manipulação na árvore DOM com o caractere $ cifrão (assim como PHP). A seguir declaramos o que queremos manipular (entre aspas ou apóstrofos). Nesse exemplo, nossa ação ocorreu na div #div1. Por fim, usamos a função text (separada por um ponto do resto) para gravar um texto na div. O texto deve ser declarado entre aspas ou apóstrofo.
Escondendo um elemento
Vamos agora demonstrar o poder do jQuery. Vamos usá-lo para esconder um elemento após um período de tempo. Para isso vamos usar a função fadeOut(tempo), onde tempo é dado em milissegundos.
Na página HTML adicione:
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<meta charset="utf-8">
<style>#div1{ width: 100px; height: 100px; background-color:red; } </style>
</head>
<body>
<div id="div1"></div>
<footer>
<!-- jQuery --><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
</footer>
</body>
</html>
c12_s5.html | https://goo.gl/ZtUSg5

Agora crie o arquivo script.js:
/* jQuery */
$('#div1').fadeOut(5000);
c12_s6.js | https://goo.gl/C1ddzk
Após o período de 5 segundos (5000 milissegundos), a imagem irá desaparecer:
0 ms | 2500 ms | 5000 ms |
![]() | ![]() | ![]() |
Segundo a documentação oficial do jQuery, uma página não pode ser manipulada de maneira segura enquanto o documento não estiver “pronto”, ou seja, enquanto todos os componentes necessários não tenham sido carregados. Por isso, antes de usar comandos jQuery é necessário incluir $(document).ready(). Logo, nosso código ficaria assim:
/* jQuery */
$(document).ready(function(){
$('#div1').fadeOut(5000);
});
c12_s7.js | https://goo.gl/aK8F2J
Mudando CSS
Aprenderemos agora a usar o jQuery para fazer algumas modificações no CSS. Vamos criar um botão que ao ser clicado altera elementos presentes em uma div.
Primeiro crie a página HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<meta charset="utf-8">
<link href="estilo.css" rel="stylesheet">
</head>
<body>
<button id="botao">Clique em mim</button>
<div id="texto">Eu amo Bioinformática</div>
<footer>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
</footer>
</body>
</html>
c12_s8.html | https://goo.gl/LkbSQb

Agora vamos adicionar alguns efeitos ao clicar no botão. Por exemplo, a cor da fonte mudará de preto para azul, adicionaremos uma linha sublinhada, aumentaremos o espaçamento interno e colocaremos um plano de fundo cinza. Não estamos fazendo isso em busca de “beleza”, mas sim para demonstrar o potencial do jQuery.
Agora crie o arquivo “script.js”:
$(document).ready(function(){
$("#botao").click(function(){
$("#texto").css("color","blue");
$("#texto").css("text-decoration","underline");
$("#texto").css("padding","10px");
$("#texto").css("background-color","#ccc");
});
});
c12_s9.js | https://goo.gl/Fpv76d

Agora vamos entender um pouco do script. Primeiro verificamos se o documento estava pronto em: $(document).ready(). Se o resultado for positivo ele chama uma função que verifica se o elemento de id #botão foi clicado: $(“#botao”).click(). Se esse botão for clicado, o script faz várias alterações em elementos presentes na div de id “texto”, como por exemplo, altera a cor para azul: $(“#texto”).css(“color”,”blue”).
Com o que aprendeu nesse tópico, você pode fazer qualquer alteração no CSS usando técnicas aprendidas anteriormente combinadas com jQuery.
Lendo arquivos locais com JQuery
No exemplo a seguir vamos usar jQuery para ler um arquivo de texto e imprimi-lo na tela. Crie um arquivo chamado “arquivo.txt” e coloque o conteúdo que quiser.
Crie a página HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<meta charset="utf-8">
</head>
<body>
<div id="texto"></div>
<footer>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
</footer>
</body>
</html>
c12_s10.html | https://goo.gl/YokX5u
Agora no arquivo JavaScript:
var nome_arquivo = "arquivo.txt";
$.post(nome_arquivo, function(d) {
$('#texto').text(d);
});
c12_s11.js | https://goo.gl/jdi4LT

Neste exemplo, lemos o “arquivo.txt” e exibimos o conteúdo na div texto. Para isso usamos a função post. Observe que entre o cifrão e a palavra post existe um ponto. Esse ponto indica que o carregamento deve ser assíncrono.
Após o recebimento do documento usando o método post, uma função envia como parâmetro os dados numa variável chamada d. Essa variável é impressa na div texto.
Quer aprender mais? Conheça nossos cursos profissionalizantes à partir de R$19,99:
Capítulo 1
Introdução ao HTML
Capítulo 2
Fundamentos do HTML
Capítulo 3
Estrutura de páginas
Capítulo 4
Folhas de Estilo em Cascata (CSS)
Capítulo 5
Bootstrap
Capítulo 6
Iniciando a construção de um Website
Capítulo 7
Introdução ao PHP
Capítulo 8
Fundamentos do PHP
Capítulo 9
Transformando um Website em dinâmico
Capítulo 10
Introdução ao JavaScript
Capítulo 11
Fundamentos do JavaScript
Capítulo 12
jQuery
Capítulo 13
Bootstrap JavaScript
Capítulo 14
D3.js
Capítulo 15
3Dmol
Capítulo 16
Projeto Final
Epílogo
Referências Bibliográficas
Cite:
MARIANO, DIEGO; de MELO-MINARDI, R. C. . Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript. 1. ed. North Charleston, SC (EUA): CreateSpace Independent Publishing Platform, 2017. v. 3. ISBN: 978-1520895154; 403p .