Библиотека JS-утилит

У этого метода есть несколько вариантов использования:

Можно передать CSS-селектор в качестве аргумента, и будет возвращён объект JQ, содержащий соответствующие элементы. Этот метод реализован через querySelectorAll.

$('.box')

Можно передать DOM-элемент, любой массив, NodeList или объект JQ, и будет возвращён объект JQ, содержащий указанные элементы.

$(document)

Можно передать строку HTML, и будет возвращён объект JQ, содержащий DOM, созданный на основе этого HTML.

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

Можно передать функцию, которая будет вызвана после завершения загрузки DOM.

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

Если передан только один объект, свойства этого объекта будут объединены с объектом JQ, что эквивалентно добавлению новой функциональности в пространство имен JQ.

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

// После этого можно вызывать пользовательские методы следующим образом:
$.customFunc()

Если передано два или более объектов, свойства всех объектов будут добавлены в первый объект, и будет возвращён объединенный объект.

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

// В этом случае и первый объект, и возвращаемое значение будут { key1: val1, key2: val2, key3: val3 }

Расширение методов в цепочке прототипов JQ.

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

// После этого расширенные методы можно использовать следующим образом:
$(document).customFunc()

Сериализует объект или массив, возвращая строку, которую можно использовать в качестве параметров 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

Если переданный аргумент является массивом, его формат должен соответствовать формату, возвращаемому методом .serializeArray():

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

Перебирает массив или объект. Возвращает первый аргумент, то есть перебираемый массив или объект.

Первым аргументом функции является индекс массива или ключ объекта; вторым аргументом — значение в соответствующей позиции массива или объекта.

this в функции обратного вызова указывает на значение в соответствующей позиции массива или объекта. Если функция обратного вызова возвращает false, итерация прекращается.

// Перебор массива
$.each(['a', 'b', 'c'], function (index, value) {
  console.log(index + ':' + value);
})

// Результат:
// 0:a
// 1:b
// 2:c

// Перебор объекта
$.each({'name': 'mdui', 'lang': 'zh'}, function (key, value) {
  console.log(key + ':' + value);
})

// Результат:
// name:mdui
// lang:zh

Добавляет элементы второго массива в первый массив и возвращает объединенный массив.

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

Отфильтровывает дублирующиеся элементы в массиве.

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

Перебирает массив или объект и возвращает новый массив, состоящий из возвращаемых значений функции.

Первым аргументом функции является значение в соответствующей позиции массива или объекта, вторым аргументом — индекс массива или ключ объекта.

Функция может возвращать любое значение. Если функция возвращает массив, он будет развёрнут; если возвращается null или undefined, значение будет проигнорировано. Внутри функции this указывает на объект window.

// Перебор массива
var result = $.map(['a', 'b', 'c'], function (value, index) {
  return index + value;
});
console.log(result); // ['0a', '1b', '2c']

// Когда функция обратного вызова возвращает массив, он будет развёрнут
var result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

// Перебор объекта
var result = $.map({ name: 'mdui', password: '123456' }, function (value, key) {
  return key + ':' + value;
});
console.log(result); // ['name:mdui', 'password:123456']

Определяет, содержит ли родительский узел дочерний узел, и возвращает логическое значение.

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

Возвращает true, если в коллекции есть хотя бы один элемент, соответствующий параметру, иначе возвращает false.

Параметром может быть CSS-селектор, DOM-элемент, массив DOM-элементов, объект JQ или функция обратного вызова.

Если параметром является функция обратного вызова, первым аргументом функции является индекс, вторым — текущий элемент, а this указывает на текущий элемент. Если функция возвращает true, это означает совпадение; если false — несовпадение.

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

// Определение на основе возвращаемого значения функции обратного вызова
$(document).is(function (index, element) {
  return element === document;
});
// true

Возвращает количество элементов в текущей коллекции.

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

Перебирает текущую коллекцию и выполняет функцию для каждого элемента коллекции. Если функция возвращает false, итерация прекращается.

Первым аргументом функции является индекс элемента, вторым — текущий элемент. this в функции указывает на текущий элемент.

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

Перебирает текущую коллекцию, выполняет функцию для каждого элемента коллекции и возвращает новую коллекцию, состоящую из возвращаемых значений функции. Если функция возвращает null или undefined, значение будет отфильтровано.

Первым аргументом функции является индекс элемента, вторым — текущий элемент. this в функции указывает на текущий элемент.

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

// result — это объект JQ, состоящий из значений соответствующих элементов

Возвращает коллекцию, содержащую элементы только по указанному индексу.

$('div').eq(0); // Возвращает объект JQ, содержащий только первый элемент
$('div').eq(-1); // Возвращает объект JQ, содержащий только последний элемент
$('div').eq(-2); // Возвращает объект JQ, содержащий только предпоследний элемент

Возвращает коллекцию, содержащую только первый элемент.

$('div').first(); // Возвращает объект JQ, содержащий только первый div

Возвращает коллекцию, содержащую только последний элемент.

$('div').last(); // Возвращает объект JQ, содержащий только последний div

Возвращает элемент по указанному индексу. Если аргумент не передан, возвращается массив, состоящий из всех элементов коллекции.

$('div').get(); // Возвращает массив, состоящий из всех элементов div
$('div').get(0); // Возвращает первый элемент div
$('div').get(-1); // Возвращает последний элемент div

Если аргумент не передан, возвращается индекс первого элемента коллекции относительно его соседних элементов.

Если в качестве аргумента передан CSS-селектор, возвращается индекс первого элемента коллекции относительно элементов, соответствующих CSS-селектору.

Если передан DOM-элемент, возвращается индекс этого DOM-элемента в коллекции.

Если передан объект JQ, возвращается индекс первого элемента объекта в текущей коллекции.

<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

Возвращает подмножество текущей коллекции.

Первый параметр — начальная позиция подмножества, второй параметр — конечная позиция; если второй параметр не передан, будут включены все элементы от начальной позиции до конца.

// Возвращает все элементы после третьего (включая третий) в коллекции
$('div').slice(3);

// Возвращает элементы с третьего по пятый (включая третий, не включая пятый) в коллекции
$('div').slice(3, 5);

Фильтрует элементы из текущей коллекции, которые соответствуют указанному выражению. Аргументом может быть CSS-селектор, DOM-элемент, массив DOM-элементов или функция обратного вызова.

Если аргументом является функция, первым аргументом функции является индекс, вторым — текущий элемент, а this указывает на текущий элемент. Если функция возвращает true, текущий элемент сохраняется; если false — удаляется.

// Фильтрует все элементы div, содержащие .box
$('div').filter('.box');

// Фильтрует все выбранные опции
$('#select option').filter(function (index, element) {
  return element.selected;
});

Фильтрует элементы из текущей коллекции, которые НЕ соответствуют указанному выражению. Аргументом может быть CSS-селектор, DOM-элемент, массив DOM-элементов или функция обратного вызова.

Если аргументом является функция, первым аргументом функции является индекс, вторым — текущий элемент, а this указывает на текущий элемент. Если функция возвращает true, текущий элемент будет удалён; если false — сохранён.

// Фильтрует все элементы div, не содержащие класс .box
$('div').not('.box');

// Фильтрует все невыбранные опции
$('#select option').not(function (index, element) {
  return element.selected;
});

Определяет, содержит ли первый элемент коллекции указанный CSS-класс.

// Определяет, содержит ли первый элемент div класс .item
$('div').hasClass('item')

Добавляет CSS-классы к каждому элементу коллекции; несколько имен классов можно разделить пробелами.

Также можно передать функцию обратного вызова, возвращающую имена CSS-классов. Первым аргументом функции является индекс, вторым — исходное имя CSS-класса элемента, а this указывает на текущий элемент.

// Добавляет .item ко всем элементам div
$('div').addClass('item')

// Добавляет .item1 и .item2 ко всем элементам div
$('div').addClass('item1 item2')

// Добавляет CSS-классы, возвращаемые функцией обратного вызова, ко всем элементам div
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
})

Удаляет CSS-классы у элементов коллекции; несколько имен классов можно разделить пробелами.

Также можно передать функцию обратного вызова, возвращающую имена CSS-классов. Первым аргументом функции является индекс, вторым — исходное имя CSS-класса элемента, а this указывает на текущий элемент.

Если аргумент не передан, атрибут class будет удалён непосредственно с элементов.

// Удаляет .item у всех элементов div
$('div').removeClass('item')

// Удаляет .item1 и .item2 у всех элементов div
$('div').removeClass('item1 item2')

// Удаляет CSS-классы, возвращаемые функцией обратного вызова, у всех элементов div
$('div').removeClass(function (index, currentClassName) {
  return 'item';
})

// Прямое удаление атрибута class
$('div').removeClass()

Переключает CSS-классы у элементов коллекции (добавляет, если класса нет, и удаляет, если он есть). Несколько имен классов можно разделить пробелами.

Также можно передать функцию обратного вызова, возвращающую имена CSS-классов. Первый аргумент функции — индекс элемента, второй — текущие CSS-классы элемента, а this указывает на сам элемент.

// Переключить класс .item у всех элементов div
$('div').toggleClass('item')

// Переключить классы .item1 и .item2 у всех элементов div
$('div').toggleClass('item1 item2')

// Переключить CSS-классы, возвращаемые функцией обратного вызова, у всех элементов div
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
})

Возвращает значение атрибута первого элемента в коллекции.

// Получить значение атрибута первого элемента
$('input').prop('checked');

Также позволяет установить значения атрибутов для всех элементов коллекции.

Значение атрибута может быть результатом функции обратного вызова. Первый аргумент функции — индекс элемента, второй — текущее значение атрибута, а this указывает на сам элемент.

Если значение атрибута или результат функции обратного вызова равен void или undefined, текущий атрибут не будет изменен.

Вы также можете установить несколько атрибутов одновременно, передав объект.

// Установить значения атрибутов для всех выбранных элементов
$('input').prop('checked', true);

// Установить значение атрибута с помощью функции обратного вызова
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

// Установить сразу несколько атрибутов элемента
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  }
});

Удаляет указанные атрибуты у всех элементов коллекции.

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

Возвращает значение свойства (property) первого элемента в коллекции.

// Получить значение свойства первого элемента
$('div').attr('username');

Также позволяет установить значения свойств для всех элементов коллекции.

Значение свойства может быть результатом функции обратного вызова. Первый аргумент функции — индекс элемента, второй — текущее значение свойства, а this указывает на сам элемент.

Если значение свойства или результат функции обратного вызова равен void или undefined, текущее свойство не будет изменено. Если результат равен null, указанное свойство будет удалено.

Вы также можете установить несколько свойств одновременно, передав объект.

// Установить значения свойств для всех выбранных элементов
$('div').attr('username', 'mdui');

// Установить значение свойства с помощью функции обратного вызова
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

// Установить сразу несколько свойств элемента
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  }
});

Удаляет указанные свойства у всех элементов коллекции. Несколько имен свойств можно разделить пробелами.

// Удалить одно свойство у всех элементов коллекции
$('div').removeAttr('username');

// Удалить несколько свойств у всех элементов коллекции
$('div').removeAttr('username lastname');

Возвращает значение (value) первого элемента в коллекции.

Если элемент — <select multiple="multiple">, будет возвращен массив, содержащий значения всех выбранных опций.

// Получить значение первого выбранного элемента
$('#input').val();

Также позволяет установить значения для всех элементов коллекции.

Устанавливаемое значение может быть строкой, числом, массивом строк или функцией обратного вызова.

Если передана функция обратного вызова, первый аргумент — индекс элемента, второй — его текущее значение, а this указывает на сам элемент.

Для элементов <input type="checkbox">, <input type="radio"> и <option> значение (или результат функции) может быть массивом. В этом случае будут выбраны те элементы, чьи значения присутствуют в массиве, а остальные — сняты.

Если значение или результат функции равен undefined, значение элемента будет очищено.

// Установить значение выбранных элементов
$('#input').val('input value');

// Установить значение элемента с помощью функции обратного вызова
$('#input').val(function (index, oldValue) {
  return 'new value';
});

Возвращает текстовое содержимое всех элементов коллекции (включая их потомков).

// Получить текст всех элементов .box
$('.box').text();

Также позволяет установить текстовое содержимое для всех элементов коллекции.

Устанавливаемое значение может быть строкой, числом, логическим значением или функцией обратного вызова.

В случае функции обратного вызова: первый аргумент — индекс элемента, второй — его текущий текст, this указывает на сам элемент.

Если значение или результат функции равен undefined, текст соответствующего элемента не изменится.

// Установить текстовое содержимое выбранных элементов
$('.box').text('text content');

// Установить текстовое содержимое элемента через функцию обратного вызова
$('.box').text(function (index, oldTextContent) {
  return 'new text content';
});

Возвращает HTML-содержимое первого элемента в коллекции.

// Получить HTML-содержимое первого элемента .box
$('.box').html();

Также позволяет установить HTML-содержимое для всех элементов коллекции.

Устанавливаемое значение может быть HTML-строкой, DOM-элементом или функцией обратного вызова.

В случае функции обратного вызова: первый аргумент — индекс элемента, второй — текущий HTML, this указывает на сам элемент.

Если значение или результат функции равен undefined, HTML соответствующего элемента не изменится.

// Установить HTML-содержимое выбранных элементов
$('.box').html('<div>new html content</div>');

// Установить HTML-содержимое элемента через функцию обратного вызова
$('.box').html(function (index, oldHTMLContent) {
  return '<div>new html content</div>';
});

Читает или сохраняет данные, связанные с указанным элементом.

Если при сохранении данных значение равно undefined, это эквивалентно чтению данных. То есть $.data(element, 'key', undefined) и $.data(element, 'key') идентичны.

Примечание: этот метод не извлекает значения из атрибутов data-*.

// Сохранить данные у указанного элемента (возвращает сохраненное значение)
$.data(document.body, 'layout', 'dark'); // Возвращает dark

// Сохранить сразу несколько значений данных у указанного элемента
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
});

// Получить данные, сохраненные у указанного элемента
$.data(document.body, 'layout'); // Возвращает dark

// Получить все данные, сохраненные у указанного элемента
$.data(document.body); // Возвращает { layout: 'dark', primary: 'indigo', accent: 'pink' }

Удаляет данные, сохраненные у указанного элемента.

Несколько ключей можно разделить пробелами или передать в виде массива. Если ключи не указаны, будут удалены все данные элемента.

// Удалить данные с ключом name у элемента
$.removeData(document.body, 'name');

// Удалить данные с ключами name1 и name2. Следующие два способа эквивалентны:
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

// Удалить все сохраненные данные у элемента
$.removeData(document.body);

Читает или сохраняет данные у элементов текущей коллекции.

Если при сохранении данных значение равно undefined, сохранение не происходит.

Примечание: данные, извлекаемые этим методом, включают значения атрибутов data-*.

// Сохранить данные у элементов текущей коллекции
$('.box').data('layout', 'dark');

// Сохранить сразу несколько значений данных у элементов текущей коллекции
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

// Получить указанные данные у первого элемента коллекции
$('.box').data('layout'); // Возвращает dark

// Получить все данные первого элемента коллекции
$('.box').data(); // Возвращает { layout: 'dark', primary: 'indigo', accent: 'pink' }

Удаляет сохраненные данные у элементов текущей коллекции.

Несколько ключей можно разделить пробелами или передать в виде массива. Если ключи не указаны, будут удалены все данные элементов.

Примечание: этот метод удаляет только данные, установленные через .data(), и не затрагивает атрибуты data-*.

// Удалить данные с ключом name
$('.box').removeData('name');

// Удалить данные с ключами name1 и name2. Следующие два способа эквивалентны:
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// Удалить все сохраненные данные у элементов
$('.box').removeData();

Возвращает значение CSS-свойства первого элемента коллекции.

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

Также позволяет установить значения CSS-свойств для всех элементов коллекции.

Значением свойства может быть строка, число или функция обратного вызова, возвращающая строку или число.

Если значение — функция: первый аргумент — индекс элемента, второй — его текущее CSS-свойство, this указывает на сам элемент.

Если значение или результат функции равен void, undefined или null, CSS-свойство текущего элемента не изменится.

Если значение или результат функции — число, к нему будет автоматически добавлена единица измерения px. Если свойство не поддерживает px как единицу, число просто преобразуется в строку.

Вы также можете установить несколько CSS-свойств одновременно, передав объект с парами ключ-значение.

// Установить значения стилей для всех элементов коллекции
$('.box').css('color', 'red')

// Установить значения стилей через функцию обратного вызова
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

// Установить несколько стилей одновременно через объект
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});

Возвращает ширину в пикселях первого элемента коллекции без учета padding, border и margin.

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

Также позволяет установить ширину всех элементов коллекции (без учета padding, border и margin).

Значением может быть строка с единицами измерения, число или функция обратного вызова.

В функции обратного вызова: первый аргумент — индекс элемента, второй — текущая ширина, this указывает на сам элемент.

Если значение или результат функции — число, к нему будут автоматически добавлены px.

Если значение или результат функции равен null или undefined, ширина элемента не изменится.

// Установить ширину всех элементов коллекции
$('.box').width('20%');

// Если значение числовое, единицей измерения по умолчанию является px
$('.box').width(10);

// Установить ширину через функцию обратного вызова
$('.box').width(function (index, oldWidth) {
  return 10;
});

Возвращает высоту в пикселях первого элемента коллекции без учета padding, border и margin.

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

Также позволяет установить высоту всех элементов коллекции (без учета padding, border и margin).

Значением может быть строка с единицами измерения, число или функция обратного вызова.

В функции обратного вызова: первый аргумент — индекс элемента, второй — текущая высота, this указывает на сам элемент.

Если значение или результат функции — число, к нему будут автоматически добавлены px.

Если значение или результат функции равен null или undefined, высота элемента не изменится.

// Установить высоту всех элементов коллекции
$('.box').height('20%');

// Если значение числовое, единицей измерения по умолчанию является px
$('.box').height(10);

// Установить высоту через функцию обратного вызова
$('.box').height(function (index, oldHeight) {
  return 10;
});

Возвращает ширину в пикселях первого элемента коллекции, включая padding, но без учета border и margin.

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

Также позволяет установить ширину всех элементов коллекции (с учетом padding, но без border и margin).

Значением может быть строка с единицами измерения, число или функция обратного вызова.

В функции обратного вызова: первый аргумент — индекс элемента, второй — текущая ширина, this указывает на сам элемент.

Если значение или результат функции — число, к нему будут автоматически добавлены px.

Если значение или результат функции равен null или undefined, ширина элемента не изменится.

// Установить ширину всех элементов коллекции
$('.box').innerWidth('20%');

// Если значение числовое, единицей измерения по умолчанию является px
$('.box').innerWidth(10);

// Установить ширину через функцию обратного вызова
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

Возвращает высоту в пикселях первого элемента коллекции, включая padding, но без учета border и margin.

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

Также позволяет установить высоту всех элементов коллекции (с учетом padding, но без border и margin).

Значением может быть строка с единицами измерения, число или функция обратного вызова.

В функции обратного вызова: первый аргумент — индекс элемента, второй — текущая высота, this указывает на сам элемент.

Если значение или результат функции — число, к нему будут автоматически добавлены px.

Если значение или результат функции равен null или undefined, высота элемента не изменится.

// Установить высоту всех элементов коллекции
$('.box').innerHeight('20%');

// Если значение числовое, единицей измерения по умолчанию является px
$('.box').innerHeight(10);

// Установить высоту через функция обратного вызова
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});

Возвращает ширину в пикселях первого элемента коллекции, включая padding и border, но без margin. Передайте true первым аргументом, чтобы включить margin.

// Ширина с учетом padding и border
$('.box').outerWidth();

// Ширина с учетом padding, border и margin
$('.box').outerWidth(true);

Также позволяет установить ширину всех элементов коллекции (с учетом padding и border, без margin). Можно передать true вторым аргументом, чтобы включить margin.

Первый аргумент может быть строкой с единицами измерения, числом или функцией обратного вызова.

В функции обратного вызова: первый аргумент — индекс элемента, второй — текущая ширина, this указывает на сам элемент.

Если значение или результат функции — число, к нему будут автоматически добавлены px.

Если значение или результат функции равен null или undefined, ширина элемента не изменится.

// Установить ширину всех элементов коллекции
$('.box').outerWidth('20%');

// Если значение числовое, единицей измерения по умолчанию является px
$('.box').outerWidth(10);

// Передайте true вторым аргументом, чтобы включить margin в ширину
$('.box').outerWidth(10, true);

// Установить ширину через функцию обратного вызова
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});

Возвращает высоту в пикселях первого элемента коллекции, включая padding и border, но без margin. Передайте true первым аргументом, чтобы включить margin.

// Высота с учетом padding и border
$('.box').outerHeight();

// Высота с учетом padding, border и margin
$('.box').outerHeight(true);

Также позволяет установить высоту всех элементов коллекции (с учетом padding и border, без margin). Можно передать true вторым аргументом, чтобы включить margin.

Первый аргумент может быть строкой с единицами измерения, числом или функцией обратного вызова.

В функции обратного вызова: первый аргумент — индекс элемента, второй — текущая высота, this указывает на сам элемент.

Если значение или результат функции — число, к нему будут автоматически добавлены px.

Если значение или результат функции равен null или undefined, высота элемента не изменится.

// Установить высоту всех элементов коллекции
$('.box').outerHeight('20%');

// Если значение числовое, единицей измерения по умолчанию является px
$('.box').outerHeight(10);

// Передайте true вторым аргументом, чтобы включить margin в высоту
$('.box').outerHeight(10, true);

// Установить высоту через функцию обратного вызова
$('.box').outerHeight(function (index, oldWidth) {
  return 10;
});

Скрывает все элементы коллекции.

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

Отображает все элементы коллекции.

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

Переключает состояние видимости всех элементов коллекции.

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

Возвращает координаты первого элемента коллекции относительно document.

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

Также позволяет установить координаты для всех элементов коллекции относительно document.

В качестве аргумента передается объект с полями top и left или функция обратного вызова, возвращающая такой объект.

В функции обратного вызова: первый аргумент — индекс элемента, второй — текущие координаты, this указывает на сам элемент.

Если значение top или left равно undefined, соответствующая координата не изменится.

// Установить координаты для всех элементов коллекции
$('.box').offset({ top: 20, left: 30 });

// Установить координаты через функцию обратного вызова
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

Возвращает ближайшего родителя первого элемента в коллекции, у которого установлено позиционирование. То есть первого родителя с position = relative или absolute.

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

Возвращает смещение первого элемента коллекции относительно его родителя.

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

Ищет потомков текущих элементов коллекции, соответствующих CSS-селектору.

// Найти все элементы .box внутри #box
$('#box').find('.box')

Возвращает коллекцию, состоящую из прямых дочерних элементов каждого элемента в текущем наборе.

Можно передать CSS-селектор для фильтрации дочерних элементов.

// Найти все прямые дочерние элементы #box
$('#box').children();

// Найти все прямые дочерние элементы #box с классом .box
$('#box').children('.box')

Фильтрует текущую коллекцию, оставляя только те элементы, которые содержат указанных потомков.

Аргументом может быть CSS-селектор или DOM-элемент.

// Добавить цвет фона для li, содержащих ul
$('li').has('ul').css('background-color', 'red');

Возвращает коллекцию, состоящую из прямых родительских элементов каждого элемента в текущем наборе.

Можно передать CSS-селектор, чтобы вернуть только тех родителей, которые ему соответствуют.

// Получить прямых родителей элементов .box
$('.box').parent();

// Получить прямых родителей элементов .box, имеющих класс .parent
$('.box').parent('.parent');

Возвращает коллекцию всех предков для каждого элемента в текущем наборе.

Можно передать CSS-селектор для фильтрации предков.

// Получить всех предков элементов span
$('span').parents();

// Получить всех предков элементов span, являющихся элементами p
$('span').parents('p');

Возвращает всех предков каждого элемента до тех пор (но не включая), пока не встретится элемент, соответствующий первому аргументу.

Первым аргументом может быть CSS-селектор, DOM-элемент или объект JQ.

Вторым аргументом может быть CSS-селектор для фильтрации возвращаемых элементов.

Если аргументы не указаны, будут возвращены все предки (аналогично .parents()).

// Получить всех предков элементов .item
$('.item').parentsUntil();

// Найти всех предков .item до элемента .parent
$('.item').parentsUntil('.parent');

// Найти всех предков .item, являющихся div, до элемента .parent
$('.item').parentsUntil('.parent', 'div');

Возвращает коллекцию, состоящую из предыдущих соседних элементов для каждого элемента в текущем наборе.

Можно передать CSS-селектор для фильтрации соседей.

// Получить предыдущих соседей элементов .box
$('.box').prev();

// Получить предыдущих соседей элементов .box, являющихся div
$('.box').prev('div');

Возвращает коллекцию всех предыдущих соседей для каждого элемента в текущем наборе.

Можно передать CSS-селектор для фильтрации этих соседей.

// Получить всех соседей, стоящих перед .box
$('.box').prevAll();

// Получить всех соседей перед .box, имеющих класс .selected
$('.box').prevAll('.selected');

Возвращает всех соседей перед каждым элементом до тех пор (но не включая), пока не встретится элемент, соответствующий первому аргументу.

Первым аргументом может быть CSS-селектор, DOM-элемент или объект JQ.

Вторым аргументом может быть CSS-селектор для фильтрации результатов.

// Получить всех соседей перед .box
$('.box').prevUntil();

// Получить всех соседей перед .box до элемента .until
$('.box').prevUntil('.until');

// Получить всех соседей перед .box, являющихся div, до элемента .until
$('.box').prevUntil('.until', 'div');

Возвращает коллекцию, состоящую из следующих соседних элементов для каждого элемента в текущем наборе.

Можно передать CSS-селектор для фильтрации соседей.

// Получить следующих соседей элементов .box
$('.box').next();

// Получить следующих соседей элементов .box, являющихся div
$('.box').next('div');

Возвращает коллекцию всех следующих соседей для каждого элемента в текущем наборе.

Можно передать CSS-селектор для фильтрации этих соседей.

// Получить всех соседей после элементов .box
$('.box').nextAll();

// Получить всех соседей после .box, имеющих класс .selected
$('.box').nextAll('.selected');

Возвращает всех соседей после каждого элемента до тех пор (но не включая), пока не встретится элемент, соответствующий первому аргументу.

Первым аргументом может быть CSS-селектор, DOM-элемент или объект JQ.

Вторым аргументом может быть CSS-селектор для фильтрации результатов.

// Получить всех соседей после .box
$('.box').nextUntil();

// Получить всех соседей после .box до элемента .until
$('.box').nextUntil('.until');

// Получить всех соседей после .box, являющихся div, до элемента .until
$('.box').nextUntil('.until', 'div');

Ищет ближайшего предка для каждого элемента коллекции (включая сам элемент), соответствующего аргументу.

Аргументом может быть CSS-селектор, DOM-элемент или объект JQ.

// Найти ближайшего предка .parent для элементов .box
$('.box').closest('.parent');

Возвращает коллекцию всех соседей (братьев) для каждого элемента в текущем наборе.

Можно передать CSS-селектор для фильтрации соседей.

// Получить всех соседей (братьев) элементов .box
$('.box').siblings();

// Получить всех соседей .box с классом .selected
$('.box').siblings('.selected');

Добавляет новые элементы в текущую коллекцию.

Аргументом может быть HTML-строка, CSS-селектор, объект JQ, DOM-элемент, массив DOM-элементов или NodeList.

// Добавить элементы с классом .selected в текущую коллекцию
$('.box').add('.selected');

Удаляет все дочерние узлы у текущих элементов коллекции.

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

Полностью удаляет элементы коллекции из DOM.

Можно передать CSS-селектор для фильтрации удаляемых элементов.

// Удалить все элементы p
$('p').remove();

// Удалить все элементы p с классом .box
$('p').remove('.box');

Вставляет указанное содержимое в начало каждого элемента коллекции.

Аргументами могут быть HTML-строки, DOM-элементы, массивы DOM-элементов или объекты JQ. Поддерживается несколько аргументов.

Также можно передать функцию обратного вызова. Аргументы функции: индекс элемента и исходный HTML; this указывает на текущий элемент.

Этот метод возвращает исходную коллекцию.

// Вставить один элемент
$('<p>I would like to say: </p>').prepend('<b>Hello</b>');
// Результат:<p><b>Hello</b>I would like to say: </p>

// Вставить несколько элементов
$('<p>I would like to say: </p>').prepend('<b>Hello</b>', '<b>World</b>');
// Результат:<p><b>Hello</b><b>World</b>I would like to say: </p>

// Вставить элемент через функцию обратного вызова
$('<p>Hello</p>').prepend(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Результат:<p><b>Hello0</b>Hello</p>

Добавляет элементы текущей коллекции в начало указанных целевых элементов.

Аргументом может быть CSS-селектор, HTML-строка, DOM-элемент, массив элементов или объект JQ.

Этот метод возвращает исходную коллекцию.

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

// Результат:[ <div><div>Hello</div>I would like to say: </div> ]

Вставляет указанное содержимое в конец каждого элемента коллекции.

Аргументами могут быть HTML-строки, DOM-элементы, массивы DOM-элементов или объекты JQ. Поддерживается несколько аргументов.

Также можно передать функцию обратного вызова. Аргументы функции: индекс элемента и исходный HTML; this указывает на текущий элемент.

Этот метод возвращает исходную коллекцию.

// Вставить один элемент
$('<p>I would like to say: </p>').append('<b>Hello</b>');
// Результат:<p>I would like to say: <b>Hello</b></p>

// Вставить несколько элементов
$('<p>I would like to say: </p>').append('<b>Hello</b>', '<b>World</b>');
// Результат:<p>I would like to say: <b>Hello</b><b>World</b></p>

// Вставить элемент через функцию обратного вызова
$('<p>Hello</p>').append(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Результат:<p>Hello<b>Hello0</b></p>

Добавляет элементы текущей коллекции в конец указанных целевых элементов.

Аргументом может быть CSS-селектор, HTML-строка, DOM-элемент, массив элементов или объект JQ.

Этот метод возвращает исходную коллекцию.

$('<div>Hello</div>').appendTo('<div>I would like to say: </div>')
// Результат:<div>I would like to say: <div>Hello</div></div>

Вставляет содержимое сразу после каждого элемента коллекции в качестве соседа.

Аргументами могут быть HTML-строки, DOM-элементы, массивы DOM-элементов или объекты JQ. Поддерживается несколько аргументов.

Также можно передать функцию обратного вызова. Аргументы функции: индекс элемента и исходный HTML; this указывает на текущий элемент.

Этот метод возвращает исходную коллекцию.

// Вставить один элемент
$('<p>I would like to say: </p>').after('<b>Hello</b>')
// Результат:<p>I would like to say: </p><b>Hello</b>

// Вставить несколько элементов
$('<p>I would like to say: </p>').after('<b>Hello</b>', '<b>World</b>')
// Результат:<p>I would like to say: </p><b>Hello</b><b>World</b>

// Вставить элемент через функцию обратного вызова
$('<p>Hello</p>').after(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Результат:<p>Hello</p><b>Hello0</b>

Вставляет элементы текущей коллекции после указанных целевых элементов.

Если элементы коллекции уже есть на странице, они будут перемещены. Если целей несколько, элементы коллекции будут клонированы для каждой из них.

Аргументом для указания цели может быть HTML-строка, CSS-селектор, DOM-элемент, массив элементов или объект JQ.

$('<b>Hello</b>').insertAfter('<p>I would like to say: </p>');
// Результат:<p>I would like to say: </p><b>Hello</b>

Вставляет содержимое прямо перед каждым элементом коллекции в качестве соседа.

Аргументами могут быть HTML-строки, DOM-элементы, массивы DOM-элементов или объекты JQ. Поддерживается несколько аргументов.

Также можно передать функцию обратного вызова. Аргументы функции: индекс элемента и исходный HTML; this указывает на текущий элемент.

Этот метод возвращает исходную коллекцию.

// Вставить один элемент
$('<p>I would like to say: </p>').before('<b>Hello</b>')
// Результат:<b>Hello</b><p>I would like to say: </p>

// Вставить несколько элементов
$('<p>I would like to say: </p>').before('<b>Hello</b>', '<b>World</b>')
// Результат:<b>Hello</b><b>World</b><p>I would like to say: </p>

// Вставить элемент через функцию обратного вызова
$('<p>Hello</p>').before(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Результат:<b>Hello0</b><p>Hello</p>

Вставляет элементы текущей коллекции перед указанными целевыми элементами.

Если элементы коллекции уже есть на странице, они будут перемещены. Если целей несколько, элементы коллекции будут клонированы для каждой из них.

Аргументом для указания цели может быть HTML-строка, CSS-селектор, DOM-элемент, массив элементов или объект JQ.

$('<p>I would like to say: </p>').insertBefore('<b>Hello</b>');
// Результат:<p>I would like to say: </p><b>Hello</b>

Заменяет элементы текущей коллекции указанным содержимым.

Аргументом может быть HTML-строка, DOM-элемент, массив элементов или объект JQ.

Также можно передать функцию обратного вызова. Аргументы функции: индекс элемента и исходный HTML; this указывает на текущий элемент.

Этот метод возвращает исходную (замененную) коллекцию.

// Заменить все элементы .box на <p>Hello</p>
$('.box').replaceWith('<p>Hello</p>');

// Заменить все элементы .box на результат функции обратного вызова
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

Заменяет указанный целевой элемент элементами текущей коллекции.

Аргументом может быть CSS-селектор, DOM-элемент, массив элементов или объект JQ.

Этот метод возвращает коллекцию новых (заменяющих) элементов.

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

Создает глубокую копию всех элементов коллекции.

Копирует элементы через нативный метод cloneNode(true). Данные и обработчики событий при этом не копируются. В отличие от jQuery, здесь нет параметров для управления этим поведением.

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

Преобразует значения элементов формы в массив объектов с парами ключ-значение (name и value).

Этот метод можно использовать как для отдельных элементов формы, так и для всей формы <form>.

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

Сериализует значения элементов формы в строку.

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

Привязывает обработчик событий к определенным событиям для каждого элемента коллекции. Примеры использования:

// Привязать событие клика
$('.box').on('click', function (e) {
  console.log('Клик по элементу .box');
});

// Привязать несколько событий
$('.box').on('click focus', function (e) {
  console.log('Функция сработает как при клике, так и при фокусе');
});

// Делегирование событий
$(document).on('click', '.box', function (e) {
  console.log('Функция сработает при клике на .box');
});

// Одновременная привязка нескольких событий и их обработчиков
$('.box').on({
  'click': function (e) {
    console.log('Сработало событие click');
  },
  'focus': function (e) {
    console.log('Сработало событие focus');
  }
});

// Передача параметров
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Клик по элементу .box с передачей параметров в обработчик');
  // e._data содержит {key1: 'value1', key2: 'value2'}
});

// Привязка нескольких событий и обработчиков с передачей параметров
$('.box').on({
  'click': function (e) {
    console.log('Сработало событие click');
    // e._data содержит {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Сработало событие focus');
    // e._data содержит {key1: 'value1', key2: 'value2'}
  }
}, { key1: 'value1', key2: 'value2' });

// Делегирование событий с передачей параметров
$(document).on('click', '.box', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Клик по элементу .box с передачей параметров в обработчик');
  // e._data содержит {key1: 'value1', key2: 'value2'}
});

// Делегирование нескольких событий и обработчиков одновременно
$(document).on({
  'click': function (e) {
    console.log('Сработало событие click');
  },
  'focus': function (e) {
    console.log('Сработало событие focus');
  }
}, '.box');

// Делегирование нескольких событий и обработчиков с передачей параметров
$(document).on({
  'click': function (e) {
    console.log('Сработало событие click');
    // e._data содержит {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Сработало событие focus');
    // e._data содержит {key1: 'value1', key2: 'value2'}
  }
}, '.box', { key1: 'value1', key2: 'value2' });

// Получение параметров события
$('.box').on('click', function (e, data) {
  // data равно e._detail
});

// Поддерживаются пространства имен (namespaces) в названиях событий
$('.box').on('click.myPlugin', function () {
  console.log('Клик по элементу .box');
});

Привязывает обработчик к событию, который сработает не более одного раза для каждого элемента.

Использование этого метода идентично .on(), поэтому примеры опущены.

Удаляет привязанные обработчики событий у элементов коллекции. Примеры использования:

// Удалить все привязанные обработчики событий
$('.box').off();

// Удалить обработчики конкретного события
$('.box').off('click');

// Удалить обработчики нескольких событий одновременно
$('.box').off('click focus');

// Удалить конкретную функцию-обработчик
$('.box').off('click', callback);

// Отвязать событие, добавленное через делегирование
$(document).off('click', '.box');

// Отвязать конкретный обработчик, добавленный через делегирование
$(document).off('click', '.box', callback);

// Одновременная отвязка нескольких функций-обработчиков
$('.box').off({
  'click': callback1,
  'focus': callback2,
});

// Одновременная отвязка нескольких обработчиков, добавленных через делегирование
$(document).off({
  'click': callback1,
  'focus': callback2,
}, '.box');

// Поддерживаются пространства имен. Следующий пример отвяжет все события, оканчивающиеся на .myPlugin
$(document).off('.myPlugin');

Вызывает (триггерит) указанное событие. Примеры использования:

// Вызвать событие
$('.box').trigger('click');

// Вызвать событие с передачей параметров
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

Устанавливает глобальные настройки для AJAX-запросов.

$.ajaxSetup({
  // По умолчанию запретить запуск глобальных AJAX-событий
  global: false,

  // По умолчанию использовать метод POST
  method: 'POST'
});

Подробный список параметров см. в разделе Параметры AJAX.

Выполняет AJAX-запрос и возвращает Promise.

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

Подробный список параметров см. в разделе Параметры AJAX.

Глобальные AJAX-события.

Выполняется при запуске AJAX-запроса.

$(document).ajaxStart(function (event, xhr, options) {
  // xhr: объект XMLHttpRequest
  // options: параметры конфигурации AJAX-запроса
});

Глобальные AJAX-события.

Выполняется при успешном завершении AJAX-запроса.

$(document).ajaxSuccess(function (event, xhr, options, data) {
  // xhr: объект XMLHttpRequest
  // options: параметры конфигурации AJAX-запроса
  // data: данные, возвращенные сервером
});

Глобальные AJAX-события.

Выполняется при ошибке AJAX-запроса.

$(document).ajaxError(function (event, xhr, options) {
  // xhr: объект XMLHttpRequest
  // options: параметры конфигурации AJAX-запроса
});

Глобальные AJAX-события.

Выполняется по завершении AJAX-запроса (независимо от результата).

$(document).ajaxComplete(function (event, xhr, options) {
  // xhr: объект XMLHttpRequest
  // options: параметры конфигурации AJAX-запроса
});

Метод запроса.

Включая: GET, POST, PUT, PATCH, HEAD, OPTIONS, DELETE

Данные, добавляемые в заголовки. Могут быть переопределены в функции beforeSend.

Поля со строковыми значениями или null будут отправлены, поля с undefined — удалены.

Дополнительные свойства для объекта XMLHttpRequest.

$.ajax({
  url: 'URL для кросс-доменного запроса',
  xhrFields: {
    withCredentials: true
  }
});

Объект, сопоставляющий HTTP-коды состояния с функциями.

$.ajax({
  statusCode: {
    404: function (xhr, textStatus) {
      alert('Вызов при коде 404');
    },
    200: function (data, textStatus, xhr) {
      alert('Вызов при коде 200');
    }
  }
});

Если код ошибки в диапазоне 200–299 или равен 304, запрос считается успешным (аргументы функции те же, что у success). В остальных случаях запрос считается неудачным (аргументы те же, что у error).

Тип данных, возвращаемых сервером.

Включая: text, json

Выполняется перед отправкой запроса. Возврат false отменит запрос.

$.ajax({
  beforeSend: function (xhr) {
    // xhr: объект XMLHttpRequest
  }
});

Выполняется после успешного завершения запроса.

$.ajax({
  success: function (data, textStatus, xhr) {
    // data: данные, возвращенные сервером
    // textStatus: строка с кодом успеха
    // xhr: объект XMLHttpRequest
  }
});

Выполняется при возникновении ошибки.

$.ajax({
  error: function (xhr, textStatus) {
    // xhr: объект XMLHttpRequest
    // textStatus: строка с кодом успеха
  }
});

Выполняется после завершения запроса.

$.ajax({
  complete: function (xhr, textStatus) {
    // xhr: объект XMLHttpRequest
    // textStatus: строка с кодом успеха
  }
});

Принудительно перерисовывает элементы.

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

Устанавливает CSS-свойство transition-duration для элементов.

Можно передать строку с единицами измерения или число. Числа автоматически преобразуются в миллисекунды (ms).

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

Добавляет обработчик события transitionend для элементов.

Функция получает объект события transitionend; this указывает на элемент.

$('.box').transitionEnd(function () {
  console.log('Событие transitionend для элемента .box сработало');
})

Устанавливает CSS-свойство transform для элементов.

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

Устанавливает CSS-свойство transform-origin для элементов.

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

Запускать ли функции инициализации для элемента и его потомков.

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

Создает и отображает оверлей (layer), возвращая объект JQ оверлея.

Можно передать число для задания z-index оверлея (по умолчанию 2000).

$.showOverlay();

Скрывает оверлей.

Если $.showOverlay() вызывался несколько раз, для скрытия потребуется столько же вызовов $.hideOverlay(). Можно передать true, чтобы скрыть оверлей принудительно.

$.hideOverlay();

Блокирует прокрутку страницы.

$.lockScreen();

Разблокирует прокрутку страницы.

Для полной разблокировки требуется столько же вызовов $.unlockScreen(), сколько было $.lockScreen(). Параметр true выполняет принудительную разблокировку.

$.unlockScreen();

Троттлинг функции (throttle).

Принимает функцию в качестве аргумента. Первый параметр — выполняемая функция, второй — задержка в миллисекундах.

$.throttle(function () {
  console.log('Эта функция будет выполняться не чаще одного раза в 100 мс');
}, 100)

Генерирует уникальный глобальный идентификатор (GUID).

$.guid();

Можно передать аргумент. Если для него еще нет GUID, он будет создан и возвращен. Если уже есть — вернется существующий.

// Результат выполнения следующих двух строк будет одинаковым
$.guid('test');
$.guid('test');