jQuery-spiekbriefje
Een doorzoekbaar, afdrukbaar jQuery-naslagwerk — selectors, DOM-manipulatie, events, effecten, traversing, AJAX en formulierhelpers. Gratis.
Selectors
14$('#id')
Selecteer een element op zijn id
$('.class')
Selecteer alle elementen met een class
$('div')
Selecteer alle elementen met een tagnaam
$('*')
Selecteer elk element op de pagina
$('[name="email"]')
Selecteer op een attribuutwaarde
$('a[href^="https"]')
Attribuut begint-met-selector
$('ul li:first')
Eerste gematchte element
$('ul li:last')
Laatste gematchte element
$('tr:eq(2)')
Element op een nul-gebaseerde index
$('li:not(.done)')
Sluit elementen uit die een selector matchen
$(':checked')
Alle aangevinkte checkboxes/radio's
$('div:visible')
Alleen momenteel zichtbare elementen
$('ul li')
Descendant-combinator
$('ul > li')
Directe child-combinator
Document ready & DOM
10$(function () { /* ... */ });
Voer code uit zodra de DOM klaar is
$(document).ready(fn)
Expliciete document-ready-handler
$(window).on('load', fn)
Voer uit nadat alle assets geladen zijn
$(this)
Wikkel het huidige context-element
$(el)
Wikkel een ruwe DOM-node in jQuery
$('<div class="box"></div>')
Maak een nieuw element van HTML
$('#box')[0]
Haal de onderliggende DOM-node op
$('#box').get(0)
Haal de DOM-node op via .get()
$('.item').length
Tel de gematchte elementen
$('#box').is(':visible')
Test een selector tegen de set
DOM-manipulatie
12$('#box').html('<b>Hi</b>')
Stel de inner HTML in
$('#box').text('Hello')
Stel de tekstinhoud in (escaped)
$('#name').val('Ada')
Stel een formulierveldwaarde in
$('#list').append('<li>x</li>')
Voeg inhoud aan het einde in
$('#list').prepend('<li>x</li>')
Voeg inhoud aan het begin in
$('#box').before('<hr>')
Voeg inhoud voor het element in
$('#box').after('<hr>')
Voeg inhoud na het element in
$('#box').remove()
Verwijder het element uit de DOM
$('#box').empty()
Verwijder alle child-nodes
$('#box').clone()
Maak een kopie van het element
$('#box').wrap('<div>')
Wikkel het element in nieuwe HTML
$('#box').replaceWith('<p>')
Vervang het element volledig
Attributen & CSS
13$('#img').attr('src')
Haal een attribuutwaarde op
$('#img').attr('alt', 'Logo')
Stel een attribuutwaarde in
$('#cb').prop('checked')
Haal een DOM-eigenschap op (checked/disabled)
$('#cb').prop('checked', true)
Stel een DOM-eigenschap in
$('#img').removeAttr('title')
Verwijder een attribuut
$('.box').addClass('active')
Voeg een CSS-class toe
$('.box').removeClass('active')
Verwijder een CSS-class
$('.box').toggleClass('open')
Schakel een CSS-class aan/uit
$('.box').hasClass('active')
Test of een class aanwezig is
$('#box').css('color', 'red')
Stel een enkele CSS-eigenschap in
$('#box').css({top: 0, left: 0})
Stel meerdere CSS-eigenschappen in
$('#box').width()
Haal de berekende breedte in pixels op
$('#box').height()
Haal de berekende hoogte in pixels op
Events
12$('#btn').on('click', fn)
Koppel een event-handler
$('#btn').off('click')
Ontkoppel event-handlers
$('#btn').click(fn)
Verkorte click-handler
$('#form').submit(fn)
Verwerk formulierverzending
$('#sel').change(fn)
Verwerk waardewijzigingen
$('#in').keyup(fn)
Verwerk key-up in een veld
$('#list').on('click', '.item', fn)
Gedelegeerd event voor dynamische children
$('#btn').trigger('click')
Vuur een event programmatisch af
$('#btn').one('click', fn)
Voer een handler hooguit één keer uit
e.preventDefault()
Stop de standaard browseractie
e.stopPropagation()
Voorkom dat het event bubbelt
e.target
Het element dat het event triggerde
Effecten & animatie
12$('#box').show()
Toon een verborgen element
$('#box').hide()
Verberg een element
$('#box').toggle()
Schakel zichtbaarheid
$('#box').fadeIn(300)
Laat een element infaden
$('#box').fadeOut(300)
Laat een element uitfaden
$('#box').fadeTo(300, 0.5)
Fade naar een gegeven opaciteit
$('#box').slideUp()
Schuif een element omhoog (inklappen)
$('#box').slideDown()
Schuif een element omlaag (uitklappen)
$('#box').slideToggle()
Schakel een schuifanimatie
$('#box').animate({left: 100})
Animeer CSS-eigenschappen
$('#box').stop()
Stop de huidige animatie
$('#box').delay(500).fadeIn()
Vertraag het volgende effect in de wachtrij
Traverseren
12$('#box').find('.item')
Vind descendants die een selector matchen
$('#box').parent()
Haal de directe parent op
$('#box').parents('.row')
Haal alle ancestors op die een selector matchen
$('#box').closest('.row')
Dichtstbijzijnde matchende ancestor (of zichzelf)
$('#box').children()
Haal de directe children op
$('#box').siblings()
Haal sibling-elementen op
$('#box').next()
Haal de volgende sibling op
$('#box').prev()
Haal de vorige sibling op
$('.item').each(fn)
Itereer over elk gematcht element
$('.item').filter('.on')
Verklein de set met een selector
$('.item').first()
Verklein de set tot het eerste element
$('.item').eq(1)
Verklein de set tot één index
AJAX
11$.ajax({url: '/api', method: 'GET'})
AJAX-request met volledige controle
$.get('/api', fn)
Verkorte HTTP GET-request
$.post('/api', data, fn)
Verkorte HTTP POST-request
$.getJSON('/api.json', fn)
GET-request die JSON verwacht
$('#box').load('/part.html')
Laad HTML in een element
$.ajax({dataType: 'json'})
Stel het verwachte response-type in
$.ajax({data: {q: 'x'}})
Stuur request-parameters
.done(function (res) {})
Voer een callback uit bij succes
.fail(function (err) {})
Voer een callback uit bij mislukking
.always(function () {})
Voer een callback uit na voltooiing
$.ajaxSetup({headers: {}})
Stel defaults in voor alle requests
Formulieren
10$('#form').serialize()
Codeer formulierdata als een querystring
$('#form').serializeArray()
Codeer formulierdata als een array
$('#name').val()
Lees een veldwaarde
$('#name').val('Ada')
Schrijf een veldwaarde
$(':input')
Selecteer alle formulier-inputelementen
$('#cb').is(':checked')
Test of een checkbox aangevinkt is
$('#sel option:selected')
Haal de geselecteerde optie op
$('#in').focus()
Verplaats focus naar een veld
$('#form').on('submit', fn)
Verwerk het form-submit-event
$('#in').prop('disabled', true)
Schakel een formulierbesturing uit
Hulpmiddelen
11$.each(arr, fn)
Itereer over een array of object
$.map(arr, fn)
Bouw een nieuwe array uit elk item
$.grep(arr, fn)
Filter een array op een predicaat
$.extend({}, a, b)
Voeg objecten samen in een doel
$.trim(' hi ')
Trim witruimte aan begin/einde
$.inArray(2, arr)
Vind de index van een item in een array
$.isArray(x)
Test of een waarde een array is
$.isFunction(x)
Test of een waarde een functie is
$.parseJSON(str)
Parse een JSON-string naar een object
$.now()
Huidige tijdstempel in milliseconden
$.type(x)
Haal het interne type van een waarde op
Geen vermelding komt overeen met “:q”.
Hulp nodig?
Een probleem met deze tool gevonden? Laat het ons weten.