Bibliothèque JS

Cette méthode a plusieurs usages :

Un sélecteur CSS peut être passé en paramètre pour renvoyer un objet JQ contenant les éléments correspondants. Cette méthode est implémentée via querySelectorAll.

$('.box')

Des éléments DOM, un tableau quelconque, un NodeList ou des objets JQ peuvent être passés pour renvoyer un objet JQ contenant les éléments spécifiés.

$(document)

Une chaîne HTML peut être passée pour renvoyer un objet JQ contenant le DOM créé à partir du HTML.

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

Une fonction peut être passée, qui sera appelée une fois que le DOM sera entièrement chargé.

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

Si un seul objet est passé, les propriétés de cet objet seront fusionnées dans l’objet JQ, ce qui équivaut à ajouter de nouvelles fonctionnalités sous l’espace de nom JQ.

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

// Ensuite, la méthode personnalisée peut être appelée ainsi
$.customFunc()

Si deux objets ou plus sont passés, les propriétés de tous les objets sont ajoutées au premier, et l’objet fusionné est renvoyé.

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

// Dans ce cas, à la fois le premier objet et la valeur renvoyée sont { key1: val1, key2: val2, key3: val3 }

Étendre les méthodes sur la chaîne de prototypes JQ.

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

// Ensuite, la méthode étendue peut être utilisée ainsi
$(document).customFunc()

Sérialiser un objet ou un tableau et renvoyer une chaîne adaptée aux paramètres d’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 le paramètre est un tableau, il doit avoir le même format que le format de retour de .serializeArray() :

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

Parcourir un tableau ou un objet. La valeur renvoyée est le premier paramètre, c’est-à-dire le tableau ou l’objet traversé.

Le premier paramètre de la fonction est la position d’index du tableau ou la clé de l’objet ; le second est la valeur à la position correspondante du tableau ou de l’objet.

Le this dans la fonction de rappel pointe vers la valeur à la position correspondante du tableau ou de l’objet. Si la fonction de rappel renvoie false, le parcours s’arrête.

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

// Résultat :
// 0:a
// 1:b
// 2:c

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

// Résultat :
// name:mdui
// lang:zh

Ajouter les éléments du second tableau au premier et renvoyer le tableau fusionné.

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

Supprimer les éléments en double du tableau.

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

Parcourir un tableau ou un objet et renvoyer un nouveau tableau composé des valeurs renvoyées par la fonction.

Le premier paramètre de la fonction est la valeur à la position correspondante du tableau ou de l’objet, et le second paramètre est la position d’index du tableau ou la clé de l’objet.

La fonction peut renvoyer n’importe quelle valeur. Si elle renvoie un tableau, il sera aplati ; si elle renvoie null ou undefined, il sera ignoré. Le this à l’intérieur de la fonction pointe vers l’objet window.

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

// Lorsque la fonction de rappel renvoie un tableau, il est aplati
var result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

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

Déterminer si un nœud parent contient un nœud enfant, en renvoyant une valeur booléenne.

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

Renvoie true si au moins un élément de la collection correspond au paramètre, sinon false.

Le paramètre peut être un sélecteur CSS, un élément DOM, un tableau d’éléments DOM, un objet JQ ou une fonction de rappel.

Lorsque le paramètre est une fonction de rappel, son premier paramètre est la position d’index, le second est l’élément actuel, et this pointe vers l’élément actuel. Si la fonction renvoie true, cela signifie une correspondance ; si elle renvoie false, cela signifie qu’il n’y a pas de correspondance.

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

// Déterminer à partir de la valeur renvoyée par la fonction de rappel
$(document).is(function (index, element) {
  return element === document;
});
// true

Renvoie le nombre d’éléments de la collection actuelle.

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

Parcourir la collection actuelle et exécuter une fonction pour chaque élément de la collection. Si la fonction renvoie false, le parcours s’arrête.

Le premier paramètre de la fonction est la position d’index de l’élément, et le second est l’élément actuel. Le this dans la fonction pointe vers l’élément actuel.

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

Parcourir la collection actuelle et exécuter une fonction pour chaque élément, en renvoyant une nouvelle collection composée des valeurs renvoyées par la fonction. Si la fonction renvoie null ou undefined, elle sera filtrée.

Le premier paramètre de la fonction est la position d’index de l’élément, et le second est l’élément actuel. Le this dans la fonction pointe vers l’élément actuel.

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

// result contient un objet JQ composé des valeurs des éléments correspondants

Renvoie une collection contenant uniquement l’élément à la position d’index spécifiée.

$('div').eq(0); // Renvoie un objet JQ contenant uniquement le premier élément
$('div').eq(-1); // Renvoie un objet JQ contenant uniquement le dernier élément
$('div').eq(-2); // Renvoie un objet JQ contenant uniquement l’avant-dernier élément

Renvoie une collection contenant uniquement le premier élément.

$('div').first(); // Renvoie un objet JQ contenant uniquement le premier div

Renvoie une collection contenant uniquement le dernier élément.

$('div').last(); // Renvoie un objet JQ contenant uniquement le dernier div

Renvoie l’élément à la position d’index spécifiée. Si aucun paramètre n’est passé, renvoie un tableau composé de tous les éléments de la collection.

$('div').get(); // Renvoie un tableau composé de tous les éléments div
$('div').get(0); // Renvoie le premier élément div
$('div').get(-1); // Renvoie le dernier élément div

Si aucun paramètre n’est passé, renvoie la position d’index du premier élément de la collection par rapport à ses frères et sœurs.

Si un sélecteur CSS est passé en paramètre, renvoie la position d’index du premier élément de la collection par rapport aux éléments correspondant au sélecteur CSS.

Si un élément DOM est passé, renvoie l’index de cet élément DOM dans la collection.

Si un objet JQ est passé, renvoie la position d’index du premier élément de cet objet dans la collection actuelle.

<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

Renvoie un sous-ensemble de la collection actuelle.

Le premier paramètre est la position de début du sous-ensemble, et le second est la position de fin ; si le second paramètre n’est pas passé, il inclut tous les éléments depuis la position de début jusqu’à la fin.

// Renvoie tous les éléments après le troisième élément (inclus)
$('div').slice(3);

// Renvoie les éléments entre le troisième et le cinquième (inclus pour le troisième, exclus pour le cinquième)
$('div').slice(3, 5);

Filtrer les éléments correspondant à l’expression spécifiée à partir de la collection actuelle. Le paramètre peut être un sélecteur CSS, un élément DOM, un tableau d’éléments DOM ou une fonction de rappel.

Lorsque le paramètre est une fonction, son premier paramètre est la position d’index, le second est l’élément actuel, et this dans la fonction pointe vers l’élément actuel. Si la fonction renvoie true, l’élément actuel est conservé ; si elle renvoie false, l’élément actuel est retiré.

// Filtrer tous les éléments div contenant .box
$('div').filter('.box');

// Filtrer toutes les options sélectionnées
$('#select option').filter(function (index, element) {
  return element.selected;
});

Filtrer les éléments de la collection actuelle qui ne correspondent pas à l’expression spécifiée. Le paramètre peut être un sélecteur CSS, un élément DOM, un tableau d’éléments DOM ou une fonction de rappel.

Lorsque le paramètre est une fonction, son premier paramètre est la position d’index, le second est l’élément actuel, et this dans la fonction pointe vers l’élément actuel. Si la fonction renvoie true, l’élément actuel est retiré ; si elle renvoie false, l’élément actuel est conservé.

// Filtrer tous les éléments div qui ne contiennent pas la classe .box
$('div').not('.box');

// Filtrer toutes les options non sélectionnées
$('#select option').not(function (index, element) {
  return element.selected;
});

Déterminer si le premier élément de la collection contient la classe CSS spécifiée.

// Déterminer si le premier élément div contient .item
$('div').hasClass('item')

Ajouter des classes CSS à chaque élément de la collection ; plusieurs noms de classes peuvent être séparés par des espaces.

Une fonction de rappel qui renvoie des noms de classes CSS peut également être passée. Le premier paramètre de la fonction est la position d’index, le second est le nom de classe CSS d’origine sur l’élément, et this dans la fonction pointe vers l’élément actuel.

// Ajouter .item à tous les éléments div
$('div').addClass('item')

// Ajouter .item1 et .item2 à tous les éléments div
$('div').addClass('item1 item2')

// Ajouter les classes CSS renvoyées par la fonction de rappel à tous les éléments div
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
})

Supprimer des classes CSS des éléments de la collection ; plusieurs noms de classes peuvent être séparés par des espaces.

Une fonction de rappel qui renvoie des noms de classes CSS peut également être passée. Le premier paramètre de la fonction est la position d’index, le second est le nom de classe CSS d’origine sur l’élément, et this dans la fonction pointe vers l’élément actuel.

Si aucun paramètre n’est passé, l’attribut class de l’élément sera directement supprimé.

// Supprimer .item de tous les éléments div
$('div').removeClass('item')

// Supprimer .item1 et .item2 de tous les éléments div
$('div').removeClass('item1 item2')

// Supprimer les classes CSS renvoyées par la fonction de rappel de tous les éléments div
$('div').removeClass(function (index, currentClassName) {
  return 'item';
})

// Supprimer directement l’attribut class
$('div').removeClass()

Basculer une classe CSS pour les éléments de la collection : si la classe est présente, elle est retirée ; sinon, elle est ajoutée. Plusieurs noms de classes peuvent être séparés par des espaces.

Une fonction de rappel qui renvoie des noms de classes CSS peut également être passée. Le premier paramètre de la fonction est la position d’index, le second est le nom de classe CSS d’origine sur l’élément, et this dans la fonction pointe vers l’élément actuel.

// Basculer .item sur tous les éléments div
$('div').toggleClass('item')

// Basculer .item1 et .item2 sur tous les éléments div
$('div').toggleClass('item1 item2')

// Basculer les classes CSS renvoyées par la fonction de rappel sur tous les éléments div
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
})

Obtenir la valeur de l’attribut du premier élément de la collection.

// Obtenir la valeur de l’attribut du premier élément
$('input').prop('checked');

Peut également définir les valeurs d’attribut pour tous les éléments de la collection.

La valeur de l’attribut peut être la valeur renvoyée par une fonction de rappel. Le premier paramètre de la fonction de rappel est la position d’index de l’élément, le second est la valeur d’attribut d’origine sur l’élément, et this à l’intérieur de la fonction pointe vers l’élément actuel.

Si la valeur de l’attribut ou la valeur renvoyée par la fonction de rappel est void ou undefined, l’attribut d’origine ne sera pas modifié.

Plusieurs attributs peuvent également être définis simultanément en passant un objet.

// Définir les valeurs d’attribut pour tous les éléments sélectionnés
$('input').prop('checked', true);

// Définir les valeurs d’attribut via la valeur renvoyée par la fonction de rappel
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

// Définir plusieurs valeurs d’attribut pour un élément simultanément
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  }
});

Supprimer des valeurs d’attribut spécifiées de tous les éléments de la collection.

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

Obtenir la valeur de la propriété du premier élément de la collection.

// Obtenir la valeur de la propriété du premier élément
$('div').attr('username');

Peut également définir les valeurs de propriété pour tous les éléments de la collection.

La valeur de la propriété peut être la valeur renvoyée par une fonction de rappel. Le premier paramètre de la fonction de rappel est la position d’index de l’élément, le second est la valeur de propriété d’origine sur l’élément, et this à l’intérieur de la fonction pointe vers l’élément actuel.

Si la valeur de la propriété ou la valeur renvoyée par la fonction de rappel est void ou undefined, la propriété d’origine ne sera pas modifiée. Si la valeur de la propriété ou la valeur renvoyée par la fonction de rappel est null, la propriété spécifiée sera supprimée.

Plusieurs propriétés peuvent également être définies simultanément en passant un objet.

// Définir les valeurs de propriété pour tous les éléments sélectionnés
$('div').attr('username', 'mdui');

// Définir les valeurs de propriété via la valeur renvoyée par la fonction de rappel
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

// Définir plusieurs valeurs de propriété pour un élément simultanément
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  }
});

Supprimer des valeurs de propriété spécifiées de tous les éléments de la collection ; plusieurs noms de propriétés peuvent être séparés par des espaces.

// Supprimer une propriété de tous les éléments de la collection
$('div').removeAttr('username');

// Supprimer plusieurs propriétés de tous les éléments de la collection
$('div').removeAttr('username lastname');

Obtenir la valeur du premier élément de la collection.

Si l’élément est <select multiple="multiple">, un tableau contenant chaque sélection sera renvoyé.

// Obtenir la valeur du premier élément sélectionné
$('#input').val();

Peut également définir les valeurs pour tous les éléments de la collection.

La valeur peut être une chaîne, un nombre, un tableau de chaînes ou une fonction de rappel.

Si la valeur est une fonction de rappel, son premier paramètre est la position d’index de l’élément, le second est la valeur d’origine de l’élément, et this dans la fonction pointe vers l’élément actuel.

Si l’élément est <input type="checkbox">, <input type="radio"> ou <option>, la valeur de l’élément ou la valeur renvoyée par la fonction peut être un tableau ; dans ce cas, les éléments dont les valeurs se trouvent dans le tableau seront sélectionnés, et ceux dont les valeurs n’y figurent pas seront désélectionnés.

Si la valeur ou la valeur renvoyée par la fonction est undefined, la valeur de l’élément sera définie sur vide.

// Définir la valeur des éléments sélectionnés
$('#input').val('input value');

// Définir la valeur de l’élément via la valeur renvoyée par la fonction de rappel
$('#input').val(function (index, oldValue) {
  return 'new value';
});

Obtenir le contenu textuel de tous les éléments de la collection (y compris leurs descendants).

// Obtenir le texte de tous les éléments .box
$('.box').text();

Peut également définir le texte pour tous les éléments de la collection.

La valeur définie peut être une chaîne, un nombre, un booléen ou une fonction de rappel.

Si c’est une fonction de rappel, le premier paramètre est la position d’index de l’élément, le second est le contenu textuel d’origine de l’élément, et this à l’intérieur de la fonction pointe vers l’élément actuel.

Si la valeur ou la valeur renvoyée par la fonction de rappel est undefined, le texte de l’élément correspondant ne sera pas modifié.

// Définir le contenu textuel des éléments sélectionnés
$('.box').text('text content');

// Définir le contenu textuel des éléments via la valeur renvoyée par la fonction de rappel
$('.box').text(function (index, oldTextContent) {
  return 'new text content';
});

Obtenir le contenu HTML du premier élément de la collection.

// Obtenir le contenu HTML du premier élément .box
$('.box').html();

Peut également définir le contenu HTML pour tous les éléments de la collection.

La valeur définie peut être une chaîne HTML, un élément DOM ou une fonction de rappel.

Si c’est une fonction de rappel, le premier paramètre est la position d’index de l’élément, le second est le contenu HTML d’origine de l’élément, et this à l’intérieur de la fonction pointe vers l’élément actuel.

Si la valeur ou la valeur renvoyée par la fonction est undefined, le HTML de l’élément correspondant ne sera pas modifié.

// Définir le HTML des éléments sélectionnés
$('.box').html('<div>new html content</div>');

// Définir le contenu HTML des éléments via la valeur renvoyée par la fonction de rappel
$('.box').html(function (index, oldHTMLContent) {
  return '<div>new html content</div>';
});

Lire ou stocker des données sur des éléments spécifiés.

Lors du stockage de données, si la valeur est undefined, cela équivaut à lire les données correspondantes sur l’élément. Autrement dit, $.data(element, 'key', undefined) est équivalent à $.data(element, 'key').

Remarque : cette méthode ne récupère pas les attributs data-* sur les éléments.

// Stocker des données sur l’élément spécifié et renvoyer la valeur stockée
$.data(document.body, 'layout', 'dark'); // Renvoie dark

// Stocker plusieurs données sur l’élément spécifié simultanément
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
});

// Obtenir les données stockées sur l’élément spécifié
$.data(document.body, 'layout'); // Renvoie dark

// Obtenir toutes les données stockées sur l’élément spécifié
$.data(document.body); // Renvoie { layout: 'dark', primary: 'indigo', accent: 'pink' }

Supprimer les données stockées sur des éléments spécifiés.

Plusieurs clés peuvent être séparées par des espaces, ou représentées par un tableau de plusieurs clés. Si aucune clé n’est spécifiée, toutes les données de l’élément seront supprimées.

// Supprimer les données portant la clé « name » sur l’élément
$.removeData(document.body, 'name');

// Supprimer les données portant les clés « name1 » et « name2 » sur l’élément. Les deux méthodes suivantes sont équivalentes :
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

// Supprimer toutes les données stockées sur l’élément
$.removeData(document.body);

Lire ou stocker des données sur les éléments de la collection actuelle.

Lors du stockage de données, si la valeur est undefined, aucune donnée ne sera stockée.

Remarque : les données récupérées par cette méthode incluent les attributs data-* sur les éléments.

// Stocker des données sur les éléments de la collection actuelle
$('.box').data('layout', 'dark');

// Stocker plusieurs données sur les éléments de la collection actuelle simultanément
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

// Obtenir les données spécifiées stockées sur le premier élément de la collection actuelle
$('.box').data('layout'); // Renvoie dark

// Obtenir toutes les données stockées sur le premier élément de la collection actuelle
$('.box').data(); // Renvoie { layout: 'dark', primary: 'indigo', accent: 'pink' }

Supprimer les données stockées sur les éléments de la collection actuelle.

Plusieurs clés peuvent être séparées par des espaces, ou représentées par un tableau de plusieurs clés. Si aucune clé n’est spécifiée, toutes les données des éléments seront supprimées.

Remarque : cette méthode supprime uniquement les données définies via la méthode .data() et n’enlève pas les données sur les attributs data-*.

// Supprimer les données portant la clé « name »
$('.box').removeData('name');

// Supprimer les données portant les clés « name1 » et « name2 ». Les deux méthodes suivantes sont équivalentes :
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// Supprimer toutes les données stockées sur l’élément
$('.box').removeData();

Obtenir la valeur de la propriété CSS du premier élément de la collection.

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

Peut également définir les valeurs de propriété CSS pour tous les éléments de la collection.

La valeur de la propriété peut être une chaîne, un nombre, ou une fonction de rappel renvoyant une chaîne ou un nombre.

Si la valeur de la propriété est une fonction de rappel, son premier paramètre est la position d’index de l’élément, le second est la valeur CSS d’origine de l’élément, et this dans la fonction pointe vers l’élément actuel.

Si la valeur de la propriété ou la fonction de rappel renvoie void, undefined ou null, la valeur de la propriété CSS de l’élément actuel ne sera pas modifiée.

Si la valeur de la propriété ou la fonction de rappel renvoie un nombre, px sera ajouté comme unité. Si la propriété ne peut pas utiliser px comme unité, la valeur sera convertie directement en chaîne.

Plusieurs propriétés CSS peuvent également être définies simultanément en passant un objet de paires clé-valeur.

// Définir les valeurs de style pour tous les éléments de la collection
$('.box').css('color', 'red')

// Définir les valeurs de style pour tous les éléments via la valeur renvoyée par la fonction de rappel
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

// Définir plusieurs styles simultanément en passant un objet
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});

Obtenir la largeur (en pixels) du premier élément de la collection, en excluant padding, border et margin.

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

Peut également définir la largeur pour tous les éléments de la collection (en excluant la largeur de padding, border et margin).

La valeur peut être une chaîne avec une unité, un nombre, ou une fonction de rappel renvoyant une chaîne avec une unité ou un nombre.

Le premier paramètre de la fonction de rappel est la position d’index de l’élément, le second est la valeur de largeur d’origine de l’élément, et this dans la fonction pointe vers l’élément actuel.

Si la valeur ou la valeur renvoyée par la fonction de rappel est un nombre, px sera automatiquement ajouté comme unité.

Si la valeur ou la valeur renvoyée par la fonction de rappel est null ou undefined, la largeur de l’élément ne sera pas modifiée.

// Définir la largeur de tous les éléments de la collection
$('.box').width('20%');

// Lorsque la valeur est un nombre, l’unité par défaut est px
$('.box').width(10);

// Définir la largeur via la valeur renvoyée par la fonction de rappel
$('.box').width(function (index, oldWidth) {
  return 10;
});

Obtenir la hauteur (en pixels) du premier élément de la collection, en excluant padding, border et margin.

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

Peut également définir la hauteur pour tous les éléments de la collection (en excluant la hauteur de padding, border et margin).

La valeur peut être une chaîne avec une unité, un nombre, ou une fonction de rappel renvoyant une chaîne avec une unité ou un nombre.

Le premier paramètre de la fonction de rappel est la position d’index de l’élément, le second est la valeur de hauteur d’origine de l’élément, et this dans la fonction pointe vers l’élément actuel.

Si la valeur ou la valeur renvoyée par la fonction de rappel est un nombre, px sera automatiquement ajouté comme unité.

Si la valeur ou la valeur renvoyée par la fonction de rappel est null ou undefined, la hauteur de l’élément ne sera pas modifiée.

// Définir la hauteur de tous les éléments de la collection
$('.box').height('20%');

// Lorsque la valeur est un nombre, l’unité par défaut est px
$('.box').height(10);

// Définir la hauteur via la valeur renvoyée par la fonction de rappel
$('.box').height(function (index, oldHeight) {
  return 10;
});

Obtenir la largeur (en pixels) du premier élément de la collection, incluant padding mais excluant border et margin.

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

Peut également définir la largeur de tous les éléments de la collection (incluant padding mais excluant border et margin).

La valeur peut être une chaîne avec une unité, un nombre, ou une fonction de rappel renvoyant une chaîne avec une unité ou un nombre.

Le premier paramètre de la fonction de rappel est la position d’index de l’élément, le second est la valeur de largeur d’origine de l’élément, et this dans la fonction pointe vers l’élément actuel.

Si la valeur ou la valeur renvoyée par la fonction de rappel est un nombre, px sera automatiquement ajouté comme unité.

Si la valeur ou la valeur renvoyée par la fonction de rappel est null ou undefined, la largeur de l’élément ne sera pas modifiée.

// Définir la largeur de tous les éléments de la collection
$('.box').innerWidth('20%');

// Lorsque la valeur est un nombre, l’unité par défaut est px
$('.box').innerWidth(10);

// Définir la largeur via la valeur renvoyée par la fonction de rappel
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

Obtenir la hauteur (en pixels) du premier élément de la collection, incluant padding mais excluant border et margin.

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

Peut également définir la hauteur de tous les éléments de la collection (incluant padding mais excluant border et margin).

La valeur peut être une chaîne avec une unité, un nombre, ou une fonction de rappel renvoyant une chaîne avec une unité ou un nombre.

Le premier paramètre de la fonction de rappel est la position d’index de l’élément, le second est la valeur de hauteur d’origine de l’élément, et this dans la fonction pointe vers l’élément actuel.

Si la valeur ou la valeur renvoyée par la fonction de rappel est un nombre, px sera automatiquement ajouté comme unité.

Si la valeur ou la valeur renvoyée par la fonction de rappel est null ou undefined, la hauteur de l’élément ne sera pas modifiée.

// Définir la hauteur de tous les éléments de la collection
$('.box').innerHeight('20%');

// Lorsque la valeur est un nombre, l’unité par défaut est px
$('.box').innerHeight(10);

// Définir la hauteur via la valeur renvoyée par la fonction de rappel
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});

Obtenir la largeur (en pixels) du premier élément de la collection, incluant padding et border mais excluant margin. Le paramètre true peut être passé pour inclure la largeur de margin.

// Largeur incluant padding et border
$('.box').outerWidth();

// Largeur incluant padding, border et margin
$('.box').outerWidth(true);

Peut également définir la largeur de tous les éléments de la collection (incluant padding et border mais excluant margin ; le second paramètre peut être true pour inclure la largeur de margin).

Le premier paramètre peut être une chaîne avec une unité, un nombre, ou une fonction de rappel renvoyant une chaîne avec une unité ou un nombre.

Le premier paramètre de la fonction de rappel est la position d’index de l’élément, le second est sa largeur d’origine, et this dans la fonction pointe vers l’élément actuel.

Si la valeur ou la valeur renvoyée par la fonction de rappel est un nombre, px sera automatiquement ajouté comme unité.

Si la valeur ou la valeur renvoyée par la fonction de rappel est null ou undefined, la largeur de l’élément ne sera pas modifiée.

// Définir la largeur de tous les éléments de la collection
$('.box').outerWidth('20%');

// Lorsque la valeur est un nombre, l’unité par défaut est px
$('.box').outerWidth(10);

// Si le second paramètre est true, la largeur inclura margin
$('.box').outerWidth(10, true);

// Définir la largeur via la valeur renvoyée par la fonction de rappel
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});

Obtenir la hauteur (en pixels) du premier élément de la collection, incluant padding et border mais excluant margin. Le paramètre true peut être passé pour inclure la hauteur de margin.

// Hauteur incluant padding et border
$('.box').outerHeight();

// Hauteur incluant padding, border et margin
$('.box').outerHeight(true);

Peut également définir la hauteur de tous les éléments de la collection (incluant padding et border mais excluant margin ; le second paramètre peut être true pour inclure la hauteur de margin).

Le premier paramètre peut être une chaîne avec une unité, un nombre, ou une fonction de rappel renvoyant une chaîne avec une unité ou un nombre.

Le premier paramètre de la fonction de rappel est la position d’index de l’élément, le second est sa hauteur d’origine, et this dans la fonction pointe vers l’élément actuel.

Si la valeur ou la valeur renvoyée par la fonction de rappel est un nombre, px sera automatiquement ajouté comme unité.

Si la valeur ou la valeur renvoyée par la fonction de rappel est null ou undefined, la hauteur de l’élément ne sera pas modifiée.

// Définir la hauteur de tous les éléments de la collection
$('.box').outerHeight('20%');

// Lorsque la valeur est un nombre, l’unité par défaut est px
$('.box').outerHeight(10);

// Si le second paramètre est true, la hauteur inclura margin
$('.box').outerHeight(10, true);

// Définir la hauteur via la valeur renvoyée par la fonction de rappel
$('.box').outerHeight(function (index, oldWidth) {
  return 10;
});

Masquer tous les éléments de la collection.

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

Afficher tous les éléments de la collection.

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

Basculer l’état d’affichage de tous les éléments de la collection.

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

Obtenir les coordonnées du premier élément de la collection par rapport au document.

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

Peut également définir les coordonnées de tous les éléments de la collection par rapport au document.

Le paramètre est un objet contenant les propriétés top et left, ou une fonction de rappel renvoyant un objet de ce format.

Si le paramètre est une fonction de rappel, le premier paramètre est la position d’index de l’élément, le second est la position d’origine de l’élément, et this dans la fonction pointe vers l’élément actuel.

Si les valeurs de top ou left dans le paramètre sont undefined, la valeur correspondante ne sera pas modifiée.

// Définir les coordonnées de tous les éléments de la collection
$('.box').offset({ top: 20, left: 30 });

// Définir les coordonnées des éléments via la valeur renvoyée par la fonction de rappel
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

Renvoie le parent de positionnement du premier élément de la collection — c’est-à-dire le premier élément ancêtre dont position vaut relative ou absolute.

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

Obtenir le décalage du premier élément de la collection par rapport à son élément parent.

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

Trouver des nœuds descendants spécifiés dans tous les éléments de la collection actuelle en fonction d’un sélecteur CSS.

// Trouver les nœuds contenant .box parmi les descendants de #box
$('#box').find('.box')

Obtenir la collection des éléments enfants directs de tous les éléments de la collection actuelle.

Un sélecteur CSS peut être passé en paramètre pour filtrer les éléments enfants.

// Trouver tous les éléments enfants directs de #box
$('#box').children();

// Trouver la collection d’éléments contenant .box parmi tous les éléments enfants directs de #box
$('#box').children('.box')

Filtrer les éléments contenant les éléments enfants spécifiés à partir de tous les éléments de la collection actuelle.

Les paramètres peuvent être des sélecteurs CSS ou des éléments DOM.

// Ajouter une couleur d’arrière-plan à li contenant ul
$('li').has('ul').css('background-color', 'red');

Obtenir la collection des éléments parents directs de tous les éléments de la collection actuelle.

Un sélecteur CSS peut être passé en paramètre pour renvoyer uniquement la collection des éléments parents correspondant à ce paramètre.

// Renvoie l’élément parent direct des éléments .box
$('.box').parent();

// Renvoie les éléments contenant la classe .parent parmi les éléments parents directs des éléments .box
$('.box').parent('.parent');

Obtenir la collection des éléments ancêtres de tous les éléments de la collection actuelle.

Un sélecteur CSS peut être passé en paramètre pour renvoyer uniquement la collection des éléments ancêtres correspondant à ce paramètre.

// Renvoie tous les éléments ancêtres des éléments span
$('span').parents();

// Renvoie tous les éléments ancêtres des éléments span qui sont des éléments p
$('span').parents('p');

Obtenir tous les éléments parents de chaque élément de la collection actuelle jusqu’à atteindre un élément correspondant au premier paramètre (élément correspondant exclu).

Le premier paramètre peut être un sélecteur CSS, un élément DOM ou un objet JQ.

Un second paramètre facultatif doit être un sélecteur CSS, indiquant que seuls les éléments correspondant à ce paramètre doivent être renvoyés.

Si aucun paramètre n’est spécifié, tous les éléments ancêtres seront pris en compte, ce qui est identique à .parents().

// Obtenir tous les éléments ancêtres des éléments .item
$('.item').parentsUntil();

// Trouver tous les éléments parents des éléments .item jusqu’à atteindre l’élément .parent
$('.item').parentsUntil('.parent');

// Obtenir tous les éléments ancêtres des éléments .item qui sont des éléments div jusqu’à atteindre l’élément .parent
$('.item').parentsUntil('.parent', 'div');

Obtenir une collection des éléments frères précédents de tous les éléments de la collection actuelle.

Un sélecteur CSS peut être passé en paramètre pour obtenir uniquement la collection des éléments frères correspondant à ce paramètre.

// Obtenir la collection des éléments précédents pour les éléments .box
$('.box').prev();

// Obtenir la collection des éléments div précédents pour les éléments .box
$('.box').prev('div');

Obtenir une collection de tous les éléments frères précédents de tous les éléments de la collection actuelle.

Un sélecteur CSS peut être passé en paramètre pour obtenir uniquement la collection des éléments frères correspondant à ce paramètre.

// Obtenir tous les éléments frères précédents des éléments .box
$('.box').prevAll();

// Obtenir tous les éléments frères précédents des éléments .box contenant .selected
$('.box').prevAll('.selected');

Obtenir tous les éléments frères précédents de chaque élément de la collection actuelle jusqu’à atteindre un élément correspondant au premier paramètre (élément correspondant exclu).

Le premier paramètre peut être un sélecteur CSS, un élément DOM ou un objet JQ.

Un second paramètre facultatif doit être un sélecteur CSS, indiquant que seuls les éléments correspondant à ce paramètre doivent être renvoyés.

// Obtenir tous les éléments frères précédents des éléments .box
$('.box').prevUntil();

// Obtenir tous les éléments frères précédents des éléments .box jusqu’à atteindre l’élément .until
$('.box').prevUntil('.until');

// Obtenir les éléments div frères précédents des éléments .box jusqu’à atteindre l’élément .until
$('.box').prevUntil('.until', 'div');

Obtenir une collection des éléments frères suivants de tous les éléments de la collection actuelle.

Un sélecteur CSS peut être passé en paramètre pour obtenir uniquement la collection des éléments frères correspondant à ce paramètre.

// Obtenir la collection des éléments suivants pour les éléments .box
$('.box').next();

// Obtenir la collection des éléments div suivants pour les éléments .box
$('.box').next('div');

Obtenir une collection de tous les éléments frères suivants de tous les éléments de la collection actuelle.

Un sélecteur CSS peut être passé en paramètre pour obtenir uniquement la collection des éléments frères correspondant à ce paramètre.

// Obtenir tous les éléments frères suivants des éléments .box
$('.box').nextAll();

// Obtenir tous les éléments frères suivants des éléments .box contenant .selected
$('.box').nextAll('.selected');

Obtenir tous les éléments frères suivants de chaque élément de la collection actuelle jusqu’à atteindre un élément correspondant au premier paramètre (élément correspondant exclu).

Le premier paramètre peut être un sélecteur CSS, un élément DOM ou un objet JQ.

Un second paramètre facultatif doit être un sélecteur CSS, indiquant que seuls les éléments correspondant à ce paramètre doivent être renvoyés.

// Obtenir tous les éléments frères suivants des éléments .box
$('.box').nextUntil();

// Obtenir tous les éléments frères suivants des éléments .box jusqu’à atteindre l’élément .until
$('.box').nextUntil('.until');

// Obtenir les éléments div frères suivants des éléments .box jusqu’à atteindre l’élément .until
$('.box').nextUntil('.until', 'div');

Faire correspondre progressivement à partir de l’élément courant et renvoyer le premier élément correspondant.

Les paramètres peuvent être des sélecteurs CSS, des éléments DOM ou des objets JQ.

// Obtenir l’élément .parent le plus proche parmi les éléments parents de l’élément .box
$('.box').closest('.parent');

Obtenir les éléments frères de chaque élément de la collection actuelle.

Un sélecteur CSS peut être passé en paramètre pour obtenir uniquement les éléments frères correspondant à ce paramètre.

// Obtenir tous les éléments frères des éléments .box
$('.box').siblings();

// Obtenir les éléments contenant .selected parmi tous les éléments frères de .box
$('.box').siblings('.selected');

Ajouter des éléments à la collection actuelle.

Les paramètres peuvent être des chaînes HTML, des sélecteurs CSS, des objets JQ, des éléments DOM, des tableaux d’éléments DOM ou des NodeList.

// Ajouter les éléments contenant .selected à la collection actuelle
$('.box').add('.selected');

Supprimer tous les nœuds enfants des éléments actuels.

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

Supprimer les éléments de la collection actuelle du DOM.

Un sélecteur CSS peut être passé en paramètre pour supprimer uniquement les éléments correspondant à ce paramètre.

// Supprimer tous les éléments p
$('p').remove();

// Supprimer tous les éléments p contenant .box
$('p').remove('.box');

Insérer du contenu spécifié avant l’intérieur des éléments de la collection actuelle.

Les types de paramètres peuvent être des chaînes HTML, des éléments DOM, des tableaux d’éléments DOM ou des objets JQ. Plusieurs paramètres sont pris en charge.

Une fonction de rappel renvoyant une chaîne HTML, un élément DOM, un tableau d’éléments DOM ou un objet JQ peut également être passée. Le premier paramètre est la position d’index de l’élément actuel, le second est le HTML d’origine de l’élément, et this dans la fonction pointe vers l’élément actuel.

Cette méthode renvoie la collection d’origine.

// Insérer un élément
$('<p>I would like to say: </p>').prepend('<b>Hello</b>');
// Résultat :<p><b>Hello</b>I would like to say: </p>

// Insérer plusieurs éléments
$('<p>I would like to say: </p>').prepend('<b>Hello</b>', '<b>World</b>');
// Résultat :<p><b>Hello</b><b>World</b>I would like to say: </p>

// Insérer un élément via une fonction de rappel
$('<p>Hello</p>').prepend(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Résultat :<p><b>Hello0</b>Hello</p>

Préfixer les éléments de la collection actuelle à l’intérieur des éléments spécifiés.

Les paramètres peuvent être des sélecteurs CSS, des chaînes HTML, des éléments DOM, des tableaux d’éléments DOM ou des objets JQ.

Cette méthode renvoie la collection d’origine.

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

// Résultat :[ <div><div>Hello</div>I would like to say: </div> ]

Insérer du contenu spécifié à la fin de l’intérieur des éléments de la collection actuelle.

Les types de paramètres peuvent être des chaînes HTML, des éléments DOM, des tableaux d’éléments DOM ou des objets JQ. Plusieurs paramètres sont pris en charge.

Une fonction de rappel renvoyant une chaîne HTML, un élément DOM, un tableau d’éléments DOM ou un objet JQ peut également être passée. Le premier paramètre est la position d’index de l’élément actuel, le second est le HTML d’origine de l’élément, et this dans la fonction pointe vers l’élément actuel.

Cette méthode renvoie la collection d’origine.

// Insérer un élément
$('<p>I would like to say: </p>').append('<b>Hello</b>');
// Résultat :<p>I would like to say: <b>Hello</b></p>

// Insérer plusieurs éléments
$('<p>I would like to say: </p>').append('<b>Hello</b>', '<b>World</b>');
// Résultat :<p>I would like to say: <b>Hello</b><b>World</b></p>

// Insérer un élément via une fonction de rappel
$('<p>Hello</p>').append(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Résultat :<p>Hello<b>Hello0</b></p>

Ajouter les éléments de la collection actuelle à l’intérieur des éléments spécifiés.

Les paramètres peuvent être des sélecteurs CSS, des chaînes HTML, des éléments DOM, des tableaux d’éléments DOM ou des objets JQ.

Cette méthode renvoie la collection d’origine.

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

Insérer du contenu spécifié après les éléments de la collection actuelle en tant que nœuds frères.

Les types de paramètres peuvent être des chaînes HTML, des éléments DOM, des tableaux d’éléments DOM ou des objets JQ. Plusieurs paramètres sont pris en charge.

Une fonction de rappel renvoyant une chaîne HTML, un élément DOM, un tableau d’éléments DOM ou un objet JQ peut également être passée. Le premier paramètre est la position d’index de l’élément actuel, le second est le HTML d’origine de l’élément, et this dans la fonction pointe vers l’élément actuel.

Cette méthode renvoie la collection d’origine.

// Insérer un élément
$('<p>I would like to say: </p>').after('<b>Hello</b>')
// Résultat :<p>I would like to say: </p><b>Hello</b>

// Insérer plusieurs éléments
$('<p>I would like to say: </p>').after('<b>Hello</b>', '<b>World</b>')
// Résultat :<p>I would like to say: </p><b>Hello</b><b>World</b>

// Insérer un élément via une fonction de rappel
$('<p>Hello</p>').after(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Résultat :<p>Hello</p><b>Hello0</b>

Insérer les éléments de la collection actuelle après l’élément cible en tant qu’éléments frères.

Si les éléments de la collection actuelle existent déjà dans la page, ils seront déplacés au lieu d’être copiés. S’il y a plusieurs cibles, les éléments de la collection actuelle seront clonés et ajoutés après chaque élément cible.

Une chaîne HTML, un sélecteur CSS, un élément DOM, un tableau d’éléments DOM ou un objet JQ peut être passé en paramètre pour spécifier l’élément cible.

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

Insérer du contenu spécifié avant les éléments de la collection actuelle en tant que nœuds frères.

Les types de paramètres peuvent être des chaînes HTML, des éléments DOM, des tableaux d’éléments DOM ou des objets JQ. Plusieurs paramètres sont pris en charge.

Une fonction de rappel renvoyant une chaîne HTML, un élément DOM, un tableau d’éléments DOM ou un objet JQ peut également être passée. Le premier paramètre est la position d’index de l’élément actuel, le second est le HTML d’origine de l’élément, et this dans la fonction pointe vers l’élément actuel.

Cette méthode renvoie la collection d’origine.

// Insérer un élément
$('<p>I would like to say: </p>').before('<b>Hello</b>')
// Résultat :<b>Hello</b><p>I would like to say: </p>

// Insérer plusieurs éléments
$('<p>I would like to say: </p>').before('<b>Hello</b>', '<b>World</b>')
// Résultat :<b>Hello</b><b>World</b><p>I would like to say: </p>

// Insérer un élément via une fonction de rappel
$('<p>Hello</p>').before(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Résultat :<b>Hello0</b><p>Hello</p>

Insérer les éléments de la collection actuelle avant l’élément cible en tant qu’éléments frères.

Si les éléments de la collection actuelle existent déjà dans la page, ils seront déplacés au lieu d’être copiés. S’il y a plusieurs cibles, les éléments de la collection actuelle seront clonés et ajoutés après chaque élément cible.

Une chaîne HTML, un sélecteur CSS, un élément DOM, un tableau d’éléments DOM ou un objet JQ peut être passé en paramètre pour spécifier l’élément cible.

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

Remplacer les éléments de la collection actuelle par les éléments spécifiés.

Les paramètres peuvent être des chaînes HTML, des éléments DOM, des tableaux d’éléments DOM ou des objets JQ.

Une fonction de rappel renvoyant une chaîne HTML, un élément DOM, un tableau d’éléments DOM ou un objet JQ peut également être passée. Le premier paramètre est la position d’index de l’élément actuel, le second est le HTML d’origine de l’élément, et this dans la fonction pointe vers l’élément actuel.

Cette méthode renvoie la collection d’origine, c’est-à-dire la collection remplacée.

// Remplacer tous les éléments .box par <p>Hello</p>
$('.box').replaceWith('<p>Hello</p>');

// Remplacer tous les éléments .box par la valeur renvoyée par la fonction de rappel
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

Remplacer les éléments spécifiés par les éléments de la collection actuelle.

Les paramètres sont des sélecteurs CSS, des éléments DOM, des tableaux d’éléments DOM ou des objets JQ.

Cette méthode renvoie la collection d’origine, c’est-à-dire la collection d’éléments utilisée pour le remplacement.

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

Cloner tous les éléments de la collection par clonage profond.

Cloner profondément tous les éléments de la collection en utilisant la méthode native cloneNode. Cette méthode ne copie pas les données ni les gestionnaires d’événements vers les nouveaux éléments, ce qui diffère de jQuery où les paramètres déterminent si les données et les gestionnaires d’événements sont copiés.

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

Combiner les valeurs des éléments de formulaire en un tableau de paires clé-valeur composées de name et value.

Cette méthode peut fonctionner sur des éléments de formulaire individuels ou sur des formulaires <form> entiers.

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

Sérialiser les valeurs des éléments de formulaire.

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

Lier des gestionnaires d’événements à des événements spécifiques pour chaque élément de la collection. Voir les exemples ci-dessous pour la syntaxe :

// Lier l’événement click
$('.box').on('click', function (e) {
  console.log('L’élément .box a été cliqué');
});

// Lier plusieurs événements
$('.box').on('click focus', function (e) {
  console.log('Les événements click et focus déclencheront cette fonction');
});

// Déléguation d’événements
$(document).on('click', '.box', function (e) {
  console.log('Cette fonction sera déclenchée lorsque .box est cliqué');
});

// Lier plusieurs événements et gestionnaires d’événements simultanément
$('.box').on({
  'click': function (e) {
    console.log('Événement click déclenché');
  },
  'focus': function (e) {
    console.log('Événement focus déclenché');
  }
});

// Passer des paramètres
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('L’élément .box a été cliqué, et des paramètres ont été passés au gestionnaire d’événements');
  // e._data vaut {key1: 'value1', key2: 'value2'}
});

// Lier plusieurs événements et gestionnaires d’événements simultanément et passer des paramètres
$('.box').on({
  'click': function (e) {
    console.log('Événement click déclenché');
    // e._data vaut {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Événement focus déclenché');
    // e._data vaut {key1: 'value1', key2: 'value2'}
  }
}, { key1: 'value1', key2: 'value2' });

// Lier des événements via la délégation d’événements et passer des paramètres
$(document).on('click', '.box', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('L’élément .box a été cliqué, et des paramètres ont été passés au gestionnaire d’événements');
  // e._data vaut {key1: 'value1', key2: 'value2'}
});

// Lier plusieurs événements et gestionnaires d’événements simultanément via la délégation d’événements
$(document).on({
  'click': function (e) {
    console.log('Événement click déclenché');
  },
  'focus': function (e) {
    console.log('Événement focus déclenché');
  }
}, '.box');

// Lier plusieurs événements et gestionnaires d’événements simultanément via la délégation d’événements et passer des paramètres
$(document).on({
  'click': function (e) {
    console.log('Événement click déclenché');
    // e._data vaut {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Événement focus déclenché');
    // e._data vaut {key1: 'value1', key2: 'value2'}
  }
}, '.box', { key1: 'value1', key2: 'value2' });

// Obtenir les paramètres de l’événement
$('.box').on('click', function (e, data) {
  // data est égal à e._detail
});

// Les noms d’événements prennent en charge les espaces de noms
$('.box').on('click.myPlugin', function () {
  console.log('L’élément .box a été cliqué');
});

Lier des gestionnaires d’événements pour des événements spécifiques sur chaque élément correspondant, mais l’événement ne se déclenchera qu’une seule fois.

L’utilisation de cette méthode est la même que .on(), donc aucun autre exemple n’est fourni.

Délier les événements pour chaque élément de la collection. Voir les exemples ci-dessous pour la syntaxe :

// Délier tous les gestionnaires d’événements liés
$('.box').off();

// Délier des événements spécifiques
$('.box').off('click');

// Délier plusieurs événements simultanément
$('.box').off('click focus');

// Délier des gestionnaires d’événements spécifiques
$('.box').off('click', callback);

// Délier les événements liés via la délégation d’événements
$(document).off('click', '.box');

// Délier les gestionnaires d’événements spécifiques liés via la délégation d’événements
$(document).off('click', '.box', callback);

// Délier plusieurs gestionnaires d’événements simultanément
$('.box').off({
  'click': callback1,
  'focus': callback2,
});

// Délier plusieurs gestionnaires d’événements liés via la délégation d’événements simultanément
$(document).off({
  'click': callback1,
  'focus': callback2,
}, '.box');

// Les noms d’événements prennent en charge les espaces de noms ; l’utilisation suivante déliera tous les événements se terminant par .myPlugin
$(document).off('.myPlugin');

Déclencher des événements spécifiques. Voir les exemples ci-dessous pour la syntaxe :

// Déclencher des événements spécifiques
$('.box').trigger('click');

// Passer des paramètres lors du déclenchement des événements
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

Définir les paramètres de configuration globaux des requêtes Ajax.

$.ajaxSetup({
  // Les événements AJAX globaux sont désactivés par défaut
  global: false,

  // La méthode POST est utilisée par défaut
  method: 'POST'
});

Consultez les paramètres AJAX ci-dessous pour la liste détaillée des paramètres.

Envoyer une requête AJAX et renvoyer une Promise.

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

Consultez les paramètres AJAX ci-dessous pour la liste détaillée des paramètres.

Événements AJAX globaux.

Exécuter une fonction lorsqu’une requête AJAX commence.

$(document).ajaxStart(function (event, xhr, options) {
  // xhr : objet XMLHttpRequest
  // options : paramètres de configuration de la requête AJAX
});

Événements AJAX globaux.

Exécuter une fonction lorsqu’une requête AJAX réussit.

$(document).ajaxSuccess(function (event, xhr, options, data) {
  // xhr : objet XMLHttpRequest
  // options : paramètres de configuration de la requête AJAX
  // data : données renvoyées par la requête AJAX
});

Événements AJAX globaux.

Exécuter une fonction lorsqu’une erreur de requête AJAX survient.

$(document).ajaxError(function (event, xhr, options) {
  // xhr : objet XMLHttpRequest
  // options : paramètres de configuration de la requête AJAX
});

Événements AJAX globaux.

Exécuter une fonction lorsqu’une requête AJAX est terminée.

$(document).ajaxComplete(function (event, xhr, options) {
  // xhr : objet XMLHttpRequest
  // options : paramètres de configuration de la requête AJAX
});

Méthode de requête.

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

Données ajoutées aux en-têtes. Cette valeur peut être écrasée dans la fonction de rappel beforeSend.

Les champs avec des valeurs de type chaîne ou null seront envoyés, tandis que les champs avec des valeurs undefined seront supprimés.

Données définies sur l’objet XMLHttpRequest.

$.ajax({
  url: 'Une URL cross-origin',
  xhrFields: {
    withCredentials: true
  }
});

Un objet composé de codes d’état HTTP et de fonctions.

$.ajax({
  statusCode: {
    404: function (xhr, textStatus) {
      alert('Appelé lorsque le code d’état renvoyé est 404');
    },
    200: function (data, textStatus, xhr) {
      alert('Appelé lorsque le code d’état renvoyé est 200');
    }
  }
});

Si le code d’état est compris entre 200 et 299, ou s’il est 304, cela indique une requête réussie, et les paramètres de la fonction sont les mêmes que pour la fonction de rappel success ; sinon, cela indique une requête échouée, et les paramètres de la fonction sont les mêmes que pour la fonction de rappel error.

Type de données renvoyées par le serveur.

Inclut : text, json

Appelé avant l’envoi de la requête. Si elle renvoie false, la requête AJAX sera annulée.

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

Appelé après la réussite de la requête.

$.ajax({
  success: function (data, textStatus, xhr) {
    // data : données renvoyées par la requête AJAX
    // textStatus : chaîne contenant le code de succès
    // xhr : objet XMLHttpRequest
  }
});

Appelé lorsque la requête échoue.

$.ajax({
  error: function (xhr, textStatus) {
    // xhr : objet XMLHttpRequest
    // textStatus : chaîne contenant le code de succès
  }
});

Appelé après la fin de la requête.

$.ajax({
  complete: function (xhr, textStatus) {
    // xhr : objet XMLHttpRequest
    // textStatus : chaîne contenant le code de succès
  }
});

Forcer un repaint de l’élément actuel.

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

Définir la propriété transition-duration de l’élément actuel.

Peut être une valeur temporelle avec ou sans unité. Si elle n’a pas d’unité, ms sera automatiquement ajouté comme unité.

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

Ajouter une fonction de rappel d’événement transitionend à l’élément actuel.

Le paramètre de la fonction de rappel est l’objet d’événement transitionend, et this dans la fonction pointe vers l’élément actuel.

$('.box').transitionEnd(function () {
  console.log('L’événement transitionend pour l’élément .box a été déclenché');
})

Définir la propriété transform de l’élément actuel.

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

Définir la propriété transform-origin de l’élément actuel.

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

Exécuter les fonctions d’initialisation enregistrées dans l’élément actuel et ses enfants.

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

Créer et afficher un overlay, en renvoyant l’objet JQ de la couche d’overlay.

Un paramètre entier peut être passé pour représenter le style z-index de la couche d’overlay, par défaut 2000.

$.showOverlay();

Masquer la couche d’overlay.

Si $.showOverlay() est appelé plusieurs fois pour afficher la couche d’overlay, $.hideOverlay() doit également être appelé le même nombre de fois pour la masquer. Passer le paramètre true force le masquage de l’overlay.

$.hideOverlay();

Verrouiller la page pour empêcher le défilement.

$.lockScreen();

Déverrouiller la page.

Si $.lockScreen() est appelé plusieurs fois pour verrouiller la page, $.unlockScreen() doit également être appelé le même nombre de fois pour la déverrouiller. Passer le paramètre true force le déverrouillage de la page.

$.unlockScreen();

Limitation de fonction.

Passer une fonction en paramètre ; le premier paramètre est la fonction à exécuter, et le second est le temps de retard en millisecondes.

$.throttle(function () {
  console.log('Cette fonction s’exécute au plus une fois toutes les 100 ms');
}, 100)

Générer un ID globalement unique.

$.guid();

Un paramètre peut être passé. Si le guid correspondant à cette valeur n’existe pas, un nouveau guid est généré et renvoyé ; s’il existe déjà, le guid existant est renvoyé directement.

// Les valeurs de retour des deux lignes de code suivantes sont identiques.
$.guid('test');
$.guid('test');