Guia Abrangente do jQuery: Conceitos, Seletores e Manipulação do DOM

Introdução ao jQuery

O jQuery é uma biblioteca JavaScript projetada para simplificar a interação com o Document Object Model (DOM), o tratamento de eventos, a criação de animações e a realização de solicitações Ajax. Seu princípio fundamental, "escrever menos, fazer mais", visa mitigar as incompatibilidades entre navegadores e reduzir a verbosidade do código JavaScript puro. A sua ampla adoção é notável, sendo utilizada em uma grande porcentagem dos sites mais visitados globalmente.

Para começar a usar o jQuery, é necessário incluir a biblioteca na sua página. Você pode hospedar o arquivo localmente ou utilizar um Content Delivery Network (CDN):

<!-- Inclusão Local -->
<head>
    <script src="caminho/para/jquery-3.6.0.min.js"></script>
</head>

<!-- Inclusão via CDN (Exemplo Google) -->
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

O código a seguir demonstra um exemplo básico, vinculando um manipulador de eventos de clique a um botão após o carregamento do documento:


<html>
<head>
    <title>Exemplo Básico jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <button id="gatilho">Clique Aqui</button>

    <script>
        $(function() {
            var $botao = $('#gatilho');
            $botao.on('click', function() {
                alert('O evento de clique foi tratado pelo jQuery!');
            });
        });
    </script>
</body>
</html>

Ponto Chave: O símbolo $ é um apelido para a função principal do jQuery. Passar uma função para $(function() { ... }) é equivalente a usar window.onload, garantindo que o código execute após o DOM estar pronto.

A Função Central e Objetos jQuery

A função $() é multifuncional. Seu comportamento varia com o argumento recebido:

  • Uma função: Executa a função quando o DOM está pronto.
  • Uma string HTML: Cria um novo elemento DOM. Ex: $('<div class="novo"></div>').
  • Uma string de seletor: Seleciona elementos do DOM. Ex: $('#meuId'), $('.minhaClasse').
  • Um objeto DOM: Envolva um elemento DOM em um objeto jQuery. Ex: $(elementoDom).

Objeto jQuery vs. Objeto DOM: Um objeto jQuery é um wrapper (invólucro) em torno de um ou mais objetos DOM nativos, fornecendo métodos adicionais. Um objeto DOM, obtido via document.getElementById por exemplo, é o elemento nativo do navegador. Para converter entre eles:

// DOM para jQuery
var elementoDOM = document.getElementById('meuId');
var $elementojQuery = $(elementoDOM);

// jQuery para DOM (acessando o primeiro elemento da coleção)
var elementoDOMNovamente = $elementojQuery[0];
// ou
var elementoDOMNovamente = $elementojQuery.get(0);

Seletores Poderosos

Os seletroes do jQuery permitem localizar elementos de maneira precisa.

Seletores Básicos e Hierárquicos

// Seletores Básicos
$('#principal');          // Por ID
$('.destaque');          // Por classe
$('article');            // Por tag
$('*');                  // Todos os elementos
$('h1, .intro, #rodape'); // Combinação

// Seletores Hierárquicos
$('nav ul');             // 'ul' descendente de 'nav'
$('form > input');      // 'input' filho direto de 'form'
$('label + input');     // 'input' imediatamente após um 'label'
$('div ~ p');           // 'p' irmão subsequente de 'div'

Filtros Avançados

Os filtros refinam a seleção com base em posição, conteúdo, atributos ou estado.

// Filtros de Posição
$('li:first');           // Primeiro 'li'
$('li:last');            // Último 'li'
$('li:eq(2)');           // Terceiro 'li' (índice 0)
$('li:even');            // 'li' com índice par (0, 2, 4...)
$('li:odd');             // 'li' com índice ímpar (1, 3, 5...)

// Filtros de Conteúdo e Atributo
$(':contains("jQuery")');       // Contém o texto "jQuery"
$('[data-role="menu"]');        // Possui o atributo data-role="menu"
$('input[type^="text"]');       // Atributo 'type' começa com "text"
$('input[name$="email"]');      // Atributo 'name' termina com "email"

// Filtros de Estado para Formulários
$(':enabled');          // Elementos habilitados
$(':disabled');         // Elementos desabilitados
$(':checked');          // Caixas de seleção/rádio marcados
$('option:selected');   // Opções selecionadas em listas

Manipulação de Atributos, Propriedades e CSS

jQuery fornece métodos para manipular diferentes aspectos dos elementos.

// Manipulação de Conteúdo
$('.caixa').html('<b>Conteúdo dinâmico</b>'); // Define innerHTML
var conteudo = $('.caixa').html(); // Obtém innerHTML

$('.caixa').text('Apenas texto puro'); // Define innerText
var texto = $('.caixa').text(); // Obtém innerText

// Manipulação de Valor em Formulários
$('#campoInput').val('Novo valor'); // Define o valor
var valorAtual = $('#campoInput').val(); // Obtém o valor

// Manipulação de Atributos vs. Propriedades
$('input:checkbox').attr('data-custom', 'info'); // Atributos customizados
$('input:checkbox').prop('checked', true);       // Propriedades booleanas (checked, disabled, etc.)

// Adicionando e removendo classes CSS
$('.item').addClass('ativo destaque');
$('.item').removeClass('inativo');
$('.item').toggleClass('visivel');

// Manipulação direta de estilo
$('.painel').css({
    'background-color': '#f0f0f0',
    'padding': '20px',
    'border': '1px solid #ccc'
});

// Obtendo e definindo posição/offset
var posicao = $('.fixo').offset(); // {top: ..., left: ...}
$('.fixo').offset({top: 100, left: 200});

Prática: Manipulação de Tabela Dinâmica

O exemplo abaixo demonstra a adição e remoção dinâmica de linhas em uma tabela, incluindo a delegação de eventos para botões criados posteriormente.


<html>
<head>
    <title>Tabela Dinâmica</title>
    <style>
        table { border-collapse: collapse; margin: 20px; }
        td, th { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .remover-btn { cursor: pointer; color: #d9534f; }
    </style>
</head>
<body>
    <table id="tabelaDados">
        <thead>
            <tr>
                <th>Nome</th>
                <th>Função</th>
                <th>Ação</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Maria Silva</td>
                <td>Desenvolvedora</td>
                <td><span class="remover-btn">X</span></td>
            </tr>
        </tbody>
    </table>

    <div id="formAdicao">
        <input type="text" id="inputNome" placeholder="Nome">
        <input type="text" id="inputFuncao" placeholder="Função">
        <button id="btnAdicionar">Adicionar Registro</button>
    </div>

    <script>
        $(function() {
            // Função para remover linha
            var removerLinha = function() {
                if (confirm('Remover este registro?')) {
                    $(this).closest('tr').remove();
                }
                return false; // Previne comportamento padrão se aplicável
            };

            // Delegação de evento: lida com cliques em .remover-btn, mesmo que sejam adicionados depois
            $('#tabelaDados').on('click', '.remover-btn', removerLinha);

            // Adicionar novo registro
            $('#btnAdicionar').on('click', function() {
                var nome = $('#inputNome').val().trim();
                var funcao = $('#inputFuncao').val().trim();

                if (nome && funcao) {
                    var novaLinha = $('<tr>') // Cria um objeto jQuery para a nova linha
                        .append($('<td>').text(nome))
                        .append($('<td>').text(funcao))
                        .append($('<td>').html('<span class="remover-btn">X</span>'));

                    $('#tabelaDados tbody').append(novaLinha); // Adiciona ao corpo da tabela
                    $('#inputNome, #inputFuncao').val(''); // Limpa os inputs
                } else {
                    alert('Preencha todos os campos.');
                }
            });
        });
    </script>
</body>
</html>

Animações e Efeitos

jQuery simplifica a criação de animações suaves.

// Animações de Exibição
$('#painel').hide(300); // Esconde em 300ms
$('#painel').show(500); // Mostra em 500ms
$('#painel').toggle(200); // Alterna visibilidade em 200ms

// Animações de Opacidade (Fade)
$('#aviso').fadeIn(); // Aparece gradualmente
$('#aviso').fadeOut(1000); // Desaparece em 1 segundo
$('#aviso').fadeTo(500, 0.5); // Muda a opacidade para 0.5 em 500ms

// Animações de Dimensão
$('.conteudo').slideUp(); // Desliza para cima (esconde)
$('.conteudo').slideDown('slow'); // Desliza para baixo (mostra) lentamente
$('.conteudo').slideToggle(); // Alterna o deslize

// Animação Personalizada com .animate()
$('.caixa').animate({
    left: '+=100px', // Move 100px para a direita
    opacity: 0.5,
    height: 'toggle'
}, 1000, function() {
    // Callback executado após a animação
    console.log('Animação concluída!');
});

Eventos Avançados

Além de click, o jQuery suporta uma vasta gama de eventos e fornece mecanismos para tratamento eficiente.

// Eventos de Mouse e Teclado
$('#elemento').on('mouseenter', function() { /* Lógica para mouse entrando */ });
$('#elemento').on('mouseleave', function() { /* Lógica para mouse saindo */ });
$('#campo').on('keydown', function(event) {
    console.log('Tecla pressionada:', event.key);
});

// Vinculando múltiplos eventos a uma única função
$('#botao').on('click mouseenter', function(evento) {
    if (evento.type === 'click') {
        console.log('Clicado!');
    } else if (evento.type === 'mouseenter') {
        console.log('Mouse sobre o botão!');
    }
});

// Vinculando um evento que só ocorre uma vez
$('#botaoUnico').one('click', function() {
    alert('Este alerta aparecerá apenas uma vez.');
    $(this).prop('disabled', true);
});

// Prevenindo o Bubble (Propagação) de Eventos
$('.interno').on('click', function(event) {
    event.stopPropagation(); // Impede que o evento chegue ao pai '.externo'
    alert('Clique no elemento interno.');
});

// Uso do objeto Event
$('#campo').on('focus', function(eventoDeFoco) {
    // Acessa informações do evento, como timestamp
    console.log('Campo focado em:', eventoDeFoco.timeStamp);
});

Requisições AJAX Simplificadas

O jQuery abstrai a complexidade das requisições assíncronas.

// Requisição GET simples para obter dados
$.get('/api/dados', function(resposta) {
    console.log('Dados recebidos:', resposta);
}, 'json'); // Espera uma resposta JSON

// Requisição POST para enviar dados
var dadosParaEnviar = {
    nome: 'Novo Usuário',
    email: 'novo@exemplo.com'
};

$.post('/api/usuarios', dadosParaEnviar)
    .done(function(resposta) {
        console.log('Sucesso:', resposta);
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
        console.error('Erro na requisição:', textStatus, errorThrown);
    });

// Requisição AJAX completa e configurável
$.ajax({
    url: '/api/endpoint',
    method: 'PUT', // Pode ser GET, POST, PUT, DELETE, etc.
    contentType: 'application/json',
    data: JSON.stringify({ id: 123, status: 'ativo' }),
    dataType: 'json',
    timeout: 5000, // Timeout de 5 segundos
    success: function(dados) {
        // Sucesso na requisição
        $('#resultado').html('<p>Atualizado com sucesso!</p>');
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // Tratamento de erro
        console.error('Falha na requisição:', errorThrown);
    }
});

Internacionalização (i18n) com Java e JSTL

A internacionalização permite que uma aplicação adapte sua interface a diferentes idiomas e regiões. No ecossistema Java, isso é comumente gerenciado com a classe ResourceBundle e, em páginas JSP, com a biblioteca de tags JSTL fmt.

Configuração Base

Crie arquivos de propriedades para cada localidade. A convenção de nomenclatura é nomeBase_local.properties.

# i18n_pt_BR.properties
titulo_pagina=Bem-vindo
rotulo_nome=Nome
rotulo_email=Email
botao_enviar=Enviar

# i18n_en_US.properties
titulo_pagina=Welcome
rotulo_nome=Name
rotulo_email=Email
botao_enviar=Submit

Uso no Código Java

import java.util.Locale;
import java.util.ResourceBundle;

public class ExemploI18n {
    public String obterTraducao(String idioma) {
        Locale localidade;
        if ("en".equals(idioma)) {
            localidade = Locale.US;
        } else {
            localidade = new Locale("pt", "BR"); // ou Locale.getDefault()
        }
        ResourceBundle mensagens = ResourceBundle.getBundle("i18n", localidade);
        return mensagens.getString("titulo_pagina");
    }
}

Uso em JSP com JSTL fmt

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title><fmt:message key="titulo_pagina"/></title>
</head>
<body>
    <!-- Define o Locale e o bundle de recursos -->
    <fmt:setLocale value="${param.lang}" />
    <fmt:setBundle basename="i18n" />

    <h1><fmt:message key="titulo_pagina"/></h1>
    <form>
        <label><fmt:message key="rotulo_nome"/>: <input type="text" name="nome"></label><br/>
        <label><fmt:message key="rotulo_email"/>: <input type="email" name="email"></label><br/>
        <button type="submit"><fmt:message key="botao_enviar"/></button>
    </form>
    <p>
        <a href="?lang=pt_BR">Português</a> |
        <a href="?lang=en_US">English</a>
    </p>
</body>
</html>

Tags: jQuery javascript DOM manipulation Event Handling ajax

Publicado em 6-27 18:34

Tags em Destaque

©2026 Doido Dev