Folha de referência jQuery

Gratuito

Uma referência jQuery pesquisável e imprimível — seletores, manipulação do DOM, eventos, efeitos, travessia, AJAX e auxiliares de formulários. Grátis.

Seletores

$('#id')

Seleciona um elemento pelo seu id

$('.class')

Seleciona todos os elementos com uma classe

$('div')

Seleciona todos os elementos de um nome de tag

$('*')

Seleciona todos os elementos da página

$('[name="email"]')

Seleciona por um valor de atributo

$('a[href^="https"]')

Seletor de atributo começa-com

$('ul li:first')

Primeiro elemento correspondente

$('ul li:last')

Último elemento correspondente

$('tr:eq(2)')

Elemento num índice de base zero

$('li:not(.done)')

Exclui elementos que correspondem a um seletor

$(':checked')

Todas as checkboxes/radios marcadas

$('div:visible')

Apenas elementos atualmente visíveis

$('ul li')

Combinador de descendente

$('ul > li')

Combinador de filho direto

Document ready e DOM

$(function () { /* ... */ });

Executa código quando o DOM estiver pronto

$(document).ready(fn)

Manipulador explícito de document-ready

$(window).on('load', fn)

Executa após todos os recursos carregarem

$(this)

Envolve o elemento de contexto atual

$(el)

Envolve um nó DOM bruto em jQuery

$('<div class="box"></div>')

Cria um novo elemento a partir de HTML

$('#box')[0]

Obtém o nó DOM subjacente

$('#box').get(0)

Obtém o nó DOM via .get()

$('.item').length

Conta os elementos correspondentes

$('#box').is(':visible')

Testa um seletor contra o conjunto

Manipulação do DOM

$('#box').html('<b>Hi</b>')

Define o HTML interno

$('#box').text('Hello')

Define o conteúdo de texto (escapado)

$('#name').val('Ada')

Define o valor de um campo de formulário

$('#list').append('<li>x</li>')

Insere conteúdo no fim

$('#list').prepend('<li>x</li>')

Insere conteúdo no início

$('#box').before('<hr>')

Insere conteúdo antes do elemento

$('#box').after('<hr>')

Insere conteúdo depois do elemento

$('#box').remove()

Remove o elemento do DOM

$('#box').empty()

Remove todos os nós filhos

$('#box').clone()

Cria uma cópia do elemento

$('#box').wrap('<div>')

Envolve o elemento em novo HTML

$('#box').replaceWith('<p>')

Substitui o elemento por completo

Atributos e CSS

$('#img').attr('src')

Obtém o valor de um atributo

$('#img').attr('alt', 'Logo')

Define o valor de um atributo

$('#cb').prop('checked')

Obtém uma propriedade do DOM (checked/disabled)

$('#cb').prop('checked', true)

Define uma propriedade do DOM

$('#img').removeAttr('title')

Remove um atributo

$('.box').addClass('active')

Adiciona uma classe CSS

$('.box').removeClass('active')

Remove uma classe CSS

$('.box').toggleClass('open')

Alterna uma classe CSS

$('.box').hasClass('active')

Testa se uma classe está presente

$('#box').css('color', 'red')

Define uma única propriedade CSS

$('#box').css({top: 0, left: 0})

Define múltiplas propriedades CSS

$('#box').width()

Obtém a largura computada em pixels

$('#box').height()

Obtém a altura computada em pixels

Eventos

$('#btn').on('click', fn)

Anexa um manipulador de evento

$('#btn').off('click')

Remove manipuladores de evento

$('#btn').click(fn)

Manipulador de clique abreviado

$('#form').submit(fn)

Trata o envio do formulário

$('#sel').change(fn)

Trata alterações de valor

$('#in').keyup(fn)

Trata key-up num campo

$('#list').on('click', '.item', fn)

Evento delegado para filhos dinâmicos

$('#btn').trigger('click')

Dispara um evento programaticamente

$('#btn').one('click', fn)

Executa um manipulador no máximo uma vez

e.preventDefault()

Impede a ação padrão do navegador

e.stopPropagation()

Impede a propagação do evento

e.target

O elemento que disparou o evento

Efeitos e animação

$('#box').show()

Mostra um elemento oculto

$('#box').hide()

Oculta um elemento

$('#box').toggle()

Alterna a visibilidade

$('#box').fadeIn(300)

Faz um elemento surgir gradualmente

$('#box').fadeOut(300)

Faz um elemento desaparecer gradualmente

$('#box').fadeTo(300, 0.5)

Esmaece até uma dada opacidade

$('#box').slideUp()

Recolhe um elemento deslizando para cima

$('#box').slideDown()

Expande um elemento deslizando para baixo

$('#box').slideToggle()

Alterna uma animação de deslize

$('#box').animate({left: 100})

Anima propriedades CSS

$('#box').stop()

Para a animação atual

$('#box').delay(500).fadeIn()

Atrasa o próximo efeito na fila

Travessia

$('#box').find('.item')

Encontra descendentes que correspondem a um seletor

$('#box').parent()

Obtém o pai direto

$('#box').parents('.row')

Obtém todos os ascendentes que correspondem a um seletor

$('#box').closest('.row')

Ascendente correspondente mais próximo (ou o próprio)

$('#box').children()

Obtém os filhos diretos

$('#box').siblings()

Obtém os elementos irmãos

$('#box').next()

Obtém o próximo irmão

$('#box').prev()

Obtém o irmão anterior

$('.item').each(fn)

Itera sobre cada elemento correspondente

$('.item').filter('.on')

Reduz o conjunto por um seletor

$('.item').first()

Reduz o conjunto ao primeiro elemento

$('.item').eq(1)

Reduz o conjunto a um índice

AJAX

$.ajax({url: '/api', method: 'GET'})

Pedido AJAX com controlo total

$.get('/api', fn)

Pedido HTTP GET abreviado

$.post('/api', data, fn)

Pedido HTTP POST abreviado

$.getJSON('/api.json', fn)

Pedido GET esperando JSON

$('#box').load('/part.html')

Carrega HTML para um elemento

$.ajax({dataType: 'json'})

Define o tipo de resposta esperado

$.ajax({data: {q: 'x'}})

Envia parâmetros de pedido

.done(function (res) {})

Executa um callback em caso de sucesso

.fail(function (err) {})

Executa um callback em caso de falha

.always(function () {})

Executa um callback após a conclusão

$.ajaxSetup({headers: {}})

Define padrões para todos os pedidos

Formulários

$('#form').serialize()

Codifica os dados do formulário como query string

$('#form').serializeArray()

Codifica os dados do formulário como array

$('#name').val()

Lê o valor de um campo

$('#name').val('Ada')

Escreve o valor de um campo

$(':input')

Seleciona todos os elementos input do formulário

$('#cb').is(':checked')

Testa se uma checkbox está marcada

$('#sel option:selected')

Obtém a opção selecionada

$('#in').focus()

Move o foco para um campo

$('#form').on('submit', fn)

Trata o evento de submit do formulário

$('#in').prop('disabled', true)

Desativa um controlo de formulário

Utilitários

$.each(arr, fn)

Itera sobre um array ou objeto

$.map(arr, fn)

Constrói um novo array a partir de cada item

$.grep(arr, fn)

Filtra um array por um predicado

$.extend({}, a, b)

Funde objetos num alvo

$.trim(' hi ')

Remove espaços no início/fim

$.inArray(2, arr)

Encontra o índice de um item num array

$.isArray(x)

Testa se um valor é um array

$.isFunction(x)

Testa se um valor é uma função

$.parseJSON(str)

Analisa uma string JSON num objeto

$.now()

Timestamp atual em milissegundos

$.type(x)

Obtém o tipo interno de um valor

Nenhuma entrada corresponde a “:q”.

Precisa de ajuda?

Encontrou um problema com esta ferramenta? Avise a nossa equipa.

Relatar um problema

Adicione esta ferramenta gratuita ao seu próprio site — copie e cole o código abaixo.

<iframe src="https://tweakee.com/pt/studio/dev/jquery-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>