JavaScript-Bibliothek

Diese Methode hat mehrere Verwendungsmöglichkeiten:

Ein CSS-Selektor kann als Parameter übergeben werden, um ein JQ-Objekt zurückzugeben, das die passenden Elemente enthält. Diese Methode ist über querySelectorAll implementiert.

$('.box')

DOM-Elemente, beliebige Arrays, NodeList oder JQ-Objekte können übergeben werden, um ein JQ-Objekt zurückzugeben, das die angegebenen Elemente enthält.

$(document)

Ein HTML-String kann übergeben werden, um ein JQ-Objekt zurückzugeben, das das aus dem HTML erstellte DOM enthält.

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

Eine Funktion kann übergeben werden, die aufgerufen wird, sobald das DOM vollständig geladen ist.

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

Wenn nur ein Objekt übergeben wird, werden die Eigenschaften dieses Objekts in das JQ-Objekt zusammengeführt, was dem Hinzufügen neuer Funktionen unter dem JQ-Namensraum entspricht.

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

// Dann kann die benutzerdefinierte Methode wie folgt 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 wird zurückgegeben.

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

// In diesem Fall sind das erste Objekt und der Rückgabewert beide { key1: val1, key2: val2, key3: val3 }

Methoden in der JQ-Prototypenkette erweitern.

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

// Dann kann die erweiterte Methode wie folgt verwendet werden:
$(document).customFunc()

Serialisiert ein Objekt oder Array und gibt einen String zurück, der für URL-Parameter verwendet werden kann.

$.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 mit dem Rückgabeformat von .serializeArray() übereinstimmen:

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

Durchläuft ein Array oder Objekt. Der Rückgabewert ist das erste Argument, d. h. das durchlaufene Array oder Objekt.

Der erste Parameter der Funktion ist die Indexposition des Arrays oder der Schlüssel des Objekts; der zweite Parameter ist der Wert an der entsprechenden Position im Array oder Objekt.

this in der Callback-Funktion zeigt auf den Wert an der entsprechenden Position im Array oder Objekt. Wenn die Callback-Funktion false zurückgibt, wird der Durchlauf gestoppt.

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

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

// Ein Objekt durchlaufen
$.each({'name': 'mdui', 'lang': 'zh'}, function (key, value) {
  console.log(key + ':' + value);
})

// Ergebnis:
// name:mdui
// lang:zh

Hängt die Elemente des zweiten Arrays an das erste Array an und gibt das zusammengeführte Array zurück.

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

Filtert doppelte Elemente aus dem Array heraus.

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

Durchläuft ein Array oder Objekt und gibt ein neues Array zurück, das aus den Rückgabewerten der Funktion besteht.

Der erste Parameter der Funktion ist der Wert an der entsprechenden Position im Array oder Objekt, der zweite Parameter ist die Indexposition des Arrays oder der Schlüssel des Objekts.

Die Funktion kann jeden Wert zurückgeben. Wenn die Funktion ein Array zurückgibt, wird es flachgeklopft (flattened); wenn sie null oder undefined zurückgibt, wird es ignoriert. this innerhalb der Funktion zeigt auf das window-Objekt.

// Array durchlaufen
var 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 flachgeklopft
var result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

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

Prüft, ob ein Elternknoten einen Kindknoten enthält, und gibt einen booleschen Wert zurück.

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

Gibt true zurück, wenn mindestens ein Element in der Sammlung mit dem Parameter übereinstimmt, andernfalls false.

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

Wenn der Parameter eine Callback-Funktion ist, ist der erste Parameter der Funktion die Indexposition, der zweite Parameter das aktuelle Element, und this zeigt auf das aktuelle Element. Wenn die Funktion true zurückgibt, bedeutet dies eine Übereinstimmung; wenn sie false zurückgibt, bedeutet dies keine Übereinstimmung.

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

// Beurteilung durch den Rückgabewert der Callback-Funktion
$(document).is(function (index, element) {
  return element === document;
});
// true

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

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

Durchläuft die aktuelle Sammlung und führt eine Funktion für jedes Element in der Sammlung aus. Wenn die Funktion false zurückgibt, wird der Durchlauf beendet.

Der erste Parameter der Funktion ist die Indexposition des Elements, der zweite Parameter ist das aktuelle Element. this in der Funktion zeigt auf das aktuelle Element.

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

Durchläuft die aktuelle Sammlung, führt eine Funktion für jedes Element in der Sammlung aus und gibt eine neue Sammlung zurück, die aus den Rückgabewerten der Funktion besteht. Wenn die Funktion null oder undefined zurückgibt, wird sie gefiltert.

Der erste Parameter der Funktion ist die Indexposition des Elements, der zweite Parameter ist das aktuelle Element. this der Funktion zeigt auf das aktuelle Element.

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

// result ist ein JQ-Objekt, das aus den Werten der passenden Elemente besteht

Gibt eine Sammlung zurück, die nur das Element an der angegebenen Indexposition enthält.

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

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

$('div').first(); // Gibt ein JQ-Objekt zurück, das nur das erste div enthält

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

$('div').last(); // Gibt ein JQ-Objekt zurück, das nur das letzte div enthält

Gibt das Element an der angegebenen Indexposition zurück. Wenn kein Parameter übergeben wird, wird ein Array zurückgegeben, das aus allen Elementen in der Sammlung besteht.

$('div').get(); // Gibt ein Array zurück, das aus allen div-Elementen besteht
$('div').get(0); // Gibt das erste div-Element zurück
$('div').get(-1); // Gibt das letzte div-Element zurück

Wenn kein Parameter übergeben wird, wird die Indexposition des ersten Elements in der Sammlung im Verhältnis zu seinen Geschwisterelementen zurückgegeben.

Wenn ein CSS-Selektor als Parameter übergeben wird, wird die Indexposition des ersten Elements in der Sammlung im Verhältnis zu den Elementen zurückgegeben, die mit dem CSS-Selektor übereinstimmen.

Wenn ein DOM-Element übergeben wird, wird der Indexwert dieses DOM-Elements in der Sammlung zurückgegeben.

Wenn ein JQ-Objekt übergeben wird, wird die Indexposition des ersten Elements im Objekt in der aktuellen Sammlung zurückgegeben.

<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

Gibt eine Teilmenge der aktuellen Sammlung zurück.

Der erste Parameter ist die Startposition der Teilmenge, der zweite Parameter ist die Endposition der Teilmenge; wenn der zweite Parameter nicht übergeben wird, werden alle Elemente von der Startposition bis zum Ende einbezogen.

// Gibt alle Elemente nach dem dritten Element (einschließlich des dritten) in der Sammlung zurück
$('div').slice(3);

// Gibt die Elemente zwischen dem dritten und fünften (einschließlich des dritten, ohne das fünfte) in der Sammlung zurück
$('div').slice(3, 5);

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

Wenn der Parameter eine Funktion ist, ist der erste Parameter der Funktion die Indexposition, der zweite Parameter das aktuelle Element, und this in der Funktion zeigt auf das aktuelle Element. Wenn die Funktion true zurückgibt, wird das aktuelle Element beibehalten; wenn sie false zurückgibt, wird das aktuelle Element entfernt.

// Filtert alle div-Elemente heraus, die .box enthalten
$('div').filter('.box');

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

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

Wenn der Parameter eine Funktion ist, ist der erste Parameter der Funktion die Indexposition, der zweite Parameter das aktuelle Element, und this in der Funktion zeigt auf das aktuelle Element. Wenn die Funktion true zurückgibt, wird das aktuelle Element entfernt; wenn sie false zurückgibt, wird das aktuelle Element beibehalten.

// Filtert alle div-Elemente heraus, die die Klasse .box nicht enthalten
$('div').not('.box');

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

Prüft, ob das erste Element in der Sammlung die angegebene CSS-Klasse enthält.

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

Fügt jedem Element in der Sammlung CSS-Klassen hinzu; mehrere Klassennamen können durch Leerzeichen getrennt werden.

Es kann auch eine Callback-Funktion übergeben werden, die CSS-Klassennamen zurückgibt. Der erste Parameter der Funktion ist die Indexposition, der zweite Parameter ist der ursprüngliche CSS-Klassenname des Elements, und this in der Funktion zeigt auf das aktuelle Element.

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

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

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

Entfernt CSS-Klassen von den Elementen in der Sammlung; mehrere Klassennamen können durch Leerzeichen getrennt werden.

Es kann auch eine Callback-Funktion übergeben werden, die CSS-Klassennamen zurückgibt. Der erste Parameter der Funktion ist die Indexposition, der zweite Parameter ist der ursprüngliche CSS-Klassenname des Elements, und this in der Funktion zeigt auf das aktuelle Element.

Wenn kein Parameter übergeben wird, wird das class-Attribut direkt vom Element entfernt.

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

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

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

// Entfernt das class-Attribut direkt
$('div').removeClass()

Schaltet CSS-Klassen für Elemente um: Wenn vorhanden, werden sie gelöscht, wenn nicht vorhanden, werden sie hinzugefügt. Mehrere Klassennamen können durch Leerzeichen getrennt werden.

Es kann auch eine Callback-Funktion übergeben werden, die CSS-Klassennamen zurückgibt. Der erste Parameter der Funktion ist die Indexposition, der zweite Parameter ist der ursprüngliche CSS-Klassenname des Elements, und this in der Funktion zeigt auf das aktuelle Element.

// Schaltet .item auf allen div-Elementen um
$('div').toggleClass('item')

// Schaltet .item1 und .item2 auf allen div-Elementen um
$('div').toggleClass('item1 item2')

// Schaltet die von der Callback-Funktion zurückgegebenen CSS-Klassen auf allen div-Elementen um
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
})

Ruft den Attributwert des ersten Elements in der Sammlung ab.

// Ruft den Attributwert des ersten Elements ab
$('input').prop('checked');

Kann auch verwendet werden, um die Attributwerte aller Elemente in der Sammlung festzulegen.

Der festgelegte Attributwert kann der Rückgabewert einer Callback-Funktion sein. Der erste Parameter der Callback-Funktion ist die Indexposition des Elements, der zweite Parameter ist der ursprüngliche Attributwert des Elements, und this in der Funktion zeigt auf das aktuelle Element.

Wenn der Attributwert oder der Rückgabewert der Callback-Funktion void oder undefined ist, wird das ursprüngliche Attribut nicht geändert.

Mehrere Attribute können auch gleichzeitig durch Übergabe eines Objekts festgelegt werden.

// Legt die Attributwerte aller ausgewählten Elemente fest
$('input').prop('checked', true);

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

// Legt mehrere Attributwerte eines Elements gleichzeitig fest
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  }
});

Löscht den angegebenen Attributwert von allen Elementen in der Sammlung.

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

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

// Ruft den Property-Wert des ersten Elements ab
$('div').attr('username');

Kann auch verwendet werden, um die Property-Werte aller Elemente in der Sammlung festzulegen.

Der festgelegte Property-Wert kann der Rückgabewert einer Callback-Funktion sein. Der erste Parameter der Callback-Funktion ist die Indexposition des Elements, der zweite Parameter ist der ursprüngliche Property-Wert des Elements, und this in der Funktion zeigt auf das aktuelle Element.

Wenn der Property-Wert oder der Rückgabewert der Callback-Funktion void oder undefined ist, wird die ursprüngliche Property nicht geändert. Wenn der Property-Wert oder der Rückgabewert der Callback-Funktion null ist, wird die angegebene Property gelöscht.

Mehrere Properties können auch gleichzeitig durch Übergabe eines Objekts festgelegt werden.

// Legt die Property-Werte aller ausgewählten Elemente fest
$('div').attr('username', 'mdui');

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

// Legt mehrere Property-Werte eines Elements gleichzeitig fest
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  }
});

Löscht den angegebenen Property-Wert von allen Elementen in der Sammlung; mehrere Property-Namen können durch Leerzeichen getrennt werden.

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

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

Ruft den Wert des ersten Elements in der Sammlung ab.

Wenn das Element <select multiple="multiple"> ist, wird ein Array zurückgegeben, das jeden ausgewählten Punkt enthält.

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

Kann auch verwendet werden, um die Werte aller Elemente in der Sammlung festzulegen.

Der festgelegte Wert kann ein String, ein numerischer Wert, ein String-Array oder eine Callback-Funktion sein.

Wenn der Wert eine Callback-Funktion ist, ist der erste Parameter die Indexposition des Elements, der zweite Parameter der ursprüngliche Wert des Elements, und this in der Funktion zeigt auf das aktuelle Element.

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

Wenn der Wert oder der Rückgabewert der Funktion undefined ist, wird der Elementwert auf leer gesetzt.

// Legt den Wert des ausgewählten Elements fest
$('#input').val('input value');

// Legt den Elementwert über den Rückgabewert der Callback-Funktion fest
$('#input').val(function (index, oldValue) {
  return 'new value';
});

Ruft den Textinhalt aller Elemente in der Sammlung ab (einschließlich ihrer Nachkommen-Elemente)

// Ruft den Text aller .box-Elemente ab
$('.box').text();

Kann auch verwendet werden, um den Text aller Elemente in der Sammlung festzulegen.

Der festgelegte Wert kann ein String, ein numerischer Wert, ein boolescher Wert oder eine Callback-Funktion sein.

Wenn es sich um eine Callback-Funktion handelt, ist der erste Parameter die Indexposition des Elements, der zweite Parameter der ursprüngliche Textinhalt des Elements, und this in der Funktion zeigt auf das aktuelle Element.

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

// Legt den Textinhalt des ausgewählten Elements fest
$('.box').text('text content');

// Legt den Textinhalt des Elements über den Rückgabewert der Callback-Funktion fest
$('.box').text(function (index, oldTextContent) {
  return 'new text content';
});

Ruft den HTML-Inhalt des ersten Elements in der Sammlung ab.

// Ruft den HTML-Inhalt des ersten .box-Elements ab
$('.box').html();

Kann auch verwendet werden, um den HTML-Inhalt aller Elemente in der Sammlung festzulegen.

Der festgelegte Wert kann ein HTML-String, ein DOM-Element oder eine Callback-Funktion sein.

Wenn es sich um eine Callback-Funktion handelt, ist der erste Parameter die Indexposition des Elements, der zweite Parameter der ursprüngliche HTML-Inhalt des Elements, und this in der Funktion zeigt auf das aktuelle Element.

Wenn der festgelegte Wert oder der Rückgabewert der Funktion undefined ist, wird das HTML des entsprechenden Elements nicht geändert.

// Legt das HTML des ausgewählten Elements fest
$('.box').html('<div>new html content</div>');

// Legt den HTML-Inhalt des Elements über den Rückgabewert der Callback-Funktion fest
$('.box').html(function (index, oldHTMLContent) {
  return '<div>new html content</div>';
});

Liest oder speichert Daten auf dem angegebenen Element.

Wenn beim Speichern von Daten der Wert undefined ist, entspricht dies dem Lesen der entsprechenden Daten auf dem Element. Das heißt, $.data(element, 'key', undefined) und $.data(element, 'key') sind gleichwertig.

Hinweis: Diese Methode ruft keine data-*-Attribute auf dem Element ab.

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

// Speichert mehrere Daten gleichzeitig auf dem angegebenen Element
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
});

// Ruft auf dem angegebenen Element gespeicherte Daten ab
$.data(document.body, 'layout'); // Gibt dark zurück

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

Entfernt auf dem angegebenen Element gespeicherte Daten.

Mehrere Schlüsselnamen können durch Leerzeichen getrennt oder als Array von mehreren Schlüsselnamen dargestellt werden. Wenn kein Schlüsselname angegeben wird, werden alle Daten auf dem Element 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 beiden Methoden sind gleichwertig:
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

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

Liest oder speichert Daten auf den Elementen der aktuellen Sammlung.

Wenn beim Speichern von Daten der Wert undefined ist, erfolgt keine Speicherung.

Hinweis: Die von dieser Methode abgerufenen Daten enthalten die data-*-Attribute des Elements.

// 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 ab, die auf dem ersten Element der aktuellen Sammlung gespeichert sind
$('.box').data('layout'); // Gibt dark zurück

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

Entfernt auf den Elementen der aktuellen Sammlung gespeicherte Daten.

Mehrere Schlüsselnamen können durch Leerzeichen getrennt oder als Array von mehreren Schlüsselnamen dargestellt werden. Wenn kein Schlüsselname angegeben wird, werden alle Daten auf dem Element entfernt.

Hinweis: Diese Methode entfernt nur Daten, die über die Methode .data() festgelegt wurden, nicht jedoch Daten in data-*-Attributen.

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

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

// Entfernt alle auf dem Element gespeicherten Daten
$('.box').removeData();

Ruft den CSS-Eigenschaftswert des ersten Elements in der Sammlung ab.

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

Kann auch verwendet werden, um die CSS-Eigenschaftswerte aller Elemente in der Sammlung festzulegen.

Eigenschaftswerte können Strings, numerische Werte oder eine Callback-Funktion sein, die einen String oder einen numerischen Wert zurückgibt.

Wenn der Eigenschaftswert eine Callback-Funktion ist, ist der erste Parameter die Indexposition des Elements, der zweite Parameter der ursprüngliche CSS-Eigenschaftswert des Elements, und this in der Funktion zeigt auf das aktuelle Element.

Wenn der Eigenschaftswert oder die Callback-Funktion void, undefined oder null zurückgibt, wird der CSS-Eigenschaftswert des aktuellen Elements nicht geändert.

Wenn der Eigenschaftswert oder die Callback-Funktion einen numerischen Wert zurückgibt, wird px als Einheit hinzugefügt. Wenn die Eigenschaft px nicht als Einheit verwenden kann, wird der Wert direkt in einen String konvertiert.

Mehrere CSS-Eigenschaften können auch gleichzeitig durch Übergabe eines Schlüssel-Wert-Objekts festgelegt werden.

// Legt die Stilwerte aller Elemente in der Sammlung fest
$('.box').css('color', 'red')

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

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

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

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

Kann auch verwendet werden, um die Breite aller Elemente in der Sammlung festzulegen (ohne die Breite von padding, border und margin).

Werte können Strings mit Einheiten, numerische Werte oder Callback-Funktionen sein, die Strings mit Einheiten oder numerische Werte zurückgeben.

Der erste Parameter der Callback-Funktion ist die Indexposition des Elements, der zweite Parameter die ursprüngliche Breite des Elements, und this in der Funktion zeigt auf das aktuelle Element.

Wenn der Wert oder der Rückgabewert der Callback-Funktion ein numerischer Wert ist, wird automatisch px als Einheit hinzugefügt.

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

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

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

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

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

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

Kann auch verwendet werden, um die Höhe aller Elemente in der Sammlung festzulegen (ohne die Höhe von padding, border und margin).

Werte können Strings mit Einheiten, numerische Werte oder Callback-Funktionen sein, die Strings mit Einheiten oder numerische Werte zurückgeben.

Der erste Parameter der Callback-Funktion ist die Indexposition des Elements, der zweite Parameter die ursprüngliche Höhe des Elements, und this in der Funktion zeigt auf das aktuelle Element.

Wenn der Wert oder der Rückgabewert der Callback-Funktion ein numerischer Wert ist, wird automatisch px als Einheit hinzugefügt.

Wenn der Wert oder der Rückgabewert der Callback-Funktion null oder undefined ist, wird die Höhe des Elements nicht geändert.

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

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

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

Ruft die Breite (in Pixeln) des ersten Elements in der Sammlung ab, einschließlich padding, aber ohne die Breite von border und margin.

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

Kann auch verwendet werden, um die Breite aller Elemente in der Sammlung festzulegen (einschließlich padding, aber ohne die Breite von border und margin).

Werte können Strings mit Einheiten, numerische Werte oder Callback-Funktionen sein, die Strings mit Einheiten oder numerische Werte zurückgeben.

Der erste Parameter der Callback-Funktion ist die Indexposition des Elements, der zweite Parameter die ursprüngliche Breite des Elements, und this in der Funktion zeigt auf das aktuelle Element.

Wenn der Wert oder der Rückgabewert der Callback-Funktion ein numerischer Wert ist, wird automatisch px als Einheit hinzugefügt.

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

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

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

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

Ruft die Höhe (in Pixeln) des ersten Elements in der Sammlung ab, einschließlich padding, aber ohne die Höhe von border und margin.

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

Kann auch verwendet werden, um die Höhe aller Elemente in der Sammlung festzulegen (einschließlich padding, aber ohne die Höhe von border und margin).

Werte können Strings mit Einheiten, numerische Werte oder Callback-Funktionen sein, die Strings mit Einheiten oder numerische Werte zurückgeben.

Der erste Parameter der Callback-Funktion ist die Indexposition des Elements, der zweite Parameter die ursprüngliche Höhe des Elements, und this in der Funktion zeigt auf das aktuelle Element.

Wenn der Wert oder der Rückgabewert der Callback-Funktion ein numerischer Wert ist, wird automatisch px als Einheit hinzugefügt.

Wenn der Wert oder der Rückgabewert der Callback-Funktion null oder undefined ist, wird die Höhe des Elements nicht geändert.

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

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

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

Ruft die Breite (in Pixeln) des ersten Elements in der Sammlung ab, einschließlich der Breite von padding und border, aber ohne die Breite von margin. Der Parameter true kann übergeben werden, damit die Breite auch die Breite von margin umfasst.

// Breite einschließlich padding und border
$('.box').outerWidth();

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

Kann auch verwendet werden, um die Breite aller Elemente in der Sammlung festzulegen (einschließlich padding und border, aber ohne die Breite von margin; der Parameter true kann im zweiten Argument übergeben werden, damit die Breite auch die Breite von margin umfasst).

Der erste Parameter kann ein String mit einer Einheit, ein numerischer Wert oder eine Callback-Funktion sein, die einen String mit einer Einheit oder einen numerischen Wert zurückgibt.

Der erste Parameter der Callback-Funktion ist die Indexposition des Elements, der zweite Parameter die ursprüngliche Breite des Elements, und this in der Funktion zeigt auf das aktuelle Element.

Wenn der Wert oder der Rückgabewert der Callback-Funktion ein numerischer Wert ist, wird automatisch px als Einheit hinzugefügt.

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

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

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

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

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

Ruft die Höhe (in Pixeln) des ersten Elements in der Sammlung ab, einschließlich der Höhe von padding und border, aber ohne die Höhe von margin. Der Parameter true kann übergeben werden, damit die Höhe auch die Höhe von margin umfasst.

// Höhe einschließlich padding und border
$('.box').outerHeight();

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

Kann auch verwendet werden, um die Höhe aller Elemente in der Sammlung festzulegen (einschließlich padding und border, aber ohne die Höhe von margin; der Parameter true kann im zweiten Argument übergeben werden, damit die Höhe auch die Höhe von margin umfasst).

Der erste Parameter kann ein String mit einer Einheit, ein numerischer Wert oder eine Callback-Funktion sein, die einen String mit einer Einheit oder einen numerischen Wert zurückgibt.

Der erste Parameter der Callback-Funktion ist die Indexposition des Elements, der zweite Parameter die ursprüngliche Höhe des Elements, und this in der Funktion zeigt auf das aktuelle Element.

Wenn der Wert oder der Rückgabewert der Callback-Funktion ein numerischer Wert ist, wird automatisch px als Einheit hinzugefügt.

Wenn der Wert oder der Rückgabewert der Callback-Funktion null oder undefined ist, wird die Höhe des Elements nicht geändert.

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

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

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

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

Versteckt alle Elemente in der Sammlung.

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

Zeigt alle Elemente in der Sammlung an.

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

Schaltet den Anzeigezustand aller Elemente in der Sammlung um.

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

Ruft die Koordinaten des ersten Elements in der Sammlung im Verhältnis zum document ab.

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

Kann auch verwendet werden, um die Koordinaten aller Elemente in der Sammlung im Verhältnis zum document festzulegen.

Der Parameter ist ein Objekt, das die Eigenschaften top und left enthält, oder eine Callback-Funktion, die ein Objekt in diesem Format zurückgibt.

Wenn der Parameter eine Callback-Funktion ist, ist der erste Parameter die Indexposition des Elements, der zweite Parameter die ursprünglichen Koordinaten des Elements, und this in der Funktion zeigt auf das aktuelle Element.

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

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

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

Gibt das Elternelement des ersten Elements in der Sammlung zurück, das für die Positionierung verwendet wird, d. h. das erste Element unter den Elternelementen, dessen position den Wert relative oder absolute hat.

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

Ruft den Versatz des ersten Elements in der Sammlung im Verhältnis zum Elternelement ab.

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

Sucht unter allen Elementen in der aktuellen Sammlung nach der Sammlung der angegebenen Nachkommenknoten basierend auf dem CSS-Selektor.

// Findet die Knotensammlung unter den Nachkommen von #box, die .box enthalten
$('#box').find('.box')

Ruft die Sammlung der direkten Kindelemente unter allen Elementen in der aktuellen Sammlung ab.

Ein CSS-Selektor kann als Parameter übergeben werden, um Kindelemente zu filtern.

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

// Findet die Sammlung von Elementen unter allen direkten Kindelementen von #box, die .box enthalten
$('#box').children('.box')

Filtert aus allen Elementen in der aktuellen Sammlung diejenigen heraus, die angegebene Kindelemente enthalten.

Der Parameter kann ein CSS-Selektor oder ein DOM-Element sein.

// Fügt li-Elementen, die ul enthalten, eine Hintergrundfarbe hinzu
$('li').has('ul').css('background-color', 'red');

Ruft die Sammlung der direkten Elternelemente aller Elemente in der aktuellen Sammlung ab.

Ein CSS-Selektor kann als Parameter übergeben werden, um nur die Sammlung von Elternelementen zurückzugeben, die mit diesem Parameter übereinstimmen.

// Gibt das direkte Elternelement des .box-Elements zurück
$('.box').parent();

// Gibt Elemente unter den direkten Elternelementen des .box-Elements zurück, die die Klasse .parent enthalten
$('.box').parent('.parent');

Ruft die Sammlung der Vorfahren-Elemente aller Elemente in der aktuellen Sammlung ab.

Ein CSS-Selektor kann als Parameter übergeben werden, um nur die Sammlung von Vorfahren-Elementen zurückzugeben, die mit diesem Parameter übereinstimmen.

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

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

Ruft alle Elternelemente jedes Elements in der aktuellen Sammlung ab, bis ein Element erreicht wird, das mit dem ersten Parameter übereinstimmt (das übereinstimmende Element ist nicht enthalten).

Der erste Parameter kann ein CSS-Selektor, ein DOM-Element oder ein JQ-Objekt sein.

Ein zweiter Parameter kann übergeben werden, bei dem es sich um einen CSS-Selektor handeln muss, was bedeutet, dass nur Elemente zurückgegeben werden, die mit diesem Parameter übereinstimmen.

Wenn kein Parameter angegeben wird, werden alle Vorfahren-Elemente abgeglichen, d. h. die Wirkung ist dieselbe wie bei .parents().

// Ruft alle Vorfahren-Elemente des .item-Elements ab
$('.item').parentsUntil();

// Sucht nach allen Elternelementen des .item-Elements, bis ein .parent-Element erreicht wird
$('.item').parentsUntil('.parent');

// Ruft alle Vorfahren-Elemente des .item-Elements ab, die div-Elemente sind, bis ein .parent-Element erreicht wird
$('.item').parentsUntil('.parent', 'div');

Ruft die Sammlung ab, die aus dem jeweils vorherigen Geschwisterelement aller Elemente in der aktuellen Sammlung besteht.

Ein CSS-Selektor kann als Parameter übergeben werden, um nur die Sammlung von Geschwisterelementen abzurufen, die mit diesem Parameter übereinstimmen.

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

// Ruft die Sammlung der jeweils vorherigen div-Elemente des .box-Elements ab
$('.box').prev('div');

Ruft die Sammlung ab, die aus allen vorherigen Geschwisterelementen aller Elemente in der aktuellen Sammlung besteht.

Ein CSS-Selektor kann als Parameter übergeben werden, um nur die Sammlung von Geschwisterelementen abzurufen, die mit diesem Parameter übereinstimmen.

// Ruft alle vorherigen Geschwisterelemente des .box-Elements ab
$('.box').prevAll();

// Ruft alle vorherigen Geschwisterelemente des .box-Elements ab, die .selected enthalten
$('.box').prevAll('.selected');

Ruft alle vorherigen Geschwisterelemente jedes Elements in der aktuellen Sammlung ab, bis ein Element erreicht wird, das mit dem ersten Parameter übereinstimmt (das übereinstimmende Element ist nicht enthalten).

Der erste Parameter kann ein CSS-Selektor, ein DOM-Element oder ein JQ-Objekt sein.

Ein zweiter Parameter kann übergeben werden, bei dem es sich um einen CSS-Selektor handeln muss, was bedeutet, dass nur Elemente zurückgegeben werden, die mit diesem Parameter übereinstimmen.

// Ruft alle vorherigen Geschwisterelemente des .box-Elements ab
$('.box').prevUntil();

// Ruft alle vorherigen Geschwisterelemente vor dem .box-Element ab, bis ein .until-Element erreicht wird
$('.box').prevUntil('.until');

// Ruft die div-Elemente unter den vorherigen Geschwisterelementen des .box-Elements ab, bis ein .until-Element erreicht wird
$('.box').prevUntil('.until', 'div');

Ruft die Sammlung ab, die aus dem jeweils nächsten Geschwisterelement aller Elemente in der aktuellen Sammlung besteht.

Ein CSS-Selektor kann als Parameter übergeben werden, um nur die Sammlung von Geschwisterelementen abzurufen, die mit diesem Parameter übereinstimmen.

// Ruft die Sammlung des jeweils nächsten Elements des .box-Elements ab
$('.box').next();

// Ruft die Sammlung des jeweils nächsten div-Elements des .box-Elements ab
$('.box').next('div');

Ruft die Sammlung ab, die aus allen nachfolgenden Geschwisterelementen aller Elemente in der aktuellen Sammlung besteht.

Ein CSS-Selektor kann als Parameter übergeben werden, um nur die Sammlung von Geschwisterelementen abzurufen, die mit diesem Parameter übereinstimmen.

// Ruft alle nachfolgenden Geschwisterelemente des .box-Elements ab
$('.box').nextAll();

// Ruft alle nachfolgenden Geschwisterelemente des .box-Elements ab, die .selected enthalten
$('.box').nextAll('.selected');

Ruft alle nachfolgenden Geschwisterelemente jedes Elements in der aktuellen Sammlung ab, bis ein Element erreicht wird, das mit dem ersten Parameter übereinstimmt (das übereinstimmende Element ist nicht enthalten).

Der erste Parameter kann ein CSS-Selektor, ein DOM-Element oder ein JQ-Objekt sein.

Ein zweiter Parameter kann übergeben werden, bei dem es sich um einen CSS-Selektor handeln muss, was bedeutet, dass nur Elemente zurückgegeben werden, die mit diesem Parameter übereinstimmen.

// Ruft alle nachfolgenden Geschwisterelemente des .box-Elements ab
$('.box').nextUntil();

// Ruft alle nachfolgenden Geschwisterelemente nach dem .box-Element ab, bis ein .until-Element erreicht wird
$('.box').nextUntil('.until');

// Ruft die div-Elemente unter den nachfolgenden Geschwisterelementen des .box-Elements ab, bis ein .until-Element erreicht wird
$('.box').nextUntil('.until', 'div');

Gleicht vom aktuellen Element an schrittweise nach oben ab und gibt das erste gefundene Element zurück, das übereinstimmt.

Der Parameter kann ein CSS-Selektor, ein DOM-Element oder ein JQ-Objekt sein.

// Ruft das am nächsten gelegene .parent-Element unter den Elternelementen des .box-Elements ab
$('.box').closest('.parent');

Ruft die Geschwisterelemente jedes Elements in der aktuellen Sammlung ab.

Ein CSS-Selektor kann als Parameter übergeben werden, um nur Geschwisterelemente abzurufen, die mit diesem Parameter übereinstimmen.

// Ruft alle Geschwisterelemente des .box-Elements ab
$('.box').siblings();

// Ruft Elemente unter allen Geschwisterelementen des .box-Elements ab, die .selected enthalten
$('.box').siblings('.selected');

Fügt Elemente zur aktuellen Sammlung hinzu.

Der Parameter kann ein HTML-String, ein CSS-Selektor, ein JQ-Objekt, ein DOM-Element, ein Array von DOM-Elementen oder eine NodeList sein.

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

Entfernt alle Kindelemente aus dem aktuellen Element.

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

Entfernt die Elemente der aktuellen Sammlung aus dem DOM.

Ein CSS-Selektor kann als Parameter übergeben werden, um nur Elemente zu entfernen, die mit diesem Parameter übereinstimmen.

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

// Entfernt alle p-Elemente, die .box enthalten
$('p').remove('.box');

Fügt den angegebenen Inhalt am Anfang des Inneren der Elemente in der aktuellen Sammlung ein.

Der Parametertyp kann ein HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt sein. Die Übergabe mehrerer Parameter wird unterstützt.

Es kann auch eine Callback-Funktion übergeben werden, die einen HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt zurückgibt. Der erste Parameter der Funktion ist die Indexposition des aktuellen Elements, der zweite Parameter ist das ursprüngliche HTML des Elements, und this in der Funktion zeigt auf das aktuelle Element.

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

// Fügt ein Element ein
$('<p>I would like to say: </p>').prepend('<b>Hello</b>');
// Ergebnis:<p><b>Hello</b>I would like to say: </p>

// Fügt mehrere Elemente ein
$('<p>I would like to say: </p>').prepend('<b>Hello</b>', '<b>World</b>');
// Ergebnis:<p><b>Hello</b><b>World</b>I would like to say: </p>

// Fügt ein Element über eine Callback-Funktion ein
$('<p>Hello</p>').prepend(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Ergebnis:<p><b>Hello0</b>Hello</p>

Hängt die Elemente in der aktuellen Sammlung an den Anfang des Inneren des angegebenen Elements an.

Der Parameter 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.

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

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

Fügt den angegebenen Inhalt am Ende des Inneren der Elemente in der aktuellen Sammlung ein.

Der Parametertyp kann ein HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt sein. Die Übergabe mehrerer Parameter wird unterstützt.

Es kann auch eine Callback-Funktion übergeben werden, die einen HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt zurückgibt. Der erste Parameter der Funktion ist die Indexposition des aktuellen Elements, der zweite Parameter ist das ursprüngliche HTML des Elements, und this in der Funktion zeigt auf das aktuelle Element.

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

// Fügt ein Element ein
$('<p>I would like to say: </p>').append('<b>Hello</b>');
// Ergebnis:<p>I would like to say: <b>Hello</b></p>

// Fügt mehrere Elemente ein
$('<p>I would like to say: </p>').append('<b>Hello</b>', '<b>World</b>');
// Ergebnis:<p>I would like to say: <b>Hello</b><b>World</b></p>

// Fügt ein Element über eine Callback-Funktion ein
$('<p>Hello</p>').append(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Ergebnis:<p>Hello<b>Hello0</b></p>

Hängt die Elemente in der aktuellen Sammlung an das Ende des Inneren des angegebenen Elements an.

Der Parameter 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.

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

Fügt den angegebenen Inhalt nach den Elementen in der aktuellen Sammlung als deren Geschwisterknoten ein.

Der Parametertyp kann ein HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt sein. Die Übergabe mehrerer Parameter wird unterstützt.

Es kann auch eine Callback-Funktion übergeben werden, die einen HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt zurückgibt. Der erste Parameter der Funktion ist die Indexposition des aktuellen Elements, der zweite Parameter ist das ursprüngliche HTML des Elements, und this in der Funktion zeigt auf das aktuelle Element.

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

// Fügt ein Element ein
$('<p>I would like to say: </p>').after('<b>Hello</b>')
// Ergebnis:<p>I would like to say: </p><b>Hello</b>

// Fügt mehrere Elemente ein
$('<p>I would like to say: </p>').after('<b>Hello</b>', '<b>World</b>')
// Ergebnis:<p>I would like to say: </p><b>Hello</b><b>World</b>

// Fügt ein Element über eine Callback-Funktion ein
$('<p>Hello</p>').after(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Ergebnis:<p>Hello</p><b>Hello0</b>

Fügt die Elemente in der aktuellen Sammlung nach dem Zielelement als dessen Geschwisterelemente ein.

Wenn die Elemente in der aktuellen Sammlung bereits auf der Seite vorhandene Elemente sind, wird das Element verschoben und nicht kopiert. Wenn mehrere Ziele vorhanden sind, wird das Element in der aktuellen Sammlung geklont und hinter jedem Zielelement hinzugefügt.

Ein HTML-String, CSS-Selektor, DOM-Element, Array von DOM-Elementen oder JQ-Objekt kann als Parameter übergeben werden, um das Zielelement anzugeben.

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

Fügt den angegebenen Inhalt vor den Elementen in der aktuellen Sammlung als deren Geschwisterknoten ein.

Der Parametertyp kann ein HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt sein. Die Übergabe mehrerer Parameter wird unterstützt.

Es kann auch eine Callback-Funktion übergeben werden, die einen HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt zurückgibt. Der erste Parameter der Funktion ist die Indexposition des aktuellen Elements, der zweite Parameter ist das ursprüngliche HTML des Elements, und this in der Funktion zeigt auf das aktuelle Element.

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

// Fügt ein Element ein
$('<p>I would like to say: </p>').before('<b>Hello</b>')
// Ergebnis:<b>Hello</b><p>I would like to say: </p>

// Fügt mehrere Elemente ein
$('<p>I would like to say: </p>').before('<b>Hello</b>', '<b>World</b>')
// Ergebnis:<b>Hello</b><b>World</b><p>I would like to say: </p>

// Fügt ein Element über eine Callback-Funktion ein
$('<p>Hello</p>').before(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Ergebnis:<b>Hello0</b><p>Hello</p>

Fügt die Elemente in der aktuellen Sammlung vor dem Zielelement als dessen Geschwisterelemente ein.

Wenn die Elemente in der aktuellen Sammlung bereits auf der Seite vorhandene Elemente sind, wird das Element verschoben und nicht kopiert. Wenn mehrere Ziele vorhanden sind, wird das Element in der aktuellen Sammlung geklont und hinter jedem Zielelement hinzugefügt.

Ein HTML-String, CSS-Selektor, DOM-Element, Array von DOM-Elementen oder JQ-Objekt kann als Parameter übergeben werden, um das Zielelement anzugeben.

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

Ersetzt die Elemente in der aktuellen Sammlung durch das angegebene Element.

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

Es kann auch eine Callback-Funktion übergeben werden, die einen HTML-String, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt zurückgibt. Der erste Parameter der Funktion ist die Indexposition des aktuellen Elements, der zweite Parameter ist das ursprüngliche HTML des Elements, und this in der Funktion zeigt auf das aktuelle Element.

Diese Methode gibt die ursprüngliche Sammlung zurück, d. h. die Sammlung, die ersetzt wurde.

// Alle .box-Elemente durch <p>Hello</p> ersetzen
$('.box').replaceWith('<p>Hello</p>');

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

Ersetzt das angegebene Element durch die Elemente in der aktuellen Sammlung.

Der Parameter ist ein CSS-Selektor, ein DOM-Element, ein Array von DOM-Elementen oder ein JQ-Objekt.

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

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

Kopiert alle Elemente in der Sammlung durch Tiefenkloonen.

Kopiert alle Elemente in der Sammlung durch Tiefenkloonen über die native Methode cloneNode. Diese Methode kopiert keine Daten und Ereignishandler in das neue Element. Dies unterscheidet sich von jQuery, wobei jQuery Parameter verwendet, um zu entscheiden, ob Daten und Ereignishandler kopiert werden sollen.

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

Kombiniert die Werte von Formularelementen zu einem Array, das aus Schlüssel-Wert-Paaren von name und value besteht.

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": "" }
// ]

Serialisiert die Werte von Formularelementen.

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

Bindet eine Ereignishandlerfunktion an ein bestimmtes Ereignis für jedes Element in der Sammlung. Die spezifische Verwendung finden Sie im folgenden Beispiel:

// Klick-Ereignis binden
$('.box').on('click', function (e) {
  console.log('Das .box-Element wurde angeklickt');
});

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

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

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

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

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

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

// Mehrere Ereignisse und Ereignishandlerfunktionen gleichzeitig über Ereignisdelegierung binden
$(document).on({
  'click': function (e) {
    console.log('Löst das click-Ereignis aus');
  },
  'focus': function (e) {
    console.log('Löst das focus-Ereignis aus');
  }
}, '.box');

// Mehrere Ereignisse und Ereignishandlerfunktionen über Ereignisdelegierung binden und gleichzeitig Parameter übergeben
$(document).on({
  'click': function (e) {
    console.log('Löst das click-Ereignis aus');
    // e._data ist {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Löst das focus-Ereignis aus');
    // 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 unterstützen die Verwendung von Namensräumen
$('.box').on('click.myPlugin', function () {
  console.log('Das .box-Element wurde angeklickt');
});

Bindet eine Ereignishandlerfunktion an ein bestimmtes Ereignis für jedes übereinstimmende Element. Das Ereignis wird jedoch nur einmal ausgelöst.

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

Hebt die Bindung von Ereignissen für jedes Element in der Sammlung auf. Die spezifische Verwendung finden Sie im folgenden Beispiel:

// Alle gebundenen Ereignishandlerfunktionen lösen
$('.box').off();

// Löst die Bindung des angegebenen Ereignisses
$('.box').off('click');

// Löst die Bindung mehrerer Ereignisse gleichzeitig
$('.box').off('click focus');

// Löst die Bindung der angegebenen Ereignishandlerfunktion
$('.box').off('click', callback);

// Löst die Bindung von Ereignissen, die über Ereignisdelegierung gebunden wurden
$(document).off('click', '.box');

// Löst die Bindung der angegebenen Ereignishandlerfunktion, die über Ereignisdelegierung gebunden wurde
$(document).off('click', '.box', callback);

// Löst die Bindung mehrerer Ereignishandlerfunktionen gleichzeitig
$('.box').off({
  'click': callback1,
  'focus': callback2,
});

// Löst die Bindung mehrerer Ereignishandlerfunktionen, die über Ereignisdelegierung gebunden wurden, gleichzeitig
$(document).off({
  'click': callback1,
  'focus': callback2,
}, '.box');

// Ereignisnamen unterstützen die Verwendung von Namensräumen; die folgende Verwendung löst alle Ereignisse, die auf .myPlugin enden
$(document).off('.myPlugin');

Löst das angegebene Ereignis aus. Die spezifische Verwendung finden Sie im folgenden Beispiel:

// Löst das angegebene Ereignis aus
$('.box').trigger('click');

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

Legt globale Konfigurationsparameter für Ajax-Anfragen fest.

$.ajaxSetup({
  // Standardmäßig ist das Auslösen globaler AJAX-Ereignisse verboten
  global: false,

  // Standardmäßig wird die POST-Anfrage verwendet
  method: 'POST'
});

Die detaillierte Parameterliste finden Sie unter AJAX-Parameter unten.

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

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

Die detaillierte Parameterliste finden Sie unter AJAX-Parameter unten.

Globale AJAX-Ereignisse.

Führt eine Funktion aus, wenn eine AJAX-Anfrage beginnt.

$(document).ajaxStart(function (event, xhr, options) {
  // xhr: XMLHttpRequest-Objekt
  // options: Konfigurationsparameter der AJAX-Anfrage
});

Globale AJAX-Ereignisse.

Führt eine Funktion aus, wenn eine AJAX-Anfrage erfolgreich ist.

$(document).ajaxSuccess(function (event, xhr, options, data) {
  // xhr: XMLHttpRequest-Objekt
  // options: Konfigurationsparameter der AJAX-Anfrage
  // data: Von der AJAX-Anfrage zurückgegebene Daten
});

Globale AJAX-Ereignisse.

Führt eine Funktion aus, wenn bei der AJAX-Anfrage ein Fehler auftritt.

$(document).ajaxError(function (event, xhr, options) {
  // xhr: XMLHttpRequest-Objekt
  // options: Konfigurationsparameter der AJAX-Anfrage
});

Globale AJAX-Ereignisse.

Führt eine Funktion aus, wenn eine AJAX-Anfrage abgeschlossen ist.

$(document).ajaxComplete(function (event, xhr, options) {
  // xhr: XMLHttpRequest-Objekt
  // options: Konfigurationsparameter der AJAX-Anfrage
});

Anfragemethode.

Einschließlich: GET, POST, PUT, PATCH, HEAD, OPTIONS, DELETE

Zu den Headers hinzugefügte Daten. Dieser Wert kann in der Callback-Funktion beforeSend überschrieben werden.

Felder mit einem String oder null als Wert werden gesendet, Felder mit undefined als Wert werden entfernt.

Auf dem XMLHttpRequest-Objekt festgelegte Daten.

$.ajax({
  url: 'Eine domänenübergreifende URL',
  xhrFields: {
    withCredentials: true
  }
});

Ein Objekt, das aus HTTP-Statuscodes und Funktionen besteht.

$.ajax({
  statusCode: {
    404: function (xhr, textStatus) {
      alert('Wird aufgerufen, wenn der zurückgegebene Statuscode 404 ist');
    },
    200: function (data, textStatus, xhr) {
      alert('Wird aufgerufen, wenn der zurückgegebene Statuscode 200 ist');
    }
  }
});

Wenn der Statuscode zwischen 200 und 299 liegt oder der Statuscode 304 ist, bedeutet dies eine erfolgreiche Anfrage, und die Funktionsparameter sind die gleichen wie die des success-Callbacks; andernfalls bedeutet dies eine fehlgeschlagene Anfrage, und die Funktionsparameter sind die gleichen wie die des error-Callbacks.

Der vom Server zurückgegebene Datentyp.

Einschließlich: text, json

Wird aufgerufen, bevor die Anfrage gesendet wird. Wenn false zurückgegeben wird, wird die AJAX-Anfrage abgebrochen.

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

Wird aufgerufen, nachdem die Anfrage erfolgreich war.

$.ajax({
  success: function (data, textStatus, xhr) {
    // data: Von der AJAX-Anfrage zurückgegebene Daten
    // textStatus: String, der den Erfolgscode enthält
    // xhr: XMLHttpRequest-Objekt
  }
});

Wird aufgerufen, wenn die Anfrage fehlgeschlagen ist.

$.ajax({
  error: function (xhr, textStatus) {
    // xhr: XMLHttpRequest-Objekt
    // textStatus: String, der den Erfolgscode enthält
  }
});

Wird aufgerufen, nachdem die Anfrage abgeschlossen ist.

$.ajax({
  complete: function (xhr, textStatus) {
    // xhr: XMLHttpRequest-Objekt
    // textStatus: String, der den Erfolgscode enthält
  }
});

Erzwingt ein Repaint des aktuellen Elements.

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

Legt die Eigenschaft transition-duration des aktuellen Elements fest.

Kann ein Zeitwert mit Einheit sein oder keine Einheit enthalten. Wenn keine Einheit enthalten ist, wird automatisch ms als Einheit hinzugefügt.

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

Fügt einen Callback für das transitionend-Ereignis zum aktuellen Element hinzu.

Der Parameter der Callback-Funktion ist das transitionend-Ereignisobjekt, und this in der Funktion zeigt auf das aktuelle Element.

$('.box').transitionEnd(function () {
  console.log('Das transitionend-Ereignis des .box-Elements wurde ausgelöst');
})

Legt die Eigenschaft transform des aktuellen Elements fest.

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

Legt die Eigenschaft transform-origin des aktuellen Elements fest.

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

Führt die im aktuellen Element und seinen Kindelementen registrierten Initialisierungsfunktionen aus.

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

Erstellt und zeigt ein Overlay an und gibt das JQ-Objekt des Overlays zurück.

Ein Ganzzahlparameter kann übergeben werden, um den z-index des Overlays anzugeben; der Standardwert ist 2000.

$.showOverlay();

Blendet das Overlay aus.

Wenn $.showOverlay() mehrmals aufgerufen wurde, um das Overlay anzuzeigen, muss $.hideOverlay() ebenfalls so oft aufgerufen werden, um das Overlay auszublenden. Ein erzwungenes Ausblenden des Overlays kann durch Übergabe des Parameters true erreicht werden.

$.hideOverlay();

Sperrt die Seite und verhindert das Scrollen.

$.lockScreen();

Hebt die Seitensperre auf.

Wenn $.lockScreen() mehrmals aufgerufen wurde, um die Seite zu sperren, muss $.unlockScreen() ebenfalls so oft aufgerufen werden, um die Seitensperre aufzuheben. Ein erzwungenes Aufheben der Seitensperre kann durch Übergabe des Parameters true erreicht werden.

$.unlockScreen();

Funktionsdrosselung (Throttling).

Übergibt eine Funktion als Parameter; der erste Parameter der Funktion ist die auszuführende Funktion, der zweite Parameter ist die Verzögerungszeit in Millisekunden.

$.throttle(function () {
  console.log('Diese Funktion wird höchstens einmal alle 100 ms ausgeführt');
}, 100)

Generiert eine global eindeutige ID (GUID).

$.guid();

Ein Parameter kann übergeben werden. Wenn die dem Parameterwert entsprechende GUID nicht existiert, wird eine neue GUID generiert und zurückgegeben; wenn die entsprechende GUID bereits existiert, wird die vorhandene GUID direkt zurückgegeben.

// Die folgenden zwei Codezeilen geben den gleichen Wert zurück
$.guid('test');
$.guid('test');