O que é o jQuery?

O jQuery é uma biblioteca JavaScript criada para simplificar o desenvolvimento de páginas web interativas.
Permite escrever menos código e obter resultados mais rápidos, especialmente em tarefas como:

• Manipulação de elementos HTML

• Resposta a eventos do utilizador (cliques, teclado, rato)

• Criação de efeitos e animações

• Comunicação com o servidor (AJAX)

Antes do jQuery, muitas destas tarefas exigiam várias linhas de JavaScript complexo.
Com jQuery, essas mesmas ações tornam-se mais simples, diretas e fáceis de ler.

A ideia principal do jQuery é:

“Write less, do more.”

jQuery e JavaScript: qual a diferença?

É importante perceber que:

• jQuery não substitui o JavaScript

• jQuery é escrito em JavaScript

Ou seja, o jQuery funciona como uma “camada” por cima do JavaScript, facilitando o acesso ao DOM (estrutura da página) e aos eventos.

Exemplo comparativo simples:

JavaScript puro

jQuery

O resultado é o mesmo, mas o código jQuery é mais curto e mais legível.

Onde é usado o jQuery?

Apesar de existirem frameworks modernas, o jQuery continua a ser muito utilizado:

• Em projetos profissionais existentes

• Em páginas dinâmicas simples

• Em conjunto com frameworks como Laravel

• Em funcionalidades AJAX e interfaces interativas

Por isso, aprender jQuery é uma excelente base para compreender melhor o funcionamento do JavaScript na web.

Como incluir o jQuery numa página HTML

A forma mais comum de usar jQuery é através de um CDN (ficheiro online).

No

ou antes de fechar o

da página, adiciona:

A partir desse momento, o jQuery fica disponível para uso na página.

A função principal do jQuery: $()

O símbolo $() é o elemento central do jQuery.
Serve para selecionar elementos HTML e aplicar ações sobre eles.

Exemplo:

Este código seleciona o elemento HTML que tem o atributo:

O primeiro código jQuery

Um dos testes mais simples para confirmar que o jQuery está a funcionar é usar um alert.

Se o alerta aparecer ao abrir a página, o jQuery foi corretamente carregado.

A importância do document.ready

Para evitar erros, o código jQuery deve ser executado apenas depois da página estar completamente carregada.

Para isso usa-se:

Esta estrutura garante que todos os elementos HTML já existem no momento em que o código é executado.

Um teste simples para confirmar que o jQuery está corretamente a funcionar é mostrar uma mensagem ao carregar a página:

Se a mensagem aparecer, significa que a biblioteca foi corretamente carregada e está pronta a ser utilizada.

Exercício 1 — Confirmar funcionamento do jQuery

Cria uma página HTML que:

1. Inclua corretamente o jQuery

2. Mostre um alert com a mensagem
   “Bem-vindo ao jQuery” quando a página carregar

Exercício 2 — Primeira interação simples

Na mesma página:

1. Cria um parágrafo com o texto
   “Texto original”

2. Usa jQuery para alterar esse texto para
   “Texto alterado com jQuery”

(Dica: vais precisar do método text() — veremos isto em detalhe na próxima aula.)