Biblioteca de utilitários JavaScript

Este método tem vários usos:

Um seletor CSS pode ser passado como parâmetro para retornar um objeto JQ contendo os elementos correspondentes. Este método é implementado via querySelectorAll.

$('.box')

Elementos DOM, qualquer array, NodeList ou objetos JQ podem ser passados para retornar um objeto JQ contendo os elementos especificados.

$(document)

Uma string HTML pode ser passada para retornar um objeto JQ contendo o DOM criado a partir do HTML.

$('<div id="wrapper">
  <span id="inner"></span>
</div>')

Uma função pode ser passada, que será chamada após o carregamento do DOM.

$(function () { console.log('DOM Loaded') })

Se apenas um objeto for passado, as propriedades desse objeto serão mescladas no objeto JQ, o que equivale a adicionar novas funcionalidades sob o namespace do JQ.

$.extend({
  customFunc: function () {}
})

// Então você pode chamar métodos personalizados assim
$.customFunc()

Se dois ou mais objetos forem passados, as propriedades de todos os objetos serão adicionadas ao primeiro objeto e o objeto mesclado será retornado.

var object = $.extend(
  { key1: val1 },
  { key2: val2 },
  { key3: val3 }
);

// Neste ponto, tanto o primeiro objeto quanto o valor de retorno são { key1: val1, key2: val2, key3: val3 }

Estender métodos na cadeia de protótipos do JQ.

$.fn.extend({
  customFunc: function () {}
})

// Então você pode usar os métodos estendidos assim
$(document).customFunc()

Serializa um objeto ou array para retornar uma string que pode ser usada para parâmetros de URL.

$.param({ width: 1680, height: 1050 })
// width=1680&height=1050

$.param({ foo: { one: 1, two: 2 } })
// foo[one]=1&foo[two]=2

$.param({ ids: [1, 2, 3] })
// ids[]=1&ids[]=2&ids[]=3

Se o parâmetro passado for um array, o formato do array deve ser consistente com o formato de retorno de .serializeArray():

$.param([
  { "name": "name", "value": "mdui" },
  { "name": "password", "value": "123456" }
])
// name=mdui&password=123456

Percorre um array ou objeto. O valor de retorno é o primeiro parâmetro, ou seja, o array ou objeto percorrido.

O primeiro parâmetro da função é a posição do índice do array ou a chave do objeto; o segundo parâmetro é o valor na posição correspondente do array ou objeto.

O this na função de callback aponta para o valor na posição correspondente do array ou objeto. Se a função de callback retornar false, a iteração será interrompida.

// Percorrendo um array
$.each(['a', 'b', 'c'], function (index, value) {
  console.log(index + ':' + value);
})

// Resultado:
// 0:a
// 1:b
// 2:c

// Percorrendo um objeto
$.each({'name': 'mdui', 'lang': 'zh'}, function (key, value) {
  console.log(key + ':' + value);
})

// Resultado:
// name:mdui
// lang:zh

Acrescenta os elementos do segundo array ao primeiro array e retorna o array mesclado.

var first = ['a', 'b', 'c'];
var second = ['c', 'd', 'e'];
var result = $.merge(first, second);

console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e']
console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e']

Filtra elementos duplicados em um array.

var result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]);
console.log(result); // [1, 2, 12, 3]

Percorre um array ou objeto e retorna um novo array composto pelos valores de retorno da função.

O primeiro parâmetro da função é o valor na posição correspondente do array ou objeto, e o segundo parâmetro é a posição do índice do array ou a chave do objeto.

A função pode retornar qualquer valor; se a função retornar um array, ele será expandido; se retornar null ou undefined, será ignorado. O this dentro da função aponta para o objeto window.

// Percorrendo um array
var result = $.map(['a', 'b', 'c'], function (value, index) {
  return index + value;
});
console.log(result); // ['0a', '1b', '2c']

// Quando a função de callback retorna um array, ele é expandido
var result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

// Percorrendo um objeto
var result = $.map({ name: 'mdui', password: '123456' }, function (value, key) {
  return key + ':' + value;
});
console.log(result); // ['name:mdui', 'password:123456']

Verifica se o nó pai contém o nó filho e retorna um valor booleano.

$.contains(document, document.body); // true
$.contains(document.body, document); // false

Retorna true se pelo menos um elemento na coleção corresponder ao parâmetro, caso contrário, retorna false.

Os parâmetros podem ser seletores CSS, elementos DOM, arrays de elementos DOM, objetos JQ ou funções de callback.

Quando o parâmetro é uma função de callback, o primeiro parâmetro da função é a posição do índice, o segundo parâmetro é o elemento atual e this aponta para o elemento atual. Se a função retornar true, significa uma correspondência; se retornar false, significa que não há correspondência.

$('.box').is('.box'); // true
$('.box').is('.boxss'); // false
$('.box').is($('.box')[0]); // true

// Verificação via valor de retorno da função de callback
$(document).is(function (index, element) {
  return element === document;
});
// true

Retorna o número de elementos na coleção atual.

$('body').length; // 1

Percorre a coleção atual e executa uma função para cada elemento na coleção. Se a função retornar false, interrompe a iteração.

O primeiro parâmetro da função é a posição do índice do elemento, e o segundo parâmetro é o elemento atual. O this na função aponta para o elemento atual.

$('img').each(function(index, element) {
  this.src = 'test' + index + '.jpg';
});

Percorre a coleção atual, executa uma função para cada elemento na coleção e retorna uma nova coleção composta pelos valores de retorno da função. Se a função retornar null ou undefined, ela será filtrada.

O primeiro parâmetro da função é a posição do índice do elemento, e o segundo parâmetro é o elemento atual. O this na função aponta para o elemento atual.

var result = $('input.checked').map(function (index, element) {
  return $(this).val();
});

// result é um objeto JQ composto pelos valores dos elementos correspondentes

Retorna uma coleção contendo apenas o elemento na posição de índice especificada.

$('div').eq(0); // Retorna um objeto JQ contendo apenas o primeiro elemento
$('div').eq(-1); // Retorna um objeto JQ contendo apenas o último elemento
$('div').eq(-2); // Retorna um objeto JQ contendo apenas o penúltimo elemento

Retorna uma coleção contendo apenas o primeiro elemento.

$('div').first(); // Retorna um objeto JQ contendo apenas a primeira div

Retorna uma coleção contendo apenas o último elemento.

$('div').last(); // Retorna um objeto JQ contendo apenas a última div

Retorna o elemento na posição de índice especificada. Se nenhum parâmetro for passado, retorna um array composto por todos os elementos na coleção.

$('div').get(); // Retorna um array composto por todos os elementos div
$('div').get(0); // Retorna o primeiro elemento div
$('div').get(-1); // Retorna o último elemento div

Se nenhum parâmetro for passado, retorna a posição do índice do primeiro elemento na coleção em relação aos seus irmãos.

Se um seletor CSS for passado como parâmetro, retorna a posição do índice do primeiro elemento na coleção em relação aos elementos correspondentes ao seletor CSS.

Se um elemento DOM for passado, retorna o valor do índice desse elemento DOM na coleção.

Se um objeto JQ for passado, retorna a posição do índice do primeiro elemento no objeto na coleção atual.

<div id="child">
  <div id="child1"></div>
  <div id="child2"></div>
  <div id="child3"></div>
  <div id="child4"></div>
</div>

$('#child3').index(); // 2
$('#child3').index('#child div'); // 2
$('#child div').index($('#child3').get(0)); // 2

Retorna um subconjunto da coleção atual.

O primeiro parâmetro é a posição inicial do subconjunto, o segundo parâmetro é a posição final do subconjunto; se o segundo parâmetro não for passado, significa que todos os elementos da posição inicial ao fim estão incluídos.

// Retorna todos os elementos depois do terceiro (inclusive o terceiro) na coleção
$('div').slice(3);

// Retorna os elementos entre o terceiro e o quinto (inclusive o terceiro, excluindo o quinto) na coleção
$('div').slice(3, 5);

Filtra os elementos que correspondem à expressão especificada na coleção atual. Os parâmetros podem ser seletores CSS, elementos DOM, arrays de elementos DOM ou funções de callback.

Quando o parâmetro é uma função, o primeiro parâmetro da função é a posição do índice, o segundo parâmetro é o elemento atual e o this na função aponta para o elemento atual. Quando a função retorna true, o elemento atual é mantido; quando retorna false, o elemento atual é removido.

// Filtra todos os elementos div que contêm .box
$('div').filter('.box');

// Filtra todas as opções selecionadas
$('#select option').filter(function (index, element) {
  return element.selected;
});

Filtra os elementos que não correspondem à expressão especificada na coleção atual. Os parâmetros podem ser seletores CSS, elementos DOM, arrays de elementos DOM ou funções de callback.

Quando o parâmetro é uma função, o primeiro parâmetro da função é a posição do índice, o segundo parâmetro é o elemento atual e o this na função aponta para o elemento atual. Quando a função retorna true, o elemento atual é removido; quando retorna false, o elemento atual é mantido.

// Filtra todos os elementos div que não contêm a classe .box
$('div').not('.box');

// Filtra todas as opções não selecionadas
$('#select option').not(function (index, element) {
  return element.selected;
});

Determina se o primeiro elemento na coleção contém a classe CSS especificada.

// Determina se o primeiro elemento div contém .item
$('div').hasClass('item')

Adiciona classes CSS a cada elemento na coleção; vários nomes de classe podem ser separados por espaços.

Uma função de callback que retorna nomes de classes CSS também pode ser passada. O primeiro parâmetro da função é a posição do índice, o segundo parâmetro é o nome da classe CSS original no elemento e o this na função aponta para o elemento atual.

// Adiciona .item a todos os elementos div
$('div').addClass('item')

// Adiciona .item1 e .item2 a todos os elementos div
$('div').addClass('item1 item2')

// Adiciona as classes CSS retornadas pela função de callback a todos os elementos div
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
})

Remove as classes CSS dos elementos na coleção; vários nomes de classe podem ser separados por espaços.

Uma função de callback que retorna nomes de classes CSS também pode ser passada. O primeiro parâmetro da função é a posição do índice, o segundo parâmetro é o nome da classe CSS original no elemento e o this na função aponta para o elemento atual.

Se nenhum parâmetro for passado, o atributo class no elemento será removido diretamente.

// Remove .item de todos os elementos div
$('div').removeClass('item')

// Remove .item1 e .item2 de todos os elementos div
$('div').removeClass('item1 item2')

// Remove as classes CSS retornadas pela função de callback de todos os elementos div
$('div').removeClass(function (index, currentClassName) {
  return 'item';
})

// Remove o atributo class diretamente
$('div').removeClass()

Alterna as classes CSS nos elementos da coleção. Se a classe existir, ela é removida; caso contrário, é adicionada. Vários nomes de classe podem ser separados por espaços.

Uma função de callback que retorna nomes de classes CSS também pode ser passada. O primeiro parâmetro da função é a posição do índice, o segundo parâmetro é o nome da classe CSS original no elemento e o this na função aponta para o elemento atual.

// Alterna .item em todos os elementos div
$('div').toggleClass('item')

// Alterna .item1 e .item2 em todos os elementos div
$('div').toggleClass('item1 item2')

// Alterna as classes CSS retornadas pela função de callback em todos os elementos div
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
})

Obtém o valor do atributo do primeiro elemento na coleção.

// Obtém o valor do atributo do primeiro elemento
$('input').prop('checked');

Também pode ser usado para definir o valor do atributo de todos os elementos na coleção.

O valor do atributo definido pode ser o valor de retorno de uma função de callback. O primeiro parâmetro da função de callback é a posição do índice do elemento, o segundo parâmetro é o valor do atributo original no elemento e o this dentro da função aponta para o elemento atual.

Se o valor do atributo ou o valor de retorno da função de callback for void ou undefined, o atributo original não será modificado.

Também é possível definir vários atributos simultaneamente passando um objeto.

// Define os valores dos atributos de todos os elementos selecionados
$('input').prop('checked', true);

// Define o valor do atributo através do valor de retorno da função de callback
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

// Define vários valores de atributos dos elementos simultaneamente
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  }
});

Remove o valor do atributo especificado de todos os elementos na coleção.

$('input').removeProp('disabled');

Obtém o valor da propriedade do primeiro elemento na coleção.

// Obtém o valor da propriedade do primeiro elemento
$('div').attr('username');

Também pode ser usado para definir o valor da propriedade de todos os elementos na coleção.

O valor da propriedade definido pode ser o valor de retorno de uma função de callback. O primeiro parâmetro da função de callback é a posição do índice do elemento, o segundo parâmetro é o valor da propriedade original no elemento e o this dentro da função aponta para o elemento atual.

Se o valor da propriedade ou o valor de retorno da função de callback for void ou undefined, a propriedade original não será modificada. Se o valor da propriedade ou o valor de retorno da função de callback for null, a propriedade especificada será removida.

Também é possível definir várias propriedades simultaneamente passando um objeto.

// Define os valores das propriedades de todos os elementos selecionados
$('div').attr('username', 'mdui');

// Define o valor da propriedade através do valor de retorno da função de callback
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

// Define vários valores de propriedades dos elementos simultaneamente
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  }
});

Remove o valor da propriedade especificada de todos os elementos na coleção. Vários nomes de propriedades podem ser separados por espaços.

// Remove uma propriedade de todos os elementos na coleção
$('div').removeAttr('username');

// Remove várias propriedades de todos os elementos na coleção
$('div').removeAttr('username lastname');

Obtém o valor do primeiro elemento na coleção.

Se o elemento for um <select multiple="multiple">, retornará um array contendo cada item selecionado.

// Obtém o valor do primeiro elemento selecionado
$('#input').val();

Também pode ser usado para definir o valor de todos os elementos na coleção.

O valor definido pode ser uma string, número, array de strings ou função de callback.

Se o valor for uma função de callback, o primeiro parâmetro é a posição do índice do elemento, o segundo parâmetro é o valor original do elemento e o this na função aponta para o elemento atual.

Se o elemento for <input type="checkbox">, <input type="radio"> ou <option>, o valor do elemento ou o valor de retorno da função pode ser um array. Nesse caso, os elementos cujos valores estão no array serão selecionados e os elementos cujos valores não estão no array serão desmarcados.

Se o valor ou o valor de retorno da função for undefined, o valor do elemento será definido como vazio.

// Define o valor dos elementos selecionados
$('#input').val('input value');

// Define o valor do elemento através do valor de retorno da função de callback
$('#input').val(function (index, oldValue) {
  return 'new value';
});

Obtém o conteúdo de texto de todos os elementos na coleção (incluindo seus descendentes)

// Obtém o texto de todos os elementos .box
$('.box').text();

Também pode ser usado para definir o texto de todos os elementos na coleção.

O valor definido pode ser uma string, número, booleano ou função de callback.

Se for uma função de callback, o primeiro parâmetro é a posição do índice do elemento, o segundo parâmetro é o conteúdo de texto original do elemento e o this dentro da função aponta para o elemento atual.

Se o valor definido ou o valor de retorno da função de callback for undefined, o texto do elemento correspondente não será modificado.

// Define o conteúdo de texto dos elementos selecionados
$('.box').text('text content');

// Define o conteúdo de texto dos elementos através do valor de retorno da função de callback
$('.box').text(function (index, oldTextContent) {
  return 'new text content';
});

Obtém o conteúdo HTML do primeiro elemento na coleção.

// Obtém o conteúdo HTML do primeiro elemento .box
$('.box').html();

Também pode ser usado para definir o conteúdo HTML de todos os elementos na coleção.

O valor definido pode ser uma string HTML, elemento DOM ou função de callback.

Se for uma função de callback, o primeiro parâmetro é a posição do índice do elemento, o segundo parâmetro é o conteúdo HTML original do elemento e o this dentro da função aponta para o elemento atual.

Se o valor definido ou o valor de retorno da função for undefined, o HTML do elemento correspondente não será modificado.

// Define o HTML dos elementos selecionados
$('.box').html('<div>new html content</div>');

// Define o conteúdo HTML dos elementos através do valor de retorno da função de callback
$('.box').html(function (index, oldHTMLContent) {
  return '<div>new html content</div>';
});

Lê ou armazena dados em um elemento especificado.

Armazenar dados, se o valor for undefined, equivale a ler os dados correspondentes no elemento. Ou seja, $.data(element, 'key', undefined) é equivalente a $.data(element, 'key').

Nota: Este método não recupera atributos data-* no elemento.

// Armazena dados no elemento especificado, retorna o valor armazenado
$.data(document.body, 'layout', 'dark'); // Retorna dark

// Armazena vários dados simultaneamente no elemento especificado
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
});

// Obtém os dados armazenados no elemento especificado
$.data(document.body, 'layout'); // Retorna dark

// Obtém todos os dados armazenados no elemento especificado
$.data(document.body); // Retorna { layout: 'dark', primary: 'indigo', accent: 'pink' }

Remove os dados armazenados no elemento especificado.

Vários nomes de chaves podem ser separados por espaços, ou um array pode ser usado para representar vários nomes de chaves. Se nenhum nome de chave for especificado, todos os dados no elemento serão removidos.

// Remove os dados com a chave name no elemento
$.removeData(document.body, 'name');

// Remove os dados com as chaves name1 e name2 no elemento. Os dois métodos seguintes são equivalentes:
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

// Remove todos os dados armazenados no elemento
$.removeData(document.body);

Lê ou armazena dados nos elementos da coleção atual.

Ao armazenar dados, se o valor for undefined, ele não será armazenado.

Nota: O dado recuperado por este método incluirá os atributos data-* no elemento.

// Armazena dados nos elementos da coleção atual
$('.box').data('layout', 'dark');

// Armazena vários dados simultaneamente nos elementos da coleção atual
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

// Obtém o dado especificado armazenado no primeiro elemento da coleção atual
$('.box').data('layout'); // Retorna dark

// Obtém todos os dados armazenados no primeiro elemento da coleção atual
$('.box').data(); // Retorna { layout: 'dark', primary: 'indigo', accent: 'pink' }

Remove os dados armazenados nos elementos da coleção atual.

Vários nomes de chaves podem ser separados por espaços, ou um array pode ser usado para representar vários nomes de chaves. Se nenhum nome de chave for especificado, todos os dados no elemento serão removidos.

Nota: Este método removerá apenas os dados definidos através do método .data(), não removerá dados em atributos data-*.

// Remove os dados com a chave name
$('.box').removeData('name');

// Remove os dados com as chaves name1 e name2. Os dois métodos seguintes são equivalentes:
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// Remove todos os dados armazenados no elemento
$('.box').removeData();

Obtém o valor da propriedade CSS do primeiro elemento na coleção.

$('.box').css('color')

Também pode ser usado para definir o valor da propriedade CSS de todos os elementos na coleção.

O valor da propriedade pode ser uma string, um número ou uma função de callback que retorna uma string ou um número.

Se o valor da propriedade for uma função de callback, o primeiro parâmetro é a posição do índice do elemento, o segundo parâmetro é o valor da propriedade CSS original do elemento e o this na função aponta para o elemento atual.

Se o valor da propriedade ou o valor de retorno da função de callback for void, undefined ou null, o valor da propriedade CSS do elemento atual não será modificado.

Se o valor da propriedade ou o valor de retorno da função de callback for um número, px será adicionado como unidade. Se a propriedade não puder usar px como unidade, o valor será convertido diretamente em uma string.

Também é possível definir várias propriedades CSS simultaneamente passando um objeto chave-valor.

// Define o valor de estilo de todos os elementos na coleção
$('.box').css('color', 'red')

// Define o valor de estilo de todos os elementos através do valor de retorno da função de callback
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

// Define vários estilos simultaneamente passando um objeto
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});

Obtém a largura (em pixels) do primeiro elemento na coleção, não incluindo padding, border e margin.

$('.box').width();

Também pode ser usado para definir a largura (não incluindo padding, border e margin) de todos os elementos na coleção.

O valor pode ser uma string com unidade, um número ou uma função de callback que retorna uma string com unidade ou um número.

O primeiro parâmetro da função de callback é a posição do índice do elemento, o segundo parâmetro é o valor da largura original do elemento e o this na função aponta para o elemento atual.

Se o valor ou o valor de retorno da função de callback for un número, px será adicionado automaticamente como unidade.

Se o valor ou o valor de retorno da função de callback for null ou undefined, a largura do elemento não será modificada.

// Define a largura de todos os elementos na coleção
$('.box').width('20%');

// Quando o valor é um número, a unidade padrão é px
$('.box').width(10);

// Define a largura através do valor de retorno da função de callback
$('.box').width(function (index, oldWidth) {
  return 10;
});

Obtém a altura (em pixels) do primeiro elemento na coleção, não incluindo padding, border e margin.

$('.box').height();

Também pode ser usado para definir a altura (não incluindo padding, border e margin) de todos os elementos na coleção.

O valor pode ser uma string com unidade, um número ou uma função de callback que retorna uma string com unidade ou um número.

O primeiro parâmetro da função de callback é a posição do índice do elemento, o segundo parâmetro é o valor da altura original do elemento e o this na função aponta para o elemento atual.

Se o valor ou o valor de retorno da função de callback for um número, px será adicionado automaticamente como unidade.

Se o valor ou o valor de retorno da função de callback for null ou undefined, a altura do elemento não será modificada.

// Define a altura de todos os elementos na coleção
$('.box').height('20%');

// Quando o valor é um número, a unidade padrão é px
$('.box').height(10);

// Define a altura através do valor de retorno da função de callback
$('.box').height(function (index, oldHeight) {
  return 10;
});

Obtém a largura (em pixels) do primeiro elemento na coleção, incluindo padding, mas não border e margin.

$('.box').innerWidth();

Também pode ser usado para definir a largura (incluindo padding, mas não border e margin) de todos os elementos na coleção.

O valor pode ser uma string com unidade, um número ou uma função de callback que retorna uma string com unidade ou um número.

O primeiro parâmetro da função de callback é a posição do índice do elemento, o segundo parâmetro é o valor da largura original do elemento e o this na função aponta para o elemento atual.

Se o valor ou o valor de retorno da função de callback for um número, px será adicionado automaticamente como unidade.

Se o valor ou o valor de retorno da função de callback for null ou undefined, a largura do elemento não será modificada.

// Define a largura de todos os elementos na coleção
$('.box').innerWidth('20%');

// Quando o valor é um número, a unidade padrão é px
$('.box').innerWidth(10);

// Define a largura através do valor de retorno da função de callback
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

Obtém a altura (em pixels) do primeiro elemento na coleção, incluindo padding, mas não border e margin.

$('.box').innerHeight();

Também pode ser usado para definir a altura (incluindo padding, mas não border e margin) de todos os elementos na coleção.

O valor pode ser uma string com unidade, um número ou uma função de callback que retorna uma string com unidade ou un número.

O primeiro parâmetro da função de callback é a posição do índice do elemento, o segundo parâmetro é o valor da altura original do elemento e o this na função aponta para o elemento atual.

Se o valor ou o valor de retorno da função de callback for um número, px será adicionado automaticamente como unidade.

Se o valor ou o valor de retorno da função de callback for null ou undefined, a altura do elemento não será modificada.

// Define a altura de todos os elementos na coleção
$('.box').innerHeight('20%');

// Quando o valor é um número, a unidade padrão é px
$('.box').innerHeight(10);

// Define a altura através do valor de retorno da função de callback
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});

Obtém a largura (em pixels) do primeiro elemento na coleção, incluindo padding e border, mas não margin. É possível passar o parâmetro true para que a largura inclua a margin.

// Inclui largura de padding e border
$('.box').outerWidth();

// Inclui largura de padding, border e margin
$('.box').outerWidth(true);

Também pode ser usado para definir a largura (incluindo padding e border, mas não margin; é possível passar true no segundo parâmetro para incluir a margin) de todos os elementos na coleção.

O primeiro parâmetro pode ser uma string com unidade, um número ou uma função de callback que retorna uma string com unidade ou um número.

O primeiro parâmetro da função de callback é a posição do índice do elemento, o segundo parâmetro é a largura original do elemento e o this na função aponta para o elemento atual.

Se o valor ou o valor de retorno da função de callback for um número, px será adicionado automaticamente como unidade.

Se o valor ou o valor de retorno da função de callback for null ou undefined, a largura do elemento não será modificada.

// Define a largura de todos os elementos na coleção
$('.box').outerWidth('20%');

// Quando o valor é um número, a unidade padrão é px
$('.box').outerWidth(10);

// Se o segundo parâmetro for true, a largura incluirá a margin
$('.box').outerWidth(10, true);

// Define a largura através do valor de retorno da função de callback
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});

Obtém a altura (em pixels) do primeiro elemento na coleção, incluindo padding e border, mas não margin. É possível passar o parâmetro true para incluir a margin.

// Inclui altura de padding e border
$('.box').outerHeight();

// Inclui altura de padding, border e margin
$('.box').outerHeight(true);

Também pode ser usado para definir a altura (incluindo padding e border, mas não margin; é possível passar true no segundo parâmetro para incluir a margin) de todos os elementos na coleção.

O primeiro parâmetro pode ser uma string com unidade, um número ou uma função de callback que retorna uma string com unidade ou um número.

O primeiro parâmetro da função de callback é a posição do índice do elemento, o segundo parâmetro é a altura original do elemento e o this na função aponta para o elemento atual.

Se o valor ou o valor de retorno da função de callback for um número, px será adicionado automaticamente como unidade.

Se o valor ou o valor de retorno da função de callback for null ou undefined, a altura do elemento não será modificada.

// Define a altura de todos os elementos na coleção
$('.box').outerHeight('20%');

// Quando o valor é um número, a unidade padrão é px
$('.box').outerHeight(10);

// Se o segundo parâmetro for true, a altura incluirá a margin
$('.box').outerHeight(10, true);

// Define a altura através do valor de retorno da função de callback
$('.box').outerHeight(function (index, oldWidth) {
  return 10;
});

Oculta todos os elementos na coleção.

$('.box').hide();

Mostra todos os elementos na coleção.

$('.box').show();

Alterna o estado de exibição de todos os elementos na coleção.

$('.box').toggle();

Obtém as coordenadas do primeiro elemento na coleção em relação ao document.

$('.box').offset(); // { top: 20, left: 30 }

Também pode ser usado para definir as coordenadas de todos os elementos na coleção em relação ao document.

O parâmetro é um objeto contendo as propriedades top e left, ou uma função de callback que retorna um objeto nesse formato.

Se o parâmetro for uma função de callback, o primeiro parâmetro é a posição do índice do elemento, o segundo parâmetro são as coordenadas originais do elemento e o this na função aponta para o elemento atual.

Se o valor de top ou left no parâmetro for undefined, o valor correspondente não será modificado.

// Define as coordenadas de todos os elementos na coleção
$('.box').offset({ top: 20, left: 30 });

// Define as coordenadas dos elementos através do valor de retorno da função de callback
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

Retorna o elemento pai usado para posicionamento do primeiro elemento na coleção. Ou seja, o primeiro elemento pai cujo position seja relative ou absolute.

$('.box').offsetParent();

Obtém o deslocamento do primeiro elemento na coleção em relação ao seu elemento pai.

$('.box').position(); // { top: 20, left: 30 }

Encontra a coleção de nós descendentes especificados com base no seletor CSS em todos os elementos da coleção atual.

// Encontra a coleção de nós que contêm .box entre os descendentes de #box
$('#box').find('.box')

Obtém a coleção composta pelos elementos filhos diretos de todos os elementos na coleção atual.

Um seletor CSS pode ser passado como parâmetro para filtrar os elementos filhos.

// Encontra todos os elementos filhos diretos de #box
$('#box').children();

// Encontra a coleção de elementos que contêm .box entre todos os filhos diretos de #box
$('#box').children('.box')

Filtra os elementos que contêm o elemento filho especificado em todos os elementos da coleção atual.

Os parâmetros podem ser seletores CSS ou elementos DOM.

// Adiciona uma cor de fundo ao li que contém ul
$('li').has('ul').css('background-color', 'red');

Obtém a coleção composta pelos elementos pai diretos de todos os elementos na coleção atual.

Um seletor CSS pode ser passado como parâmetro para retornar apenas a coleção de elementos pai que correspondem a esse parâmetro.

// Retorna os elementos pai diretos do elemento .box
$('.box').parent();

// Retorna os elementos pai diretos do elemento .box que contêm a classe .parent
$('.box').parent('.parent');

Obtém a coleção composta pelos elementos ancestrais de todos os elementos na coleção atual.

Um seletor CSS pode ser passado como parâmetro para retornar apenas a coleção de elementos ancestrais que correspondem a esse parâmetro.

// Retorna todos os elementos ancestrais do elemento span
$('span').parents();

// Retorna todos os elementos ancestrais do elemento span que são elementos p
$('span').parents('p');

Obtém todos os elementos pai de cada elemento na coleção atual até encontrar um elemento que corresponda ao primeiro parâmetro (não incluindo o elemento correspondente).

O primeiro parâmetro pode ser um seletor CSS, elemento DOM ou objeto JQ.

Um segundo parâmetro pode ser passado, que deve ser um seletor CSS, indicando que apenas os elementos correspondentes a esse parâmetro serão retornados.

Se nenhum parâmetro for especificado, todos os elementos ancestrais serão correspondidos, o que tem o mesmo efeito que .parents().

// Obtém todos os elementos ancestrais do elemento .item
$('.item').parentsUntil();

// Procura todos os elementos pai do elemento .item até encontrar o elemento .parent
$('.item').parentsUntil('.parent');

// Obtém todos os elementos ancestrais do elemento .item que são elementos div até encontrar o elemento .parent
$('.item').parentsUntil('.parent', 'div');

Obtém a coleção composta pelo elemento irmão anterior imediato de todos os elementos na coleção atual.

Um seletor CSS pode ser passado como parâmetro para obter apenas a coleção de elementos irmãos que correspondem a esse parâmetro.

// Obtém a coleção do elemento anterior de .box
$('.box').prev();

// Obtém a coleção do elemento div anterior de .box
$('.box').prev('div');

Obtém a coleção composta por todos os elementos irmãos anteriores de todos os elementos na coleção atual.

Um seletor CSS pode ser passado como parâmetro para obter apenas a coleção de elementos irmãos que correspondem a esse parâmetro.

// Obtém todos os elementos irmãos anteriores de .box
$('.box').prevAll();

// Obtém todos os elementos irmãos anteriores de .box que contêm .selected
$('.box').prevAll('.selected');

Obtém todos os elementos irmãos anteriores de cada elemento na coleção atual até encontrar um elemento que corresponda ao primeiro parâmetro (não incluindo o elemento correspondente).

O primeiro parâmetro pode ser um seletor CSS, elemento DOM o objeto JQ.

Um segundo parâmetro pode ser passado, que deve ser um seletor CSS, indicando que apenas os elementos correspondentes a esse parâmetro serão retornados.

// Obtém todos os elementos irmãos anteriores de .box
$('.box').prevUntil();

// Obtém todos os elementos irmãos anteriores de .box até encontrar o elemento .until
$('.box').prevUntil('.until');

// Obtém os elementos div irmãos anteriores de .box até encontrar o elemento .until
$('.box').prevUntil('.until', 'div');

Obtém a coleção composta pelo próximo elemento irmão imediato de todos os elementos na coleção atual.

Um seletor CSS pode ser passado como parâmetro para obter apenas a coleção de elementos irmãos que correspondem a esse parâmetro.

// Obtém a coleção do próximo elemento de .box
$('.box').next();

// Obtém a coleção do próximo elemento div de .box
$('.box').next('div');

Obtém a coleção composta por todos os elementos irmãos posteriores de todos os elementos na coleção atual.

Um seletor CSS pode ser passado como parâmetro para obter apenas a coleção de elementos irmãos que correspondem a esse parâmetro.

// Obtém todos os elementos irmãos posteriores de .box
$('.box').nextAll();

// Obtém todos os elementos irmãos posteriores de .box que contêm .selected
$('.box').nextAll('.selected');

Obtém todos os elementos irmãos posteriores de cada elemento na coleção atual até encontrar um elemento que corresponda ao primeiro parâmetro (não incluindo o elemento correspondente).

O primeiro parâmetro pode ser um seletor CSS, elemento DOM ou objeto JQ.

Um segundo parâmetro pode ser passado, que deve ser um seletor CSS, indicando que apenas os elementos correspondentes a esse parâmetro serão retornados.

// Obtém todos os elementos irmãos posteriores de .box
$('.box').nextUntil();

// Obtém todos os elementos irmãos posteriores de .box até encontrar o elemento .until
$('.box').nextUntil('.until');

// Obtém os elementos div irmãos posteriores de .box até encontrar o elemento .until
$('.box').nextUntil('.until', 'div');

Corresponde para cima a partir do elemento atual e retorna o primeiro elemento que corresponde.

O parâmetro pode ser um seletor CSS, elemento DOM ou objeto JQ.

// Obtém o elemento .parent mais próximo entre os ancestrais do elemento .box
$('.box').closest('.parent');

Obtém os elementos irmãos de cada elemento na coleção atual.

Um seletor CSS pode ser passado como parâmetro para obter apenas os elementos irmãos que correspondem a esse parâmetro.

// Obtém todos os elementos irmãos do elemento .box
$('.box').siblings();

// Obtém todos os elementos irmãos do elemento .box que contêm .selected
$('.box').siblings('.selected');

Adiciona elementos à coleção atual.

O parâmetro pode ser uma string HTML, seletor CSS, objeto JQ, elemento DOM, array de elementos DOM ou NodeList.

// Adiciona elementos que contêm .selected à coleção atual
$('.box').add('.selected');

Remove todos os elementos filhos dentro do elemento atual.

$('.box').empty();

Remove os elementos da coleção atual do DOM.

Um seletor CSS pode ser passado como parâmetro para remover apenas os elementos que correspondem a esse parâmetro.

// Remove todos os elementos p
$('p').remove();

// Remove todos os elementos p que contêm .box
$('p').remove('.box');

Insere o conteúdo especificado no início do interior dos elementos da coleção atual.

O tipo de parâmetro pode ser uma string HTML, elemento DOM, array de elementos DOM ou objeto JQ. Suporta a passagem de vários parâmetros.

Uma função de callback que retorna uma string HTML, elemento DOM, array de elementos DOM ou objeto JQ também pode ser passada. O primeiro parâmetro da função é a posição do índice do elemento atual, o segundo parâmetro é o HTML original do elemento e o this na função aponta para o elemento atual.

Este método retorna a coleção original.

// Insere um elemento
$('<p>I would like to say: </p>').prepend('<b>Hello</b>');
// Resultado:<p><b>Hello</b>I would like to say: </p>

// Insere vários elementos
$('<p>I would like to say: </p>').prepend('<b>Hello</b>', '<b>World</b>');
// Resultado:<p><b>Hello</b><b>World</b>I would like to say: </p>

// Insere um elemento através da função de callback
$('<p>Hello</p>').prepend(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Resultado:<p><b>Hello0</b>Hello</p>

Acrescenta os elementos da coleção atual ao início do interior do elemento especificado.

O parâmetro pode ser um seletor CSS, string HTML, elemento DOM, array de elementos DOM ou objeto JQ.

Este método retorna a coleção original.

$('<div>Hello</div>').prependTo('<div>I would like to say: </div>');

// Resultado:[ <div><div>Hello</div>I would like to say: </div> ]

Insere o conteúdo especificado no final do interior dos elementos da coleção atual.

O tipo de parâmetro pode ser uma string HTML, elemento DOM, array de elementos DOM ou objeto JQ. Suporta a passagem de vários parâmetros.

Uma função de callback que retorna uma string HTML, elemento DOM, array de elementos DOM ou objeto JQ também pode ser passada. O primeiro parâmetro da função é a posição do índice do elemento atual, o segundo parâmetro é o HTML original do elemento e o this na função aponta para o elemento atual.

Este método retorna a coleção original.

// Insere um elemento
$('<p>I would like to say: </p>').append('<b>Hello</b>');
// Resultado:<p>I would like to say: <b>Hello</b></p>

// Insere vários elementos
$('<p>I would like to say: </p>').append('<b>Hello</b>', '<b>World</b>');
// Resultado:<p>I would like to say: <b>Hello</b><b>World</b></p>

// Insere um elemento através da função de callback
$('<p>Hello</p>').append(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Resultado:<p>Hello<b>Hello0</b></p>

Acrescenta os elementos da coleção atual ao final do interior do elemento especificado.

O parâmetro pode ser um seletor CSS, string HTML, elemento DOM, array de elementos DOM ou objeto JQ.

Este método retorna a coleção original.

$('<div>Hello</div>').appendTo('<div>I would like to say: </div>')
// Resultado:<div>I would like to say: <div>Hello</div></div>

Insere o conteúdo especificado após os elementos da coleção atual, como elementos irmãos.

O tipo de parâmetro pode ser uma string HTML, elemento DOM, array de elementos DOM ou objeto JQ. Suporta a passagem de vários parâmetros.

Uma função de callback que retorna uma string HTML, elemento DOM, array de elementos DOM ou objeto JQ também pode ser passada. O primeiro parâmetro da função é a posição do índice do elemento atual, o segundo parâmetro é o HTML original do elemento e o this na função aponta para o elemento atual.

Este método retorna a coleção original.

// Insere um elemento
$('<p>I would like to say: </p>').after('<b>Hello</b>')
// Resultado:<p>I would like to say: </p><b>Hello</b>

// Insere vários elementos
$('<p>I would like to say: </p>').after('<b>Hello</b>', '<b>World</b>')
// Resultado:<p>I would like to say: </p><b>Hello</b><b>World</b>

// Insere um elemento através da função de callback
$('<p>Hello</p>').after(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Resultado:<p>Hello</p><b>Hello0</b>

Insere os elementos da coleção atual após o elemento de destino, como elementos irmãos.

Se os elementos na coleção atual já existirem na página, eles serão movidos em vez de copiados. Se houver vários destinos, os elementos na coleção atual serão clonados e adicionados após cada elemento de destino.

Uma string HTML, seletor CSS, elemento DOM, array de elementos DOM ou objeto JQ pode ser passado como parâmetro para especificar o elemento de destino.

$('<b>Hello</b>').insertAfter('<p>I would like to say: </p>');
// Resultado:<p>I would like to say: </p><b>Hello</b>

Insere o conteúdo especificado antes dos elementos da coleção atual, como elementos irmãos.

O tipo de parâmetro pode ser uma string HTML, elemento DOM, array de elementos DOM ou objeto JQ. Suporta a passagem de vários parâmetros.

Uma função de callback que retorna uma string HTML, elemento DOM, array de elementos DOM ou objeto JQ também pode ser passada. O primeiro parâmetro da função é a posição do índice do elemento atual, o segundo parâmetro é o HTML original do elemento e o this na função aponta para o elemento atual.

Este método retorna a coleção original.

// Insere um elemento
$('<p>I would like to say: </p>').before('<b>Hello</b>')
// Resultado:<b>Hello</b><p>I would like to say: </p>

// Insere vários elementos
$('<p>I would like to say: </p>').before('<b>Hello</b>', '<b>World</b>')
// Resultado:<b>Hello</b><b>World</b><p>I would like to say: </p>

// Insere um elemento através da função de callback
$('<p>Hello</p>').before(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Resultado:<b>Hello0</b><p>Hello</p>

Insere os elementos da coleção atual antes do elemento de destino, como elementos irmãos.

Se os elementos na coleção atual já existirem na página, eles serão movidos em vez de copiados. Se houver vários destinos, os elementos na coleção atual serão clonados e adicionados após cada elemento de destino.

Uma string HTML, seletor CSS, elemento DOM, array de elementos DOM ou objeto JQ pode ser passado como parâmetro para especificar o elemento de destino.

$('<p>I would like to say: </p>').insertBefore('<b>Hello</b>');
// Resultado:<p>I would like to say: </p><b>Hello</b>

Substitui os elementos na coleção atual pelos elementos especificados.

O parâmetro pode ser uma string HTML, elemento DOM, array de elementos DOM ou objeto JQ.

Uma função de callback que retorna uma string HTML, elemento DOM, array de elementos DOM ou objeto JQ também pode ser passada. O primeiro parâmetro da função é a posição do índice do elemento atual, o segundo parâmetro é o HTML original do elemento e o this na função aponta para o elemento atual.

Este método retorna a coleção original, ou seja, a coleção substituída.

// Substitui todos os elementos .box por <p>Hello</p>
$('.box').replaceWith('<p>Hello</p>');

// Substitui todos os elementos .box pelo valor de retorno da função de callback
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

Substitui os elementos especificados pelos elementos na coleção atual.

O parâmetro é um seletor CSS, elemento DOM, array de elementos DOM ou objeto JQ.

Este método retorna a coleção original, ou seja, a coleção de elementos usados para a substituição.

// ${$t().a379}
$('.new').replaceAll('.box');

Copia todos os elementos na coleção através de uma clonagem profunda.

Copia todos os elementos na coleção através do método nativo cloneNode de clonagem profunda. Este método não copiará dados e manipuladores de eventos para os novos elementos. Isso difere do jQuery, onde o jQuery decide se deve copiar dados e manipuladores de eventos através de parâmetros.

$('body').append($("#box").clone())

Combina os valores dos elementos do formulário em um array de pares chave-valor de name e value.

Este método pode operar em elementos de formulário individuais ou em todo o formulário <form>

$('form').serializeArray();
// [
//   { "name": "golang", "value":"456" },
//   { "name": "name", "value": "mdui" },
//   { "name": "password", "value": "" }
// ]

Serializa os valores dos elementos do formulário.

$('form').serialize();
// golang=456&name=mdui&password=

Vincula uma função de manipulador de eventos a eventos específicos para cada elemento na coleção. Veja os exemplos abaixo para uso detalhado:

// Vicular evento de clique
$('.box').on('click', function (e) {
  console.log('Elemento .box clicado');
});

// Vincular vários eventos
$('.box').on('click focus', function (e) {
  console.log('Tanto o evento click quanto o focus dispararão esta função');
});

// Delegação de eventos
$(document).on('click', '.box', function (e) {
  console.log('Esta função será disparada quando .box for clicado');
});

// Vincular vários eventos e funções de manipulador de eventos simultaneamente
$('.box').on({
  'click': function (e) {
    console.log('Evento click disparado');
  },
  'focus': function (e) {
    console.log('Evento focus disparado');
  }
});

// Passar parâmetros
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Elemento .box clicado e parâmetros passados para a função de manipulador de eventos');
  // e._data é {key1: 'value1', key2: 'value2'}
});

// Vincular vários eventos e funções de manipulador de eventos simultaneamente e passar parâmetros
$('.box').on({
  'click': function (e) {
    console.log('Evento click disparado');
    // e._data é {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Evento focus disparado');
    // e._data é {key1: 'value1', key2: 'value2'}
  }
}, { key1: 'value1', key2: 'value2' });

// Vincular evento através de delegação de eventos e passar parâmetros
$(document).on('click', '.box', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Elemento .box clicado e parâmetros passados para a função de manipulador de eventos');
  // e._data é {key1: 'value1', key2: 'value2'}
});

// Vincular simultaneamente vários eventos e funções de manipulador de eventos através de delegação de eventos
$(document).on({
  'click': function (e) {
    console.log('Evento click disparado');
  },
  'focus': function (e) {
    console.log('Evento focus disparado');
  }
}, '.box');

// Vincular simultaneamente vários eventos e funções de manipulador de eventos através de delegação de eventos e passar parâmetros
$(document).on({
  'click': function (e) {
    console.log('Evento click disparado');
    // e._data é {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Evento focus disparado');
    // e._data é {key1: 'value1', key2: 'value2'}
  }
}, '.box', { key1: 'value1', key2: 'value2' });

// Obter parâmetros do evento
$('.box').on('click', function (e, data) {
  // data é igual a e._detail
});

// Nomes de eventos suportam o uso de namespaces
$('.box').on('click.myPlugin', function () {
  console.log('Elemento .box clicado');
});

Vincula uma função de manipulador de eventos a eventos específicos para cada elemento correspondente. Mas o evento será disparado apenas uma vez.

O uso deste método é o mesmo que .on(), portanto não serão fornecidos mais exemplos.

Desvincula eventos vinculados para cada elemento na coleção. Veja os exemplos abaixo para uso detalhado:

// Desvincular todas as funções de manipulador de eventos vinculadas
$('.box').off();

// Desvincular eventos especificados
$('.box').off('click');

// Desvincular vários eventos vinculados simultaneamente
$('.box').off('click focus');

// Desvincular funções de manipulador de eventos especificados vinculadas
$('.box').off('click', callback);

// Desvincular eventos vinculados através de delegação de eventos
$(document).off('click', '.box');

// Desvincular funções de manipulador de eventos específicas vinculadas através de delegação de eventos
$(document).off('click', '.box', callback);

// Desvincular várias funções de manipulador de eventos simultaneamente
$('.box').off({
  'click': callback1,
  'focus': callback2,
});

// Desvincular simultaneamente várias funções de manipulador de eventos vinculadas através de delegação de eventos
$(document).off({
  'click': callback1,
  'focus': callback2,
}, '.box');

// Nomes de eventos suportam o uso de namespaces. O exemplo abaixo desvinculará todos os eventos que terminam em .myPlugin
$(document).off('.myPlugin');

Dispara o evento especificado. Veja os exemplos abaixo para uso detalhado:

// Disparar o evento especificado
$('.box').trigger('click');

// Passar parâmetros ao disparar o evento
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

Define os parâmetros de configuração global para requisições Ajax.

$.ajaxSetup({
  // Por padrão, o disparo de eventos AJAX globais é proibido
  global: false,

  // Por padrão, usa-se a requisição POST
  method: 'POST'
});

Veja a lista detalhada de parâmetros abaixo em Parâmetros AJAX.

Envia uma requisição AJAX e retorna uma Promise.

$.ajax({
  method: 'POST',
  url: './test.php',
  data: {
    key1: 'val1',
    key2: 'val2'
  },
  success: function (data) {
    console.log(data);
  }
});

Veja a lista detalhada de parâmetros abaixo em Parâmetros AJAX.

Eventos AJAX globais.

Função executada quando uma requisição AJAX começa.

$(document).ajaxStart(function (event, xhr, options) {
  // xhr: objeto XMLHttpRequest
  // options: parâmetros de configuração da requisição AJAX
});

Eventos AJAX globais.

Função executada quando uma requisição AJAX é bem-sucedida.

$(document).ajaxSuccess(function (event, xhr, options, data) {
  // xhr: objeto XMLHttpRequest
  // options: parâmetros de configuração da requisição AJAX
  // data: dados retornados pela requisição AJAX
});

Eventos AJAX globais.

Função executada quando ocorre um erro na requisição AJAX.

$(document).ajaxError(function (event, xhr, options) {
  // xhr: objeto XMLHttpRequest
  // options: parâmetros de configuração da requisição AJAX
});

Eventos AJAX globais.

Função executada quando uma requisição AJAX é concluída.

$(document).ajaxComplete(function (event, xhr, options) {
  // xhr: objeto XMLHttpRequest
  // options: parâmetros de configuração da requisição AJAX
});

Método da requisição.

Inclui: GET, POST, PUT, PATCH, HEAD, OPTIONS, DELETE

Dados adicionados aos Headers. Este valor pode ser sobrescrito na função de callback beforeSend.

Campos com valores string ou null serão enviados, campos com valor undefined serão removidos.

Dados definidos no objeto XMLHttpRequest.

$.ajax({
  url: 'Uma URL de domínio cruzado',
  xhrFields: {
    withCredentials: true
  }
});

Objeto composto por códigos de status HTTP e funções.

$.ajax({
  statusCode: {
    404: function (xhr, textStatus) {
      alert('Chamado quando o código de status retornado for 404');
    },
    200: function (data, textStatus, xhr) {
      alert('Chamado quando o código de status retornado for 200');
    }
  }
});

Se o código de status estiver entre 200 - 299 ou for 304, a requisição é considerada bem-sucedida e os parâmetros da função são os mesmos do callback success; caso contrário, a requisição falha e os parâmetros da função são os mesmos do callback error.

Tipo de dados retornados pelo servidor.

Inclui: text, json

Chamado antes do envio da requisição. Se retornar false, a requisição AJAX será cancelada.

$.ajax({
  beforeSend: function (xhr) {
    // xhr: objeto XMLHttpRequest
  }
});

Chamado após o sucesso da requisição.

$.ajax({
  success: function (data, textStatus, xhr) {
    // data: dados retornados pela requisição AJAX
    // textStatus: string contendo o código de sucesso
    // xhr: objeto XMLHttpRequest
  }
});

Chamado quando a requisição falha.

$.ajax({
  error: function (xhr, textStatus) {
    // xhr: objeto XMLHttpRequest
    // textStatus: string contendo o código de sucesso
  }
});

Chamado após a conclusão da requisição.

$.ajax({
  complete: function (xhr, textStatus) {
    // xhr: objeto XMLHttpRequest
    // textStatus: string contendo o código de sucesso
  }
});

Força a repintura do elemento atual.

$('.box').reflow();

Define a propriedade transition-duration do elemento atual.

Pode ser um valor de tempo com unidade ou sem unidade. Se não houver unidade, ms será adicionado automaticamente como unidade.

$('.box').transition(100);

Adiciona um callback de evento transitionend no elemento atual.

O parâmetro da função de callback é o objeto de evento transitionend e this na função aponta para o elemento atual.

$('.box').transitionEnd(function () {
  console.log('O evento transitionend do elemento .box foi disparado');
})

Define a propriedade transform do elemento atual.

$('.box').transform('rotate(90deg)')

Define a propriedade transform-origin do elemento atual.

$('.box').transformOrigin('top center')

Executa as funções de inicialização registradas no elemento atual e seus elementos filhos.

$('[mdui-collapse]').mutation()

Cria e exibe uma sobreposição (overlay), retornando o objeto JQ da camada de sobreposição.

Um parâmetro inteiro pode ser passado para representar o estilo z-index da camada de sobreposição; o padrão é 2000.

$.showOverlay();

Oculta a camada de sobreposição.

Se $.showOverlay() foi chamado várias vezes para exibir a camada de sobreposição, $.hideOverlay() também deve ser chamado o mesmo número de vezes para ocultá-la. É possível forçar a ocultação da camada de sobreposição passando o parâmetro true.

$.hideOverlay();

Bloqueia a página, impedindo a rolagem.

$.lockScreen();

Desbloqueia a página.

Se $.lockScreen() foi chamado várias vezes para bloquear a página, $.unlockScreen() também deve ser chamado o mesmo número de vezes para desbloqueá-la. É possível forçar o desbloqueio da página passando o parâmetro true.

$.unlockScreen();

Throttle (limitação) de função.

Recebe uma função como parâmetro; o primeiro parâmetro é a função a ser executada e o segundo parâmetro é o tempo de atraso em milissegundos.

$.throttle(function () {
  console.log('Esta função será executada no máximo uma vez a cada 100ms');
}, 100)

Gera um ID globalmente exclusivo (guid).

$.guid();

Um parâmetro pode ser passado. Se o guid correspondente a esse valor de parâmetro não existir, um novo guid será gerado e retornado; se o guid correspondente a esse parâmetro já existir, o guid existente será retornado diretamente.

// As duas linhas de código abaixo retornam o mesmo valor
$.guid('test');
$.guid('test');