jq 유틸리티 라이브러리

mdui incluye una biblioteca de utilidades JavaScript ligera que proporciona una API similar a jQuery y encadenamiento de llamadas, pero su tamaño es solo una sexta parte del de jQuery.

Puedes importar esta función de utilidad cuando lo necesites:

import { $ } from 'mdui/jq.js';

Núcleo

`$()`

Esta función tiene varios usos:

Pasa un selector CSS como parámetro, devuelve un objeto JQ que contiene los elementos coincidentes.

$('.box');

Pasa un elemento DOM, cualquier array, NodeList u objeto JQ, devuelve un objeto JQ que contiene los elementos especificados.

$(document);

Pasa una cadena HTML, devuelve un objeto JQ que contiene el DOM creado a partir del HTML.

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

Pasa una función, que se llamará cuando el DOM esté completamente cargado.

$(function () {
  console.log('DOM Cargado');
});

Extensión

`$.extend()`

Si solo se pasa un objeto, las propiedades de ese objeto se fusionarán en el objeto $, es decir, se añadirán nuevas funcionalidades al espacio de nombres de $.

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

// Entonces puedes llamar al método personalizado así
$.customFunc();

Si se pasan dos o más objetos, todas las propiedades de los objetos se añaden al primer objeto y se devuelve el objeto fusionado. Las propiedades con valor undefined no se fusionan.

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

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

`$.fn.extend()`

Extiende métodos en la cadena de prototipos de $.

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

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

URL

`$.param()`

Serializa un array o objeto en una cadena de consulta 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, el formato del array debe coincidir con el devuelto por .serializeArray().

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

Operaciones con arrays y objetos

`$.each()`

Itera sobre un array o objeto. Devuelve el primer parámetro, es decir, el array u objeto iterado.

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

Dentro de la función de devolución de llamada, this apunta al valor en la posición correspondiente del array u objeto. Si la función de devolución de llamada devuelve false, se detiene la iteración.

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

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

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

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

`$.merge()`

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

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

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

`$.unique()`

Elimina elementos duplicados de un array.

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

`$.map()`

Itera sobre un array u objeto y devuelve un nuevo array compuesto por los valores de retorno de la función de devolución de llamada.

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

La función de devolución de llamada puede devolver cualquier valor. Si devuelve un array, ese array se expande. Si devuelve null o undefined, ese valor se ignora. Dentro de la función de devolución de llamada, this apunta al objeto window.

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

// Cuando la función de devolución de llamada devuelve un array, el array se expande
const result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

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

`$.contains()`

Determina si un nodo contiene a otro nodo. Si el nodo padre contiene al nodo hijo, devuelve true; de lo contrario, devuelve false.

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

Comprobación de tipos de datos

`.is()`

Determina si al menos un elemento de la colección coincide con el parámetro. Si coincide, devuelve true; 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 devolución de llamada.

Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice, el segundo parámetro es el elemento actual. Dentro de la función, this apunta al elemento actual. Si la función devuelve true, el elemento actual coincide con el parámetro; si devuelve false, no coincide.

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

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

Acceso a objetos

`.length`

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

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

`.each()`

Itera sobre la colección actual y ejecuta una función para cada elemento. Si la función devuelve false, se detiene la iteración.

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

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

`.map()`

Itera sobre la colección actual, ejecuta una función para cada elemento y devuelve una nueva colección compuesta por los valores de retorno de la función.

La función puede devolver un solo dato o un array de datos. Si devuelve un array, los elementos del array se añaden secuencialmente a la nueva colección. Si la función devuelve null o undefined, ese valor no se añade a la nueva colección.

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

const result = $('input.checked').map(function (i, element) {
  return element.value;
});

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

`.eq()`

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

$('div').eq(0); // Devuelve una colección que contiene solo el primer elemento
$('div').eq(-1); // Devuelve una colección que contiene solo el último elemento
$('div').eq(-2); // Devuelve una colección que contiene solo el penúltimo elemento

`.first()`

Devuelve una nueva colección que contiene solo el primer elemento de la colección actual.

$('div').first(); // Devuelve una colección que contiene solo el primer div

`.last()`

Devuelve una nueva colección que contiene solo el último elemento de la colección actual.

$('div').last(); // Devuelve una colección que contiene solo el último div

`.get()`

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

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

`.index()`

Si no se pasa ningún parámetro, devuelve el valor del índice del primer elemento de la colección actual en relación con sus elementos hermanos.

Si se pasa un selector CSS, devuelve el valor del índice del primer elemento de la colección actual en relación con los elementos que coinciden con el selector CSS.

Si se pasa un elemento DOM, devuelve el valor del índice de ese elemento en la colección actual.

Si se pasa un objeto JQ, devuelve el valor del índice del primer elemento del objeto en 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

`.slice()`

Devuelve un subconjunto de la colección actual.

También puedes establecer las posiciones de inicio y fin (sin incluir el elemento final) del subconjunto pasando dos parámetros. Si no se pasa el segundo parámetro, devuelve todos los elementos desde la posición de inicio hasta el final de la colección.

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

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

`.filter()`

Filtra los elementos de la colección actual que 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 devolución de llamada.

Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro es el elemento actual. Dentro de la función, this apunta al elemento actual. Si la función devuelve true, el elemento actual se conserva; si devuelve false, se elimina.

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

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

`.not()`

Filtra los elementos de la colección actual que no coinciden con la expresión especificada.

El parámetro puede ser un selector CSS, un elemento DOM, un array de elementos DOM, un objeto JQ o una función de devolución de llamada que devuelve un valor boolean.

// 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;
});

Clases CSS

`.hasClass()`

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

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

`.addClass()`

Añade clases CSS a cada elemento de la colección. Se pueden separar múltiples nombres de clase con espacios.

El parámetro puede ser una cadena o una función de devolución de llamada que devuelva un nombre de clase CSS. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro son los nombres de clase CSS existentes en ese elemento. Dentro de la función, this apunta al elemento actual.

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

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

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

`.removeClass()`

Elimina las clases CSS especificadas de cada elemento de la colección. Se pueden separar múltiples nombres de clase con espacios.

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

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

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

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

`.toggleClass()`

Si el elemento tiene la clase CSS especificada, la elimina; si no la tiene, la añade. Se pueden separar múltiples nombres de clase con espacios.

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

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

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

Atributos de nodo

`.prop()`

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

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

Si se pasan dos parámetros, este método establece el valor de la propiedad JavaScript especificada para todos los elementos de la colección.

El valor de la propiedad puede ser cualquier tipo de valor o el valor de retorno de una función de devolución de llamada. El primer parámetro de la función de devolución de llamada es el índice del elemento, el segundo parámetro es el valor original de la propiedad en ese elemento, y this dentro de la función apunta al elemento actual.

Si el valor de la propiedad o el valor de retorno de la función de devolución de llamada es undefined, este método no modificará la propiedad original del elemento.

// Establece el valor de la propiedad checked en true para todos los elementos seleccionados
$('input').prop('checked', true);

// Establece el valor de la propiedad mediante el valor de retorno de la función de devolución de llamada
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

También puedes establecer múltiples propiedades simultáneamente pasando un objeto.

// Establece múltiples valores de propiedad para los elementos simultáneamente
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  },
});

`.removeProp()`

Elimina la propiedad JavaScript especificada de todos los elementos de la colección.

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

`.attr()`

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

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

Si se pasan dos parámetros, este método establece el valor del atributo HTML especificado para todos los elementos de la colección.

El valor del atributo puede ser una cadena, un número o el valor de retorno de una función de devolución de llamada. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro es el valor original del atributo en ese elemento. Dentro de la función, this apunta al elemento actual.

Si el valor del atributo o el valor de retorno de la función de devolución de llamada es null, este método elimina el atributo especificado; si es undefined, no modifica el atributo original del elemento.

// Establece el valor del atributo para todos los elementos seleccionados
$('div').attr('username', 'mdui');

// Establece el valor del atributo mediante el valor de retorno de la función de devolución de llamada
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

También puedes establecer múltiples atributos simultáneamente pasando un objeto.

// Establece múltiples valores de atributo para los elementos simultáneamente
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  },
});

`.removeAttr()`

Elimina el atributo HTML especificado de todos los elementos de la colección. Se pueden separar múltiples nombres de atributo con espacios.

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

// Elimina múltiples atributos de todos los elementos de la colección
$('div').removeAttr('username lastname');

`.val()`

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

Si el elemento es un <select multiple="multiple">, devuelve un array con todos los elementos seleccionados.

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

Si se pasa un parámetro, este método establece el valor de todos los elementos de la colección.

El valor puede ser una cadena, un número, un array de cadenas o el valor de retorno de una función de devolución de llamada. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro es el valor original del elemento. Dentro de la función, this apunta al elemento actual.

Si el elemento es <input type="checkbox">, <input type="radio"> u <option>, el valor o el valor de retorno de la función de devolución de llamada puede ser un array. En este caso, se seleccionarán los valores del array y se anularán los que no estén en el array.

Si el valor o el valor de retorno de la función de devolución de llamada es undefined, el valor del elemento se establecerá en vacío.

// Establece el valor del elemento seleccionado
$('#input').val('mdui');

// Establece el valor del elemento mediante el valor de retorno de la función de devolución de llamada
$('#input').val(function (index, oldValue) {
  return 'mdui';
});

`.text()`

Devuelve el contenido de texto de todos los elementos de la colección (incluyendo sus elementos descendientes).

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

Si se pasa un parámetro, este método establece el contenido de texto de todos los elementos de la colección.

El valor puede ser una cadena, un número, un booleano o el valor de retorno de una función de devolución de llamada. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro es el contenido de texto original del elemento. Dentro de la función, this apunta al elemento actual.

Si el valor o el valor de retorno de la función de devolución de llamada es undefined, no se modifica el contenido de texto del elemento.

// Establece el contenido de texto del elemento seleccionado
$('.box').text('contenido de texto');

// Establece el contenido de texto del elemento mediante el valor de retorno de la función de devolución de llamada
$('.box').text(function (index, oldTextContent) {
  return 'nuevo contenido de texto';
});

`.html()`

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

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

Si se pasa un parámetro, este método establece el contenido HTML de todos los elementos de la colección.

El valor puede ser una cadena HTML, un elemento DOM o el valor de retorno de una función de devolución de llamada que devuelva una cadena HTML o un elemento DOM. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro es el contenido HTML original del elemento. Dentro de la función, this apunta al elemento actual.

Si el valor o el valor de retorno de la función de devolución de llamada es undefined, no se modifica el contenido HTML del elemento.

// Establece el HTML del elemento seleccionado
$('.box').html('<div>nuevo contenido HTML</div>');

// Establece el contenido HTML del elemento mediante el valor de retorno de la función de devolución de llamada
$('.box').html(function (index, oldHTMLContent) {
  return '<div>nuevo contenido HTML</div>';
});

Almacenamiento de datos

`$.data()`

Lee o almacena datos en un elemento especificado.

Al almacenar datos, si el valor es undefined, equivale a leer los datos correspondientes en el 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 un elemento especificado, devuelve el valor almacenado
$.data(document.body, 'layout', 'dark'); // Devuelve dark

// Almacena múltiples datos simultáneamente en un elemento especificado
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
}); // Devuelve { primary: 'indigo', accent: 'pink' }

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

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

`$.removeData()`

Elimina los datos almacenados en un elemento especificado.

También puedes pasar múltiples nombres de clave separados por espacios o con un array. Si no se especifica ningún nombre de clave, se eliminan todos los datos del elemento.

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

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

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

`.data()`

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

Si el valor almacenado es undefined, no se realiza el almacenamiento.

Nota: Este método recupera los datos e incluye los atributos data-* del elemento.

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

// Almacena múltiples datos simultáneamente en los elementos de la colección actual
$('.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' }

`.removeData()`

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

También puedes pasar múltiples nombres de clave separados por espacios o con un array. Si no se especifica ningún nombre de clave, se eliminan todos los datos del elemento.

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

// Elimina los datos con nombre de clave 'name'
$('.box').removeData('name');

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

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

Estilos

`.css()`

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

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

Si se pasa un parámetro, este método establece el valor de la propiedad CSS para todos los elementos de la colección.

El valor de la propiedad puede ser una cadena, un número o el valor de retorno de una función de devolución de llamada que devuelva una cadena o un número. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro es el valor original de la propiedad CSS en ese elemento. Dentro de la función, this apunta al elemento actual.

Si el valor o el valor de retorno de la función de devolución de llamada es undefined, no se modifica la propiedad CSS del elemento. Si el valor es null, se elimina la propiedad CSS correspondiente del elemento. Si el valor es un número, se añade automáticamente px como unidad. Si la propiedad no puede usar px como unidad, el valor se convierte directamente a cadena.

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

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

// Establece múltiples estilos simultáneamente pasando un objeto
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});

`.width()`

Obtiene el ancho del primer elemento de la colección (sin incluir padding, border, margin).

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

Si se pasa un parámetro, este método establece el ancho de todos los elementos de la colección.

El valor puede ser una cadena con unidad, un número o el valor de retorno de una función de devolución de llamada que devuelva una cadena con unidad o un número. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro es el ancho original del elemento. Dentro de la función, this apunta al elemento actual.

Si el valor o el valor de retorno de la función de devolución de llamada es null o undefined, no se modifica el ancho del elemento. Si el valor es un número, se añade automáticamente px como unidad.

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

// Cuando el valor es numérico, la unidad predeterminada es px
$('.box').width(10);

// Establece el ancho mediante el valor de retorno de la función de devolución de llamada
$('.box').width(function (index, oldWidth) {
  return 10;
});

`.height()`

Obtiene la altura del primer elemento de la colección (sin incluir padding, border, margin).

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

Si se pasa un parámetro, este método establece la altura de todos los elementos de la colección.

El valor puede ser una cadena con unidad, un número o el valor de retorno de una función de devolución de llamada que devuelva una cadena con unidad o un número. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro es la altura original del elemento. Dentro de la función, this apunta al elemento actual.

Si el valor o el valor de retorno de la función de devolución de llamada es null o undefined, no se modifica la altura del elemento. Si el valor es un número, se añade automáticamente px como unidad.

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

// Cuando el valor es numérico, la unidad predeterminada es px
$('.box').height(10);

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

`.innerWidth()`

Obtiene el ancho del primer elemento de la colección (incluye padding, excluye border, margin).

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

Si se pasa un parámetro, este método establece el ancho de todos los elementos de la colección.

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

// Cuando el valor es numérico, la unidad predeterminada es px
$('.box').innerWidth(10);

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

`.innerHeight()`

Obtiene la altura del primer elemento de la colección (incluye padding, excluye border, margin).

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

Si se pasa un parámetro, este método establece la altura de todos los elementos de la colección.

El valor puede ser una cadena con unidad, un número o el valor de retorno de una función de devolución de llamada que devuelva una cadena con unidad o un número. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro es la altura original del elemento. Dentro de la función, this apunta al elemento actual.

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

// Cuando el valor es numérico, la unidad predeterminada es px
$('.box').innerHeight(10);

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

`.outerWidth()`

Obtiene el ancho del primer elemento de la colección (incluye padding, border, excluye margin. Puedes pasar el parámetro true para incluir margin).

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

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

También puedes usar este método para establecer el ancho de todos los elementos de la colección (incluyendo padding, border, excluyendo margin. Puedes pasar true como segundo parámetro para incluir margin).

El primer parámetro puede ser una cadena con unidad, un número, o el valor de retorno de una función de devolución de llamada que devuelva una cadena con unidad o un número. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro es el ancho original del elemento. Dentro de la función, this apunta al elemento actual.

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

// Cuando el valor es numérico, la unidad predeterminada es px
$('.box').outerWidth(10);

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

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

`.outerHeight()`

Obtiene la altura del primer elemento de la colección (incluye padding, border, excluye margin. Puedes pasar el parámetro true para incluir margin).

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

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

También puedes usar este método para establecer la altura de todos los elementos de la colección (incluyendo padding, border, excluyendo margin. Puedes pasar true como segundo parámetro para incluir margin).

El primer parámetro puede ser una cadena con unidad, un número, o el valor de retorno de una función de devolución de llamada que devuelva una cadena con unidad o un número. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro es la altura original del elemento. Dentro de la función, this apunta al elemento actual.

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

// Cuando el valor es numérico, la unidad predeterminada es px
$('.box').outerHeight(10);

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

// Establece la altura mediante el valor de retorno de la función de devolución de llamada
$('.box').outerHeight(function (index, oldHeight) {
  return 10;
});

`.hide()`

Oculta todos los elementos de la colección.

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

`.show()`

Muestra todos los elementos de la colección.

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

`.toggle()`

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

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

`.offset()`

Obtiene las coordenadas del primer elemento de la colección en relación con document.

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

Si se pasa un parámetro, este método establece las coordenadas de todos los elementos de la colección en relación con document.

El parámetro puede ser un objeto que contenga las propiedades top y left, o una función de devolución de llamada que devuelva un objeto con ese formato. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro son las coordenadas originales del elemento. Dentro de la función, this apunta al elemento actual.

Si el valor de top o left en el parámetro es undefined, no se modifica el valor correspondiente.

// 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 de retorno de la función de devolución de llamada
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

`.offsetParent()`

Obtiene el elemento padre posicionado del primer elemento de la colección. Es decir, el primer elemento padre con la propiedad position igual a relative o absolute.

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

`.position()`

Obtiene el desplazamiento del primer elemento de la colección en relación con su elemento padre posicionado.

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

Búsqueda de nodos

`.find()`

En la colección actual, busca el conjunto de nodos descendientes que coinciden con el selector CSS.

// Encuentra el conjunto de nodos con la clase .box entre los descendientes de #box
$('#box').find('.box');

`.children()`

En la colección actual, obtiene el conjunto de elementos hijos directos. Puedes pasar un selector CSS como parámetro para filtrar los elementos hijos.

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

// Encuentra los elementos que contienen la clase .box entre los hijos directos de #box
$('#box').children('.box');

`.has()`

En la colección actual, filtra los elementos que contienen elementos hijos especificados. El parámetro puede ser un selector CSS o un elemento DOM.

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

`.parent()`

Obtiene el conjunto de los elementos padre directos de todos los elementos de la colección actual. Puedes pasar un selector CSS como parámetro para devolver solo los elementos padre que coinciden con el parámetro.

// Devuelve el elemento padre directo del elemento .box
$('.box').parent();

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

`.parents()`

Obtiene el conjunto de los elementos ancestros de todos los elementos de la colección actual. Puedes pasar un selector CSS como parámetro para devolver solo los elementos ancestros que coinciden con el parámetro.

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

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

`.parentsUntil()`

Obtiene todos los elementos padres de cada elemento de la colección actual hasta que se encuentra con el elemento que coincide 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.

Puedes pasar un segundo parámetro, que debe ser un selector CSS, para devolver solo los elementos que coinciden con ese parámetro.

Si no se especifica ningún parámetro, se devuelven todos los elementos ancestros, similar a .parents().

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

// Encuentra los elementos padres del elemento .item hasta encontrar el elemento .parent
$('.item').parentsUntil('.parent');

// Obtiene los elementos ancestros que son div del elemento .item hasta encontrar el elemento .parent
$('.item').parentsUntil('.parent', 'div');

`.prev()`

Obtiene el conjunto de los elementos hermanos anteriores de cada elemento de la colección actual. Puedes pasar un selector CSS como parámetro para devolver solo los elementos hermanos que coinciden con el parámetro.

// Obtiene el conjunto de los elementos hermanos anteriores del elemento .box
$('.box').prev();

// Obtiene el conjunto de los elementos hermanos anteriores que son div del elemento .box
$('.box').prev('div');

`.prevAll()`

Obtiene el conjunto de todos los elementos hermanos anteriores de cada elemento de la colección actual. Puedes pasar un selector CSS como parámetro para devolver solo los elementos hermanos que coinciden con el parámetro.

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

// Obtiene todos los elementos hermanos anteriores del elemento .box que contienen la clase .selected
$('.box').prevAll('.selected');

`.prevUntil()`

Obtiene todos los elementos hermanos anteriores de cada elemento de la colección actual hasta que se encuentra con el elemento que coincide 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. Puedes pasar un segundo parámetro, que debe ser un selector CSS, para devolver solo los elementos que coinciden con ese parámetro.

Si no se especifica ningún parámetro, se devuelven todos los elementos hermanos anteriores, similar a .prevAll().

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

// Obtiene todos los elementos hermanos anteriores del elemento .box hasta encontrar el elemento .until
$('.box').prevUntil('.until');

// Obtiene todos los elementos hermanos anteriores que son div del elemento .box hasta encontrar el elemento .until
$('.box').prevUntil('.until', 'div');

`.next()`

Obtiene el conjunto de los elementos hermanos siguientes de cada elemento de la colección actual. Puedes pasar un selector CSS como parámetro para devolver solo los elementos hermanos que coinciden con el parámetro.

// Obtiene el conjunto de los elementos hermanos siguientes del elemento .box
$('.box').next();

// Obtiene el conjunto de los elementos hermanos siguientes que son div del elemento .box
$('.box').next('div');

`.nextAll()`

Obtiene el conjunto de todos los elementos hermanos siguientes de cada elemento de la colección actual. Puedes pasar un selector CSS como parámetro para devolver solo los elementos hermanos que coinciden con el parámetro.

// Obtiene todos los elementos hermanos siguientes del elemento .box
$('.box').nextAll();

// Obtiene todos los elementos hermanos siguientes del elemento .box que contienen la clase .selected
$('.box').nextAll('.selected');

`.nextUntil()`

Obtiene todos los elementos hermanos siguientes de cada elemento de la colección actual hasta que se encuentra con el elemento que coincide con el primer parámetro (sin incluir el elemento coincidente).

Si no se especifica ningún parámetro, se devuelven todos los elementos hermanos siguientes, similar a .nextAll().

// Obtiene todos los elementos hermanos siguientes del elemento .box
$('.box').nextUntil();

// Obtiene todos los elementos hermanos siguientes del elemento .box hasta encontrar el elemento .until
$('.box').nextUntil('.until');

// Obtiene los elementos hermanos siguientes que son div del elemento .box hasta encontrar el elemento .until
$('.box').nextUntil('.until', 'div');

`.closest()`

Comienza desde el elemento actual y sube nivel por nivel, devolviendo el primer elemento que coincida. El parámetro puede ser un selector CSS, un elemento DOM o un objeto JQ.

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

`.siblings()`

Obtiene todos los elementos hermanos de cada elemento de la colección actual. Puedes pasar un selector CSS como parámetro para devolver solo los elementos hermanos que coinciden con el parámetro.

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

// Obtiene los elementos hermanos del elemento .box que contienen la clase .selected
$('.box').siblings('.selected');

`.add()`

Añade elementos a la colección actual. El parámetro puede ser una cadena HTML, un selector CSS, un objeto JQ, un elemento DOM, un array de elementos DOM o un NodeList.

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

Operaciones con nodos

`.empty()`

Elimina todos los elementos hijos del elemento actual.

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

`.remove()`

Elimina del DOM los elementos de la colección actual. Puedes pasar un selector CSS como parámetro para eliminar solo los elementos que coinciden con el parámetro.

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

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

`.prepend()`

Inserta el contenido especificado dentro de los elementos de la colección actual, al principio. El parámetro puede ser una cadena HTML, un elemento DOM, un array de elementos DOM o un objeto JQ. Se admiten múltiples parámetros.

También puedes pasar una función de devolución de llamada que devuelva una cadena HTML, un elemento DOM, un array de elementos DOM o un objeto JQ. El primer parámetro de la función es el índice del elemento actual, el segundo parámetro es el HTML original del elemento, y this dentro de la función apunta al elemento actual.

Este método devuelve la colección original.

// Inserta un elemento
$('<p>Me gustaría decir: </p>').prepend('<b>Hola</b>');
// Resultado: <p><b>Hola</b>Me gustaría decir: </p>

// Inserta múltiples elementos
$('<p>Me gustaría decir: </p>').prepend('<b>Hola</b>', '<b>Mundo</b>');
// Resultado: <p><b>Hola</b><b>Mundo</b>Me gustaría decir: </p>

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

`.prependTo()`

Inserta los elementos de la colección actual dentro del elemento especificado, al principio. El parámetro puede ser un selector CSS, una cadena HTML, un elemento DOM, un array de elementos DOM o un objeto JQ.

Este método devuelve la colección original.

$('<p>Hola</p>').prependTo('<p>Me gustaría decir: </p>');
// Resultado: [ <p><p>Hola</p>Me gustaría decir: </p> ]

`.append()`

Inserta el contenido especificado dentro de los elementos de la colección actual, al final. El parámetro puede ser una cadena HTML, un elemento DOM, un array de elementos DOM o un objeto JQ. Se admiten múltiples parámetros.

Este método devuelve la colección original.

// Inserta un elemento
$('<p>Me gustaría decir: </p>').append('<b>Hola</b>');
// Resultado: <p>Me gustaría decir: <b>Hola</b></p>

// Inserta múltiples elementos
$('<p>Me gustaría decir: </p>').append('<b>Hola</b>', '<b>Mundo</b>');
// Resultado: <p>Me gustaría decir: <b>Hola</b><b>Mundo</b></p>

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

`.appendTo()`

Inserta los elementos de la colección actual dentro del elemento especificado, al final. El parámetro puede ser un selector CSS, una cadena HTML, un elemento DOM, un array de elementos DOM o un objeto JQ.

Este método devuelve la colección original.

$('<p>Hola</p>').appendTo('<p>Me gustaría decir: </p>');
// Resultado: <p>Me gustaría decir: <p>Hola</p></p>

`.after()`

Inserta el contenido especificado después de los elementos de la colección actual, como elemento hermano. El parámetro puede ser una cadena HTML, un elemento DOM, un array de elementos DOM o un objeto JQ. Se admiten múltiples parámetros.

Este método devuelve la colección original.

// Inserta un elemento
$('<p>Me gustaría decir: </p>').after('<b>Hola</b>');
// Resultado: <p>Me gustaría decir: </p><b>Hola</b>

// Inserta múltiples elementos
$('<p>Me gustaría decir: </p>').after('<b>Hola</b>', '<b>Mundo</b>');
// Resultado: <p>Me gustaría decir: </p><b>Hola</b><b>Mundo</b>

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

`.insertAfter()`

Inserta los elementos de la colección actual después del elemento objetivo, como elemento hermano.

Si los elementos de la colección actual son elementos ya existentes en la página, se moverán, no se copiarán. Si hay múltiples objetivos, se clonarán los elementos de la colección actual y se añadirán después de cada elemento objetivo.

Puedes pasar una cadena HTML, un selector CSS, un elemento DOM, un array de elementos DOM o un objeto JQ como parámetro para especificar el elemento objetivo.

$('<b>Hola</b>').insertAfter('<p>Me gustaría decir: </p>');
// Resultado: <p>Me gustaría decir: </p><b>Hola</b>

`.before()`

Inserta el contenido especificado antes de los elementos de la colección actual, como elemento hermano. El parámetro puede ser una cadena HTML, un elemento DOM, un array de elementos DOM o un objeto JQ. Se admiten múltiples parámetros.

Este método devuelve la colección original.

// Inserta un elemento
$('<p>Me gustaría decir: </p>').before('<b>Hola</b>');
// Resultado: <b>Hola</b><p>Me gustaría decir: </p>

// Inserta múltiples elementos
$('<p>Me gustaría decir: </p>').before('<b>Hola</b>', '<b>Mundo</b>');
// Resultado: <b>Hola</b><b>Mundo</b><p>Me gustaría decir: </p>

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

`.insertBefore()`

Inserta los elementos de la colección actual antes del elemento objetivo, como elemento hermano.

Puedes pasar una cadena HTML, un selector CSS, un elemento DOM, un array de elementos DOM o un objeto JQ como parámetro para especificar el elemento objetivo.

$('<p>Me gustaría decir: </p>').insertBefore('<b>Hola</b>');
// Resultado: <p>Me gustaría decir: </p><b>Hola</b>

`.replaceWith()`

Reemplaza los elementos de la colección actual con el elemento especificado.

El parámetro puede ser una cadena HTML, un elemento DOM, un array de elementos DOM o un objeto JQ.

Este método devuelve la colección original de elementos reemplazados.

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

// Reemplaza todos los elementos.box con el valor de retorno de la función de devolución de llamada
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

`.replaceAll()`

Reemplaza el elemento especificado con los elementos de la colección actual.

El parámetro es el elemento a reemplazar, puede ser un selector CSS, un elemento DOM, un array de elementos DOM o un objeto JQ.

Este método devuelve la colección original, es decir, la colección de elementos utilizados para el reemplazo.

// Reemplaza todos los elementos.box con elementos.new
$('.new').replaceAll('.box');

`.clone()`

Clona profundamente todos los elementos de la colección.

Este método utiliza el método nativo cloneNode para la clonación profunda, pero no copia datos ni controladores de eventos a los nuevos elementos. Esto es diferente de jQuery, que utiliza un parámetro para determinar si copiar datos y eventos.

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

Formularios

`.serializeArray()`

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

Este método puede operar sobre un elemento de formulario individual o sobre todo el formulario <form>.

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

`.serializeObject()`

Convierte los valores de los elementos del formulario en un objeto.

Si hay claves duplicadas, los valores correspondientes se convierten en un array.

Este método puede operar sobre un elemento de formulario individual o sobre todo el formulario <form>.

$('form').serializeObject();
// { name: mdui, password: 123456 }

`.serialize()`

Convierte los valores de los elementos del formulario en una cadena codificada como URL.

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

Eventos

`.on()`

Vincula una función de controlador de eventos a un evento específico para cada elemento de la colección. Consulta los ejemplos a continuación:

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

// Vincula múltiples eventos
$('.box').on('click focus', function (e) {
  console.log('Tanto el evento click como focus activarán esta función');
});

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

// Vincula múltiples eventos y funciones de controlador simultáneamente
$('.box').on({
  click: function (e) {
    console.log('Se activó el evento click');
  },
  focus: function (e) {
    console.log('Se activó el evento focus');
  },
});

// Pasa 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 a la función de controlador',
  );
  // e._data es {key1: 'value1', key2: 'value2'}
});

// Vincula múltiples eventos y funciones de controlador simultáneamente, y pasa 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' },
);

// Vincula un evento mediante delegación y pasa parámetros
$(document).on(
  'click',
  '.box',
  { key1: 'value1', keys: 'value2' },
  function (e) {
    console.log(
      'Se hizo clic en el elemento .box y se pasaron parámetros a la función de controlador',
    );
    // e._data es {key1: 'value1', key2: 'value2'}
  },
);

// Vincula múltiples eventos y funciones de controlador simultáneamente mediante delegación
$(document).on(
  {
    click: function (e) {
      console.log('Se activó el evento click');
    },
    focus: function (e) {
      console.log('Se activó el evento focus');
    },
  },
  '.box',
);

// Vincula múltiples eventos y funciones de controlador simultáneamente mediante delegación, y pasa 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' },
);

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

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

`.one()`

Vincula una función de controlador de eventos a un evento específico para cada elemento coincidente, pero el evento solo se activará una vez.

El uso de este método es el mismo que .on(), por lo que no se proporcionan ejemplos adicionales.

`.off()`

Desvincula los eventos vinculados a los elementos de la colección. Consulta los ejemplos a continuación:

// Desvincula todas las funciones de controlador de eventos vinculadas
$('.box').off();

// Desvincula el evento especificado
$('.box').off('click');

// Desvincula múltiples eventos simultáneamente
$('.box').off('click focus');

// Desvincula la función de controlador de eventos especificada
$('.box').off('click', callback);

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

// Desvincula la función de controlador de eventos especificada vinculada mediante delegación
$(document).off('click', '.box', callback);

// Desvincula múltiples funciones de controlador simultáneamente
$('.box').off({
  click: callback1,
  focus: callback2,
});

// Desvincula múltiples funciones de controlador vinculadas mediante delegación simultáneamente
$(document).off(
  {
    click: callback1,
    focus: callback2,
  },
  '.box',
);

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

`.trigger()`

Activa el evento especificado. Consulta los ejemplos a continuación:

// Activa el evento especificado
$('.box').trigger('click');

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

// Los nombres de eventos pueden usar espacios de nombres
$('.box').trigger('click.myPlugin');

// Pasa parámetros de CustomEvent
$('.box').trigger('click', undefined, {
  bubbles: true,
  cancelable: true,
  composed: true,
});

ajax

`$.ajaxSetup()`

Establece parámetros globales para solicitudes AJAX.

$.ajaxSetup({
  // No activar eventos AJAX globales por defecto
  global: false,

  // Usar el método POST por defecto para enviar solicitudes
  method: 'POST',
});

Para obtener la lista detallada de parámetros, consulta Parámetros AJAX a continuación.

`$.ajax()`

Envía una solicitud AJAX y devuelve un objeto Promise.

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

promise
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

Para obtener la lista detallada de parámetros, consulta Parámetros AJAX a continuación.

También puedes usar el método .on() para escuchar eventos globales de AJAX.

// Cuando comienza una solicitud AJAX, se activa este evento
$(document).on('ajaxStart', function (e, { xhr, options }) {
  // xhr: objeto XMLHttpRequest
  // options: parámetros del método $.ajax()
});

// Cuando una solicitud AJAX tiene éxito, se activa este evento
$(document).on('ajaxSuccess', function (e, { xhr, options, response }) {
  // xhr: objeto XMLHttpRequest
  // options: parámetros del método $.ajax()
  // response: respuesta de la solicitud
});

// Cuando una solicitud AJAX falla, se activa este evento
$(document).on('ajaxError', function (e, { xhr, options }) {
  // xhr: objeto XMLHttpRequest
  // options: parámetros del método $.ajax()
});

// Cuando una solicitud AJAX se completa (ya sea con éxito o fracaso), se activa este evento
$(document).on('ajaxComplete', function (e, { xhr, options }) {
  // xhr: objeto XMLHttpRequest
  // options: parámetros del método $.ajax()
});

Parámetros AJAX

Nombre del atributo	Tipo	Valor predeterminado
`url`	`string`	URL de la página actual
Dirección URL de la solicitud.
`method`	`string`	`GET`
Método HTTP de la solicitud. Valores posibles: `GET`, `POST`, `PUT`, `PATCH`, `HEAD`, `OPTIONS`, `DELETE`.
`data`	`any`	`''`
Datos a enviar al servidor.
`processData`	`boolean`	`true`
Si se deben convertir los datos enviados en una cadena de consulta.
`async`	`boolean`	`true`
Si la solicitud es asíncrona.
`cache`	`boolean`	`true`
Si se debe leer los datos de la caché. Solo válido para solicitudes `GET` y `HEAD`.
`username`	`string`	`''`
Nombre de usuario para autenticación HTTP.
`password`	`string`	`''`
Contraseña para autenticación HTTP.
`headers`	`object`	`{}`
Datos para añadir a la cabecera de la solicitud HTTP. Se pueden sobrescribir en la función de devolución de llamada `beforeSend`. Los campos con valor de cadena o `null` se enviarán; los campos con valor `undefined` se ignorarán.
`xhrFields`	`object`	`{}`
Datos para establecer en el objeto `XMLHttpRequest`. `$.ajax({ url: 'una URL de origen cruzado', xhrFields: { withCredentials: true } });`
`statusCode`	`object`	`{}`
Mapeo de códigos de estado HTTP y sus funciones de controlador. `$.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'); } } });` Cuando el código de estado está en el rango 200-299 o es 304, la solicitud es exitosa y los parámetros de la función son los mismos que los de la devolución de llamada `success`; de lo contrario, la solicitud falla y los parámetros de la función son los mismos que los de la devolución de llamada `error`.
`dataType`	`string`	`text`
Tipo de datos esperado del servidor. Incluye: `text`, `json`
`contentType`	`string`	`application/x-www-form-urlencoded`
Tipo MIME del contenido de la solicitud. Si se establece en `false`, no se establece `Content-Type`.
`timeout`	`number`	`0`
Tiempo de espera de la solicitud (milisegundos). Si se establece en `0`, no hay tiempo de espera.
`global`	`boolean`	`true`
Si se deben activar eventos AJAX globales.
`beforeSend`	`function`	-
Se llama antes de enviar la solicitud. Si devuelve `false`, se cancela la solicitud AJAX. `$.ajax({ beforeSend: function (xhr) { // xhr es el objeto XMLHttpRequest } });`
`success`	`function`	-
Se llama después de una solicitud exitosa. `$.ajax({ success: function (data, textStatus, xhr) { // data son los datos devueltos por la solicitud AJAX // textStatus es una cadena que contiene el código de éxito // xhr es el objeto XMLHttpRequest } });`
`error`	`function`	-
Se llama cuando ocurre un error en la solicitud. `$.ajax({ error: function (xhr, textStatus) { // xhr es el objeto XMLHttpRequest // textStatus es una cadena que contiene el código de error } });`
`complete`	`function`	-
Se llama al finalizar la solicitud, ya sea con éxito o fracaso. `$.ajax({ complete: function (xhr, textStatus) { // xhr es el objeto XMLHttpRequest // textStatus es una cadena que contiene el código de éxito o error } });`

이전 장

TopAppBar 상단 앱 바

다음 장

dialog