Lembar Contekan jQuery

Gratis

Referensi jQuery yang dapat dicari dan dicetak — selektor, manipulasi DOM, event, efek, traversing, AJAX, dan helper form. Gratis.

Selectors

$('#id')

Select an element by its id

$('.class')

Select all elements with a class

$('div')

Select all elements of a tag name

$('*')

Select every element in the page

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

Select by an attribute value

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

Attribute starts-with selector

$('ul li:first')

First matched element

$('ul li:last')

Last matched element

$('tr:eq(2)')

Element at a zero-based index

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

Exclude elements matching a selector

$(':checked')

All checked checkboxes/radios

$('div:visible')

Only currently visible elements

$('ul li')

Descendant combinator

$('ul > li')

Direct child combinator

Document ready & DOM

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

Run code once the DOM is ready

$(document).ready(fn)

Explicit document-ready handler

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

Run after all assets have loaded

$(this)

Wrap the current context element

$(el)

Wrap a raw DOM node in jQuery

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

Create a new element from HTML

$('#box')[0]

Get the underlying DOM node

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

Get the DOM node via .get()

$('.item').length

Count the matched elements

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

Test a selector against the set

DOM manipulation

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

Set the inner HTML

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

Set the text content (escaped)

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

Set a form field value

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

Insert content at the end

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

Insert content at the start

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

Insert content before the element

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

Insert content after the element

$('#box').remove()

Remove the element from the DOM

$('#box').empty()

Remove all child nodes

$('#box').clone()

Create a copy of the element

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

Wrap the element in new HTML

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

Replace the element entirely

Attributes & CSS

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

Get an attribute value

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

Set an attribute value

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

Get a DOM property (checked/disabled)

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

Set a DOM property

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

Remove an attribute

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

Add a CSS class

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

Remove a CSS class

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

Toggle a CSS class on/off

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

Test if a class is present

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

Set a single CSS property

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

Set multiple CSS properties

$('#box').width()

Get the computed width in pixels

$('#box').height()

Get the computed height in pixels

Events

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

Attach an event handler

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

Detach event handlers

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

Shorthand click handler

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

Handle form submission

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

Handle value changes

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

Handle key-up in a field

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

Delegated event for dynamic children

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

Programmatically fire an event

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

Run a handler at most once

e.preventDefault()

Stop the default browser action

e.stopPropagation()

Stop the event from bubbling

e.target

The element that triggered the event

Effects & animation

$('#box').show()

Display a hidden element

$('#box').hide()

Hide an element

$('#box').toggle()

Toggle visibility

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

Fade an element in

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

Fade an element out

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

Fade to a given opacity

$('#box').slideUp()

Slide an element up (collapse)

$('#box').slideDown()

Slide an element down (expand)

$('#box').slideToggle()

Toggle a slide animation

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

Animate CSS properties

$('#box').stop()

Stop the current animation

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

Delay the next queued effect

Traversing

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

Find descendants matching a selector

$('#box').parent()

Get the direct parent

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

Get all ancestors matching a selector

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

Nearest matching ancestor (or self)

$('#box').children()

Get the direct children

$('#box').siblings()

Get sibling elements

$('#box').next()

Get the next sibling

$('#box').prev()

Get the previous sibling

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

Iterate over each matched element

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

Reduce the set by a selector

$('.item').first()

Reduce the set to the first element

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

Reduce the set to one index

AJAX

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

Full-control AJAX request

$.get('/api', fn)

Shorthand HTTP GET request

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

Shorthand HTTP POST request

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

GET request expecting JSON

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

Load HTML into an element

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

Set the expected response type

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

Send request parameters

.done(function (res) {})

Run a callback on success

.fail(function (err) {})

Run a callback on failure

.always(function () {})

Run a callback after completion

$.ajaxSetup({headers: {}})

Set defaults for all requests

Forms

$('#form').serialize()

Encode form data as a query string

$('#form').serializeArray()

Encode form data as an array

$('#name').val()

Read a field value

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

Write a field value

$(':input')

Select all form input elements

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

Test if a checkbox is checked

$('#sel option:selected')

Get the selected option

$('#in').focus()

Move focus to a field

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

Handle the form submit event

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

Disable a form control

Utilities

$.each(arr, fn)

Iterate over an array or object

$.map(arr, fn)

Build a new array from each item

$.grep(arr, fn)

Filter an array by a predicate

$.extend({}, a, b)

Merge objects into a target

$.trim(' hi ')

Trim leading/trailing whitespace

$.inArray(2, arr)

Find an item index in an array

$.isArray(x)

Test whether a value is an array

$.isFunction(x)

Test whether a value is a function

$.parseJSON(str)

Parse a JSON string into an object

$.now()

Current timestamp in milliseconds

$.type(x)

Get the internal type of a value

Tidak ada entri yang cocok dengan “:q”.

Tentang Lembar Contekan jQuery

Lembar contekan jQuery ini adalah referensi ringkas untuk library yang masih menggerakkan sebagian besar situs yang ada: selector, document ready dan dasar-dasar DOM, manipulasi DOM, atribut dan CSS, event, efek dan animasi, traversing, AJAX, form, dan utilitas.

Jika Anda memelihara front-end lama, plugin, atau tema CMS yang lebih tua, kemahiran jQuery masih merupakan keterampilan praktis. Setiap baris memasangkan pemanggilan metode dengan deskripsi satu baris, sehingga Anda bisa mengingat kembali signature yang tepat untuk event delegation, traversal berantai, atau permintaan AJAX tanpa harus menggali dokumentasi lama.

Lembar contekan ini gratis dan sepenuhnya berbasis client-side. Saring metode secara langsung dengan kotak pencarian, lompat antar bagian dari daftar isi yang sticky, salin cuplikan kode apa pun dengan satu klik, dan cetak halaman ini saat Anda tenggelam dalam refactoring proyek lama.

Cara menggunakan Lembar Contekan jQuery

Telusuri bagian-bagiannya, dari Selector dan Document ready & DOM hingga Traversing sampai AJAX dan Utilitas.
Cari sebuah metode seperti on, closest, atau ajax untuk menyaring lembar contekan secara langsung.
Lompat ke bagian seperti Efek & animasi melalui sidebar sticky.
Klik sebuah cuplikan kode atau ikon salinnya untuk menyalin pemanggilan jQuery ke kode Anda.
Cetak lembar contekan ini untuk referensi offline saat mengerjakan proyek lama.

Pertanyaan yang sering diajukan

Sepuluh bagian: selector, document ready dan dasar-dasar DOM, manipulasi DOM, atribut dan CSS, event, efek dan animasi, traversing, AJAX, form, dan bantuan utilitas.

Untuk proyek baru sebagian besar tim menggunakan JavaScript murni, tetapi sejumlah besar kode produksi, plugin, dan tema CMS masih menjalankan jQuery — lembar contekan ini ditujukan untuk memelihara dan memigrasikan kode tersebut dengan percaya diri.

Ya. Bagian event menyertakan bentuk delegated dari .on() beserta binding, unbinding, dan triggering — pola yang paling Anda butuhkan saat bekerja dengan elemen yang disisipkan secara dinamis.

Bisa. Klik cuplikan kode apa pun, atau ikon salin pada barisnya, lalu pemanggilan tersebut tersalin ke clipboard Anda siap untuk ditempelkan.

Ya, sepenuhnya gratis — bisa dicari, bisa dicetak, dan dirender di browser Anda tanpa perlu pendaftaran.

Pencarian populer

jquery cheat sheet jquery selectors jquery ajax syntax jquery event methods jquery dom manipulation jquery effects and animation jquery traversing methods jquery reference

Butuh bantuan?

Menemukan masalah dengan alat ini? Beri tahu tim kami.

Laporkan masalah

Tambahkan alat gratis ini ke situs web Anda sendiri — salin dan tempel kode di bawah ini.

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

Lembar Contekan jQuery

Selectors

Document ready & DOM

DOM manipulation

Attributes & CSS

Events

Effects & animation

Traversing

AJAX

Forms

Utilities

Tentang Lembar Contekan jQuery

Cara menggunakan Lembar Contekan jQuery

Pertanyaan yang sering diajukan

Apa saja yang dibahas dalam lembar contekan jQuery ini?

Apakah jQuery masih layak dijadikan referensi?

Apakah ini membahas event delegation?

Bisakah saya menyalin pemanggilan metode dengan satu klik?

Apakah referensi jQuery ini gratis?

Alat Terkait

Pencarian populer

Sematkan alat ini