jQuery-fusklapp

Gratis

En sökbar, utskrivbar jQuery-referens — selektorer, DOM-manipulering, händelser, effekter, traversering, AJAX och formulärhjälpare. Gratis.

Selektorer

$('#id')

Välj ett element med dess id

$('.class')

Välj alla element med en klass

$('div')

Välj alla element med ett taggnamn

$('*')

Välj alla element på sidan

$('[name="email"]')

Välj efter ett attributvärde

$('a[href^="https"]')

Selektor för attribut som börjar med

$('ul li:first')

Första matchade elementet

$('ul li:last')

Sista matchade elementet

$('tr:eq(2)')

Element vid ett nollbaserat index

$('li:not(.done)')

Uteslut element som matchar en selektor

$(':checked')

Alla ikryssade kryssrutor/radioknappar

$('div:visible')

Endast för närvarande synliga element

$('ul li')

Ättlingkombinator

$('ul > li')

Direkt barnkombinator

Document ready och DOM

$(function () { /* ... */ });

Kör kod när DOM:en är klar

$(document).ready(fn)

Explicit document-ready-hanterare

$(window).on('load', fn)

Kör efter att alla resurser har laddats

$(this)

Omslut det aktuella kontextelementet

$(el)

Omslut en rå DOM-nod i jQuery

$('<div class="box"></div>')

Skapa ett nytt element från HTML

$('#box')[0]

Hämta den underliggande DOM-noden

$('#box').get(0)

Hämta DOM-noden via .get()

$('.item').length

Räkna de matchade elementen

$('#box').is(':visible')

Testa en selektor mot uppsättningen

DOM-manipulation

$('#box').html('<b>Hi</b>')

Ange inre HTML

$('#box').text('Hello')

Ange textinnehållet (escapeat)

$('#name').val('Ada')

Ange ett formulärfältvärde

$('#list').append('<li>x</li>')

Infoga innehåll i slutet

$('#list').prepend('<li>x</li>')

Infoga innehåll i början

$('#box').before('<hr>')

Infoga innehåll före elementet

$('#box').after('<hr>')

Infoga innehåll efter elementet

$('#box').remove()

Ta bort elementet från DOM:en

$('#box').empty()

Ta bort alla barnnoder

$('#box').clone()

Skapa en kopia av elementet

$('#box').wrap('<div>')

Omslut elementet i ny HTML

$('#box').replaceWith('<p>')

Ersätt elementet helt

Attribut och CSS

$('#img').attr('src')

Hämta ett attributvärde

$('#img').attr('alt', 'Logo')

Ange ett attributvärde

$('#cb').prop('checked')

Hämta en DOM-egenskap (checked/disabled)

$('#cb').prop('checked', true)

Ange en DOM-egenskap

$('#img').removeAttr('title')

Ta bort ett attribut

$('.box').addClass('active')

Lägg till en CSS-klass

$('.box').removeClass('active')

Ta bort en CSS-klass

$('.box').toggleClass('open')

Växla en CSS-klass på/av

$('.box').hasClass('active')

Testa om en klass finns

$('#box').css('color', 'red')

Ange en enskild CSS-egenskap

$('#box').css({top: 0, left: 0})

Ange flera CSS-egenskaper

$('#box').width()

Hämta den beräknade bredden i pixlar

$('#box').height()

Hämta den beräknade höjden i pixlar

Händelser

$('#btn').on('click', fn)

Koppla en händelsehanterare

$('#btn').off('click')

Koppla bort händelsehanterare

$('#btn').click(fn)

Kortform för klickhanterare

$('#form').submit(fn)

Hantera formulärinsändning

$('#sel').change(fn)

Hantera värdeändringar

$('#in').keyup(fn)

Hantera key-up i ett fält

$('#list').on('click', '.item', fn)

Delegerad händelse för dynamiska barn

$('#btn').trigger('click')

Utlös en händelse programmatiskt

$('#btn').one('click', fn)

Kör en hanterare högst en gång

e.preventDefault()

Stoppa webbläsarens standardåtgärd

e.stopPropagation()

Stoppa händelsen från att bubbla

e.target

Elementet som utlöste händelsen

Effekter och animation

$('#box').show()

Visa ett dolt element

$('#box').hide()

Dölj ett element

$('#box').toggle()

Växla synlighet

$('#box').fadeIn(300)

Tona in ett element

$('#box').fadeOut(300)

Tona ut ett element

$('#box').fadeTo(300, 0.5)

Tona till en given opacitet

$('#box').slideUp()

Skjut upp ett element (kollapsa)

$('#box').slideDown()

Skjut ner ett element (expandera)

$('#box').slideToggle()

Växla en skjutanimation

$('#box').animate({left: 100})

Animera CSS-egenskaper

$('#box').stop()

Stoppa den aktuella animationen

$('#box').delay(500).fadeIn()

Fördröj nästa köade effekt

Traversering

$('#box').find('.item')

Hitta ättlingar som matchar en selektor

$('#box').parent()

Hämta den direkta föräldern

$('#box').parents('.row')

Hämta alla förfäder som matchar en selektor

$('#box').closest('.row')

Närmaste matchande förfader (eller sig själv)

$('#box').children()

Hämta de direkta barnen

$('#box').siblings()

Hämta syskonelement

$('#box').next()

Hämta nästa syskon

$('#box').prev()

Hämta föregående syskon

$('.item').each(fn)

Iterera över varje matchat element

$('.item').filter('.on')

Reducera uppsättningen med en selektor

$('.item').first()

Reducera uppsättningen till första elementet

$('.item').eq(1)

Reducera uppsättningen till ett index

AJAX

$.ajax({url: '/api', method: 'GET'})

AJAX-begäran med full kontroll

$.get('/api', fn)

Kortform för HTTP GET-begäran

$.post('/api', data, fn)

Kortform för HTTP POST-begäran

$.getJSON('/api.json', fn)

GET-begäran som förväntar JSON

$('#box').load('/part.html')

Ladda HTML in i ett element

$.ajax({dataType: 'json'})

Ange förväntad svarstyp

$.ajax({data: {q: 'x'}})

Skicka begäransparametrar

.done(function (res) {})

Kör en callback vid lyckat resultat

.fail(function (err) {})

Kör en callback vid misslyckande

.always(function () {})

Kör en callback efter slutförande

$.ajaxSetup({headers: {}})

Ange standardvärden för alla begäranden

Formulär

$('#form').serialize()

Koda formulärdata som en frågesträng

$('#form').serializeArray()

Koda formulärdata som en array

$('#name').val()

Läs ett fältvärde

$('#name').val('Ada')

Skriv ett fältvärde

$(':input')

Välj alla formulärinmatningselement

$('#cb').is(':checked')

Testa om en kryssruta är ikryssad

$('#sel option:selected')

Hämta det valda alternativet

$('#in').focus()

Flytta fokus till ett fält

$('#form').on('submit', fn)

Hantera formulärets submit-händelse

$('#in').prop('disabled', true)

Inaktivera en formulärkontroll

Verktyg

$.each(arr, fn)

Iterera över en array eller ett objekt

$.map(arr, fn)

Bygg en ny array från varje objekt

$.grep(arr, fn)

Filtrera en array med ett predikat

$.extend({}, a, b)

Slå samman objekt till ett mål

$.trim(' hi ')

Trimma ledande/efterföljande blanksteg

$.inArray(2, arr)

Hitta ett objekts index i en array

$.isArray(x)

Testa om ett värde är en array

$.isFunction(x)

Testa om ett värde är en funktion

$.parseJSON(str)

Tolka en JSON-sträng till ett objekt

$.now()

Aktuell tidsstämpel i millisekunder

$.type(x)

Hämta den interna typen av ett värde

Ingen post matchar “:q”.

Behöver du hjälp?

Hittade du ett problem med det här verktyget? Berätta för oss.

Rapportera ett problem

Lägg till det här gratisverktyget på din egen webbplats — kopiera och klistra in koden nedan.

<iframe src="https://tweakee.com/sv/studio/dev/jquery-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>