Librería JavaScript

Este método tiene varios usos:

Se puede pasar un selector CSS como parámetro para devolver un objeto JQ que contiene los elementos coincidentes. Este método se implementa mediante querySelectorAll.

$('.box')

Se pueden pasar elementos DOM, arrays, NodeList u objetos JQ para devolver un objeto JQ que contiene los elementos especificados.

$(document)

Se puede pasar una cadena HTML para devolver un objeto JQ que contiene el DOM creado a partir del HTML.

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

Se puede pasar una función, que se llamará después de que el DOM se haya cargado por completo.

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

Si solo se pasa un objeto, las propiedades de ese objeto se fusionan en el objeto JQ, lo que equivale a añadir nuevas funciones bajo el espacio de nombres de JQ.

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

// Entonces el método personalizado se puede llamar así
$.customFunc()

Si se pasan dos o más objetos, las propiedades de todos ellos se añaden al primero y se devuelve el objeto fusionado.

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

// En este caso, tanto el primer objeto como el valor de retorno son { key1: val1, key2: val2, key3: val3 }

Extender métodos en la cadena de prototipos de JQ.

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

// Entonces el método extendido se puede usar así
$(document).customFunc()

Serializa un objeto o un array y devuelve una cadena adecuada 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

Si el parámetro es un array, debe tener el mismo formato que el valor de retorno de .serializeArray():

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

Recorre un array u objeto. El valor devuelto es el primer parámetro, es decir, el array u objeto que se está recorriendo.

El primer parámetro de la función es la posición del índice del array o la clave del objeto; el segundo es el valor correspondiente en el array u objeto.

El this de la función de callback apunta al valor correspondiente en el array u objeto. Si la función devuelve false, el recorrido se detiene.

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

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

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

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

Añade los elementos del segundo array al primero y devuelve el array fusionado.

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']

Elimina los elementos duplicados del array.

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

Recorre un array u objeto y devuelve un nuevo array compuesto por los valores devueltos por la función.

El primer parámetro de la función es el valor correspondiente en el array u objeto, y el segundo es la posición del índice del array o la clave del objeto.

La función puede devolver cualquier valor. Si devuelve un array, se aplanará; si devuelve null o undefined, se ignorará. El this dentro de la función apunta al objeto window.

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

// Cuando la función de callback devuelve un array, se aplanará
var result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

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

Determina si un nodo padre contiene un nodo hijo y devuelve un valor booleano.

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

Devuelve true si al menos un elemento de la colección coincide con el parámetro; de lo contrario, devuelve false.

El parámetro puede ser un selector CSS, un elemento DOM, un array de elementos DOM, un objeto JQ o una función de callback.

Cuando el parámetro es una función, su primer parámetro es la posición del índice, el segundo es el elemento actual y this apunta al elemento actual. Si la función devuelve true, indica coincidencia; si devuelve false, indica que no hay coincidencia.

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

// Determinar por el valor de retorno de la función de callback
$(document).is(function (index, element) {
  return element === document;
});
// true

Devuelve el número de elementos de la colección actual.

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

Recorre la colección actual y ejecuta una función para cada elemento. Si la función devuelve false, el recorrido finaliza.

El primer parámetro de la función es la posición del índice del elemento, y el segundo es el elemento actual. El this dentro de la función apunta al elemento actual.

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

Recorre la colección actual y ejecuta una función para cada elemento, devolviendo una nueva colección compuesta por los valores de retorno de la función. Si la función devuelve null o undefined, se filtra.

El primer parámetro de la función es la posición del índice del elemento, y el segundo es el elemento actual. El this dentro de la función apunta al elemento actual.

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

// result es un objeto JQ compuesto por los valores de los elementos coincidentes

Devuelve una colección que solo contiene el elemento en la posición de índice especificada.

$('div').eq(0); // Devuelve un objeto JQ que solo contiene el primer elemento
$('div').eq(-1); // Devuelve un objeto JQ que solo contiene el último elemento
$('div').eq(-2); // Devuelve un objeto JQ que solo contiene el penúltimo elemento

Devuelve una colección que solo contiene el primer elemento.

$('div').first(); // Devuelve un objeto JQ que solo contiene el primer div

Devuelve una colección que solo contiene el último elemento.

$('div').last(); // Devuelve un objeto JQ que solo contiene el último div

Devuelve el elemento en la posición de índice especificada. Si no se pasa ningún parámetro, devuelve un array con todos los elementos de la colección.

$('div').get(); // Devuelve un array con todos los elementos div
$('div').get(0); // Devuelve el primer elemento div
$('div').get(-1); // Devuelve el último elemento div

Si no se pasa ningún parámetro, devuelve la posición de índice del primer elemento de la colección respecto a sus hermanos.

Si se pasa un selector CSS como parámetro, devuelve la posición de índice del primer elemento de la colección respecto a los elementos que coinciden con el selector CSS.

Si se pasa un elemento DOM, devuelve el índice de ese elemento DOM dentro de la colección.

Si se pasa un objeto JQ, devuelve la posición de índice del primer elemento de ese objeto dentro de la colección actual.

<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

Devuelve un subconjunto de la colección actual.

El primer parámetro es la posición inicial del subconjunto y el segundo es la posición final; si no se pasa el segundo parámetro, se incluyen todos los elementos desde la posición inicial hasta el final.

// Devuelve todos los elementos después del tercer elemento (incluido)
$('div').slice(3);

// Devuelve los elementos entre el tercero y el quinto (incluido el tercero, excluido el quinto)
$('div').slice(3, 5);

Filtra los elementos que coinciden con la expresión especificada de la colección actual. El parámetro puede ser un selector CSS, un elemento DOM, un array de elementos DOM o una función de callback.

Cuando el parámetro es una función, su primer parámetro es la posición del índice, el segundo es el elemento actual y this apunta al elemento actual. Si la función devuelve true, el elemento actual se conserva; si devuelve false, el elemento actual se elimina.

// Filtra todos los elementos div que contienen .box
$('div').filter('.box');

// Filtra todas las opciones seleccionadas
$('#select option').filter(function (index, element) {
  return element.selected;
});

Filtra de la colección actual los elementos que no coinciden con la expresión especificada. El parámetro puede ser un selector CSS, un elemento DOM, un array de elementos DOM o una función de callback.

Cuando el parámetro es una función, su primer parámetro es la posición del índice, el segundo es el elemento actual y this apunta al elemento actual. Si la función devuelve true, el elemento actual se elimina; si devuelve false, el elemento actual se conserva.

// Filtra todos los elementos div que no contienen la clase .box
$('div').not('.box');

// Filtra todas las opciones no seleccionadas
$('#select option').not(function (index, element) {
  return element.selected;
});

Determina si el primer elemento de la colección contiene la clase CSS especificada.

// Determina si el primer elemento div contiene .item
$('div').hasClass('item')

Añade clases CSS a cada elemento de la colección; varios nombres de clase pueden separarse con espacios.

También se puede pasar una función de callback que devuelva nombres de clase CSS. El primer parámetro de la función es la posición del índice, el segundo es el nombre CSS original del elemento y this apunta al elemento actual.

// Añade .item a todos los elementos div
$('div').addClass('item')

// Añade .item1 y .item2 a todos los elementos div
$('div').addClass('item1 item2')

// Añade las clases CSS devueltas por la función de callback a todos los elementos div
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
})

Elimina clases CSS de los elementos de la colección; varios nombres de clase pueden separarse con espacios.

También se puede pasar una función de callback que devuelva nombres de clase CSS. El primer parámetro de la función es la posición del índice, el segundo es el nombre CSS original del elemento y this apunta al elemento actual.

Si no se pasa ningún parámetro, se elimina directamente el atributo class del elemento.

// Elimina .item de todos los elementos div
$('div').removeClass('item')

// Elimina .item1 y .item2 de todos los elementos div
$('div').removeClass('item1 item2')

// Elimina las clases CSS devueltas por la función de callback de todos los elementos div
$('div').removeClass(function (index, currentClassName) {
  return 'item';
})

// Elimina directamente el atributo class
$('div').removeClass()

Alterna una clase CSS en los elementos de la colección: si la clase está presente, se elimina; si no, se añade. Varios nombres de clase pueden separarse con espacios.

También se puede pasar una función de callback que devuelva nombres de clase CSS. El primer parámetro de la función es la posición del índice, el segundo es el nombre CSS original del elemento y this apunta al elemento actual.

// Alterna .item en todos los elementos div
$('div').toggleClass('item')

// Alterna .item1 y .item2 en todos los elementos div
$('div').toggleClass('item1 item2')

// Alterna las clases CSS devueltas por la función de callback en todos los elementos div
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
})

Obtiene el valor del atributo del primer elemento de la colección.

// Obtiene el valor del atributo del primer elemento
$('input').prop('checked');

También puede establecer valores de atributo para todos los elementos de la colección.

El valor del atributo puede ser el valor devuelto por una función de callback. El primer parámetro de la función es la posición del índice del elemento, el segundo es el valor original del atributo en el elemento y this dentro de la función apunta al elemento actual.

Si el valor del atributo o el valor devuelto por la función de callback es void o undefined, el atributo original no se modificará.

También se pueden establecer varios atributos a la vez pasando un objeto.

// Establece valores de atributo para todos los elementos seleccionados
$('input').prop('checked', true);

// Establece valores de atributo mediante el valor devuelto por la función de callback
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

// Establece varios valores de atributo para un elemento a la vez
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  }
});

Elimina los valores de atributo especificados de todos los elementos de la colección.

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

Obtiene el valor de la propiedad del primer elemento de la colección.

// Obtiene el valor de la propiedad del primer elemento
$('div').attr('username');

También puede establecer valores de propiedad para todos los elementos de la colección.

El valor de la propiedad puede ser el valor devuelto por una función de callback. El primer parámetro de la función es la posición del índice del elemento, el segundo es el valor original de la propiedad en el elemento y this dentro de la función apunta al elemento actual.

Si el valor de la propiedad o el valor devuelto por la función de callback es void o undefined, la propiedad original no se modificará. Si el valor de la propiedad o el valor devuelto por la función de callback es null, se eliminará la propiedad especificada.

También se pueden establecer varias propiedades a la vez pasando un objeto.

// Establece valores de propiedad para todos los elementos seleccionados
$('div').attr('username', 'mdui');

// Establece valores de propiedad mediante el valor devuelto por la función de callback
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

// Establece varios valores de propiedad para un elemento a la vez
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  }
});

Elimina los valores de propiedad especificados de todos los elementos de la colección; varios nombres de propiedad pueden separarse con espacios.

// Elimina una propiedad de todos los elementos de la colección
$('div').removeAttr('username');

// Elimina varias propiedades de todos los elementos de la colección
$('div').removeAttr('username lastname');

Obtiene el valor del primer elemento de la colección.

Si el elemento es <select multiple="multiple">, se devolverá un array con cada opción seleccionada.

// Obtiene el valor del primer elemento seleccionado
$('#input').val();

También puede establecer valores para todos los elementos de la colección.

El valor puede ser una cadena, un número, un array de cadenas o una función de callback.

Si el valor es una función de callback, su primer parámetro es la posición del índice del elemento, el segundo es el valor original del elemento y this en la función apunta al elemento actual.

Si el elemento es <input type="checkbox">, <input type="radio"> o <option>, el valor del elemento o el valor devuelto por la función puede ser un array; en este caso, los elementos con valores incluidos en el array se seleccionarán y los que no estén en él se deseleccionarán.

Si el valor o el valor devuelto por la función es undefined, el valor del elemento se establecerá como vacío.

// Establece el valor de los elementos seleccionados
$('#input').val('input value');

// Establece el valor del elemento mediante el valor devuelto por la función de callback
$('#input').val(function (index, oldValue) {
  return 'new value';
});

Obtiene el contenido de texto de todos los elementos de la colección (incluidos sus elementos descendientes)

// Obtiene el texto de todos los elementos .box
$('.box').text();

También puede establecer el texto para todos los elementos de la colección.

El valor establecido puede ser una cadena, un número, un booleano o una función de callback.

Si es una función de callback, el primer parámetro es la posición del índice del elemento, el segundo es el contenido de texto original del elemento y this dentro de la función apunta al elemento actual.

Si el valor o el valor devuelto por la función de callback es undefined, el texto del elemento correspondiente no se modificará.

// Establece el contenido de texto de los elementos seleccionados
$('.box').text('text content');

// Establece el contenido de texto de los elementos mediante el valor devuelto por la función de callback
$('.box').text(function (index, oldTextContent) {
  return 'new text content';
});

Obtiene el contenido HTML del primer elemento de la colección.

// Obtiene el contenido HTML del primer elemento .box
$('.box').html();

También puede establecer el contenido HTML para todos los elementos de la colección.

El valor establecido puede ser una cadena HTML, un elemento DOM o una función de callback.

Si es una función de callback, el primer parámetro es la posición del índice del elemento, el segundo es el contenido HTML original del elemento y this dentro de la función apunta al elemento actual.

Si el valor o el valor devuelto por la función es undefined, el HTML del elemento correspondiente no se modificará.

// Establece el HTML de los elementos seleccionados
$('.box').html('<div>new html content</div>');

// Establece el contenido HTML de los elementos mediante el valor devuelto por la función de callback
$('.box').html(function (index, oldHTMLContent) {
  return '<div>new html content</div>';
});

Lee o almacena datos en elementos especificados.

Al almacenar datos, si el valor es undefined, equivale a leer los datos correspondientes del elemento. Es decir, $.data(element, 'key', undefined) es equivalente a $.data(element, 'key').

Nota: este método no recupera los atributos data-* del elemento.

// Almacena datos en el elemento especificado y devuelve el valor almacenado
$.data(document.body, 'layout', 'dark'); // Devuelve dark

// Almacena varios datos en el elemento especificado a la vez
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
});

// Obtiene los datos almacenados en el elemento especificado
$.data(document.body, 'layout'); // Devuelve dark

// Obtiene todos los datos almacenados en el elemento especificado
$.data(document.body); // Devuelve { layout: 'dark', primary: 'indigo', accent: 'pink' }

Elimina los datos almacenados en elementos especificados.

Varias claves pueden separarse con espacios o representarse mediante un array de varias claves. Si no se especifica ninguna clave, se eliminarán todos los datos del elemento.

// Elimina los datos con la clave "name" del elemento
$.removeData(document.body, 'name');

// Elimina los datos con las claves "name1" y "name2" del elemento. Los siguientes dos métodos son equivalentes:
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

// Elimina todos los datos almacenados en el elemento
$.removeData(document.body);

Lee o almacena datos en los elementos de la colección actual.

Al almacenar datos, si el valor es undefined, no se almacenará nada.

Nota: los datos recuperados por este método incluirán los atributos data-* de los elementos.

// Almacena datos en los elementos de la colección actual
$('.box').data('layout', 'dark');

// Almacena varios datos en los elementos de la colección actual a la vez
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

// Obtiene los datos especificados almacenados en el primer elemento de la colección actual
$('.box').data('layout'); // Devuelve dark

// Obtiene todos los datos almacenados en el primer elemento de la colección actual
$('.box').data(); // Devuelve { layout: 'dark', primary: 'indigo', accent: 'pink' }

Elimina los datos almacenados en los elementos de la colección actual.

Varias claves pueden separarse con espacios o representarse mediante un array de varias claves. Si no se especifica ninguna clave, se eliminarán todos los datos de los elementos.

Nota: este método solo elimina los datos establecidos mediante el método .data() y no elimina los datos de los atributos data-*.

// Elimina los datos con la clave "name"
$('.box').removeData('name');

// Elimina los datos con las claves "name1" y "name2". Los siguientes dos métodos son equivalentes:
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// Elimina todos los datos almacenados en el elemento
$('.box').removeData();

Obtiene el valor de la propiedad CSS del primer elemento de la colección.

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

También puede establecer valores de propiedad CSS para todos los elementos de la colección.

El valor de la propiedad puede ser una cadena, un número o una función de callback que devuelva una cadena o un número.

Si el valor de la propiedad es una función de callback, su primer parámetro es la posición del índice del elemento, el segundo es el valor original de la propiedad CSS del elemento y this en la función apunta al elemento actual.

Si el valor de la propiedad o la función de callback devuelve void, undefined o null, el valor de la propiedad CSS del elemento actual no se modificará.

Si el valor de la propiedad o la función de callback devuelve un número, se añadirá px como unidad. Si la propiedad no puede usar px como unidad, el valor se convertirá directamente a cadena.

También se pueden establecer varias propiedades CSS a la vez pasando un objeto de pares clave-valor.

// Establece valores de estilo para todos los elementos de la colección
$('.box').css('color', 'red')

// Establece valores de estilo para todos los elementos mediante el valor devuelto por la función de callback
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

// Establece varios estilos a la vez pasando un objeto
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});

Obtiene el ancho (en píxeles) del primer elemento de la colección, excluyendo padding, border y margin.

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

También puede establecer el ancho de todos los elementos de la colección (excluyendo el ancho de padding, border y margin).

El valor puede ser una cadena con unidad, un número o una función de callback que devuelva una cadena con unidad o un número.

El primer parámetro de la función de callback es la posición del índice del elemento, el segundo es el valor original del ancho del elemento y this en la función apunta al elemento actual.

Si el valor o el valor devuelto por la función de callback es un número, se añadirá automáticamente px como unidad.

Si el valor o el valor devuelto por la función de callback es null o undefined, el ancho del elemento no se modificará.

// Establece el ancho de todos los elementos de la colección
$('.box').width('20%');

// Cuando el valor es un número, la unidad por defecto es px
$('.box').width(10);

// Establece la longitud mediante el valor devuelto por la función de callback
$('.box').width(function (index, oldWidth) {
  return 10;
});

Obtiene la altura (en píxeles) del primer elemento de la colección, excluyendo padding, border y margin.

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

También puede establecer la altura de todos los elementos de la colección (excluyendo la altura de padding, border y margin).

El valor puede ser una cadena con unidad, un número o una función de callback que devuelva una cadena con unidad o un número.

El primer parámetro de la función de callback es la posición del índice del elemento, el segundo es el valor original de la altura del elemento y this en la función apunta al elemento actual.

Si el valor o el valor devuelto por la función de callback es un número, se añadirá automáticamente px como unidad.

Si el valor o el valor devuelto por la función de callback es null o undefined, la altura del elemento no se modificará.

// Establece la altura de todos los elementos de la colección
$('.box').height('20%');

// Cuando el valor es un número, la unidad por defecto es px
$('.box').height(10);

// Establece la altura mediante el valor devuelto por la función de callback
$('.box').height(function (index, oldHeight) {
  return 10;
});

Obtiene el ancho (en píxeles) del primer elemento de la colección, incluyendo padding pero excluyendo border y margin.

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

También puede establecer el ancho de todos los elementos de la colección (incluyendo padding pero excluyendo border y margin).

El valor puede ser una cadena con unidad, un número o una función de callback que devuelva una cadena con unidad o un número.

El primer parámetro de la función de callback es la posición del índice del elemento, el segundo es el valor original del ancho del elemento y this en la función apunta al elemento actual.

Si el valor o el valor devuelto por la función de callback es un número, se añadirá automáticamente px como unidad.

Si el valor o el valor devuelto por la función de callback es null o undefined, el ancho del elemento no se modificará.

// Establece el ancho de todos los elementos de la colección
$('.box').innerWidth('20%');

// Cuando el valor es un número, la unidad por defecto es px
$('.box').innerWidth(10);

// Establece el ancho mediante el valor devuelto por la función de callback
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

Obtiene la altura (en píxeles) del primer elemento de la colección, incluyendo padding pero excluyendo border y margin.

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

También puede establecer la altura de todos los elementos de la colección (incluyendo padding pero excluyendo border y margin).

El valor puede ser una cadena con unidad, un número o una función de callback que devuelva una cadena con unidad o un número.

El primer parámetro de la función de callback es la posición del índice del elemento, el segundo es el valor original de la altura del elemento y this en la función apunta al elemento actual.

Si el valor o el valor devuelto por la función de callback es un número, se añadirá automáticamente px como unidad.

Si el valor o el valor devuelto por la función de callback es null o undefined, la altura del elemento no se modificará.

// Establece la altura de todos los elementos de la colección
$('.box').innerHeight('20%');

// Cuando el valor es un número, la unidad por defecto es px
$('.box').innerHeight(10);

// Establece la altura mediante el valor devuelto por la función de callback
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});

Obtiene el ancho (en píxeles) del primer elemento de la colección, incluyendo padding y border pero excluyendo margin. Se puede pasar el parámetro true para incluir el ancho de margin.

// Ancho incluyendo padding y border
$('.box').outerWidth();

// Ancho incluyendo padding, border y margin
$('.box').outerWidth(true);

También puede establecer el ancho de todos los elementos de la colección (incluyendo padding y border pero excluyendo margin; el segundo parámetro puede ser true para incluir el ancho de margin).

El primer parámetro puede ser una cadena con unidad, un número o una función de callback que devuelva una cadena con unidad o un número.

El primer parámetro de la función de callback es la posición del índice del elemento, el segundo es el ancho original del elemento y this en la función apunta al elemento actual.

Si el valor o el valor devuelto por la función de callback es un número, se añadirá automáticamente px como unidad.

Si el valor o el valor devuelto por la función de callback es null o undefined, el ancho del elemento no se modificará.

// Establece el ancho de todos los elementos de la colección
$('.box').outerWidth('20%');

// Cuando el valor es un número, la unidad por defecto es px
$('.box').outerWidth(10);

// Si el segundo parámetro es true, el ancho incluirá margin
$('.box').outerWidth(10, true);

// Establece el ancho mediante el valor devuelto por la función de callback
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});

Obtiene la altura (en píxeles) del primer elemento de la colección, incluyendo padding y border pero excluyendo margin. Se puede pasar el parámetro true para incluir la altura de margin.

// Altura incluyendo padding y border
$('.box').outerHeight();

// Altura incluyendo padding, border y margin
$('.box').outerHeight(true);

También puede establecer la altura de todos los elementos de la colección (incluyendo padding y border pero excluyendo margin; el segundo parámetro puede ser true para incluir la altura de margin).

El primer parámetro puede ser una cadena con unidad, un número o una función de callback que devuelva una cadena con unidad o un número.

El primer parámetro de la función de callback es la posición del índice del elemento, el segundo es la altura original del elemento y this en la función apunta al elemento actual.

Si el valor o el valor devuelto por la función de callback es un número, se añadirá automáticamente px como unidad.

Si el valor o el valor devuelto por la función de callback es null o undefined, la altura del elemento no se modificará.

// Establece la altura de todos los elementos de la colección
$('.box').outerHeight('20%');

// Cuando el valor es un número, la unidad por defecto es px
$('.box').outerHeight(10);

// Si el segundo parámetro es true, la altura incluirá margin
$('.box').outerHeight(10, true);

// Establece la altura mediante el valor devuelto por la función de callback
$('.box').outerHeight(function (index, oldWidth) {
  return 10;
});

Oculta todos los elementos de la colección.

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

Muestra todos los elementos de la colección.

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

Alterna el estado de visualización de todos los elementos de la colección.

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

Obtiene las coordenadas del primer elemento de la colección respecto al document.

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

También puede establecer las coordenadas de todos los elementos de la colección respecto al document.

El parámetro es un objeto que contiene las propiedades top y left, o una función de callback que devuelve un objeto con ese formato.

Si el parámetro es una función de callback, el primer parámetro es la posición del índice del elemento, el segundo es la coordenada original del elemento y this en la función apunta al elemento actual.

Si los valores de top o left en el parámetro son undefined, el valor correspondiente no se modificará.

// Establece las coordenadas de todos los elementos de la colección
$('.box').offset({ top: 20, left: 30 });

// Establece las coordenadas del elemento mediante el valor devuelto por la función de callback
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

Devuelve el elemento padre de posicionamiento del primer elemento de la colección; es decir, el primer elemento ancestro cuyo position sea relative o absolute.

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

Obtiene el desplazamiento del primer elemento de la colección respecto a su elemento padre.

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

Busca nodos descendientes especificados en todos los elementos de la colección actual basándose en un selector CSS.

// Busca nodos que contengan .box entre los descendientes de #box
$('#box').find('.box')

Obtiene la colección de elementos hijos directos de todos los elementos de la colección actual.

Se puede pasar un selector CSS como parámetro para filtrar los elementos hijos.

// Busca todos los elementos hijos directos de #box
$('#box').children();

// Busca la colección de elementos que contienen .box entre todos los elementos hijos directos de #box
$('#box').children('.box')

Filtra los elementos que contienen los elementos hijos especificados de todos los elementos de la colección actual.

Los parámetros pueden ser selectores CSS o elementos DOM.

// Añade color de fondo a los li que contienen ul
$('li').has('ul').css('background-color', 'red');

Obtiene la colección de elementos padre directos de todos los elementos de la colección actual.

Se puede pasar un selector CSS como parámetro para devolver solo la colección de elementos padre que coincida con ese parámetro.

// Devuelve el elemento padre directo de los elementos .box
$('.box').parent();

// Devuelve los elementos que contienen la clase .parent entre los elementos padre directos de los elementos .box
$('.box').parent('.parent');

Obtiene la colección de elementos ancestros de todos los elementos de la colección actual.

Se puede pasar un selector CSS como parámetro para devolver solo la colección de elementos ancestros que coincida con ese parámetro.

// Devuelve todos los elementos ancestros de los elementos span
$('span').parents();

// Devuelve todos los elementos ancestros de los elementos span que son elementos p
$('span').parents('p');

Obtiene todos los elementos padre de cada elemento de la colección actual hasta llegar a un elemento que coincida con el primer parámetro (sin incluir el elemento coincidente).

El primer parámetro puede ser un selector CSS, un elemento DOM o un objeto JQ.

Se puede pasar un segundo parámetro opcional, que debe ser un selector CSS, para indicar que solo se deben devolver los elementos que coincidan con ese parámetro.

Si no se especifican parámetros, se emparejarán todos los elementos ancestros, lo que es igual que .parents().

// Obtiene todos los elementos ancestros de los elementos .item
$('.item').parentsUntil();

// Busca todos los elementos padre de los elementos .item hasta llegar al elemento .parent
$('.item').parentsUntil('.parent');

// Obtiene todos los elementos ancestros de los elementos .item que son elementos div hasta llegar a .parent
$('.item').parentsUntil('.parent', 'div');

Obtiene una colección de los elementos hermanos anteriores de todos los elementos de la colección actual.

Se puede pasar un selector CSS como parámetro para obtener solo la colección de elementos hermanos que coincida con ese parámetro.

// Obtiene la colección de los elementos anteriores para los elementos .box
$('.box').prev();

// Obtiene la colección de los elementos div anteriores para los elementos .box
$('.box').prev('div');

Obtiene una colección de todos los elementos hermanos anteriores de todos los elementos de la colección actual.

Se puede pasar un selector CSS como parámetro para obtener solo la colección de elementos hermanos que coincida con ese parámetro.

// Obtiene todos los elementos hermanos anteriores de los elementos .box
$('.box').prevAll();

// Obtiene todos los elementos hermanos anteriores de los elementos .box que contienen .selected
$('.box').prevAll('.selected');

Obtiene todos los elementos hermanos anteriores de cada elemento de la colección actual hasta llegar a un elemento que coincida con el primer parámetro (sin incluir el elemento coincidente).

El primer parámetro puede ser un selector CSS, un elemento DOM o un objeto JQ.

Se puede pasar un segundo parámetro opcional, que debe ser un selector CSS, para indicar que solo se deben devolver los elementos que coincidan con ese parámetro.

// Obtiene todos los elementos hermanos anteriores de los elementos .box
$('.box').prevUntil();

// Obtiene todos los elementos hermanos anteriores de los elementos .box hasta llegar al elemento .until
$('.box').prevUntil('.until');

// Obtiene los elementos div hermanos anteriores de los elementos .box hasta llegar al elemento .until
$('.box').prevUntil('.until', 'div');

Obtiene una colección de los elementos hermanos posteriores de todos los elementos de la colección actual.

Se puede pasar un selector CSS como parámetro para obtener solo la colección de elementos hermanos que coincida con ese parámetro.

// Obtiene la colección de los elementos siguientes para los elementos .box
$('.box').next();

// Obtiene la colección de los elementos div siguientes para los elementos .box
$('.box').next('div');

Obtiene una colección de todos los elementos hermanos posteriores de todos los elementos de la colección actual.

Se puede pasar un selector CSS como parámetro para obtener solo la colección de elementos hermanos que coincida con ese parámetro.

// Obtiene todos los elementos hermanos posteriores de los elementos .box
$('.box').nextAll();

// Obtiene todos los elementos hermanos posteriores de los elementos .box que contienen .selected
$('.box').nextAll('.selected');

Obtiene todos los elementos hermanos posteriores de cada elemento de la colección actual hasta llegar a un elemento que coincida con el primer parámetro (sin incluir el elemento coincidente).

El primer parámetro puede ser un selector CSS, un elemento DOM o un objeto JQ.

Se puede pasar un segundo parámetro opcional, que debe ser un selector CSS, para indicar que solo se deben devolver los elementos que coincidan con ese parámetro.

// Obtiene todos los elementos hermanos posteriores de los elementos .box
$('.box').nextUntil();

// Obtiene todos los elementos hermanos posteriores de los elementos .box hasta llegar al elemento .until
$('.box').nextUntil('.until');

// Obtiene los elementos div hermanos posteriores de los elementos .box hasta llegar al elemento .until
$('.box').nextUntil('.until', 'div');

Busca hacia arriba desde el elemento actual nivel a nivel y devuelve el primer elemento que coincide.

Los parámetros pueden ser selectores CSS, elementos DOM o objetos JQ.

// Obtiene el elemento .parent más cercano entre los elementos padre del elemento .box
$('.box').closest('.parent');

Obtiene los elementos hermanos de cada elemento de la colección actual.

Se puede pasar un selector CSS como parámetro para obtener solo los elementos hermanos que coincidan con ese parámetro.

// Obtiene todos los elementos hermanos de los elementos .box
$('.box').siblings();

// Obtiene los elementos que contienen .selected entre todos los elementos hermanos de .box
$('.box').siblings('.selected');

Añade elementos a la colección actual.

Los parámetros pueden ser cadenas HTML, selectores CSS, objetos JQ, elementos DOM, arrays de elementos DOM o NodeList.

// Añade elementos que contienen .selected a la colección actual
$('.box').add('.selected');

Elimina todos los nodos hijos de los elementos actuales.

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

Elimina los elementos de la colección actual del DOM.

Se puede pasar un selector CSS como parámetro para eliminar solo los elementos que coincidan con ese parámetro.

// Elimina todos los elementos p
$('p').remove();

// Elimina todos los elementos p que contienen .box
$('p').remove('.box');

Inserta contenido especificado antes del interior de los elementos de la colección actual.

Los tipos de parámetro pueden ser cadenas HTML, elementos DOM, arrays de elementos DOM u objetos JQ. Se admiten varios parámetros.

También se puede pasar una función de callback que devuelva una cadena HTML, un elemento DOM, un array de elementos DOM u un objeto JQ. El primer parámetro es la posición del índice del elemento actual, el segundo es el HTML original del elemento y this en la función apunta al elemento actual.

Este método devuelve la colección original.

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

// Inserta varios 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>

// Inserta un elemento mediante una función de callback
$('<p>Hello</p>').prepend(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Resultado:<p><b>Hello0</b>Hello</p>

Añade los elementos de la colección actual al inicio del interior de los elementos especificados.

Los parámetros pueden ser selectores CSS, cadenas HTML, elementos DOM, arrays de elementos DOM u objetos JQ.

Este método devuelve la colección original.

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

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

Inserta contenido especificado al final del interior de los elementos de la colección actual.

Los tipos de parámetro pueden ser cadenas HTML, elementos DOM, arrays de elementos DOM u objetos JQ. Se admiten varios parámetros.

También se puede pasar una función de callback que devuelva una cadena HTML, un elemento DOM, un array de elementos DOM u un objeto JQ. El primer parámetro es la posición del índice del elemento actual, el segundo es el HTML original del elemento y this en la función apunta al elemento actual.

Este método devuelve la colección original.

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

// Inserta varios 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>

// Inserta un elemento mediante una función de callback
$('<p>Hello</p>').append(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Resultado:<p>Hello<b>Hello0</b></p>

Añade los elementos de la colección actual al final del interior de los elementos especificados.

Los parámetros pueden ser selectores CSS, cadenas HTML, elementos DOM, arrays de elementos DOM u objetos JQ.

Este método devuelve la colección original.

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

Inserta contenido especificado después de los elementos de la colección actual como nodos hermanos.

Los tipos de parámetro pueden ser cadenas HTML, elementos DOM, arrays de elementos DOM u objetos JQ. Se admiten varios parámetros.

También se puede pasar una función de callback que devuelva una cadena HTML, un elemento DOM, un array de elementos DOM u un objeto JQ. El primer parámetro es la posición del índice del elemento actual, el segundo es el HTML original del elemento y this en la función apunta al elemento actual.

Este método devuelve la colección original.

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

// Inserta varios 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>

// Inserta un elemento mediante una función de callback
$('<p>Hello</p>').after(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Resultado:<p>Hello</p><b>Hello0</b>

Inserta los elementos de la colección actual después del elemento de destino como elementos hermanos.

Si los elementos de la colección actual ya existen en la página, se moverán en lugar de copiarse. Si hay varios objetivos, los elementos de la colección actual se clonarán y se añadirán después de cada elemento de destino.

Se puede pasar una cadena HTML, un selector CSS, un elemento DOM, un array de elementos DOM u un objeto JQ como parámetro para especificar el 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>

Inserta contenido especificado antes de los elementos de la colección actual como nodos hermanos.

Los tipos de parámetro pueden ser cadenas HTML, elementos DOM, arrays de elementos DOM u objetos JQ. Se admiten varios parámetros.

También se puede pasar una función de callback que devuelva una cadena HTML, un elemento DOM, un array de elementos DOM u un objeto JQ. El primer parámetro es la posición del índice del elemento actual, el segundo es el HTML original del elemento y this en la función apunta al elemento actual.

Este método devuelve la colección original.

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

// Inserta varios 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>

// Inserta un elemento mediante una función de callback
$('<p>Hello</p>').before(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Resultado:<b>Hello0</b><p>Hello</p>

Inserta los elementos de la colección actual antes del elemento de destino como elementos hermanos.

Si los elementos de la colección actual ya existen en la página, se moverán en lugar de copiarse. Si hay varios objetivos, los elementos de la colección actual se clonarán y se añadirán después de cada elemento de destino.

Se puede pasar una cadena HTML, un selector CSS, un elemento DOM, un array de elementos DOM u un objeto JQ como parámetro para especificar el 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>

Sustituye los elementos de la colección actual por los elementos especificados.

Los parámetros pueden ser cadenas HTML, elementos DOM, arrays de elementos DOM u objetos JQ.

También se puede pasar una función de callback que devuelva una cadena HTML, un elemento DOM, un array de elementos DOM u un objeto JQ. El primer parámetro es la posición del índice del elemento actual, el segundo es el HTML original del elemento y this en la función apunta al elemento actual.

Este método devuelve la colección original, es decir, la colección reemplazada.

// Sustituye todos los elementos .box con <p>Hello</p>
$('.box').replaceWith('<p>Hello</p>');

// Sustituye todos los elementos .box con el valor devuelto por la función de callback
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

Sustituye los elementos especificados por los elementos de la colección actual.

Los parámetros son selectores CSS, elementos DOM, arrays de elementos DOM u objetos JQ.

Este método devuelve la colección original, es decir, la colección de elementos usada para la sustitución.

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

Clona todos los elementos de la colección mediante clonación profunda.

Clona todos los elementos de la colección usando el método nativo cloneNode. Este método no copia datos ni controladores de eventos a los nuevos elementos, lo que difiere de jQuery, donde los parámetros determinan si se copian datos y controladores de eventos.

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

Combina los valores de los elementos del formulario en un array de pares clave-valor compuestos por name y value.

Este método puede operar con elementos de formulario individuales o con formularios completos <form>.

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

Serializa los valores de los elementos del formulario.

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

Vincula controladores de eventos a eventos específicos para cada elemento de la colección. Consulta los ejemplos de abajo para ver el uso concreto:

// Vincular evento click
$('.box').on('click', function (e) {
  console.log('Se hizo clic en el elemento .box');
});

// Vincular varios eventos
$('.box').on('click focus', function (e) {
  console.log('Tanto los eventos click como focus activarán esta función');
});

// Delegación de eventos
$(document).on('click', '.box', function (e) {
  console.log('Esta función se activará cuando se haga clic en .box');
});

// Vincular varios eventos y controladores de eventos a la vez
$('.box').on({
  'click': function (e) {
    console.log('Se activó el evento click');
  },
  'focus': function (e) {
    console.log('Se activó el evento focus');
  }
});

// Pasar parámetros
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Se hizo clic en el elemento .box y se pasaron parámetros al controlador del evento');
  // e._data es {key1: 'value1', key2: 'value2'}
});

// Vincular varios eventos y controladores de eventos a la vez y pasar parámetros
$('.box').on({
  'click': function (e) {
    console.log('Se activó el evento click');
    // e._data es {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Se activó el evento focus');
    // e._data es {key1: 'value1', key2: 'value2'}
  }
}, { key1: 'value1', key2: 'value2' });

// Vincular eventos mediante delegación de eventos y pasar parámetros
$(document).on('click', '.box', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Se hizo clic en el elemento .box y se pasaron parámetros al controlador del evento');
  // e._data es {key1: 'value1', key2: 'value2'}
});

// Vincular varios eventos y controladores de eventos a la vez mediante delegación de eventos
$(document).on({
  'click': function (e) {
    console.log('Se activó el evento click');
  },
  'focus': function (e) {
    console.log('Se activó el evento focus');
  }
}, '.box');

// Vincular varios eventos y controladores de eventos a la vez mediante delegación de eventos y pasar parámetros
$(document).on({
  'click': function (e) {
    console.log('Se activó el evento click');
    // e._data es {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Se activó el evento focus');
    // e._data es {key1: 'value1', key2: 'value2'}
  }
}, '.box', { key1: 'value1', key2: 'value2' });

// Obtener parámetros del evento
$('.box').on('click', function (e, data) {
  // data es igual a e._detail
});

// Los nombres de los eventos admiten espacios de nombres
$('.box').on('click.myPlugin', function () {
  console.log('Se hizo clic en el elemento .box');
});

Vincula controladores de eventos para eventos específicos en cada elemento coincidente, pero el evento solo se activará una vez.

El uso de este método es el mismo que .on(), así que no se ofrecen más ejemplos.

Desvincula eventos de cada elemento de la colección. Consulta los ejemplos de abajo para ver el uso concreto:

// Desvincular todos los controladores de eventos vinculados
$('.box').off();

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

// Desvincular varios eventos a la vez
$('.box').off('click focus');

// Desvincular controladores de eventos especificados
$('.box').off('click', callback);

// Desvincular eventos vinculados mediante delegación de eventos
$(document).off('click', '.box');

// Desvincular controladores de eventos específicos vinculados mediante delegación de eventos
$(document).off('click', '.box', callback);

// Desvincular varios controladores de eventos a la vez
$('.box').off({
  'click': callback1,
  'focus': callback2,
});

// Desvincular varios controladores de eventos vinculados mediante delegación de eventos a la vez
$(document).off({
  'click': callback1,
  'focus': callback2,
}, '.box');

// Los nombres de los eventos admiten espacios de nombres; el siguiente uso desvinculará todos los eventos que terminen en .myPlugin
$(document).off('.myPlugin');

Activar eventos especificados. Consulta los ejemplos de abajo para ver el uso concreto:

// Activar eventos especificados
$('.box').trigger('click');

// Pasar parámetros al activar eventos
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

Establece parámetros de configuración globales para las solicitudes Ajax.

$.ajaxSetup({
  // Los eventos AJAX globales están deshabilitados de forma predeterminada
  global: false,

  // Se usa la solicitud POST por defecto
  method: 'POST'
});

Consulta los parámetros AJAX de abajo para ver la lista detallada de parámetros.

Envía una solicitud AJAX y devuelve una Promise.

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

Consulta los parámetros AJAX de abajo para ver la lista detallada de parámetros.

Eventos AJAX globales.

Ejecuta una función cuando comienza una solicitud AJAX.

$(document).ajaxStart(function (event, xhr, options) {
  // xhr: objeto XMLHttpRequest
  // options: parámetros de configuración de la solicitud AJAX
});

Eventos AJAX globales.

Ejecuta una función cuando una solicitud AJAX tiene éxito.

$(document).ajaxSuccess(function (event, xhr, options, data) {
  // xhr: objeto XMLHttpRequest
  // options: parámetros de configuración de la solicitud AJAX
  // data: datos devueltos por la solicitud AJAX
});

Eventos AJAX globales.

Ejecuta una función cuando se produce un error en una solicitud AJAX.

$(document).ajaxError(function (event, xhr, options) {
  // xhr: objeto XMLHttpRequest
  // options: parámetros de configuración de la solicitud AJAX
});

Eventos AJAX globales.

Ejecuta una función cuando finaliza una solicitud AJAX.

$(document).ajaxComplete(function (event, xhr, options) {
  // xhr: objeto XMLHttpRequest
  // options: parámetros de configuración de la solicitud AJAX
});

Método de la solicitud.

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

Datos añadidos a los Headers. Este valor puede sobrescribirse en la función de callback beforeSend.

Los campos con valores de cadena o null se enviarán, mientras que los campos con undefined se eliminarán.

Datos establecidos en el objeto XMLHttpRequest.

$.ajax({
  url: 'Una URL de origen cruzado',
  xhrFields: {
    withCredentials: true
  }
});

Un objeto compuesto por códigos de estado HTTP y funciones.

$.ajax({
  statusCode: {
    404: function (xhr, textStatus) {
      alert('Se llama cuando el código de estado devuelto es 404');
    },
    200: function (data, textStatus, xhr) {
      alert('Se llama cuando el código de estado devuelto es 200');
    }
  }
});

Si el código de estado está entre 200 y 299, o si es 304, indica una solicitud correcta y los parámetros de la función son los mismos que para la callback success; de lo contrario, indica un fallo y los parámetros son los mismos que para la callback error.

Tipo de datos devuelto por el servidor.

Incluye: text, json

Se llama antes de enviar la solicitud. Si devuelve false, la solicitud AJAX se cancelará.

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

Se llama después de que la solicitud sea correcta.

$.ajax({
  success: function (data, textStatus, xhr) {
    // data: datos devueltos por la solicitud AJAX
    // textStatus: cadena que contiene el código de éxito
    // xhr: objeto XMLHttpRequest
  }
});

Se llama cuando falla la solicitud.

$.ajax({
  error: function (xhr, textStatus) {
    // xhr: objeto XMLHttpRequest
    // textStatus: cadena que contiene el código de éxito
  }
});

Se llama después de completarse la solicitud.

$.ajax({
  complete: function (xhr, textStatus) {
    // xhr: objeto XMLHttpRequest
    // textStatus: cadena que contiene el código de éxito
  }
});

Fuerza un repintado del elemento actual.

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

Establece la propiedad transition-duration del elemento actual.

Puede ser un valor de tiempo con o sin unidad. Si no tiene unidad, se añadirá automáticamente ms.

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

Añade una callback de evento transitionend al elemento actual.

El parámetro de la función de callback es el objeto del evento transitionend, y this en la función apunta al elemento actual.

$('.box').transitionEnd(function () {
  console.log('Se ha activado el evento transitionend del elemento .box');
})

Establece la propiedad transform del elemento actual.

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

Establece la propiedad transform-origin del elemento actual.

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

Ejecuta las funciones de inicialización registradas dentro del elemento actual y sus hijos.

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

Crea y muestra una superposición, devolviendo el objeto JQ de la capa de superposición.

Se puede pasar un parámetro entero para representar el estilo z-index de la capa de superposición, con un valor predeterminado de 2000.

$.showOverlay();

Oculta la capa de superposición.

Si se llama a $.showOverlay() varias veces para mostrar la capa de superposición, también hay que llamar al mismo número de veces a $.hideOverlay() para ocultarla. Pasar el parámetro true fuerza a ocultar la superposición.

$.hideOverlay();

Bloquea la página para impedir el desplazamiento.

$.lockScreen();

Desbloquea la página.

Si se llama a $.lockScreen() varias veces para bloquear la página, también hay que llamar al mismo número de veces a $.unlockScreen() para desbloquearla. Pasar el parámetro true fuerza a desbloquear la página.

$.unlockScreen();

Limitación de función.

Pasa una función como parámetro; el primer parámetro es la función a ejecutar y el segundo es el tiempo de retraso en milisegundos.

$.throttle(function () {
  console.log('Esta función se ejecuta como máximo una vez cada 100 ms');
}, 100)

Genera un ID globalmente único.

$.guid();

Se puede pasar un parámetro. Si el guid correspondiente a ese valor no existe, se genera y devuelve uno nuevo; si ya existe, se devuelve directamente el guid existente.

// Los valores de retorno de las siguientes dos líneas de código son iguales.
$.guid('test');
$.guid('test');