jQuery-Spickzettel
Eine durchsuchbare, druckbare jQuery-Referenz — Selektoren, DOM-Manipulation, Ereignisse, Effekte, Traversierung, AJAX und Formular-Helfer. Kostenlos.
Selektoren
14$('#id')
Ein Element per id auswählen
$('.class')
Alle Elemente mit einer Klasse auswählen
$('div')
Alle Elemente eines Tag-Namens auswählen
$('*')
Jedes Element auf der Seite auswählen
$('[name="email"]')
Per Attributwert auswählen
$('a[href^="https"]')
Attribut-Beginnt-mit-Selektor
$('ul li:first')
Erstes gematchtes Element
$('ul li:last')
Letztes gematchtes Element
$('tr:eq(2)')
Element an einem nullbasierten Index
$('li:not(.done)')
Elemente ausschließen, die einem Selektor entsprechen
$(':checked')
Alle aktivierten Checkboxen/Radios
$('div:visible')
Nur aktuell sichtbare Elemente
$('ul li')
Nachfahren-Kombinator
$('ul > li')
Direkter Kind-Kombinator
Document Ready & DOM
10$(function () { /* ... */ });
Code ausführen, sobald das DOM bereit ist
$(document).ready(fn)
Expliziter document-ready-Handler
$(window).on('load', fn)
Ausführen, nachdem alle Assets geladen sind
$(this)
Das aktuelle Kontext-Element umschließen
$(el)
Einen rohen DOM-Knoten in jQuery umschließen
$('<div class="box"></div>')
Ein neues Element aus HTML erstellen
$('#box')[0]
Den zugrunde liegenden DOM-Knoten holen
$('#box').get(0)
Den DOM-Knoten via .get() holen
$('.item').length
Die gematchten Elemente zählen
$('#box').is(':visible')
Einen Selektor gegen die Menge testen
DOM-Manipulation
12$('#box').html('<b>Hi</b>')
Das innere HTML setzen
$('#box').text('Hello')
Den Textinhalt setzen (escaped)
$('#name').val('Ada')
Einen Formularfeldwert setzen
$('#list').append('<li>x</li>')
Inhalt am Ende einfügen
$('#list').prepend('<li>x</li>')
Inhalt am Anfang einfügen
$('#box').before('<hr>')
Inhalt vor dem Element einfügen
$('#box').after('<hr>')
Inhalt nach dem Element einfügen
$('#box').remove()
Das Element aus dem DOM entfernen
$('#box').empty()
Alle Kindknoten entfernen
$('#box').clone()
Eine Kopie des Elements erstellen
$('#box').wrap('<div>')
Das Element in neues HTML einhüllen
$('#box').replaceWith('<p>')
Das Element vollständig ersetzen
Attribute & CSS
13$('#img').attr('src')
Einen Attributwert holen
$('#img').attr('alt', 'Logo')
Einen Attributwert setzen
$('#cb').prop('checked')
Eine DOM-Eigenschaft holen (checked/disabled)
$('#cb').prop('checked', true)
Eine DOM-Eigenschaft setzen
$('#img').removeAttr('title')
Ein Attribut entfernen
$('.box').addClass('active')
Eine CSS-Klasse hinzufügen
$('.box').removeClass('active')
Eine CSS-Klasse entfernen
$('.box').toggleClass('open')
Eine CSS-Klasse ein-/ausschalten
$('.box').hasClass('active')
Prüfen, ob eine Klasse vorhanden ist
$('#box').css('color', 'red')
Eine einzelne CSS-Eigenschaft setzen
$('#box').css({top: 0, left: 0})
Mehrere CSS-Eigenschaften setzen
$('#box').width()
Die berechnete Breite in Pixeln holen
$('#box').height()
Die berechnete Höhe in Pixeln holen
Ereignisse
12$('#btn').on('click', fn)
Einen Event-Handler anhängen
$('#btn').off('click')
Event-Handler entfernen
$('#btn').click(fn)
Kurzform-Klick-Handler
$('#form').submit(fn)
Formularabsenden behandeln
$('#sel').change(fn)
Wertänderungen behandeln
$('#in').keyup(fn)
Key-up in einem Feld behandeln
$('#list').on('click', '.item', fn)
Delegiertes Ereignis für dynamische Kinder
$('#btn').trigger('click')
Ein Ereignis programmatisch auslösen
$('#btn').one('click', fn)
Einen Handler höchstens einmal ausführen
e.preventDefault()
Die Standard-Browseraktion stoppen
e.stopPropagation()
Das Bubbling des Ereignisses stoppen
e.target
Das Element, das das Ereignis ausgelöst hat
Effekte & Animation
12$('#box').show()
Ein verstecktes Element anzeigen
$('#box').hide()
Ein Element verbergen
$('#box').toggle()
Sichtbarkeit umschalten
$('#box').fadeIn(300)
Ein Element einblenden
$('#box').fadeOut(300)
Ein Element ausblenden
$('#box').fadeTo(300, 0.5)
Auf eine bestimmte Deckkraft überblenden
$('#box').slideUp()
Ein Element nach oben einklappen
$('#box').slideDown()
Ein Element nach unten ausklappen
$('#box').slideToggle()
Eine Slide-Animation umschalten
$('#box').animate({left: 100})
CSS-Eigenschaften animieren
$('#box').stop()
Die aktuelle Animation stoppen
$('#box').delay(500).fadeIn()
Den nächsten eingereihten Effekt verzögern
Durchlaufen
12$('#box').find('.item')
Nachfahren finden, die einem Selektor entsprechen
$('#box').parent()
Das direkte Elternelement holen
$('#box').parents('.row')
Alle Vorfahren holen, die einem Selektor entsprechen
$('#box').closest('.row')
Nächster passender Vorfahr (oder selbst)
$('#box').children()
Die direkten Kinder holen
$('#box').siblings()
Geschwisterelemente holen
$('#box').next()
Das nächste Geschwister holen
$('#box').prev()
Das vorherige Geschwister holen
$('.item').each(fn)
Über jedes gematchte Element iterieren
$('.item').filter('.on')
Die Menge per Selektor reduzieren
$('.item').first()
Die Menge auf das erste Element reduzieren
$('.item').eq(1)
Die Menge auf einen Index reduzieren
AJAX
11$.ajax({url: '/api', method: 'GET'})
AJAX-Anfrage mit voller Kontrolle
$.get('/api', fn)
Kurzform-HTTP-GET-Anfrage
$.post('/api', data, fn)
Kurzform-HTTP-POST-Anfrage
$.getJSON('/api.json', fn)
GET-Anfrage, die JSON erwartet
$('#box').load('/part.html')
HTML in ein Element laden
$.ajax({dataType: 'json'})
Den erwarteten Antworttyp setzen
$.ajax({data: {q: 'x'}})
Anfrageparameter senden
.done(function (res) {})
Einen Callback bei Erfolg ausführen
.fail(function (err) {})
Einen Callback bei Fehlschlag ausführen
.always(function () {})
Einen Callback nach Abschluss ausführen
$.ajaxSetup({headers: {}})
Standards für alle Anfragen setzen
Formulare
10$('#form').serialize()
Formulardaten als Query-String kodieren
$('#form').serializeArray()
Formulardaten als Array kodieren
$('#name').val()
Einen Feldwert lesen
$('#name').val('Ada')
Einen Feldwert schreiben
$(':input')
Alle Formular-Eingabeelemente auswählen
$('#cb').is(':checked')
Prüfen, ob eine Checkbox aktiviert ist
$('#sel option:selected')
Die ausgewählte Option holen
$('#in').focus()
Den Fokus auf ein Feld setzen
$('#form').on('submit', fn)
Das Formular-Submit-Ereignis behandeln
$('#in').prop('disabled', true)
Ein Formularelement deaktivieren
Hilfsfunktionen
11$.each(arr, fn)
Über ein Array oder Objekt iterieren
$.map(arr, fn)
Ein neues Array aus jedem Element bauen
$.grep(arr, fn)
Ein Array per Prädikat filtern
$.extend({}, a, b)
Objekte in ein Ziel zusammenführen
$.trim(' hi ')
Führenden/abschließenden Whitespace entfernen
$.inArray(2, arr)
Den Index eines Elements in einem Array finden
$.isArray(x)
Prüfen, ob ein Wert ein Array ist
$.isFunction(x)
Prüfen, ob ein Wert eine Funktion ist
$.parseJSON(str)
Einen JSON-String in ein Objekt parsen
$.now()
Aktueller Zeitstempel in Millisekunden
$.type(x)
Den internen Typ eines Werts holen
Kein Eintrag passt zu „:q“.
Brauchen Sie Hilfe?
Ein Problem mit diesem Tool gefunden? Sagen Sie es unserem Team.