jq-Bibliothek

mdui enthält ein leichtgewichtiges JavaScript-Toolkit, das eine jQuery-ähnliche API und Verkettung bietet, aber nur ein Sechstel der Größe von jQuery hat.

Sie können diese Hilfsfunktion nach Bedarf importieren:

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

Kern

`$()`

Diese Funktion hat mehrere Verwendungsmöglichkeiten:

Übergeben Sie einen CSS-Selektor als Argument. Gibt ein JQ-Objekt zurück, das die übereinstimmenden Elemente enthält.

$('.box');

Übergeben Sie ein DOM-Element, ein beliebiges Array, eine NodeList oder ein JQ-Objekt. Gibt ein JQ-Objekt zurück, das die angegebenen Elemente enthält.

$(document);

Übergeben Sie einen HTML-String. Gibt ein JQ-Objekt zurück, das die aus dem HTML erstellten DOM-Elemente enthält.

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

Übergeben Sie eine Funktion. Die Funktion wird aufgerufen, sobald das DOM geladen ist.

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

Erweiterung

`$.extend()`

Wenn nur ein Objekt übergeben wird, werden die Eigenschaften dieses Objekts in das $-Objekt eingefügt, was dem Hinzufügen neuer Funktionen im $-Namensraum entspricht.

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

// Dann kann die benutzerdefinierte Methode so aufgerufen werden
$.customFunc();

Wenn zwei oder mehr Objekte übergeben werden, werden die Eigenschaften aller Objekte zum ersten Objekt hinzugefügt und das zusammengeführte Objekt zurückgegeben. Eigenschaften mit dem Wert undefined werden jedoch nicht zusammengeführt.

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

// Das erste Objekt und der Rückgabewert sind jetzt { key1: val1, key2: val2, key3: val3 }

`$.fn.extend()`

Erweitert die Methoden auf der Prototypenkette von $.

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

// Die erweiterte Methode kann dann so verwendet werden
$(document).customFunc();

URL

`$.param()`

Serialisiert ein Array oder Objekt in einen URL-Abfragestring.

$.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

Wenn das übergebene Argument ein Array ist, muss das Format des Arrays dem von .serializeArray() zurückgegebenen entsprechen.

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

Array- und Objektoperationen

`$.each()`

Iteriert über ein Array oder Objekt. Es gibt das erste Argument zurück, d. h. das durchlaufene Array oder Objekt.

Das erste Argument der Callback-Funktion ist der Index des Arrays oder der Schlüssel des Objekts, das zweite Argument ist der Wert am entsprechenden Index oder Schlüssel.

Innerhalb der Callback-Funktion zeigt this auf den Wert am entsprechenden Index oder Schlüssel. Wenn die Callback-Funktion false zurückgibt, wird die Iteration gestoppt.

// Über ein Array iterieren
$.each(['a', 'b', 'c'], function (index, value) {
  console.log(index + ':' + value);
});

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

// Über ein Objekt iterieren
$.each({ name: 'mdui', lang: 'zh' }, function (key, value) {
  console.log(key + ':' + value);
});

// Ausgabe
// name:mdui
// lang:zh

`$.merge()`

Fügt die Elemente des zweiten Arrays an das erste Array an und gibt das zusammengeführte Array zurück.

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

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

`$.unique()`

Entfernt doppelte Elemente aus einem Array.

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

`$.map()`

Iteriert über ein Array oder Objekt und gibt ein neues Array zurück, das aus den Rückgabewerten der Callback-Funktion besteht.

Das erste Argument der Callback-Funktion ist der Wert des Arrays oder Objekts am entsprechenden Index oder Schlüssel, das zweite Argument ist der Index des Arrays oder der Schlüssel des Objekts.

Die Callback-Funktion kann jeden beliebigen Wert zurückgeben. Wenn ein Array zurückgegeben wird, wird dieses Array entfaltet. Wenn null oder undefined zurückgegeben wird, wird dieser Wert ignoriert. Innerhalb der Callback-Funktion zeigt this auf das window-Objekt.

// Über ein Array iterieren
const result = $.map(['a', 'b', 'c'], function (value, index) {
  return index + value;
});
console.log(result); // ['0a', '1b', '2c']

// Wenn die Callback-Funktion ein Array zurückgibt, wird dieses entfaltet
const result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

// Über ein Objekt iterieren
const result = $.map(
  { name: 'mdui', password: '123456' },
  function (value, key) {
    return key + ':' + value;
  },
);
console.log(result); // ['name:mdui', 'password:123456']

`$.contains()`

Prüft, ob ein Knoten einen anderen Knoten enthält. Gibt true zurück, wenn der übergeordnete Knoten den untergeordneten Knoten enthält, andernfalls false.

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

Datentypüberprüfung

`.is()`

Prüft, ob mindestens ein Element in der Sammlung mit dem Argument übereinstimmt. Gibt true zurück, wenn eine Übereinstimmung vorliegt, andernfalls false.

Das Argument kann ein CSS-Selektor, ein DOM-Element, ein Array von DOM-Elementen, ein JQ-Objekt oder eine Callback-Funktion sein.

Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index, das zweite Argument das aktuelle Element. Innerhalb der Funktion zeigt this auf das aktuelle Element. Wenn die Funktion true zurückgibt, stimmt das aktuelle Element mit dem Argument überein; wenn false zurückgegeben wird, stimmt es nicht überein.

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

// Prüfung anhand des Rückgabewerts der Callback-Funktion
$(document).is(function (index, element) {
  return element === document;
});
// true

Objektzugriff

`.length`

Gibt die Anzahl der Elemente in der aktuellen Sammlung zurück.

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

`.each()`

Iteriert über die aktuelle Sammlung und führt eine Funktion für jedes Element in der Sammlung aus. Wenn die Funktion false zurückgibt, wird die Iteration gestoppt.

Das erste Argument der Funktion ist der Index des Elements, das zweite Argument das aktuelle Element. Innerhalb der Funktion zeigt this auf das aktuelle Element.

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

`.map()`

Iteriert über die aktuelle Sammlung, führt eine Funktion für jedes Element in der Sammlung aus und gibt eine neue Sammlung der Rückgabewerte der Funktion zurück.

Die Funktion kann einzelne Werte oder Arrays von Werten zurückgeben. Wenn ein Array zurückgegeben wird, werden die Elemente des Arrays nacheinander zur neuen Sammlung hinzugefügt. Wenn die Funktion null oder undefined zurückgibt, wird dieser Wert nicht zur neuen Sammlung hinzugefügt.

Das erste Argument der Funktion ist der Index des Elements, das zweite Argument das aktuelle Element. Innerhalb der Funktion zeigt this auf das aktuelle Element.

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

// result ist ein JQ-Objekt der Werte der übereinstimmenden Elemente

`.eq()`

Gibt eine neue Sammlung zurück, die nur das Element am angegebenen Index enthält.

$('div').eq(0); // Gibt eine Sammlung zurück, die nur das erste Element enthält
$('div').eq(-1); // Gibt eine Sammlung zurück, die nur das letzte Element enthält
$('div').eq(-2); // Gibt eine Sammlung zurück, die nur das vorletzte Element enthält

`.first()`

Gibt eine neue Sammlung zurück, die nur das erste Element der aktuellen Sammlung enthält.

$('div').first(); // Gibt eine Sammlung zurück, die nur das erste div enthält

`.last()`

Gibt eine neue Sammlung zurück, die nur das letzte Element der aktuellen Sammlung enthält.

$('div').last(); // Gibt eine Sammlung zurück, die nur das letzte div enthält

`.get()`

Gibt das Element am angegebenen Index zurück. Wenn kein Argument übergeben wird, gibt es ein Array aller Elemente in der Sammlung zurück.

$('div').get(); // Gibt ein Array aller div-Elemente zurück
$('div').get(0); // Gibt das erste div-Element zurück
$('div').get(-1); // Gibt das letzte div-Element zurück

`.index()`

Wenn kein Argument übergeben wird, gibt es den Index des ersten Elements der aktuellen Sammlung relativ zu seinen Geschwisterelementen zurück.

Wenn ein CSS-Selektor übergeben wird, gibt es den Index des ersten Elements der aktuellen Sammlung relativ zu den Elementen zurück, die dem CSS-Selektor entsprechen.

Wenn ein DOM-Element übergeben wird, gibt es den Index dieses Elements in der aktuellen Sammlung zurück.

Wenn ein JQ-Objekt übergeben wird, gibt es den Index des ersten Elements des Objekts in der aktuellen Sammlung zurück.

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

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

`.slice()`

Gibt eine Teilmenge der aktuellen Sammlung zurück.

Sie können den Start- und Endpunkt der Teilmenge angeben, indem Sie zwei Argumente übergeben (das Element am Endpunkt ist nicht inbegriffen). Wenn das zweite Argument nicht übergeben wird, werden alle Elemente vom Startpunkt bis zum Ende der Sammlung zurückgegeben.

// Gibt alle Elemente ab dem dritten (einschließlich) zurück
$('div').slice(3);

// Gibt die Elemente zwischen dem dritten und fünften (einschließlich drittes, ausschließlich fünftes) zurück
$('div').slice(3, 5);

`.filter()`

Filtert Elemente aus der aktuellen Sammlung, die mit dem angegebenen Ausdruck übereinstimmen. Das Argument kann ein CSS-Selektor, ein DOM-Element, ein Array von DOM-Elementen oder eine Callback-Funktion sein.

Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument das aktuelle Element. Innerhalb der Funktion zeigt this auf das aktuelle Element. Wenn die Funktion true zurückgibt, wird das aktuelle Element beibehalten; wenn false zurückgegeben wird, wird es entfernt.

// Alle div-Elemente mit der Klasse .box herausfiltern
$('div').filter('.box');

// Alle ausgewählten Optionen herausfiltern
$('#select option').filter(function (index, element) {
  return element.selected;
});

`.not()`

Filtert Elemente aus der aktuellen Sammlung, die nicht mit dem angegebenen Ausdruck übereinstimmen.

Das Argument kann ein CSS-Selektor, ein DOM-Element, ein Array von DOM-Elementen, ein JQ-Objekt oder eine Callback-Funktion sein, die einen boolean-Wert zurückgibt.

Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument das aktuelle Element. Innerhalb der Funktion zeigt this auf das aktuelle Element. Wenn die Funktion true zurückgibt, wird das aktuelle Element entfernt; wenn false zurückgegeben wird, wird es beibehalten.

// Alle div-Elemente ohne die Klasse .box herausfiltern
$('div').not('.box');

// Alle nicht ausgewählten Optionen herausfiltern
$('#select option').not(function (index, element) {
  return element.selected;
});

CSS-Klassen

`.hasClass()`

Prüft, ob das erste Element der Sammlung eine bestimmte CSS-Klasse enthält.

// Prüft, ob das erste div-Element die Klasse .item enthält
$('div').hasClass('item');

`.addClass()`

Fügt jedem Element in der Sammlung eine CSS-Klasse hinzu. Mehrere Klassennamen können durch Leerzeichen getrennt werden.

Das Argument kann ein String oder eine Callback-Funktion sein, die die CSS-Klassennamen zurückgibt. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument die ursprüngliche CSS-Klasse des Elements. Innerhalb der Funktion zeigt this auf das aktuelle Element.

// Fügt allen div-Elementen die Klasse .item hinzu
$('div').addClass('item');

// Fügt allen div-Elementen die Klassen .item1 und .item2 hinzu
$('div').addClass('item1 item2');

// Fügt allen div-Elementen die von der Callback-Funktion zurückgegebene CSS-Klasse hinzu
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
});

`.removeClass()`

Entfernt bestimmte CSS-Klassen von jedem Element in der Sammlung. Mehrere Klassennamen können durch Leerzeichen getrennt werden.

Wenn kein Argument übergeben wird, entfernt diese Methode direkt das class-Attribut des Elements.

// Entfernt die Klasse .item von allen div-Elementen
$('div').removeClass('item');

// Entfernt die Klassen .item1 und .item2 von allen div-Elementen
$('div').removeClass('item1 item2');

// Entfernt die von der Callback-Funktion zurückgegebene CSS-Klasse von allen div-Elementen
$('div').removeClass(function (index, currentClassName) {
  return 'item';
});

`.toggleClass()`

Wenn das Element eine bestimmte CSS-Klasse hat, wird sie entfernt; wenn nicht, wird sie hinzugefügt. Mehrere Klassennamen können durch Leerzeichen getrennt werden.

// Schaltet die Klasse .item für alle div-Elemente um
$('div').toggleClass('item');

// Schaltet die Klassen .item1 und .item2 für alle div-Elemente um
$('div').toggleClass('item1 item2');

// Schaltet die von der Callback-Funktion zurückgegebene CSS-Klasse für alle div-Elemente um
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
});

Knotenattribute

`.prop()`

Ruft den Wert einer JavaScript-Property des ersten Elements in der Sammlung ab.

// Wert der checked-Property des ersten Elements abrufen
$('input').prop('checked');

Wenn zwei Argumente übergeben werden, setzt diese Methode die angegebene JavaScript-Property für alle Elemente in der Sammlung.

Der Property-Wert kann ein Wert beliebigen Typs oder der Rückgabewert einer Callback-Funktion sein. Das erste Argument der Callback-Funktion ist der Index des Elements, das zweite Argument der ursprüngliche Property-Wert des Elements. Innerhalb der Funktion zeigt this auf das aktuelle Element.

Wenn der Property-Wert oder der Rückgabewert der Callback-Funktion undefined ist, ändert diese Methode die ursprüngliche Property des Elements nicht.

// Setzt die checked-Property aller ausgewählten Elemente auf true
$('input').prop('checked', true);

// Setzt den Property-Wert über den Rückgabewert der Callback-Funktion
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

Sie können auch mehrere Properties gleichzeitig setzen, indem Sie ein Objekt übergeben.

// Mehrere Property-Werte eines Elements gleichzeitig setzen
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  },
});

`.removeProp()`

Löscht die angegebene JavaScript-Property von allen Elementen in der Sammlung.

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

`.attr()`

Ruft den Wert eines HTML-Attributs des ersten Elements in der Sammlung ab.

// Wert des Attributs des ersten Elements abrufen
$('div').attr('username');

Wenn zwei Argumente übergeben werden, setzt diese Methode das angegebene HTML-Attribut für alle Elemente in der Sammlung.

Der Attributwert kann ein String, ein numerischer Wert oder der Rückgabewert einer Callback-Funktion sein. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument der ursprüngliche Attributwert des Elements. Innerhalb der Funktion zeigt this auf das aktuelle Element.

Wenn der Attributwert oder der Rückgabewert der Callback-Funktion null ist, löscht diese Methode das angegebene Attribut; wenn undefined zurückgegeben wird, wird das ursprüngliche Attribut des Elements nicht geändert.

// Setzt den Attributwert für alle ausgewählten Elemente
$('div').attr('username', 'mdui');

// Setzt den Attributwert über den Rückgabewert der Callback-Funktion
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

Sie können auch mehrere Attribute gleichzeitig setzen, indem Sie ein Objekt übergeben.

// Mehrere Attributwerte eines Elements gleichzeitig setzen
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  },
});

`.removeAttr()`

Löscht das angegebene HTML-Attribut von allen Elementen in der Sammlung. Mehrere Attributnamen können durch Leerzeichen getrennt werden.

// Löscht ein Attribut von allen Elementen in der Sammlung
$('div').removeAttr('username');

// Löscht mehrere Attribute von allen Elementen in der Sammlung
$('div').removeAttr('username lastname');

`.val()`

Gibt den Wert des ersten Elements in der Sammlung zurück.

Wenn das Element ein <select multiple="multiple"> ist, wird ein Array aller ausgewählten Optionen zurückgegeben.

// Wert des ersten ausgewählten Elements abrufen
$('#input').val();

Wenn ein Argument übergeben wird, setzt diese Methode den Wert aller Elemente in der Sammlung.

Der Wert kann ein String, ein numerischer Wert, ein Array von Strings oder der Rückgabewert einer Callback-Funktion sein. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument der ursprüngliche Wert des Elements. Innerhalb der Funktion zeigt this auf das aktuelle Element.

Wenn das Element ein <input type="checkbox">, <input type="radio"> oder <option> ist, kann der Wert oder der Rückgabewert der Callback-Funktion ein Array sein. In diesem Fall werden die Werte im Array ausgewählt und Werte, die nicht im Array sind, abgewählt.

Wenn der Wert oder der Rückgabewert der Callback-Funktion undefined ist, wird der Wert des Elements auf einen leeren String gesetzt.

// Setzt den Wert des ausgewählten Elements
$('#input').val('mdui');

// Setzt den Wert des Elements über den Rückgabewert der Callback-Funktion
$('#input').val(function (index, oldValue) {
  return 'mdui';
});

`.text()`

Gibt den Textinhalt aller Elemente in der Sammlung (einschließlich ihrer Nachkommen) zurück.

// Text aller .box-Elemente abrufen
$('.box').text();

Wenn ein Argument übergeben wird, setzt diese Methode den Textinhalt aller Elemente in der Sammlung.

Der Wert kann ein String, ein numerischer Wert, ein boolescher Wert oder der Rückgabewert einer Callback-Funktion sein. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument der ursprüngliche Textinhalt des Elements. Innerhalb der Funktion zeigt this auf das aktuelle Element.

Wenn der Wert oder der Rückgabewert der Callback-Funktion undefined ist, wird der Textinhalt des Elements nicht geändert.

// Setzt den Textinhalt der ausgewählten Elemente
$('.box').text('Textinhalt');

// Setzt den Textinhalt der Elemente über den Rückgabewert der Callback-Funktion
$('.box').text(function (index, oldTextContent) {
  return 'neuer Textinhalt';
});

`.html()`

Gibt den HTML-Inhalt des ersten Elements in der Sammlung zurück.

// HTML-Inhalt des ersten .box-Elements abrufen
$('.box').html();

Wenn ein Argument übergeben wird, setzt diese Methode den HTML-Inhalt aller Elemente in der Sammlung.

Der Wert kann ein HTML-String, ein DOM-Element oder der Rückgabewert einer Callback-Funktion (der ein HTML-String oder ein DOM-Element sein muss) sein. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument der ursprüngliche HTML-Inhalt des Elements. Innerhalb der Funktion zeigt this auf das aktuelle Element.

Wenn der Wert oder der Rückgabewert der Callback-Funktion undefined ist, wird der HTML-Inhalt des Elements nicht geändert.

// Setzt den HTML-Inhalt der ausgewählten Elemente
$('.box').html('<div>neuer HTML-Inhalt</div>');

// Setzt den HTML-Inhalt der Elemente über den Rückgabewert der Callback-Funktion
$('.box').html(function (index, oldHTMLContent) {
  return '<div>neuer HTML-Inhalt</div>';
});

Datenspeicherung

`$.data()`

Liest oder speichert Daten auf einem angegebenen Element.

Beim Speichern von Daten: Wenn der Wert undefined ist, entspricht dies dem Lesen der entsprechenden Daten auf dem Element. Das heißt, $.data(element, 'key', undefined) ist äquivalent zu $.data(element, 'key').

Hinweis: Diese Methode ruft keine data-*-Attribute des Elements ab.

// Speichert Daten auf einem bestimmten Element. Gibt den gespeicherten Wert zurück
$.data(document.body, 'layout', 'dark'); // Gibt dark zurück

// Speichert mehrere Daten gleichzeitig auf einem bestimmten Element
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
}); // Gibt { primary: 'indigo', accent: 'pink' } zurück

// Ruft die auf einem bestimmten Element gespeicherten Daten ab
$.data(document.body, 'layout'); // Gibt dark zurück

// Ruft alle auf einem bestimmten Element gespeicherten Daten ab
$.data(document.body); // Gibt { layout: 'dark', primary: 'indigo', accent: 'pink' } zurück

`$.removeData()`

Entfernt gespeicherte Daten von einem angegebenen Element.

Sie können mehrere Schlüsselnamen angeben, getrennt durch Leerzeichen oder als Array. Wenn kein Schlüsselname angegeben wird, werden alle Daten des Elements entfernt.

// Entfernt Daten mit dem Schlüsselnamen name vom Element
$.removeData(document.body, 'name');

// Entfernt Daten mit den Schlüsselnamen name1 und name2 vom Element. Die folgenden zwei Methoden sind äquivalent:
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

// Entfernt alle gespeicherten Daten vom Element
$.removeData(document.body);

`.data()`

Liest oder speichert Daten auf den Elementen der aktuellen Sammlung.

Wenn der gespeicherte Wert undefined ist, wird nichts gespeichert.

Hinweis: Die mit dieser Methode abgerufenen Daten enthalten die data-*-Attribute der Elemente.

// Speichert Daten auf den Elementen der aktuellen Sammlung
$('.box').data('layout', 'dark');

// Speichert mehrere Daten gleichzeitig auf den Elementen der aktuellen Sammlung
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

// Ruft die angegebenen Daten vom ersten Element der aktuellen Sammlung ab
$('.box').data('layout'); // Gibt dark zurück

// Ruft alle Daten vom ersten Element der aktuellen Sammlung ab
$('.box').data(); // Gibt { layout: 'dark', primary: 'indigo', accent: 'pink' } zurück

`.removeData()`

Entfernt gespeicherte Daten von den Elementen der aktuellen Sammlung.

Sie können mehrere Schlüsselnamen angeben, getrennt durch Leerzeichen oder als Array. Wenn kein Schlüsselname angegeben wird, werden alle Daten der Elemente entfernt.

Hinweis: Diese Methode entfernt nur Daten, die mit der .data()-Methode gesetzt wurden, nicht die Daten von data-*-Attributen.

// Entfernt Daten mit dem Schlüsselnamen name
$('.box').removeData('name');

// Entfernt Daten mit den Schlüsselnamen name1 und name2. Die folgenden zwei Methoden sind äquivalent:
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// Entfernt alle gespeicherten Daten von den Elementen
$('.box').removeData();

Stile

`.css()`

Ruft den Wert einer CSS-Property des ersten Elements in der Sammlung ab.

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

Wenn ein Argument übergeben wird, setzt diese Methode den Wert der CSS-Property für alle Elemente in der Sammlung.

Der Property-Wert kann ein String, ein numerischer Wert oder der Rückgabewert einer Callback-Funktion (der ein String oder ein numerischer Wert sein muss) sein. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument der ursprüngliche CSS-Property-Wert des Elements. Innerhalb der Funktion zeigt this auf das aktuelle Element.

Wenn der Wert oder der Rückgabewert der Callback-Funktion undefined ist, wird die CSS-Property des Elements nicht geändert. Wenn der Wert null ist, wird die entsprechende CSS-Property vom Element entfernt. Wenn der Wert eine Zahl ist, wird automatisch px als Einheit hinzugefügt. Wenn die Property keine px-Einheit verwenden kann, wird der Wert direkt in einen String umgewandelt.

// Setzt den Stilwert aller Elemente in der Sammlung
$('.box').css('color', 'red');

// Setzt den Stilwert aller Elemente über den Rückgabewert der Callback-Funktion
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

// Setzt mehrere Stile gleichzeitig durch Übergabe eines Objekts
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});

`.width()`

Ruft die Breite des ersten Elements in der Sammlung ab (ohne padding, border, margin).

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

Wenn ein Argument übergeben wird, setzt diese Methode die Breite aller Elemente in der Sammlung.

Der Wert kann ein String mit Einheit, ein numerischer Wert oder der Rückgabewert einer Callback-Funktion (der ein String mit Einheit oder ein numerischer Wert sein muss) sein. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument die ursprüngliche Breite des Elements. Innerhalb der Funktion zeigt this auf das aktuelle Element.

Wenn der Wert oder der Rückgabewert der Callback-Funktion null oder undefined ist, wird die Breite des Elements nicht geändert. Wenn der Wert eine Zahl ist, wird automatisch px als Einheit hinzugefügt.

// Setzt die Breite aller Elemente in der Sammlung
$('.box').width('20%');

// Wenn der Wert eine Zahl ist, ist die Standardeinheit px
$('.box').width(10);

// Setzt die Breite über den Rückgabewert der Callback-Funktion
$('.box').width(function (index, oldWidth) {
  return 10;
});

`.height()`

Ruft die Höhe des ersten Elements in der Sammlung ab (ohne padding, border, margin).

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

Wenn ein Argument übergeben wird, setzt diese Methode die Höhe aller Elemente in der Sammlung.

Der Wert kann ein String mit Einheit, ein numerischer Wert oder der Rückgabewert einer Callback-Funktion (der ein String mit Einheit oder ein numerischer Wert sein muss) sein. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument die ursprüngliche Höhe des Elements. Innerhalb der Funktion zeigt this auf das aktuelle Element.

Wenn der Wert oder der Rückgabewert der Callback-Funktion null oder undefined ist, wird die Höhe des Elements nicht geändert. Wenn der Wert eine Zahl ist, wird automatisch px als Einheit hinzugefügt.

// Setzt die Höhe aller Elemente in der Sammlung
$('.box').height('20%');

// Wenn der Wert eine Zahl ist, ist die Standardeinheit px
$('.box').height(10);

// Setzt die Höhe über den Rückgabewert der Callback-Funktion
$('.box').height(function (index, oldHeight) {
  return 10;
});

`.innerWidth()`

Ruft die Breite des ersten Elements in der Sammlung ab (enthält padding, nicht aber border, margin).

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

Wenn ein Argument übergeben wird, setzt diese Methode die Breite aller Elemente in der Sammlung.

// Setzt die Breite aller Elemente in der Sammlung
$('.box').innerWidth('20%');

// Wenn der Wert eine Zahl ist, ist die Standardeinheit px
$('.box').innerWidth(10);

// Setzt die Breite über den Rückgabewert der Callback-Funktion
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

`.innerHeight()`

Ruft die Höhe des ersten Elements in der Sammlung ab (enthält padding, nicht aber border, margin).

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

Wenn ein Argument übergeben wird, setzt diese Methode die Höhe aller Elemente in der Sammlung.

Der Wert kann ein String mit Einheit, ein numerischer Wert oder der Rückgabewert einer Callback-Funktion (der ein String mit Einheit oder ein numerischer Wert sein muss) sein. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument die ursprüngliche Höhe des Elements. Innerhalb der Funktion zeigt this auf das aktuelle Element.

// Setzt die Höhe aller Elemente in der Sammlung
$('.box').innerHeight('20%');

// Wenn der Wert eine Zahl ist, ist die Standardeinheit px
$('.box').innerHeight(10);

// Setzt die Höhe über den Rückgabewert der Callback-Funktion
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});

`.outerWidth()`

Ruft die Breite des ersten Elements in der Sammlung ab (enthält padding, border, nicht aber margin. Sie können true übergeben, um margin mit einzuschließen).

// Breite inklusive padding und border
$('.box').outerWidth();

// Breite inklusive padding, border und margin
$('.box').outerWidth(true);

Sie können diese Methode auch verwenden, um die Breite aller Elemente in der Sammlung zu setzen (enthält padding, border, nicht aber margin. Sie können im zweiten Argument true übergeben, um margin mit einzuschließen).

Das erste Argument kann ein String mit Einheit, ein numerischer Wert oder der Rückgabewert einer Callback-Funktion (der ein String mit Einheit oder ein numerischer Wert sein muss) sein. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument die ursprüngliche Breite des Elements. Innerhalb der Funktion zeigt this auf das aktuelle Element.

// Setzt die Breite aller Elemente in der Sammlung
$('.box').outerWidth('20%');

// Wenn der Wert eine Zahl ist, ist die Standardeinheit px
$('.box').outerWidth(10);

// Wenn das zweite Argument true ist, wird die Breite inklusive margin gesetzt
$('.box').outerWidth(10, true);

// Setzt die Breite über den Rückgabewert der Callback-Funktion
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});

`.outerHeight()`

Ruft die Höhe des ersten Elements in der Sammlung ab (enthält padding, border, nicht aber margin. Sie können true übergeben, um margin mit einzuschließen).

// Höhe inklusive padding und border
$('.box').outerHeight();

// Höhe inklusive padding, border und margin
$('.box').outerHeight(true);

Sie können diese Methode auch verwenden, um die Höhe aller Elemente in der Sammlung zu setzen (enthält padding, border, nicht aber margin. Sie können im zweiten Argument true übergeben, um margin mit einzuschließen).

Das erste Argument kann ein String mit Einheit, ein numerischer Wert oder der Rückgabewert einer Callback-Funktion (der ein String mit Einheit oder ein numerischer Wert sein muss) sein. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument die ursprüngliche Höhe des Elements. Innerhalb der Funktion zeigt this auf das aktuelle Element.

// Setzt die Höhe aller Elemente in der Sammlung
$('.box').outerHeight('20%');

// Wenn der Wert eine Zahl ist, ist die Standardeinheit px
$('.box').outerHeight(10);

// Wenn das zweite Argument true ist, wird die Höhe inklusive margin gesetzt
$('.box').outerHeight(10, true);

// Setzt die Höhe über den Rückgabewert der Callback-Funktion
$('.box').outerHeight(function (index, oldHeight) {
  return 10;
});

`.hide()`

Verbirgt alle Elemente in der Sammlung.

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

`.show()`

Zeigt alle Elemente in der Sammlung an.

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

`.toggle()`

Schaltet den Anzeigezustand aller Elemente in der Sammlung um.

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

`.offset()`

Ruft die Koordinaten des ersten Elements in der Sammlung relativ zum document ab.

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

Wenn ein Argument übergeben wird, setzt diese Methode die Koordinaten aller Elemente in der Sammlung relativ zum document.

Das Argument kann ein Objekt mit den Eigenschaften top und left oder eine Callback-Funktion sein, die ein solches Objekt zurückgibt. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument die ursprünglichen Koordinaten des Elements. Innerhalb der Funktion zeigt this auf das aktuelle Element.

Wenn der Wert von top oder left im Argument undefined ist, wird der entsprechende Wert nicht geändert.

// Setzt die Koordinaten aller Elemente in der Sammlung
$('.box').offset({ top: 20, left: 30 });

// Setzt die Koordinaten der Elemente über den Rückgabewert der Callback-Funktion
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

`.offsetParent()`

Ruft das positionierte übergeordnete Element des ersten Elements in der Sammlung ab, d. h. das übergeordnete Element, bei dem die position-Eigenschaft als erstes relative oder absolute ist.

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

`.position()`

Ruft den Versatz des ersten Elements in der Sammlung relativ zu seinem positionierten übergeordneten Element ab.

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

Knoten finden

`.find()`

Findet in der aktuellen Sammlung die Nachkommen, die einem CSS-Selektor entsprechen.

// Findet alle Nachkommen von #box mit der Klasse .box
$('#box').find('.box');

`.children()`

Ruft eine Sammlung der direkten untergeordneten Elemente der aktuellen Sammlung ab. Sie können einen CSS-Selektor als Argument übergeben, um die untergeordneten Elemente zu filtern.

// Findet alle direkten untergeordneten Elemente von #box
$('#box').children();

// Findet unter den direkten untergeordneten Elementen von #box diejenigen mit der Klasse .box
$('#box').children('.box');

`.has()`

Filtert aus der aktuellen Sammlung die Elemente heraus, die ein bestimmtes untergeordnetes Element enthalten. Das Argument kann ein CSS-Selektor oder ein DOM-Element sein.

// Gibt li-Elementen, die ein ul enthalten, eine Hintergrundfarbe
$('li').has('ul').css('background-color', 'red');

`.parent()`

Ruft eine Sammlung der direkten übergeordneten Elemente aller Elemente in der aktuellen Sammlung ab. Sie können einen CSS-Selektor als Argument übergeben, um nur übergeordnete Elemente zurückzugeben, die mit diesem Selektor übereinstimmen.

// Gibt die direkten übergeordneten Elemente der .box-Elemente zurück
$('.box').parent();

// Gibt die direkten übergeordneten Elemente der .box-Elemente zurück, die die Klasse .parent haben
$('.box').parent('.parent');

`.parents()`

Ruft eine Sammlung der Vorfahren aller Elemente in der aktuellen Sammlung ab. Sie können einen CSS-Selektor als Argument übergeben, um nur Vorfahren zurückzugeben, die mit diesem Selektor übereinstimmen.

// Gibt alle Vorfahren der span-Elemente zurück
$('span').parents();

// Gibt alle Vorfahren der span-Elemente zurück, die p-Elemente sind
$('span').parents('p');

`.parentsUntil()`

Ruft für jedes Element in der aktuellen Sammlung alle übergeordneten Elemente ab, bis (aber nicht einschließlich) das Element erreicht ist, das mit dem ersten Argument übereinstimmt.

Das erste Argument kann ein CSS-Selektor, ein DOM-Element oder ein JQ-Objekt sein.

Sie können ein zweites Argument (muss ein CSS-Selektor sein) übergeben, um nur Elemente zurückzugeben, die diesem Selektor entsprechen.

Wenn kein Argument angegeben wird, werden alle Vorfahren ausgewählt, ähnlich wie bei .parents().

// Gibt alle Vorfahren des .item-Elements zurück
$('.item').parentsUntil();

// Findet alle übergeordneten Elemente des .item-Elements, bis (ausschließlich) das .parent-Element erreicht ist
$('.item').parentsUntil('.parent');

// Gibt alle Vorfahren des .item-Elements zurück, die div-Elemente sind, bis (ausschließlich) das .parent-Element erreicht ist
$('.item').parentsUntil('.parent', 'div');

`.prev()`

Ruft eine Sammlung der vorherigen Geschwisterelemente jedes Elements in der aktuellen Sammlung ab. Sie können einen CSS-Selektor als Argument übergeben, um nur Geschwisterelemente zurückzugeben, die diesem Selektor entsprechen.

// Ruft die Sammlung der vorherigen Geschwisterelemente der .box-Elemente ab
$('.box').prev();

// Ruft die Sammlung der vorherigen Geschwisterelemente der .box-Elemente ab, die div-Elemente sind
$('.box').prev('div');

`.prevAll()`

Ruft eine Sammlung aller vorherigen Geschwisterelemente jedes Elements in der aktuellen Sammlung ab. Sie können einen CSS-Selektor als Argument übergeben, um nur Geschwisterelemente zurückzugeben, die diesem Selektor entsprechen.

// Ruft alle vorherigen Geschwisterelemente der .box-Elemente ab
$('.box').prevAll();

// Ruft alle vorherigen Geschwisterelemente der .box-Elemente ab, die die Klasse .selected haben
$('.box').prevAll('.selected');

`.prevUntil()`

Ruft für jedes Element in der aktuellen Sammlung alle vorherigen Geschwisterelemente ab, bis (aber nicht einschließlich) das Element erreicht ist, das mit dem ersten Argument übereinstimmt.

Das erste Argument kann ein CSS-Selektor, ein DOM-Element oder ein JQ-Objekt sein. Sie können ein zweites Argument (muss ein CSS-Selektor sein) übergeben, um nur Elemente zurückzugeben, die diesem Selektor entsprechen.

Wenn kein Argument angegeben wird, werden alle vorherigen Geschwisterelemente zurückgegeben, ähnlich wie bei .prevAll().

// Gibt alle vorherigen Geschwisterelemente des .box-Elements zurück
$('.box').prevUntil();

// Gibt alle vorherigen Geschwisterelemente des .box-Elements zurück, bis (ausschließlich) das .until-Element erreicht ist
$('.box').prevUntil('.until');

// Gibt alle vorherigen Geschwisterelemente des .box-Elements zurück, die div-Elemente sind, bis (ausschließlich) das .until-Element erreicht ist
$('.box').prevUntil('.until', 'div');

`.next()`

Ruft eine Sammlung der nächsten Geschwisterelemente jedes Elements in der aktuellen Sammlung ab. Sie können einen CSS-Selektor als Argument übergeben, um nur Geschwisterelemente zurückzugeben, die diesem Selektor entsprechen.

// Ruft die Sammlung der nächsten Geschwisterelemente der .box-Elemente ab
$('.box').next();

// Ruft die Sammlung der nächsten Geschwisterelemente der .box-Elemente ab, die div-Elemente sind
$('.box').next('div');

`.nextAll()`

Ruft eine Sammlung aller nächsten Geschwisterelemente jedes Elements in der aktuellen Sammlung ab. Sie können einen CSS-Selektor als Argument übergeben, um nur Geschwisterelemente zurückzugeben, die diesem Selektor entsprechen.

// Ruft alle nächsten Geschwisterelemente der .box-Elemente ab
$('.box').nextAll();

// Ruft alle nächsten Geschwisterelemente der .box-Elemente ab, die die Klasse .selected haben
$('.box').nextAll('.selected');

`.nextUntil()`

Ruft für jedes Element in der aktuellen Sammlung alle nächsten Geschwisterelemente ab, bis (aber nicht einschließlich) das Element erreicht ist, das mit dem ersten Argument übereinstimmt.

Wenn kein Argument angegeben wird, werden alle nächsten Geschwisterelemente zurückgegeben, ähnlich wie bei .nextAll().

// Gibt alle nächsten Geschwisterelemente des .box-Elements zurück
$('.box').nextUntil();

// Gibt alle nächsten Geschwisterelemente des .box-Elements zurück, bis (ausschließlich) das .until-Element erreicht ist
$('.box').nextUntil('.until');

// Gibt alle nächsten Geschwisterelemente des .box-Elements zurück, die div-Elemente sind, bis (ausschließlich) das .until-Element erreicht ist
$('.box').nextUntil('.until', 'div');

`.closest()`

Beginnt beim aktuellen Element und durchläuft die Vorfahren, um das erste Element zurückzugeben, das mit dem Selektor übereinstimmt. Das Argument kann ein CSS-Selektor, ein DOM-Element oder ein JQ-Objekt sein.

// Findet das nächste .parent-Element unter den Vorfahren des .box-Elements
$('.box').closest('.parent');

`.siblings()`

Ruft eine Sammlung aller Geschwisterelemente jedes Elements in der aktuellen Sammlung ab. Sie können einen CSS-Selektor als Argument übergeben, um nur Geschwisterelemente zurückzugeben, die diesem Selektor entsprechen.

// Ruft alle Geschwisterelemente der .box-Elemente ab
$('.box').siblings();

// Ruft alle Geschwisterelemente der .box-Elemente ab, die die Klasse .selected haben
$('.box').siblings('.selected');

`.add()`

Fügt Elemente zur aktuellen Sammlung hinzu. Das Argument kann ein HTML-String, ein CSS-Selektor, ein JQ-Objekt, ein DOM-Element, ein Array von DOM-Elementen oder eine NodeList sein.

// Fügt Elemente mit der Klasse .selected zur aktuellen Sammlung hinzu
$('.box').add('.selected');

DOM-Operationen

`.empty()`

Entfernt alle untergeordneten Elemente aus dem aktuellen Element.

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

`.remove()`

Entfernt die Elemente der aktuellen Sammlung aus dem DOM. Sie können einen CSS-Selektor als Argument übergeben, um nur Elemente zu entfernen, die diesem Selektor entsprechen.

// Entfernt alle p-Elemente
$('p').remove();

// Entfernt alle p-Elemente mit der Klasse .box
$('p').remove('.box');

`.prepend()`

Fügt Inhalt am Anfang des Inneren der Elemente in der aktuellen Sammlung ein. Das Argument kann ein HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt sein. Es können mehrere Argumente übergeben werden.

Sie können auch eine Callback-Funktion übergeben, die einen HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt zurückgibt. Das erste Argument der Funktion ist der Index des aktuellen Elements, das zweite Argument das ursprüngliche HTML des Elements. this zeigt innerhalb der Funktion auf das aktuelle Element.

Diese Methode gibt die ursprüngliche Sammlung zurück.

// Ein Element einfügen
$('<p>Ich möchte sagen: </p>').prepend('<b>Hallo</b>');
// Ergebnis: <p><b>Hallo</b>Ich möchte sagen: </p>

// Mehrere Elemente einfügen
$('<p>Ich möchte sagen: </p>').prepend('<b>Hallo</b>', '<b>Welt</b>');
// Ergebnis: <p><b>Hallo</b><b>Welt</b>Ich möchte sagen: </p>

// Ein Element über eine Callback-Funktion einfügen
$('<p>Hallo</p>').prepend(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Ergebnis: <p><b>Hallo0</b>Hallo</p>

`.prependTo()`

Fügt die Elemente der aktuellen Sammlung am Anfang des Inneren des angegebenen Elements ein. Das Argument kann ein CSS-Selektor, ein HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt sein.

Diese Methode gibt die ursprüngliche Sammlung zurück.

$('<p>Hallo</p>').prependTo('<p>Ich möchte sagen: </p>');
// Ergebnis: [ <p><p>Hallo</p>Ich möchte sagen: </p> ]

`.append()`

Fügt Inhalt am Ende des Inneren des aktuellen Elements ein. Das Argument kann ein HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt sein. Es können mehrere Argumente übergeben werden.

Diese Methode gibt die ursprüngliche Sammlung zurück.

// Ein Element einfügen
$('<p>Ich möchte sagen: </p>').append('<b>Hallo</b>');
// Ergebnis: <p>Ich möchte sagen: <b>Hallo</b></p>

// Mehrere Elemente einfügen
$('<p>Ich möchte sagen: </p>').append('<b>Hallo</b>', '<b>Welt</b>');
// Ergebnis: <p>Ich möchte sagen: <b>Hallo</b><b>Welt</b></p>

// Ein Element über eine Callback-Funktion einfügen
$('<p>Hallo</p>').append(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Ergebnis: <p>Hallo<b>Hallo0</b></p>

`.appendTo()`

Fügt die Elemente der aktuellen Sammlung am Ende des Inneren des angegebenen Elements ein. Das Argument kann ein CSS-Selektor, ein HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt sein.

Diese Methode gibt die ursprüngliche Sammlung zurück.

$('<p>Hallo</p>').appendTo('<p>Ich möchte sagen: </p>');
// Ergebnis: <p>Ich möchte sagen: <p>Hallo</p></p>

`.after()`

Fügt Inhalt nach den Elementen der aktuellen Sammlung als deren Geschwisterelemente ein. Das Argument kann ein HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt sein. Es können mehrere Argumente übergeben werden.

Diese Methode gibt die ursprüngliche Sammlung zurück.

// Ein Element einfügen
$('<p>Ich möchte sagen: </p>').after('<b>Hallo</b>');
// Ergebnis: <p>Ich möchte sagen: </p><b>Hallo</b>

// Mehrere Elemente einfügen
$('<p>Ich möchte sagen: </p>').after('<b>Hallo</b>', '<b>Welt</b>');
// Ergebnis: <p>Ich möchte sagen: </p><b>Hallo</b><b>Welt</b>

// Ein Element über eine Callback-Funktion einfügen
$('<p>Hallo</p>').after(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Ergebnis: <p>Hallo</p><b>Hallo0</b>

`.insertAfter()`

Fügt die Elemente der aktuellen Sammlung nach dem Ziel-Element als dessen Geschwisterelemente ein.

Wenn die Elemente der aktuellen Sammlung bereits auf der Seite vorhanden sind, werden sie verschoben, anstatt kopiert. Wenn mehrere Ziele vorhanden sind, werden die Elemente der aktuellen Sammlung geklont und nach jedem Ziel-Element eingefügt.

Sie können einen HTML-String, einen CSS-Selektor, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt als Argument übergeben, um das Ziel-Element anzugeben.

$('<b>Hallo</b>').insertAfter('<p>Ich möchte sagen: </p>');
// Ergebnis: <p>Ich möchte sagen: </p><b>Hallo</b>

`.before()`

Fügt Inhalt vor den Elementen der aktuellen Sammlung als deren Geschwisterelemente ein. Das Argument kann ein HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt sein. Es können mehrere Argumente übergeben werden.

Diese Methode gibt die ursprüngliche Sammlung zurück.

// Ein Element einfügen
$('<p>Ich möchte sagen: </p>').before('<b>Hallo</b>');
// Ergebnis: <b>Hallo</b><p>Ich möchte sagen: </p>

// Mehrere Elemente einfügen
$('<p>Ich möchte sagen: </p>').before('<b>Hallo</b>', '<b>Welt</b>');
// Ergebnis: <b>Hallo</b><b>Welt</b><p>Ich möchte sagen: </p>

// Ein Element über eine Callback-Funktion einfügen
$('<p>Hallo</p>').before(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Ergebnis: <b>Hallo0</b><p>Hallo</p>

`.insertBefore()`

Fügt die Elemente der aktuellen Sammlung vor dem Ziel-Element als dessen Geschwisterelemente ein.

Sie können einen HTML-String, einen CSS-Selektor, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt als Argument übergeben, um das Ziel-Element anzugeben.

$('<p>Ich möchte sagen: </p>').insertBefore('<b>Hallo</b>');
// Ergebnis: <p>Ich möchte sagen: </p><b>Hallo</b>

`.replaceWith()`

Ersetzt die Elemente der aktuellen Sammlung durch die angegebenen Elemente.

Das Argument kann ein HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt sein.

Diese Methode gibt die ursprüngliche Sammlung der ersetzten Elemente zurück.

// Ersetzt alle .box-Elemente durch <p>Hallo</p>
$('.box').replaceWith('<p>Hallo</p>');

// Ersetzt alle .box-Elemente durch den Rückgabewert der Callback-Funktion
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

`.replaceAll()`

Ersetzt die angegebenen Elemente durch die Elemente der aktuellen Sammlung.

Das Argument (die zu ersetzenden Elemente) kann ein CSS-Selektor, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt sein.

Diese Methode gibt die ursprüngliche Sammlung zurück, d. h. die Sammlung der Elemente, die zum Ersetzen verwendet werden.

// Ersetzt alle .box-Elemente durch die .new-Elemente
$('.new').replaceAll('.box');

`.clone()`

Erstellt eine tiefe Kopie aller Elemente in der Sammlung.

Diese Methode verwendet die native cloneNode-Methode für eine tiefe Kopie, kopiert jedoch keine Daten und Ereignishandler auf die neuen Elemente. Dies unterscheidet sich von jQuery, wo mit einem Argument gesteuert werden kann, ob Daten und Ereignisse kopiert werden sollen.

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

Formulare

`.serializeArray()`

Wandelt die Werte der Formularelemente in ein Array von name- und value-Schlüssel-Wert-Paaren um.

Diese Methode kann auf einzelne Formularelemente oder auf ein gesamtes <form>-Formular angewendet werden.

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

`.serializeObject()`

Wandelt die Werte der Formularelemente in ein Objekt um.

Wenn derselbe Schlüsselname mehrfach vorkommt, wird der entsprechende Wert in ein Array umgewandelt.

Diese Methode kann auf einzelne Formularelemente oder auf ein gesamtes <form>-Formular angewendet werden.

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

`.serialize()`

Wandelt die Werte der Formularelemente in einen URL-kodierten String um.

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

Ereignisse

`.on()`

Bindet eine Ereignisbehandlungsfunktion an ein bestimmtes Ereignis für jedes Element in der Sammlung. Siehe die Beispiele unten für die Verwendung:

// Klick-Ereignis binden
$('.box').on('click', function (e) {
  console.log('Auf das .box-Element geklickt');
});

// Mehrere Ereignisse binden
$('.box').on('click focus', function (e) {
  console.log(
    'Sowohl click- als auch focus-Ereignisse lösen diese Funktion aus',
  );
});

// Ereignisdelegation
$(document).on('click', '.box', function (e) {
  console.log('Diese Funktion wird ausgelöst, wenn auf .box geklickt wird');
});

// Mehrere Ereignisse und Ereignisbehandlungsfunktionen gleichzeitig binden
$('.box').on({
  click: function (e) {
    console.log('click-Ereignis ausgelöst');
  },
  focus: function (e) {
    console.log('focus-Ereignis ausgelöst');
  },
});

// Parameter übergeben
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log(
    'Auf .box geklickt und Parameter an die Ereignisbehandlungsfunktion übergeben',
  );
  // e._data ist {key1: 'value1', key2: 'value2'}
});

// Mehrere Ereignisse und Ereignisbehandlungsfunktionen gleichzeitig binden und Parameter übergeben
$('.box').on(
  {
    click: function (e) {
      console.log('click-Ereignis ausgelöst');
      // e._data ist {key1: 'value1', key2: 'value2'}
    },
    focus: function (e) {
      console.log('focus-Ereignis ausgelöst');
      // e._data ist {key1: 'value1', key2: 'value2'}
    },
  },
  { key1: 'value1', key2: 'value2' },
);

// Ereignis über Delegation binden und Parameter übergeben
$(document).on(
  'click',
  '.box',
  { key1: 'value1', keys: 'value2' },
  function (e) {
    console.log(
      'Auf .box geklickt und Parameter an die Ereignisbehandlungsfunktion übergeben',
    );
    // e._data ist {key1: 'value1', key2: 'value2'}
  },
);

// Mehrere Ereignisse und Ereignisbehandlungsfunktionen über Delegation gleichzeitig binden
$(document).on(
  {
    click: function (e) {
      console.log('click-Ereignis ausgelöst');
    },
    focus: function (e) {
      console.log('focus-Ereignis ausgelöst');
    },
  },
  '.box',
);

// Mehrere Ereignisse und Ereignisbehandlungsfunktionen über Delegation gleichzeitig binden und Parameter übergeben
$(document).on(
  {
    click: function (e) {
      console.log('click-Ereignis ausgelöst');
      // e._data ist {key1: 'value1', key2: 'value2'}
    },
    focus: function (e) {
      console.log('focus-Ereignis ausgelöst');
      // e._data ist {key1: 'value1', key2: 'value2'}
    },
  },
  '.box',
  { key1: 'value1', key2: 'value2' },
);

// Ereignisparameter abrufen
$('.box').on('click', function (e, data) {
  // data ist gleich e.detail
});

// Ereignisnamen können Namensräume unterstützen
$('.box').on('click.myPlugin', function () {
  console.log('Auf das .box-Element geklickt');
});

`.one()`

Bindet eine Ereignisbehandlungsfunktion an ein bestimmtes Ereignis für jedes übereinstimmende Element, aber das Ereignis wird nur einmal ausgelöst.

Die Verwendung dieser Methode ist dieselbe wie bei .on(), daher werden keine weiteren Beispiele gegeben.

`.off()`

Entfernt gebundene Ereignisse von den Elementen in der Sammlung. Siehe die Beispiele unten für die Verwendung:

// Entfernt alle gebundenen Ereignisbehandlungsfunktionen
$('.box').off();

// Entfernt die gebundenen Funktionen für ein bestimmtes Ereignis
$('.box').off('click');

// Entfernt gleichzeitig die gebundenen Funktionen für mehrere Ereignisse
$('.box').off('click focus');

// Entfernt eine bestimmte gebundene Ereignisbehandlungsfunktion
$('.box').off('click', callback);

// Entfernt ein über Delegation gebundenes Ereignis
$(document).off('click', '.box');

// Entfernt eine bestimmte über Delegation gebundene Ereignisbehandlungsfunktion
$(document).off('click', '.box', callback);

// Entfernt gleichzeitig mehrere Ereignisbehandlungsfunktionen
$('.box').off({
  click: callback1,
  focus: callback2,
});

// Entfernt gleichzeitig mehrere über Delegation gebundene Ereignisbehandlungsfunktionen
$(document).off(
  {
    click: callback1,
    focus: callback2,
  },
  '.box',
);

// Ereignisnamen können Namensräume unterstützen. Die folgende Verwendung entfernt alle Ereignisse, die auf .myPlugin enden
$(document).off('.myPlugin');

`.trigger()`

Löst ein bestimmtes Ereignis aus. Siehe die Beispiele unten für die Verwendung:

// Löst ein bestimmtes Ereignis aus
$('.box').trigger('click');

// Parameter beim Auslösen des Ereignisses übergeben
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

// Ereignisnamen können Namensräume unterstützen
$('.box').trigger('click.myPlugin');

// Parameter für CustomEvent übergeben
$('.box').trigger('click', undefined, {
  bubbles: true,
  cancelable: true,
  composed: true,
});

AJAX

`$.ajaxSetup()`

Setzt globale Parameter für AJAX-Anfragen.

$.ajaxSetup({
  // Standardmäßig keine globalen AJAX-Ereignisse auslösen
  global: false,

  // Standardmäßig die POST-Methode für Anfragen verwenden
  method: 'POST',
});

Eine detaillierte Liste der Parameter finden Sie unten unter AJAX-Parameter.

`$.ajax()`

Sendet eine AJAX-Anfrage und gibt ein Promise-Objekt zurück.

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

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

Eine detaillierte Liste der Parameter finden Sie unten unter AJAX-Parameter.

Sie können auch die .on()-Methode verwenden, um auf globale AJAX-Ereignisse zu lauschen.

// Dieses Ereignis wird ausgelöst, wenn eine AJAX-Anfrage beginnt
$(document).on('ajaxStart', function (e, { xhr, options }) {
  // xhr: XMLHttpRequest-Objekt
  // options: Parameter der $.ajax()-Methode
});

// Dieses Ereignis wird ausgelöst, wenn eine AJAX-Anfrage erfolgreich ist
$(document).on('ajaxSuccess', function (e, { xhr, options, response }) {
  // xhr: XMLHttpRequest-Objekt
  // options: Parameter der $.ajax()-Methode
  // response: Antwort der Anfrage
});

// Dieses Ereignis wird ausgelöst, wenn eine AJAX-Anfrage fehlschlägt
$(document).on('ajaxError', function (e, { xhr, options }) {
  // xhr: XMLHttpRequest-Objekt
  // options: Parameter der $.ajax()-Methode
});

// Dieses Ereignis wird ausgelöst, wenn eine AJAX-Anfrage abgeschlossen ist (egal ob erfolgreich oder fehlgeschlagen)
$(document).on('ajaxComplete', function (e, { xhr, options }) {
  // xhr: XMLHttpRequest-Objekt
  // options: Parameter der $.ajax()-Methode
});

AJAX-Parameter

Attributname	Typ	Standardwert
`url`	`string`	Aktuelle Seiten-URL
URL der Anfrage.
`method`	`string`	`GET`
HTTP-Methode der Anfrage. Mögliche Werte: `GET`, `POST`, `PUT`, `PATCH`, `HEAD`, `OPTIONS`, `DELETE`.
`data`	`any`	`''`
An den Server zu sendende Daten.
`processData`	`boolean`	`true`
Ob die gesendeten Daten in einen Abfragestring umgewandelt werden sollen.
`async`	`boolean`	`true`
Ob die Anfrage asynchron sein soll.
`cache`	`boolean`	`true`
Ob Daten aus dem Cache gelesen werden sollen. Nur für `GET`- und `HEAD`-Anfragen gültig.
`username`	`string`	`''`
Benutzername für die HTTP-Zugangsauthentifizierung.
`password`	`string`	`''`
Passwort für die HTTP-Zugangsauthentifizierung.
`headers`	`object`	`{}`
Zum HTTP-Anfragekopf hinzuzufügende Daten. Dieser Wert kann in der `beforeSend`-Callback-Funktion überschrieben werden. Felder mit Werten vom Typ `string` oder `null` werden gesendet, Felder mit Wert `undefined` werden ignoriert.
`xhrFields`	`object`	`{}`
Auf dem `XMLHttpRequest`-Objekt zu setzende Daten. `$.ajax({ url: 'Eine Cross-Origin-URL', xhrFields: { withCredentials: true } });`
`statusCode`	`object`	`{}`
Abbildung von HTTP-Statuscodes auf entsprechende Behandlungsfunktionen. `$.ajax({ statusCode: { 404: function (xhr, textStatus) { alert('Wird aufgerufen, wenn der Statuscode 404 zurückgegeben wird'); }, 200: function (data, textStatus, xhr) { alert('Wird aufgerufen, wenn der Statuscode 200 zurückgegeben wird'); } } });` Wenn der Statuscode im Bereich 200 - 299 liegt oder 304 ist, gilt die Anfrage als erfolgreich. Die Funktionsparameter sind dieselben wie beim `success`-Callback. Andernfalls gilt die Anfrage als fehlgeschlagen, und die Funktionsparameter sind dieselben wie beim `error`-Callback.
`dataType`	`string`	`text`
Erwarteter Datentyp der Serverantwort. Umfasst: `text`, `json`
`contentType`	`string`	`application/x-www-form-urlencoded`
MIME-Typ des Anforderungsinhalts. Wenn `false` gesetzt ist, wird kein `Content-Type` gesetzt.
`timeout`	`number`	`0`
Anfrage-Timeout in Millisekunden. Wenn `0`, wird kein Timeout gesetzt.
`global`	`boolean`	`true`
Ob globale AJAX-Ereignisse ausgelöst werden sollen.
`beforeSend`	`function`	-
Wird vor dem Senden der Anfrage aufgerufen. Wenn `false` zurückgegeben wird, wird die AJAX-Anfrage abgebrochen. `$.ajax({ beforeSend: function (xhr) { // xhr ist das XMLHttpRequest-Objekt } });`
`success`	`function`	-
Wird nach erfolgreicher Anfrage aufgerufen. `$.ajax({ success: function (data, textStatus, xhr) { // data sind die von der AJAX-Anfrage zurückgegebenen Daten // textStatus ist ein String mit einem Erfolgscode // xhr ist das XMLHttpRequest-Objekt } });`
`error`	`function`	-
Wird aufgerufen, wenn die Anfrage fehlschlägt. `$.ajax({ error: function (xhr, textStatus) { // xhr ist das XMLHttpRequest-Objekt // textStatus ist ein String mit einem Fehlercode } });`
`complete`	`function`	-
Wird unabhängig vom Erfolg oder Misserfolg der Anfrage nach deren Abschluss aufgerufen. `$.ajax({ complete: function (xhr, textStatus) { // xhr ist das XMLHttpRequest-Objekt // textStatus ist ein String mit einem Erfolgs- oder Fehlercode } });`

Vorherige Seite

TopAppBar

Nächste Seite

dialog