O jQuery consolidou-se como uma ferramenta indispensável no ecossistema de desenvolvimento front-end. Contudo, é comum observar que muitos desenvolvedores exploram apenas uma fração de seu potencial, limitando-se a seletores básicos por ID e alguns efeitos simples. Para extrair o máximo dessa biblioteca, é fundamental compreender sua gama completa de funcionalidades.

Seletores: A Base do jQuery

A sintaxe de seletores do jQuery, inspirada nos seletores CSS, representa um de seus maiores atrativos. A biblioteca não apenas suporta seletores CSS3, como também introduz extensões próprias.

Seletores Fundamentais

Seletor	Descrição
$('*')	Todos os elementos da página
$('#identificador')	Elemento com ID específico
$('.classe')	Elementos pertencentes a uma classe
$('tag')	Elementos por nome da tag

Seletores Hierárquicos e Combinados

Seletor	Funcionalidade
$('E, F')	União: elementos E ou F
$('E F')	Descendente: todos os descendentes F de E
$('E > F')	Filho direto: apenas filhos imediatos
$('E + F')	Adjacente imediato: primeiro irmão F após E
$('E ~ F')	Irmãos gerais: todos os irmãos F após E
$('.classeA.classeB')	Elemento com ambas as classes

Filtros de Posição

Filtro	Resultado
$("E:first")	Primeiro elemento E
$("E:last")	Último elemento E
$("E:not(seletor)")	Exclui elementos pelo seletor
$("E:even")	Índices pares (0-based)
$("E:odd")	Índices ímpares
$("E:eq(n)")	Elemento no índice n
$("E:gt(n)")	Elementos com índice maior que n
$("E:lt(n)")	Elementos com índice menor que n
$(":header")	Tags h1 a h6
$("div:animated")	Elementos em animação

Filtros de Conteúdo e Visibilidade

Filtro	Descrição
$('E:contains(texto)')	Texto interno contém o valor
$('E:empty')	Sem conteúdo ou filhos
$('E:has(F)')	Contém pelo menos um F como descendente
$('E:parent')	É pai de algum elemento
$('E:hidden')	Elementos ocultos
$('E:visible')	Elementos visíveis

Filtros de Atributo

Filtro	Significado
$('E[attr]')	Possui o atributo
$('E[attr=val]')	Atributo igual ao valor
$('E[attr!=val]')	Atributo diferente do valor
$('E[attr^=val]')	Atributo começa com
$('E[attr$=val]')	Atributo termina com
$('E[attr*=val]')	Atributo contém

Filtros de Filhos

Filtro	Comportamento
$('E:nth-child(n)')	n-ésimo filho (1-based)
$('E:nth-child(2n+1)')	Fórmula de seleção
$('E:nth-child(even|odd)')	Par ou ímpar
$('E:first-child')	Primeiro filho
$('E:last-child')	Último filho
$('E:only-child')	Único filho

Métodos de Navegação e Filtragem

.find() — Descendência Direta

Localiza descendentes que correspondam ao padrão especificado:

// Altera o fundo de todos os <li> dentro de .item-ii
$('.item-ii').find('li').css('background-color', 'crimson');

.filter() — Restrição do Conjunto

Reduz o conjunto atual aos elementos que satisfazem o critério:

// Destaca linhas pares
$('li').filter(':even').css('background-color', 'crimson');

Métodos Essenciais

.ready() — Inicialização do DOM

Diferente de window.onload, executa assim que o DOM está parseado:

$(document).ready(function() {
    // DOM pronto para manipulação
});

.each() — Iteração Controlada

$("li").each(function(indice) {
    console.log(indice + ": " + $(this).text());
});

$.extend() — Mesclagem de Objetos

var configuracao = $.extend({}, padrao, personalizada);

Acesso e Conversão de Elementos

Método	Descrição
.eq(indice)	Obtém elemento por posição (permitindo índice negativo)
.get(indice)	Retorna o objeto DOM nativo
.get()	Converte coleção jQuery em array DOM
.index()	Determina a posição relativa no conjunto

// Exemplos práticos
$("li").eq(2).css("background-color", "crimson");
console.log($("li").get(-1)); // Último elemento DOM

var elemento = $("#bar");
alert("Posição: " + $("li").index(elemento));

Manipulação de Elementos no DOM

Inserção Interna (dentro do elemento)

Método	Ação
.append()	Adiciona ao final do conteúdo
.prepend()	Adiciona ao início do conteúdo
.appendTo()	Move elemento para o final do alvo
.prependTo()	Move elemento para o início do alvo

$(".interno").append("<p>Novo conteúdo</p>");
$("<p>Teste</p>").appendTo(".container");

Inserção Externa (mesmo nível hierárquico)

Método	Ação
.before()	Insere antes do elemento
.after()	Insere depois do elemento
.insertBefore()	Move elemento antes do alvo
.insertAfter()	Move elemento depois do alvo

$(".alvo").before("<p>Precedente</p>");
$("<p>Seguinte</p>").insertAfter("#referencia");

Envolvimento de Elementos

Método	Efeito
.wrap()	Envolve cada elemento individualmente
.wrapAll()	Envolve todo o conjunto em único container
.wrapInner()	Envolve apenas o conteúdo interno
.unwrap()	Remove o elemento pai

// Estrutura inicial
// <div class="caixa"><div class="item">A</div></div>

$(".item").wrap("<div class='novo-wrapper'></div>");

// Resultado: cada .item envolvido individualmente

Manipulação de Atributos e Dados

.val() — Valores de Formulário

// Leitura
var selecionado = $("input:checkbox:checked").val();

// Escrita com função de transformação
$("input").on("blur", function() {
    $(this).val(function(i, valorAtual) {
        return valorAtual.toUpperCase();
    });
});

.attr() vs .prop()

É crucial distinguir atributos HTML de propriedades DOM:

// Atributo HTML
var titulo = $("em").attr("title");

// Propriedade DOM (estado dinâmico)
var marcado = $("input").prop("checked");

// Definição múltipla
$("#imagem").attr({
    alt: "Descrição acessível",
    title: "Fotografia por Kelly Clark"
});

// Toggle de propriedade
$("input[type='checkbox']").prop("checked", function(i, estado) {
    return !estado;
});

.data() — Armazenamento Associativo

// Armazenamento
$("body").data("aplicacao", {
    versao: "2.1.0",
    ambiente: "producao"
});

// Recuperação (inclui data-* attributes HTML5)
console.log($("body").data("aplicacao").versao);

Manipulação de Classes e Estilos

Gerenciamento de Classes

// Verificação
$("#meuElemento").hasClass("ativo");

// Adição (sem sobrescrir existentes)
$("p").addClass("destaque importante");

// Remoção condicional
$("li:last").removeClass(function() {
    return $(this).prev().attr("class");
});

// Alternância inteligente
$("div.alternavel").toggleClass("visivel", condicao);

// Toggle baseado em função
$("div.contexto").toggleClass(function() {
    return $(this).parent().is(".positivo") ? "sucesso" : "alerta";
});

.css() — Manipulação Direta de Estilos

// Leitura múltipla
var estilos = $(this).css(["largura", "altura", "cor", "cor-fundo"]);

// Escrita com cálculo dinâmico
$("div.exemplo").css("largura", function(indice) {
    return indice * 50;
});

// Incremento relativo
$(this).css("largura", "+=200");

// Definição em lote
$(this).css({
    "background-color": "#ffff00",
    "font-weight": "bolder"
});

Sistema de Eventos

.on() — Delegação Moderna (v1.7+)

Substitui .bind(), .live() e .delegate():

// Evento direto
$("#botao").on("click", function() {
    alert("Clique detectado!");
});

// Delegação de eventos (performance otimizada)
$("#tabelaDados").on("click", "tr", function() {
    alert("Linha selecionada: " + $(this).text());
});

// Dados adicionais
$("#elemento").on("click", { id: 42 }, function(evento) {
    console.log(evento.data.id);
});

Disparo Programático

// Simulação de evento
$("#campo").trigger("focus");

// Trigger com parâmetros extras
$("#formulario").trigger("submit", ["parametroExtra"]);

Efeitos e Animações

Categoria	Métodos
Visibilidade	show(), hide(), toggle()
Opacidade	fadeIn(), fadeOut(), fadeTo(), fadeToggle()
Altura	slideUp(), slideDown(), slideToggle()
Controle	delay(), stop(), queue(), dequeue(), clearQueue()

Requisições Ajax

Método	Caso de Uso
$.ajax()	Controle completo da requisição
$.get()	Requisição GET simplificada
$.post()	Requisição POST simplificada
$.getJSON()	Carregamento de dados JSON
$.load()	Carregamento de fragmento HTML

$.ajax({
    url: "/api/dados",
    method: "GET",
    dataType: "json"
}).done(function(resposta) {
    console.log("Sucesso:", resposta);
}).fail(function(xhr, status, erro) {
    console.error("Falha:", erro);
});

Dominar esses métodos fundamentais permite construir interações ricas e performáticas, aproveitando verdadeiramente a arquitetura pensada para simplificar a manipulação do DOM e a programação assíncrona em JavaScript.