PROGRAMAÇÃO

BACK END III

Fabricio Machado da Silva

Fundamentos do jQuery
Objetivos de aprendizagem
Ao final deste texto, você deve apresentar os seguintes aprendizados:

„„ Explicar o funcionamento da biblioteca jQuery.

„„ Praticar a instalação da biblioteca.
„„ Integrar o jQuery a uma página HTML.

Introdução
O jQuery é uma biblioteca JavaScript que permite a adição de um
comportamento dinâmico a páginas da Web, sendo possível fazê-lo de
forma simplificada. Inclusive, o lema do jQuery é write less, do more (em
português, “escreva menos, faça mais”) e, realmente, esse é o grande
diferencial dessa biblioteca. Atualmente, a maioria das aplicações Web
executa o jQuery.
Outra característica relevante do jQuery é que este foi desenvolvido
dentro dos padrões da World Wide Web Consortium (W3C), principal
organização de padronização da World Wide Web. Portanto, o jQuery
é uma biblioteca multiplataforma, ou seja, é compatível com qualquer
navegador de internet.
Neste capítulo, iremos compreender o funcionamento da biblioteca
jQuery, além de aprender como sua instalação e integração a uma página
HTML são feitas.

Entendendo o funcionamento da biblioteca

jQuery
Antes de conhecermos o jQuery e como este funciona, é importante esclarecer
que ele não se trata de uma linguagem, mas de uma biblioteca da linguagem
JavaScript. Rápida e concisa, foi criada em 2006 por John Resing, com o slo-
gan: write less, do more. Segundo Balduíno (2014, p. 34), “[...] jQuery é uma
biblioteca JavaScript que simplifica a manipulação de documentos HTML,
2 Fundamentos do jQuery

eventos, animações e interações com AJAX para desenvolvimento rápido

de aplicações Web [...]”. Devido a sua simplicidade e facilidade, o jQuery é
abiblioteca JavaScript mais utilizada por programadores, tendo se tornado,
em 2008, a biblioteca padrão do ASP.NET da Microsoft.
O jQuery simplifica a criação de várias tarefas. Veja, a seguir, uma lista
de importantes funcionalidades suportadas por essa biblioteca.

„„ Manipulação DOM: torna mais fácil a seleção de elementos document

object model (DOM), fazendo a negociação entre eles e a modificação
de seus conteúdos, utilizando um mecanismo seletor de código aberto
entre navegadores, chamado Sizzle.
„„ Manipulação de eventos: oferece uma maneira elegante de capturar
uma ampla variedade de eventos, como um usuário, clicando em um
link, sem a necessidade de desorganizar o próprio código HTML com
manipuladores de eventos.
„„ Suporte a AJAX: auxilia no desenvolvimento de sites responsivos e
de alto desempenho, utilizando a tecnologia AJAX.
„„ Animações: possui muitos efeitos de animação internos que podem
ser usados em sites.
„„ Leveza: é uma biblioteca extremamente leve: seu tamanho gira em
torno de 19 kB.
„„ Suporte entre navegadores: oferece compatibilidade entre os nave-
gadores, funcionando bem com Internet Explorer, Firefox, Google
Chrome e, inclusive, Opera.

Uma expressão jQuery é sempre formada por duas partes: uma que des-
creve o que será manipulado e, outra, que descreve como isso irá acontecer.
Considere o trecho de código de uma página Web a seguir.

<p class="par">Primeira linha</p>

<p class="impar">Segunda linha</p>
<input type="text" id="texto" class="par" value="um texto
qualquer"

Alinha de código em jQuery a seguir é utilizada para identificar que pre-

tendemos manipular todos os parágrafos, modificando a cor de fundo como
verde florescente.

$("p").css("background-color", "lightgreen");
 Fundamentos do jQuery 3

A Figura 1 ilustra como seria o resultado de exibição na página Web.

Primeira linha

Segunda linha

um texto qualquer

Figura 1. Resultado da alteração da cor de fundo na tag p,

utilizando o jQuery.
Fonte: Adaptada de Balduíno (2014).

Veja outro exemplo em que se deseja selecionar todos os elementos do

código que contenham a classe par e modificar sua cor de fundo para azul.
Para isso, utiliza-se o trecho de código a seguir.

$(".par").css("background-color", "lightblue");

Perceba, pelos exemplos, que podemos fazer a seleção de elementos tanto

pela classe como pela tag HTML, utilizando $(o que desejamos selecionar)
na maior parte dos casos, com a pequena diferença de que, no caso da classe,
utilizamos o . na frente. Veja, também, como é simples manipular a cor
de fundo, pois em apenas uma linha de comando, com poucos caracteres,
conseguimos obter o que desejamos.
Vamos demonstrar como fazer a seleção de um elemento pelo seu ID. Como
mencionado, uma das vantagens do jQuery é a seleção de elementos DOM,
portanto, no exemplo a seguir, utilizaremos o # na frente da string para alterar
a cor da fonte e o conteúdo.

$("#texto").css("color", "white").val("esse é o novo texto");

Observe que, neste caso, selecionamos o elemento com .css() e uti-

lizamos duas funções juntas para alterar a cor da fonte e o texto, respecti-
vamente. Esta é outra característica do jQuery: o encadeamento de funções
(BALDUÍNO, 2014).
4 Fundamentos do jQuery

Nos exemplos anteriores, selecionamos os elementos utilizando formas

diferenciadas. Primeiramente, a forma mais comum, por meio da tag HTML
e, no segundo caso, pela classe, utilizando, para isso, um ponto final antes
do nome da classe. Por fim, selecionamos os elementos pelo ID, utilizando
um # antes do identificador. Essas formas de se selecionar os elementos são
chamadas selectors e são fundamentais para o jQuery. Os selectors indicam o
que iremos manipular e, pelo entendimento desse conceito, é possível entender
grande parte do funcionamento do jQuery (RIORDAN, 2009).
A seguir, temos exemplos básicos de selectors e uma breve explicação de
como funcionam.

„„ Name: seleciona todos os elementos que correspondem ao nome do

elemento.
„„ #ID: seleciona um único elemento que corresponde ao ID fornecido.
„„ .Class: seleciona todos os elementos que correspondem à classe
especificada.
„„ Universal(*): seleciona todos os elementos disponíveis em um
DOM.
„„ Multiple Elements E,F,G: seleciona os resultados combinados
de todos os seletores especificados E, F, G.

A biblioteca jQuery possui diversas funções que facilitam o trabalho de

programação, porém, a mais utilizada e que inicia a maioria dos códigos é a
função $. Essa função permite selecionar elementos com maior facilidade e
com menos código.
Demonstraremos, a seguir, um exemplo comparando a simplicidade de sua
utilização. Para isso, primeiro temos um código em JavaScript puro.

var cabecalho = document.querySelector("#cabecalho");

if (cabecalho.attachEvent) {
cabecalho.attachEvent("onclick", function (event) {
alert("Você clicou no cabeçalho, usuário do IE!");
});
} else if (cabecalho.addEventListener) {
cabecalho.addEventListener("click", function (event) {
alert("Você clicou no cabeçalho!")
}, false);
}
 Fundamentos do jQuery 5

Agora, note a diferença quando utilizamos o jQuery.

$("#cabecalho").click(function (event) {
alert("Você clicou no cabeçalho!");
});

Perceba que a sintaxe do jQuery é menor, pois, nesse caso, a própria bi-
blioteca se encarrega de encontrar o modo mais compatível para adicionar
o evento ao elemento cujo ID é o cabeçalho. No jQuery, o encadeamento de
funções também é possível e permite que o utilizemos para alterar os elementos
selecionados pela função $. Essas funções podem ser encadeadas.

Instalando e trabalhando com jQuery

Agora que já conhecemos a biblioteca jQuery e como ela funciona, iremos
aprender sobre como é feita sua instalação.

A instalação da biblioteca jQuery é simples. O primeiro passo é fazer o download da

última versão atualizada, diretamente a partir do website original, disponível no link
a seguir.

http://jquery.com

A Figura 2 mostra a página de download com os tipos de distribuições

disponíveis.
6 Fundamentos do jQuery

Figura 2. Página de download da biblioteca jQuery.

Fonte: The jQuery Foundation (2019, documento on-line).

O arquivo compressed é mais indicado quando se deseja economizar espaço

de banda consumida e é também o mais adotado quando a página já está pronta.
O arquivo uncompressed não está comprimido e é mais indicado para quando
se está programando a página ou buscando por erros.
Além disso, também é possível baixar um mapa de código, que auxilia
na busca por erros de programação. Além destes arquivos, a página oficial
do jQuery oferece uma série de tutoriais para quem está testando as diversas
possibilidades da ferramenta.
Após realizar o download do arquivo, indica-se a criação de uma estrutura
de diretórios que irá ajudar na organização do seu projeto e na instalação
correta da biblioteca. Um projeto bem organizado é fundamental para facilitar
manutenção. No exemplo a seguir, sugerimos uma estrutura para facilitar o
entendimento de como organizar o projeto com a biblioteca jQuery.
 Fundamentos do jQuery 7

– Raiz
|— index.html

|— js/ (diretório)

|— jquery.js (arquivo baixado que foi renomeado)

|— css/ (diretório)
|— outras pastas ou arquivos.

Como mencionado, essa estrutura é uma sugestão, não sendo necessário

segui-la para que a biblioteca jQuery funcione.
Neste exemplo, o arquivo que baixamos do site do jQuery foi renomeado
para jquery.js. Agora, para que possamos utilizá-lo, é necessário editar
o arquivo index.html e fazer a chamada dentro da tag <head>, utilizando o
elemento **< script >**. A Figura 3 ilustra este exemplo com a referência
da biblioteca jQuery no arquivo index.html.

Figura 3. Arquivo index.html com a referência da biblioteca jQuery.

Fonte: Amaral (2019, documento on-line).
8 Fundamentos do jQuery

Alguns cuidados são importantes antes de começarmos a utilizar o jQuery

em nossos projetos. Em primeiro lugar, certificamo-nos da inclusão da biblio-
teca em nossa página, conforme demonstramos na Figura 3, pois só assim o
navegador saberá que deve executar o código e permitir que utilizemos suas
funcionalidades. Por esse motivo, é necessário que a tag <script> do jQuery
seja a primeira na ordem de nosso documento.

A principal vantagem na adoção de uma biblioteca de JavaScript é permitir uma maior

compatibilidade de um mesmo código com diversos navegadores. Uma maneira
de se atingir esse objetivo é criar funções que verifiquem quaisquer características
necessárias e permitam que o programador escreva um código único para todos os
navegadores. O jQuery, que é atualmente a biblioteca padrão na programação front
end para Web, traz uma sintaxe mais fluida para tarefas comuns ao programador:
selecionar um elemento do documento e alterar suas características.

Outro cuidado importante é executar o código somente após carregá-lo.

Como estamos constantemente manipulando elementos do documento, é
importante garantir que aqueles que pretendemos utilizar já tenham sido
carregados pelo navegador.
A melhor maneira de garantir isso é executando nosso script somente após
o término do carregamento total da página, com a função $, como mostra o
exemplo a seguir.

$(function () {
$("#cabecalho").css({"background-color": "#000000"});
})

Esta função $, que recebe uma função anônima como argumento, garante
que o código dentro dela só será executado ao fim do carregamento de todos
os elementos da página.
 Fundamentos do jQuery 9

Integrando o jQuery a um HTML

Para demonstrar o uso da biblioteca jQuery para ocultar o conteúdo em um
HTML, utilizaremos um exemplo simples e prático visando facilitar o en-
tendimento de como o jQuery funciona. Para isso, criaremos uma caixa com
efeito “sanfona”, na qual o conteúdo fica oculto e se revela após um clique.
O código HTML será composto por três blocos (div’s): um bloco principal,
outro em que ficará o título da caixa (junto ao botão para expandir/ocultar) e
o último, que guardará o conteúdo.
A Figura 4 representa a estrutura da página.

Figura 4. Estrutura HTML.

Fonte: Rodrigo (2016, documento on-line).

O código HTML para a representação da página, ainda sem o jQuery, seria

como o exemplo a seguir.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Exemplo com jQuery</title>
</head>
<body>
10 Fundamentos do jQuery

<!-- inicio da DIV principal -->

<div id="container">
<!-- inicio do título -->
<div id="titulo">
Fábrica de Software
<a id="link_abre" href="#">Clique Aqui</a>
</div>
<!-- fim do título -->
<!-- início do conteúdo -->
<div id="conteudo">
<p>A Fábrica de Software é um projeto inovador no mercado
educacional, que busca a inovação e a interação contínua en-
tre teoria e prática, subsidiando os alunos na aplicação real
dos conceitos aprendidos em sala de aula. Visa ainda simular
o ambiente de uma empresa de desenvolvimento de softwares,
criando uma ferramenta de gestão para micro e pequenas empre-
sas e preparando mão de obra especializada para o mercado de
desenvolvimento de sistemas. </p>
</div>
<!-- fim do conteúdo -->
</div>
<!-- fim da DIV principal -->
</body>
</html>.

Após realizar o download do jQuery e disponibilizar o arquivo em nosso

diretório lib, iremos renomear o arquivo para jquery-3.3.1.min.js e fazer a
referência na tag head do nosso arquivo HTML.

<script type="text/javascript" src="./lib/jquery-3.3.1.min.

js"></script>

Utilizamos, então, o selector ID, que encontra elementos da DOM pelo

seu ID, o que facilita a manipulação do conteúdo. Em seguida, aplicamos no
link “Clique Aqui” (identificado pela ID “link_abre”) o evento de mover
toda a div que contém o texto. Observe que o texto está dentro de uma div
com a ID “conteúdo”.
 Fundamentos do jQuery 11

<script type="text/javascript">
// checa se o documento foi carregado
$(document).ready(function () {
// define o que acontece quando #link_abre é clicado
$("#link_abre").click(function () {
});
});
</script>

Completamos o código com outra função aninhada, o que também é possível

com o jQuery. Esta segunda função informa ao jQuery que queremos executar
uma ação quando #link_abre for clicado. Faremos com que o texto apareça,
utilizando uma função de efeito do jQuery chamada slideToggle(), que
permite este recurso inclusive passando como parâmetro a velocidade em que
desejamos abri-lo, como, no exemplo, slow.

<script type="text/javascript">
// checa se o documento foi carregado
$(document).ready(function () {
// define o que acontece quando #link_abre é clicado
$("#link_abre").click(function () {
// aplica a ação de slide à conteúdo, na velocidade "slow"
$("#conteudo").slideToggle("slow");
});
});
</script>

Ao término deste passo, teremos o box com o texto ocultável. No entanto,

ainda teremos um problema: a página irá carregar com o texto do conteúdo já
aparecendo. Para resolver esta questão, falamos para o jQuery esconder essa
div utilizando a função hide().

// oculta a div conteudo

$("#conteudo").hide();

Agora a página já possui os efeitos necessários. Para isso, utilizamos

funções e selectors do jQuery, integrando a biblioteca a um simples exemplo
de página HTML , visando auxiliar nos passos iniciais para se trabalhar com
esta excelente biblioteca.
12 Fundamentos do jQuery

No link a seguir, você encontra a página com a documentação completa da API do

jQuery, contendo mais detalhes sobre outros recursos.

https://api.jquery.com

AMARAL, L. M. Biblioteca JQUERY: instalação. 2019. Disponível em: https://imasters.com.

br/front-end/biblioteca-jquery-instalacao. Acesso em: 21 out. 2019.
BALDUÍNO, P. Dominando JavaScript com jQuery. São Paulo: Casa do Código, 2014.
RIORDAN, R. M. Ajax profissional. Rio de Janeiro: Alta Books, 2009.
RODRIGO. Ajax com jQuery: Trabalhando com requisições assíncronas. 2016. Disponível
em: https://www.devmedia.com.br/ajax-com-jquery-trabalhando-com-requisicoes-
-assincronas/37141. Acesso em: 21 out. 2019.
THE JQUERY FOUNDATION. Downloading jQuery. 2019. Disponível em: https://jquery.
com/download/. Acesso em: 21 out. 2019.

Leituras recomendadas
SILVA, M. S. HTML5. 2. ed. São Paulo: Novatec, 2014.
YNEMINE, S. T. Conhecendo o JavaScript. Florianópolis: Visual Books, 2002.