elements $(".btn") // class selector $("#main") // ID selector $("ul > li") // direct children $("input[type='text']") // attribute selector ``` ### Seletores Comuns | Command | Description | |---------|-------------| | `$('*')` | Todos os elementos | | `$('a, span')` | Múltiplos seletores | | `$(':first')` | Primeiro elemento correspondente | | `$(':last')` | Último elemento correspondente | | `$(':even') / $(':odd')` | Elementos de índice par/ímpar | | `$(':visible') / $(':hidden')` | Filtros de visibilidade | | `$(':contains(text)')` | Elementos que contêm texto | | `$(':has(selector)')` | Elementos que contêm correspondência do seletor | ## Manipulação do DOM ### Conteúdo e Estrutura ``` $("#el").html("Bold"); // set inner HTML $("#el").text("Plain text"); // set text content $("ul").append("
Hello
").insertAfter("#el"); // insert after $("Hi
").insertBefore("#el"); // insert before $("#el").remove(); // remove element from DOM $("#el").empty(); // remove all children ``` ### Métodos | Command | Description | |---------|-------------| | `.html()` | Obter/definir HTML interno | | `.text()` | Obter/definir conteúdo de texto | | `.append() / .prepend()` | Adicionar filho no final/início | | `.after() / .before()` | Inserir irmão depois/antes | | `.wrap()` | Envolver elemento com novo pai | | `.clone()` | Cópia profunda do elemento | | `.replaceWith()` | Substituir elemento | ## Eventos ### Vinculando Eventos ``` $(".btn").on("click", function () { $(this).toggleClass("active"); }); $(document).on("click", ".dynamic", handler); // delegation $(".btn").off("click"); // remove handler ``` ### Métodos Abreviados | Command | Description | |---------|-------------| | `.click(fn)` | Manipulador de clique | | `.hover(fnIn, fnOut)` | Entrada/saída do mouse | | `.focus() / .blur()` | Foco obtido/perdido | | `.change(fn)` | Valor alterado (input/select) | | `.submit(fn)` | Envio de formulário | | `.keydown() / .keyup()` | Eventos de teclado | ### Documento Pronto ``` $(document).ready(function () { /* DOM loaded */ }); $(function () { /* shorthand */ }); ``` ## Efeitos e Animação ### Mostrar / Ocultar / Alternar ``` $("#el").hide(400); // hide with animation $("#el").show(400); // show with animation $("#el").toggle(); // toggle visibility $("#el").fadeIn(600); // fade in $("#el").slideDown(400); // slide down ``` ### Animação Personalizada ``` $("#el").animate({ opacity: 0.5, left: "+=50px", height: "toggle" }, 1000, function () { /* complete */ }); ``` ### Métodos de Efeito | Command | Description | |---------|-------------| | `.fadeIn() / .fadeOut()` | Animar opacidade | | `.fadeToggle()` | Alternar com fade | | `.slideDown() / .slideUp()` | Animar altura | | `.animate(props, ms)` | Animação CSS personalizada | | `.stop()` | Parar animação atual | | `.delay(ms)` | Atrasar próximo efeito na fila | ## AJAX ### Métodos Abreviados ``` $.get("/api/data", function (data) { console.log(data); }); $.post("/api/data", { name: "Alice" }, function (res) {}); $.getJSON("/api/items", function (json) {}); $("#el").load("/fragment.html"); // load HTML into element ``` ### $.ajax Completo ``` $.ajax({ url: "/api/data", method: "POST", data: JSON.stringify({ key: "val" }), contentType: "application/json", success: (res) => console.log(res), error: (xhr) => console.error(xhr.status) }); ``` ### Opções de AJAX | Command | Description | |---------|-------------| | `url` | URL da requisição | | `method` | Método HTTP (GET, POST, ...) | | `data` | Dados a enviar | | `dataType` | Tipo de resposta esperada | | `contentType` | Tipo de conteúdo da requisição | | `success / error` | Funções de callback | | `headers` | Cabeçalhos de requisição personalizados | ## Navegação ### Navegação na Árvore ``` $("li").parent(); // direct parent $("li").parents("ul"); // all matching ancestors $("ul").children("li"); // direct children $("ul").find(".active"); // all matching descendants $("li").siblings(); // sibling elements ``` ### Métodos de Navegação | Command | Description | |---------|-------------| | `.parent() / .parents()` | Pai direto / todos os ancestrais | | `.children() / .find()` | Filhos diretos / todos os descendentes | | `.siblings()` | Todos os elementos irmãos | | `.next() / .prev()` | Irmão próximo/anterior | | `.closest(sel)` | Ancestral mais próximo que corresponde ao seletor | | `.first() / .last()` | Primeiro/último no conjunto correspondente | | `.eq(index)` | Elemento no índice | | `.filter(sel)` | Reduzir aos elementos correspondentes | ## Atributos e CSS ### Atributos ``` $("img").attr("src"); // get attribute $("img").attr("src", "new.jpg"); // set attribute $("img").removeAttr("title"); // remove attribute $("input").prop("checked", true); // set property ``` ### CSS e Classes ``` $(".box").css("color", "red"); // set single style $(".box").css({ color: "red", fontSize: "14px" }); // multi $("p").addClass("highlight"); $("p").removeClass("highlight"); $("p").toggleClass("active"); $("p").hasClass("active"); // returns boolean ``` ## Formulários ### Valores e Serialização ``` $("input").val(); // get value $("input").val("new value"); // set value $("form").serialize(); // "name=Alice&age=30" $("form").serializeArray(); // [{name, value}, ...] ``` ### Seletores de Formulário | Command | Description | |---------|-------------| | `$(":input")` | Todos os elementos de formulário | | `$(":checked")` | Checkboxes/radios marcados | | `$(":selected")` | Elementos de opção selecionados | | `$(":disabled")` | Elementos desabilitados | | `$(":text")` | Inputs de texto | ## Utilitários ### Auxiliares de Array e Objeto ``` $.each([1, 2, 3], function (i, val) { /* iterate */ }); $.each(obj, function (key, val) { /* iterate object */ }); $.extend({}, defaults, options); // merge objects $.inArray("b", ["a", "b", "c"]); // returns 1 (index) ``` ### Métodos Utilitários | Command | Description | |---------|-------------| | `$.each(arr, fn)` | Iterar array ou objeto | | `$.extend(target, ...)` | Mesclar objetos (superficial) | | `$.inArray(val, arr)` | Índice do valor (-1 se ausente) | | `$.isArray(obj)` | Verificar se é array | | `$.trim(str)` | Remover espaços no início/fim | | `$.parseJSON(str)` | Analisar string JSON | | `$.map(arr, fn)` | Transformar elementos do array | ## Padrões Comuns ### Encadeamento ``` $("ul") .find("li") .addClass("item") .first() .css("font-weight", "bold"); ``` ### Padrão de Plugin ``` $.fn.highlight = function (color) { return this.each(function () { $(this).css("background", color || "yellow"); }); }; $("p").highlight("pink"); ``` ### Resolução de Conflitos ``` // Avoid $ conflicts with other libraries jQuery.noConflict(); jQuery(document).ready(function ($) { $(".btn").click(handler); // $ safe inside }); ```